転職エージェントの架空LPを作成しました。
文字量とイラストのバランスを考え、視覚的な心地よさを意識しました。
また、色が与える心理的効果や矢印を活用し、直感的に情報を読み進められる構成を採用しています。
全体を通じて、読みやすさとCV率向上を両立させるデザインを目指しました。
サイトURL
担当
デザイン・ライティング・コーディング（レスポンシブ対応）
使用ソフト
Visual Studio Code / Xd / Photoshop
サイトの目的
サービスの認知と無料面談予約の申し込み
ターゲット
20-30代の社会人
ファーストビューについて
- 視認性とエージェントの強みを強調：
見やすさを重視し、満足度や実績、転職率などを数字で直感的に伝えるデザインを採用しました。 - 立体感のあるフォントにより会社名を差別化：
フォント変更とエンボス加工により会社名に立体感を持たせ、キャッチコピーとの差別化を図る工夫をしました。
カラーについて
- 信頼感の青と希望のオレンジ：
ビジネスの信頼感を象徴する青と、未来への希望やエネルギーを表すオレンジを採用しました。 - コントラストで視認性とインパクトを強調：
青とオレンジのコントラストにより、読みやすさを確保しつつ目を引くデザインを実現しました。
デザインについて
- 視覚的な心地よさと統一感：
アイコンやイラストを適切に配置し、更に文字量とイラストのバランスを調整することで、視認性と視覚的な心地よさを追求しました。 - 直感的に情報を伝える構成：
下向きの矢印を活用し、シンプルかつ直感的に情報を読み進められるデザインにしました。
予約ボタンについて
- 視線を引きつけるデザイン：
カラーは赤を採用し、面談予約への誘導効果を最大化しました。また、「たったの60秒」の文言を入れることで手軽さを強調し、心理的ハードルを下げCV率向上を目指しました。ドロップシャドウを使用して立体感を持たせることにより、クリック可能な要素として視認性を強化しました。 - スムーズで利便性の高い導線設計：
ページ内リンクで予約フォームへの移動をスムーズにし、且つ複数箇所にボタンを配置することで、離脱リスクを最小限に抑える工夫をしました。
面談予約フォームについて
- ユーザー負担を軽減したシンプルな設計：
青と白の落ち着いた配色を採用し、視覚的なストレスを軽減しました。また、必要最低限の項目に絞り入力負担を軽減し、且つ入力ステップを明記することで、所要時間の見通しをつけやすくする工夫をしました。 - アクセシビリティと視認性の向上：
labelタグとplaceholder属性を適切に活用し、使いやすさに配慮しました。必須項目を赤と白で強調するなど、見やすさと分かりやすさ重視し、入力ミスや見落としがないようなデザインを目指しました。
制作時間
45時間
企画：2時間、デザイン：7時間、ライティング：1時間、コーディング：35時間