【Hertech架空案件】京都女子旅プラン紹介LP

HerTechの架空案件ということで、架空の案件書から

LPの目的の確認、ペルソナの把握を行い、ペルソナがワクワクしながら見れる配置、京都に足を運びたくなるようなLPを意識してワイヤーフレームの制作をしました。

情報設計とそれぞれの場所を説明する文章の内容も考え、その後

デザインのトンマナを決めて、デザインカンプ制作に取り掛かりました。

デザイン全体を担当しています。

【制作プロセス】

LPの目的確認・ペルソナ把握

▼

ワイヤーフレーム制作・情報設計

▼

デザイントンマナ決定

▼

デザインカンプ制作

●カラー

・メインカラー（朱色）

 メインビジュアルには伏見稲荷大社の「千本鳥居」の写真を使用し、インパクトと画面全体に華やかさと旅のワクワク感をプラスしています。

・ベースカラー（#f7f7f7）

少しグレーがかった柔らかいホワイト（#f7f7f7）を選びました。写真やテキストの見やすさを高めつつ、和の雰囲気や女子旅というテーマに合うよう優しいトーンに仕上げています。

・テキストカラー（#574f4f）

ピュアブラック（#000000）の代わりに、深みのあるダークトーン（#574f4f）を選びました。ベースカラーや全体のトンマナに合わせた柔らかい雰囲気と、読みやすさを両立させています。

●タイポグラフィ

・ Impact

→ 01〜05の数字と時間表記に使用しています。

　存在感のあるフォントで、モデルコースの数字と時間表記に

　パッと目にとまるメリハリをつけました。

・Noto Serif JP

→メインタイトル、見出し、説明文に使用しています。

明朝体を使用し、読みやすさに加えて上品な雰囲気を表現しました。

・Noto Sans JP　

→こんな方におすすめの下にあるアイコンの中の補足文章とパッケージはこちら▶︎に使用しています。 

作成中に全体で見た時に、この部分をゴシック体にするとすっきりとまとまったのでこちらを使用しています。

●情報設計

・ペルソナの情緒に寄り添う構成

「京都女子旅」を計画しているペルソナが、見ているだけで旅のイメージを膨らませ、実際に足を運びたくなるようなストーリー構成を意識しました。単なるスポット紹介にならず、1日の過ごし方が想像しやすいモデルコース形式で情報を整理しました。

・テンポ感を意識したレイアウト

着物レンタルからの流れをタイムライン風に配置し、視線の誘導をスムーズに設計しました。

・動線を意識したコンテンツ配置

「こんな方におすすめ」の下にアイコン表示と短い文章を取り入れて、写真映えしたい、定番スポットは行っておきたいというペルソナの気持ちを書き出し、すぐその下にパッケージプランの案内を置くことで、スムーズな誘導になるよう設計しました。

【工夫したポイント】

・ペルソナの年齢層が20代から40代と幅広かったため、

ピクトグラム風のアイコンを使用し、『誰が見ても分かりやすい』

を心がけて制作しました。

・01~05の数字には『女子旅』感を伝えたかったので、着物の色味にありそうな

濃い色を数色（カラーコード画像のアソートカラー①）使い

こんな方におすすめのアイコン部分の色味は、カラーコード画像のアソートカラー①を薄めた色（アソートカラー②）を使って、

色数が増えてもデザインが散らからないように同系色の濃淡を色味として選びました。

またスポットごとのアイコンや数字の背景には、和紙に絵の具を落としたような水彩画タッチのあしらいを採用しました。

こちらの色味も数字やアイコンと同じ色味になるようにしています。

画面の余白を埋め、LP自体のデザイン性を高める役割で配置しています。

LPを作る上で、最初にも記載しましたがワクワクしながら見れる配置、京都に足を運びたくなるような見ていて楽しいLPを意識して制作しました。

ここまで読んでいただきありがとうございました！