横幅を活かした「料金プラン」の一覧性と比較のしやすさ
広い画面幅では、各プランの価格や機能差分を横並びで配置しました。導入検討時に比較しやすいよう、価格と機能を近い位置にまとめて情報を整理しています。
クライアント
LearnBridge
制作時期
2025年7月
制作期間
ワイヤーフレーム/約1週間
デザインカンプ/約2週間
実装/約3週間
制作目的
新しく開講する「総合キャリア支援プログラム」の受講生募集(申し込み獲得)を目的としたランディングページを作成したい。
ターゲット
転職やキャリアアップを目指している20~40代の男女
使用ツール
Figma, Photoshop, Visual Studio Code
広い画面幅では、各プランの価格や機能差分を横並びで配置しました。導入検討時に比較しやすいよう、価格と機能を近い位置にまとめて情報を整理しています。
狭い画面では、下部のコンテンツエリアにチャットアプリ風のインターフェースを採用しました。単調になりがちなテキスト情報を会話形式の吹き出しで区切り、スクロールしながら順番に内容を追える構成にしています。