Facebook 【Hertech 架空案件】京都旅行プラン紹介
Logo

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

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

●制作の流れ

まずは丁寧なヒアリングを行い、 サービスの強みや現状の課題、目指すゴールを明確にしました。

その後、いただいた情報を整理し、 訴求軸と優先順位を明確化。

ターゲットとなるペルソナを設定し、 ブランドイメージに沿ったトンマナを定義した上で ワイヤーフレームを作成しました。

構成段階では 「どの順番で見せれば自然に納得し、行動につながるか」を軸に設計しています。

デザインカンプ制作では、 ファーストビューから順に視線の流れを意識し、 離脱を防ぎながら最後のCTAまで導く構成としました。

担当範囲:構成設計〜デザイン全般

●カラー

京都らしさ、つまり“和”の雰囲気を感じていただけるよう、落ち着きと奥行きのある色味をベースに設計しました。

女性向けのLPであるためピンクを取り入れていますが、可愛らしさに寄りすぎないよう、彩度を抑えた上品なトーンを選択しています。

甘くなりすぎず、品のある女性らしさを感じられる配色にすることで、 ターゲット層が安心感と特別感の両方を感じられるデザインを目指しました。

●タイポグラフィ

京都らしい上品さや落ち着いた印象を表現するため、明朝体の 「Noto Serif JP」を使用しています。

繊細なセリフ(うろこ)を持つ書体は、和の世界観や伝統的な雰囲気と相性が良く、格式や信頼感を自然に演出できます。

●情報設計

ファーストビューでは、 一目で“京都”と分かる写真を使用し、視覚的に強く印象を残す設計としました。

まずは 「行ってみたい」「少し調べてみようかな」という興味を喚起することを目的としています。

また、興味を持った瞬間にすぐ行動できるよう、CTAボタンをファーストビュー内に配置。 検索や詳細確認へスムーズに移行できる導線を設計しました。

セカンドビューでは、 “まだ具体的なイメージが湧いていない層”に向けてモデルコースを提示。

抽象的な「京都に行きたい」という気持ちを、 「こう過ごせるんだ」という具体的な体験イメージへと変換する役割を持たせています。

サードビューでは、 「でも少し遠いかも」という心理的ハードルを想定し、 新幹線であっという間に到着できることを提示。

距離に対する不安を解消し、 “思い立ったら行ける”という後押しを行う構成としました。

最終セクションで「行きたい」という気持ちが最大化されたタイミングでCTAボタンを配置しています。

●工夫ポイント

イラストは主役である写真や情報を邪魔しないよう、主張しすぎないタッチを選定しました。

各寺院や観光地に関連するモチーフを取り入れることで、 視覚的な楽しさを加えてみました。

タッチは水彩系を採用。 にじみや柔らかさのある表現にすることで、京都らしい和の雰囲気と上品さを損なわない世界観を演出しました。

シェア