LP制作
HTML・CSSの画像コーディング制作事例LPです。
メンタルヘルスLP
デザインコンセプト：
“心の安心感と信頼”をテーマに、優しさと専門性を両立させたメンタルサポートLP。
-
配色： グリーン×ベビーピンクを基調に、癒しと穏やかさを表現。背景には植物のイラストと淡いグラデーションを使い、安心感を演出。
-
フォント： アンチック体と丸ゴシックを併用し、「専門性」と「やさしさ」をバランスよく表現。
-
写真構成： クライアント層の“悩み”を想起させるシーン写真と、安心感あるカウンセラー写真を交互に配置。
-
レイアウト： 悩み→要因→専門家紹介→サポート内容→申込み導線の流れを意識した設計。
-
デザイン表現： 吹き出し・アイコンを使って読みやすく親しみやすい印象に。重くなりがちなテーマを柔らかく見せる。
LPOのオプトインLP
デザインコンセプト：
「成果と実績」を重視したLPデザイン。専門性と信頼を視覚的に表現。
配色： ブラック×ゴールドで“プロフェッショナル感”を演出。赤の差し色でアクションを促す。
フォント： 力強いゴシック体と信頼感ある明朝体のサンプル画像を組み合わせ、調和のとれた印象に。
構成： 冒頭に「CVR10倍UP」などの数字インパクト→講座紹介→特典→実績と理解しやすい導線。
レイアウト： 余白を多く取り、情報密度が高い中でも見やすく整理。
子どもの成長サポート飲料LP
デザインコンセプト：
「元気で前向きな印象」を重視した、親子向けヘルスケア商材のデザイン。
配色： 青空をイメージしたブルーと、成長や活力を感じさせるオレンジ・イエローを基調。
フォント： 快活さを伝えるポップなフォントをやや斜めに配置し、“グンッと伸びる！”というエネルギーを表現。
ビジュアル： 明るい笑顔の子ども写真をメインに、上昇矢印などで「成長」や「前進」を視覚化。
レイアウト： 成分説明をカラフルな丸アイコンで見やすく整理。視覚的に楽しく理解できるデザイン構成。
CTA設計： 緑のボタンで「お得に始める」を強調し、購買行動を明快に促す。
飲む日焼け止めLP
デザインコンセプト：
健康志向の女性に向けた「科学的で信頼できる日焼け対策」を伝えるデザイン。
配色： オレンジ×ブルーを基調に、“太陽と空”を連想させる明るいカラーリング。爽やかさと信頼感を両立。
フォント： 読みやすい明朝体で明快な印象に。補足説明にはやや小さめのフォントを使い、情報量を整理。
レイアウト： 視覚的に紫外線がもたらす悪影響についてフィアアピールを行い、購入意欲を促進。
デザイン演出： 矢印や説明図を用いて、専門的内容も直感的に理解できる構成。科学的信頼感を強める情報デザインを提供。
白髪改善シャンプーLP
デザインコンセプト：
「エイジングケア×ナチュラルな美しさ」を両立させた上品な美容系デザイン。
配色： 黒×金で高級感を演出しつつ、背景にホワイトと淡いラベンダーを差し込むことで重くなりすぎない印象に。
フォント： 明朝体で上品さを出し、更に目立たせたい文字に立体的な加工を施し、髪の艶をイメージ。
ビジュアル： 光を受けたモデル写真とシャンプーボトルを組み合わせ、「輝く髪」を視覚的に表現。
構成： ファーストビューで「黒ツヤ美髪」という理想像を提示し、中盤で「再入荷」「限定価格」などの緊急性を強調。下部のSNS投稿風レイアウトで“リアルな支持感”を補強。
オンラインウクレレ講座LP
デザインコンセプト：
音楽未経験者にも「楽しそう・やってみたい」と思わせる、やわらかく親しみやすいデザイン。
配色： ピンクとオレンジを基調に、楽しさ・軽やかさを演出。一部に水色を使い、アクセントに。音楽学習の“ハードルの低さ”を視覚的に表現。
フォント： ポップなフォントで温かみを出し、コピーの一部に音符マークを入れてリズミカルな印象をプラス。
構成： 「1週間で弾ける」という具体的成果の訴求の隣に、“楽しそうに演奏する人物写真”を配置。受講後の未来を想像させる構成に。
WEB集客LP
デザインコンセプト：
“贅沢・冬のごちそう”を感じさせる高級感ある和風デザイン。
配色：赤×黒×金の王道和風カラー。温かさと豪華さを両立。
フォント：筆文字風書体で「ズワイ蟹鍋」の極上感を表現。
写真：湯気・具材のアップを多用し、食欲を直接刺激する構成。
構成：商品の魅力（素材・鮮度）→お得感（セット内容）→信頼（レビュー）の流れで、購買心理を自然に誘導。
WEB集客LP
デザインコンセプト：
“誠実さ×信頼感”を基調としたビジネスプロモーションLP。
配色：青をベースに黄色のアクセントで誠実さと注目を両立。
フォント：明快なゴシック体でビジネス向けの堅実な印象に。
構成：キャッチコピーは、インパクトを強調するデザインに。下部にフォームを配置し、スクロール完了後の行動を自然に誘導。
デザイン効果：講師写真の自然な笑顔で親近感を演出。全体のバランスを整理し、読みやすく信頼感を得やすい雰囲気に。
安眠枕LP
デザインコンセプト：
「上質な睡眠」をビジュアルで感じさせる落ち着いた高級感デザイン。
配色：深いネイビーとゴールドを中心に、夜の静けさと信頼を表現。
写真：寝姿や医師監修の写真で信頼と専門性を補強。
フォント：キャッチコピーは游教科書体で柔らかい品格を出しつつ、ゴールドカラーを使用し、質の高い睡眠をイメージさせる演出。
構成：上部で「悩み共感」→中盤で「解決と科学的根拠」→下部で「ユーザーの声・限定特典」の構成で購買意欲を喚起。
子どもの学習教材LP
デザインコンセプト：
“教育×楽しさ”を感じさせるポップで安心感のある親子向けデザイン。
配色：オレンジやイエローなど明るいトーンを中心に、子どもらしさと前向きさを表現。
フォント：明るく元気で、親しみやすい印象のフォントを使用。
構成：写真とイラストを組み合わせ、「楽しみながら学ぶ」というコンセプトを自然に伝える。
導線設計：メリット→お喜びの声→行動の流れで、教育効果への信頼を積み上げる構成。
クレンジングLP
デザインコンセプト：
透明感と清潔感を重視したスキンケアブランドデザイン。
配色：白と水色を基調に、清潔感とみずみずしさを強調。
フォント：つるん!!の明朝体に立体的で艶のある加工を施し、女性らしさを演出。
ビジュアル：肌の透明感が際立つモデル写真を大きく配置し、「効果が見える」印象に。
構成：ターゲティングコピーで悩み→解決（15秒でつるん）→特典→信頼（雑誌掲載）と流れる構成。
正規ディーラーの中古車専門店LP
デザインコンセプト：
「品質・安心・専門性」を訴求するクリーンで信頼感のあるデザイン。
配色：白×ブルーをベースに、赤のアクセントで重要情報を際立たせる表現に。
フォント：信頼を重視した太ゴシックの組み合わせ。
写真：車や整備士の実写真を多用し、誠実さと現場感を伝える。
レイアウト：上から「信頼訴求→整備風景→在庫情報→保証」へ流れる直線的構成。専門店としての強みを視覚的に整理して表現。
パーソナルトレーニングLP
デザインコンセプト：
スポーティで力強い印象の中に、ポイントカラーにショッキングピンクをプラスし、女性にも親しみやすい印象に。
配色：黒×オレンジのコントラストで「挑戦・活力」を表現。オレンジをアクセントカラーに用い、視線誘導と活気を両立。
フォント：太字のゴシック体を使い、運動エネルギーを感じるビジュアルトーンに統一。
写真構成：トレーナーの男性とトレーニング中の女性と表情で「マンツーマンによる安心感」を表現。
構成：上部に実績（9割が理想のボディ）→中盤でターゲット別訴求→下部で「体験無料」ボタンへ導線。ユーザー行動を想定したLP設計。
YouTube集客LP
デザインコンセプト：
成果・スピード・行動を感じさせるダイナミックなビジネスデザイン。
配色：赤×ゴールドでエネルギーと成功を表現。背景のグラデーションにより視覚的な高揚感を演出。
タイポグラフィ：太字ゴシック体をベースに立体加工を施し、“300万円”など数字のインパクトを最大化。
構成：上から順に「成果→信頼→行動喚起」と心理的な流れを重視。
デザイン演出：矢印を使って「成長・右肩上がり」を視覚的に表現。フォーム周辺は白背景にして視認性を重視。
着付け講座LP
デザインコンセプト：
「上品さと親しみ」を両立した和テイストのデザイン。
配色：ファーストビューの背景に淡い桜色を使用し、紫〜赤のグラデーションを文字や文字の背景に使用し、女性らしい柔らかさと高級感を演出。背景には麻の葉模様など、和柄を控えめに使用して伝統を感じさせるデザインに。
フォント：明朝体中心で優美さと品格をプラス。
レイアウト：「6回で着られる」→「無料特典」→「3つの理由」と自然に申込ボタンへ流れる設計に。
ビジュアル：着物姿の講師や受講生の自然な笑顔を配置し、「憧れの自分像」を想起させる目的で制作。
鍼灸院LP
デザインコンセプト：
信頼性と温かみを両立させた「地域密着型治療院」のイメージを表現。
配色：健康・自然を感じさせるオレンジとグリーンをメインに、「癒し」と「国家資格による安心感」を表現。ゴールドのアクセントで治療の質の高さを演出。
フォント：メインコピーは太く立体的なフォントで「根本から改善」を力強く訴求。
構成：冒頭に「施術風景＋実績数」を配置し、第一印象で専門性を伝えるデザインに。また、お客様のアイキャッチ画像のすぐ下に予約ボタンを置き、ユーザーにとって欲しい行動を分かりやすく表示することで安心感を与え、続きを読んでもらえるような構成に。また、「選ばれる理由」を箇条書きで整理し、明確に表現。
女性のイメージコンサルLP
デザインコンセプト：
“自分らしいスタイルを取り戻す”をテーマに、共感を軸にした温かみある女性向けデザイン。
デザイン面のポイント：
配色： 薄紫×ピンク×クリームを基調に、ナチュラルで落ち着いた雰囲気を演出。安心感と信頼感を高める色設計。
フォント： 明朝体で上品さを出しつつ、実績数や満足度の社会的証明にゴシックを使用して可読性を確保。
構成： “悩みの共感 → サービスの紹介で解決への導線 → 他社との比較→選ばれる理由→喜びの声 → サービス案内→無料相談→よくある質問→フィアアピール→無料相談の流れ。
レイアウト： 視線誘導のために背景グラデーションでセクションを区切り、読みやすさを確保。
40代女性のためのコスメLP
デザインコンセプト：
「40代からの肌革命」をテーマに、上質で透明感のある大人の女性向けデザイン。
配色： 赤系グラデーション×ホワイト×ゴールドで高級感と柔らかさを両立。
フォント： 明朝体で上品さを保ちつつ、柔らかさを添える。
ビジュアル： 商品の光沢感を活かした立体的な撮影写真を中心に配置し、“品質の高さ”を視覚的に伝達。
構成： “悩み提示 → 製品特長 → 成分の信頼性 → お客様の声 → 特別価格”の順に展開し、自然な購買導線を形成。
レイアウト： グラデーションを使った柔らかい背景で、肌のツヤ・透明感を表現。ボタンカラーはゴールドで上質感を強調。
冷凍クリスマスディナーの宅配サービスLP
デザインコンセプト：
“おうちで贅沢なレストラン気分”を演出する、クリスマスの特別感と高級感を両立したデザイン。
配色： 深いネイビー×グラデーションレッドをベースに、ゴールドのアクセントを加えクリスマス感を表現。
フォント： 明朝体をメインに使用し、上質で落ち着いた雰囲気を演出。
ビジュアル： 食材の質感を活かした高解像度写真を大きく配置し、食欲を喚起する構成。
レイアウト： 各料理を1品ずつ見せる縦並び構成で、ボリュームと豪華さを訴求。レビューエリアでは口コミを吹き出し形式で見やすく整理。
速読の体験動画講座LP
デザインコンセプト：
「学習効率を劇的に変える速読」をテーマに、信頼感とスピード感を両立した教育系LP。
配色： ブルーとイエローで知的さとエネルギッシュさを表現。
フォント： キャッチコピーは太字ゴシックでスピード感を演出。
構成： お悩み→成果訴求 → メリット説明 → 受講者の声 という合理的導線。
デザイン演出： 光を感じさせるグラデーションを要所に使い、“脳の活性化”や“ひらめき”をイメージさせる。
キャットフード販売LP
デザインコンセプト：
「愛猫への想い」を前面に出した、温かみのあるナチュラルデザイン。
配色： ブラウンよりの赤グラデーション×クリーム×ゴールドを基調に、“自然由来・安心・優しさ”を印象付ける。
構成： ファーストビューで社会的証明やリスクリバーサルをしっかり見せ、次に「お悩み」、「選ばれる理由」を提示し、下部で「こだわり」と「実際のレビュー」を配置。
レイアウト： 丸型フレームを多用して親しみを演出。吹き出しやイラストを取り入れ、動物愛を感じるビジュアルバランスに。
薬膳入門講座LP
デザインコンセプト：
“食で体を温める”というテーマを、やさしく・信頼感のある世界観で、初心者でも抵抗なく参加できるように、「難しそう」よりも「心と体がほっとする」印象づくりを重視。
- 配色： ゴールドやオレンジを基調に、温かみを感じさせ、自然療法・東洋医学らしい穏やかさを演出。
- 構成： 「冷え」「疲れ」「不調」など、悩みを吹き出しで表現し、ユーザーの共感を喚起。その後、「薬膳の考え方」「講師紹介」「講座の特徴」「受講者の声」「限定特典」「無料体験」へと自然に導くフロー。
- ビジュアル： 薬膳＝“専門的・難しそう”というイメージを払拭するため、
「学ぶ」よりも「体験する・感じる」トーンでビジュアルを設計。
WordPressの制作実績LPです。
株式会社ei-life様より、
久留米グリーンワークス様LP
加藤 雅章様 天命オンラインサロン
下記の3つはWixで作成致しました。
■メールアドレス入力後の無料レポート申し込み完了時に表示されるサンクスページ
➡︎企業の人事採用向け
➡︎無料資料＆動画からのバックエンドオファー
こちらはHTMLとCSSで制作しました。
■クラファン起業スタートアップセミナーへの誘導
➡︎起業に興味がある方
➡︎クラウドファンディングで資金調達を考えている方
➡︎20代～30代男性
➡︎無料セミナーからバックエンドオファー
