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

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

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

●制作の流れ

① ターゲット設定

② LPの目的整理(女子旅プランへの興味付け・予約導線)

③ 情報整理・ワイヤーフレーム作成

④ メインビジュアル・世界観設計

⑤ 配色・フォント選定

⑥ モデルコース部分のレイアウト制作

⑦ CTA・価格エリア制作

⑧ 全体の余白・装飾・視線誘導を調整  

●ビジュアルイメージ

「京都らしい落ち着き」と「女性向けのやわらかさ」を両立できるよう意識しました。和風デザインに寄せすぎると重たい印象になってしまうため、余白を広めに取り、やさしい装飾や丸みのあるデザインを取り入れることで、親しみやすさを出しています。また、“旅のしおり”のように見えるデザインをイメージし、モデルコースを時系列で配置することで、ユーザーが実際に京都を巡っているような感覚になる構成を意識しました。

●カラー

京都の街並みや和の雰囲気に合うよう、全体はベージュやくすみカラーをベースにしています。各スポットごとに背景色を少し変えることで、単調にならないよう工夫しました。また、彩度を抑えた色味を使うことで、写真が主役になるようバランスを調整しています。CTAボタンのみ赤系カラーを使用し、ユーザーの視線が自然に集まるようにしました。

●タイポグラフィ

タイトル部分にはShippori Minchoを使用し、京都らしい上品さや落ち着いた雰囲気を表現しました。一方で、本文は可読性を重視し、細めのゴシック系フォントを使用しています。和風の世界観を保ちながらも、スマホでも読みやすい文字サイズや行間を意識して調整しました。また、「京都」「おすすめモデルコース」などの見出しは、文字間隔を広めに設定することで、余白感と高級感を演出しています。

●情報設計

スマホ閲覧を前提に、縦スクロールで自然に読み進められる構成を意識しました。

特に、「写真を見る」→「場所と時間を確認する」→「説明を読む」という流れがスムーズになるよう、情報の優先順位を整理しています。また、モデルコース部分では、矢印を使って視線誘導を行い、“次のスポットへ進む流れ”が直感的に伝わるよう工夫しました。

●工夫したポイント

今回のLPでは、ユーザーが京都を実際に巡っているような気分になれるよう、写真を大きく使いながら時系列で情報を配置しました。また、スマホでも見やすいよう余白を広めに取り、矢印による視線誘導で自然に読み進められる構成を意識しています。背景には和風モチーフを薄く配置し、京都らしい世界観を演出しました。さらに、最後は価格情報からCTAへ自然につながる流れにすることで、行動しやすい導線設計を工夫しています。  

シェア
丸川鈴梨亜の他の作品
foriio

あなたのforiioを無料で作成

fori.io/
【Her Tech架空案件】京都旅行プラン紹介-1
丸川鈴梨亜の他の作品
foriio

あなたのforiioを無料で作成

fori.io/