【HerTeck 模擬案件】京都旅行パッケージLP ファーストビュー

制作の振り返り

クライアントのヒアリング後、ペルソナを設定し、訴求ポイントを整理。ワイヤーフレームを作成して情報構成を固めた後、デザイン制作に事前にしました。全体のトーンとマナーを統一し、ターゲット層に伝わるビジュアルと情報の優先順位を両立させることを意識しています。

1.カラー

ターゲットである「大人の女性」に寄り添った、落ち着きと華やかさが共存することを目指しました。

• ベースカラー：ベージュ（#f5ebe5）を使用し、和の温かみと柔らかさを表現しました。
• メインカラー：くすみピンク（#d4a5a5）をアクセントに、女性らしいさと京都の優雅な雰囲気を演出しています。
• アクセントカラー：抹茶グリーン（#8ba888）を取り入れ、京都の自然や伝統的なイメージを視覚的に補完しました。

2. タイグラフィー

京都の「はんなり」とした世界観を伝えるために、フォントの選定と余白にこだわりました。

• フォント：上品で可憐な印象を抱く明朝体を採用。
• ジャンプ率：キャッチコピーと詳細情報のサイズにしっかり差をつけることで、情報の優先順位を一目でわかるように設計しました。
• 行間・文字間：詰めすぎず適度な余白を持たせることで、ゆったりとした旅行の空気感をデザインに落とし込んでいます。

3. 情報設計

ユーザーが大胆に、旅行のイメージを膨らませて予約（コンバージョン）するための構成にしました。

• ファーストビュー：伏見稲荷のカラフルな千本鳥居を背景に、「京都はんなり女子旅」という一目で目的が伝わるコピーを配置し、視線を惹きつけます。
• モデルコースのヒント：着物レンタルから始まり、主要な観光地を巡る流れを画像とテキストで具体的に紹介。ユーザーが「自分もこう楽しみたい」と自分事化できるストーリー性を重視しました。
• メリットの明確化：「選ばれる理由」として新幹線とお宿のセットプランであることを示唆し、お得感と公平性を論理的に伝えています。
• CTA（行動喚起）：スクロールの終わりだけでなく、情報の区切りに「プランを探す」ボタンを配置し、興味があったタイミングでアクションを促すようにしています。

4. 工夫したポイント

・ターゲットに合わせて、派手すぎず、かつ地味にならない絶妙な「くすみカラー」で統一感を出しました。

•視覚的なリズムとストーリー性モデルコースのセクションでは、写真の配置や余白を作ることで、スクロールした際のリズムを考えました。

•直感的に伝わるアイコン活用「選ばれる理由」やパッケージ内容の紹介には、シンプルなアイコンを併用しました。テキストを読み込まなくても、新幹線や宿のセットプランであることが直感的に伝わるよう工夫しています。

•和のモチーフの現代的なアレンジ背景にさりげなく和風の地紋や伝統的な文様を扱うことで、京都らしさを補いつつ、古臭くない現代的なWebデザインに落とし込みました。