Facebook 【HerTech架空案件】京都旅行プラン紹介サイト
Logo

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

クレジット
Avatar
WEBデザイナー
【HerTech架空案件】京都旅行プラン紹介サイト-1
シェア
制作ノート
制作について

▼制作の流れ

はじめに依頼内容を整理し、サイトの目的である「旅行パッケージ検索ページへの誘導」を明確にしました。

そのうえでターゲットを女性に設定し、京都旅行の一日を具体的に想像できる構成を検討。

情報設計 → ワイヤーフレーム作成 → キャッチコピー検討 → デザインカンプ制作の順で進行しました。

▼カラー

「京都はんなり女子旅」というタイトルに合わせ、和を感じさせる落ち着いた色味をベースに配色しました。

やさしく温かみのあるカラーを使用することで、女性向けサービスとしての親しみやすさと上品さを両立させています。

CTAには周囲のトーンを崩さず、自然に視線を集めるカラーを採用しました。

▼タイポグラフィ

女性向け旅行サービスであることを踏まえ、読みやすさとやわらかさを重視したフォント設計を行いました。

ファーストビューでは、タイトル「京都はんなり女子旅」の世界観を一瞬で伝えるため、貂明朝を採用しています。

繊細で上品な線の表情を活かし、京都らしい和の雰囲気と落ち着いた旅の印象を表現しました。

見出しは文字サイズや行間に余白を持たせ、ゆったりとした時間の流れを感じられるよう調整。

本文は可読性を優先し、情報の優先度が直感的に伝わるよう文字の強弱をつけています。

MVと本文で役割を分けることで、視線が自然に下へ流れるタイポグラフィ設計を意識しました。

▼情報設計

ユーザーが「旅行のイメージを膨らませながら、迷わず行動できる」構成を目指しました。

モデルコースは時間軸で整理し、各スポットには関連情報をあわせて配置することで、理解を深めながら読み進められる設計としています。

また、右エリアに関連リンクをまとめ、京都だけでなく他エリアのモデルコースもすぐに確認できるようにすることで、サイト内の回遊性を高めました。

特集バナーからの流入を想定し、ファーストビューでテーマと内容が一目で伝わる構成を意識しています。

▼工夫したポイント(デザイン以外でこだわった点、デザイン制作にあたりどんなアクションをしたのか)

制作にあたり、女性向け旅行LPの事例を複数リサーチし、「どのタイミングで行きたくなるか」「どこで行動に移るか」を分析しました。

そのうえで、単なる観光情報の羅列にならないよう、“一日の体験ストーリー”として読める構成を意識しています。

また、検索ページへの誘導が押し付けにならないよう、ユーザーの感情の流れに合わせた導線設計を行いました。

追従ヘッダーにCTAを配置し、ページのどの位置からでも「旅行パッケージ検索ページ」へ遷移できるようにすることで、行動機会を逃さない設計としています。

さらに、SNS共有ボタンを設置し、興味を持ったタイミングで自然に拡散できる導線も考慮しました。

シェア