Facebook 【Hertech架空案件】京都女子旅LP
Logo

【Hertech架空案件】京都女子旅LP

クレジット
Avatar
WEBデザイナー
【Hertech架空案件】京都女子旅LP-1
シェア
制作ノート
制作について

⚫︎制作の流れ

制作の依頼シートを確認後、ペルソナを設定し、情報整理・フォント・キャッチコピーの選定を行いました。

その後、ワイヤーフレームを作成し、構成と情報設計を整理したうえでデザインカンプ制作に着手しています。

まずファーストビューから制作を行い、サイト全体のトンマナと方向性を定めました。

その後、各セクションへ展開し、統一感を意識しながらデザインを構築しています。

最後に、余白や配色、視認性の調整を行い、全体の完成度を高めました。

⚫︎カラー

全体のカラーは、ベージュやくすみカラーをベースに、やわらかく落ち着いた印象にまとめました。

アクセントカラーには赤やオレンジを取り入れ、京都らしい和の雰囲気を表現しつつ、温かみや親しみやすさをプラスしています。

⚫︎フォント

Noto Serif Japaneseを使用することで、和の雰囲気と上品さを表現し、落ち着いた大人の女性をイメージしたデザインに仕上げました。

⚫︎情報設計

ファーストビューでは、京都を代表する神社や街の写真を背景に使用し、一目で京都に関する内容であることが伝わるようにしています。また、「大人の京都女子旅」の「大人」の部分に赤の背景+白文字を用いることで、贅沢で特別感のある“大人旅”の印象を強めました。さらに、見出しを円形で囲み、余白を広めに取りつつ彩度を抑えた配色にすることで、高級感のある落ち着いたデザインに仕上げています。

⚫︎工夫したポイント

セカンドビューでは、白を背景にして情報を整理し、京都についての説明が読みやすく伝わるようシンプルな構成にしました。また、和風のあしらいを加えることで京都らしさを演出しつつ、シンプルで親しみやすく可愛らしい印象になるよう工夫しています。

サードビューでは、おすすめのコース紹介で各スポットの写真を用いて訪れた際のイメージが湧きやすいように構成しています。また、スポットごとに見出しや背景色を変え、それぞれの場所の印象が記憶に残るよう工夫しました。

キャンペーン情報の部分は、和紙のテクスチャとピンクを基調に、京都らしい和と女性らしいやわらかさを表現しました。

四角にゴールドを用いたり、花のあしらいを足すことで視認性を高め、暖色のボタンで視線誘導とクリックしやすい導線設計にしています。

⚫︎制作ツール

主にFigmaを使用して制作しました。一部の素材はCanvaを使用しています。

シェア