視認性を高める「カード型UI」とコントラスト
スマートフォンなどの狭い画面でも情報のまとまりを捉えやすいよう、全体の背景色を濃いネイビーにし、コンテンツを角丸の「白いカード」に乗せるデザインを採用しました。 ダークトーンの背景に明るいカードを配置することで明確なコントラストを生み出し、視線が自然とコンテンツの中身に集中するように意図して設計しています。
クライアント
株式会社BrightFuture
制作時期
2024年12月
制作期間
ワイヤーフレーム/約1週間
デザインカンプ/約2週間
実装/約1週間
制作目的
HPからの問い合わせ数増加およびサービス認知度向上
ターゲット
大学生・キャリアチェンジを考える20代社会人
使用ツール
Figma, Photoshop,Visual Studio Code
スマートフォンなどの狭い画面でも情報のまとまりを捉えやすいよう、全体の背景色を濃いネイビーにし、コンテンツを角丸の「白いカード」に乗せるデザインを採用しました。 ダークトーンの背景に明るいカードを配置することで明確なコントラストを生み出し、視線が自然とコンテンツの中身に集中するように意図して設計しています。
スクールとしての「知性」や「誠実さ」を伝えるためにベースカラーはネイビーで統一しつつ、アクセントカラーには補色関係にある鮮やかなオレンジを使用しました。 これにより、全体のトーンで安心感を担保しながらも、「無料相談」などの重要なアクションボタンが視覚的に最も際立つようにしています。ユーザーの迷いを無くし、自然と次のアクションへ誘導できるよう意図して配色を決定しました。