【HerTech　架空案件】京都旅行プラン紹介LP

制作の流れ

要件整理→コンセプト設計→情報設計→デザイン制作→ブラッシュアップ。ターゲットや目的を整理した上で、京都らしい上品さと女性が旅を楽しむ雰囲気をデザインコンセプトとして設計。情報の優先順位を整理し、ユーザーが旅行をイメージしながら自然にプラン検索へ進める構成を設計しました。その後、Figmaでカラー・タイポグラフィ・レイアウトを制作し、全体のバランスを調整して完成させました。

・カラー

京都の落ち着いた街並みや着物の柔らかな雰囲気を表現するため、アイボリーをベースに、深みのあるグリーンと淡いベージュを組み合わせました。ベースカラーには#f7f5efを使用し、ページ全体に温かみと余白を感じられるトーンに。メインカラーの#466653はCTAボタンなどに使用し、自然や京都の街並みを想起させながら、ユーザーの視線を集める役割を持たせています。また、価格部分などには淡いベージュ#e6dfd0を取り入れ、全体の柔らかな印象を崩さずに情報へアクセントを加えました。

・タイポグラフィ

京都旅行の持つ上品で落ち着いた印象と、情報の読みやすさを両立するため、明朝体・ゴシック体・数字用フォントを役割ごとに使い分けました。セクションの見出しやタイトルにはNoto Serif JPを使用し、和の雰囲気と上品さを表現。本文や説明文、CTAにはNoto Sans JPを使用を使用することで、情報量の多い部分でも読みやすくなるよう設計しました。また、時間や価格などの数字にはMontserratを使用し、視認性を高めています。フォントごとの役割を明確にすることで、装飾的になりすぎず「京都らしい雰囲気」と「情報の伝わりやすさ」が両立するタイポグラフィを意識しました。

・情報設計

ターゲットである首都圏在住の20代後半〜40代の女性が、京都旅行のイメージを膨らませながら、自然に旅行プランの検索へ進める構成を意識しました。ファーストビューでは、着物姿の女性を大きく見せることで、まず「京都で過ごす時間」を視覚的にイメージできるようにしています。その後、京都旅行の魅力→プランの魅力→モデルコース→人気の観光スポット→料金・プラン例→旅行プランの検索という順番で情報を配置。「どんな旅行なのか」から「具体的に何をするのか」「いくらかかるのか」へと情報を段階的に整理することで、内容を理解した上で最後のCTAへ進める流れを設計しました。