【スクール課題】Ruby Coffee 新作フラッペLP

・制作の流れ

ワイヤーフレーム作成からデザインカンプ制作、LP構築まで一連の流れを実践しました。 まず全体の情報構成を整理し、ユーザーが知りたい情報を段階的に読めるように設計。その後、ブランドイメージに合わせてビジュアルを作成しました。

・カラー

  商品のフラッペの色味に合わせてピンク系を基調にデザインしました。 背景には淡いピンクやホワイトを取り入れ、清潔感と透明感を演出。 アクセントには濃いピンクを使用し、CTAボタンや見出しを強調しています。  

・タイポグラフィー

見出し：太めのゴシック体を使用し、視認性とインパクトを確保

本文：読みやすさを重視したシンプルなゴシック体を使用

見出しと本文のメリハリをつけることで、ユーザーが直感的に情報を読み取りやすくしています。

・情報設計

1stビューで商品とキャッチコピーを大きく見せ、印象づけ中盤でキャンペーンの特徴や参加方法を段階的に説明

下部に店舗情報やマップを配置し、行動につなげる導線を確保

・工夫したポイント

カードデザインを取り入れ、情報を小分けにして読みやすさを向上

複数のCTAボタンを配置し、ユーザーがどの位置からでもアクションできるようにした

写真やマップの配置で、リアリティと信頼感を演出

色と余白のメリハリを意識し、可読性と視覚的な心地よさを追求