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

【制作の流れ】

１．要件定義・分析: ターゲットへの訴求ポイントを整理し、ペルソナを具体化。

２．ワイヤーフレーム制作: 情報優先度に基づいた構成案の作成。

３. デザインコンセプト策定: トンマナの決定。

４. デザインカンプ制作: ファーストビュー（FV）を起点に、全体の統一感を保ちながら細部を構築。

京都の情緒と着物の美しさを視覚的に伝えるため、細部までトーン＆マナーを徹底しました。

【デザインについて】

●カラー

写真素材に合わせて、「京都の街並み」×「着物の彩り」が感じられるようなカラーを選びました。使用する写真素材の色調を活かしつつ、着物の配色をイメージしたカラーパレットを採用。サイト全体で和の洗練された雰囲気を演出しました。

●タイポグラフィ

情報の役割に合わせて、3つのフォントを使い分けています。FVのメインタイトルには「Noto Serif JP」を使用し、「はんなり」とした京情緒を表現。またモデルコースの紹介には「Sawarabi Mincho」を使い、日本らしい古風なスタイルを強調しました。その他検索ページへの誘導部分は、  視認性を重視し、モダンな 「Inter」を採用することで、ユーザーの視線をスムーズにアクションへ誘導できるようにしました。  

●情報設計

FVでは写真の魅力を最大限に引き出すため、要素は極限までシンプルなデザインにしました。一方で、サービス内容とCVボタンは目を引きやすい構成・配置にし、興味が湧くようなデザインにしました。

【工夫したポイント】

ユーザーが実際の旅行をイメージできるよう、モデルコースは図形を用いて時系列を直感的に分かりやすく表現し、 「体験」の可視化 が できるようにしました。また掲載写真はあえて「カメラで撮影したスナップ風」の加工を施し、現地の空気感が伝わる「写真スポット紹介」としての役割も持たせています。サイト全体的には京都や着物の雰囲気が伝わるよう配色にこだわりました。