Facebook 制作について
Logo

【HerTech 架空案件】京都旅行モデルコース紹介/LP

クレジット
Avatar
Webデザイナー
【HerTech 架空案件】京都旅行モデルコース紹介/LP-1
シェア
制作ノート
制作について

【デザインについて】

●ファーストビュー

ファーストビューには伏見稲荷大社を歩く女性の画像を使用しました。こちらの画像を使用した理由は3点あります。

⑴ほとんどの人が一目見れば「京都」であることがわかる画像を使用することで「京都の旅」の記事であるとわかるため。

⑵パッと目につく鮮明な赤の印象が幻想的であり目を引くため

⑶モデルコースは着物をレンタルする項目があるためページを読み進めていくと「着物を着てこんな写真を撮りたい」「こんな雰囲気を感じてみたい」と感じることができるため。

京都らしいインパクトと内容と合わせた画像にすることでより自分ごととして想像しやすく、最終的に「予約」というアクションにつながることを意識し制作しました。

●カラー

全体のカラーは伏見稲荷大社の鳥居の色を中心に使用しています。ベース・メイン・アクセントカラーの黄色は鳥居に陽が射している部分のカラーを彩度や明度を変えて使用しました。

ファーストビューの鳥居の色を使用することで全体のまとまりを感じられるよう意識しています。

また、文字にはファーストビューは白を使用し幻想的な雰囲気を、モデルコース部分はブラウン系を使用し読みやすく柔らかい印象を感じられるように工夫しました。

●タイポグラフィ

キャッチコピーなど見出し部分は明朝体を使用しました。「Sawarabi Mincho」を使用し日本的な厳かな雰囲気を意識しました。

文章は読みやすさを重視し「Noto Sans JP」でまとめ、強調したい部分にはカラーを変更したりエフェクト(ドロップや袋文字)を使用し同じフォントでも印象に残りやすいように工夫しました。

●情報設計

作成時に工夫した点は2点です。

⑴視線誘導を意識したあしらいの使用

モデルコース部分は順番に見てもらうことでより魅力的に見える部分のため自然に視線誘導が行えるように工夫しました。

また、紹介する文章部分と、神社のアクセスや拝観料といった情報部分の差がわかりやすいように情報部分のみ背景を使用しました。

⑵パッケージプランの説明部分で新幹線・宿泊の図形を使用、価格を記載

図形を大きく使用することで一目でわかりやすい工夫をしました。また、モデルコースを見た後にパックプランと価格を記載することで旅行に行きたいと感じた方がより具体的なプランを考えられ、CTAボタンへのアクションに繋がりやすいよう意識しました。

シェア
制作について

【デザインについて】

●ファーストビュー

ファーストビューには伏見稲荷大社を歩く女性の画像を使用しました。こちらの画像を使用した理由は3点あります。

⑴ほとんどの人が一目見れば「京都」であることがわかる画像を使用することで「京都の旅」の記事であるとわかるため。

⑵パッと目につく鮮明な赤の印象が幻想的であり目を引くため

⑶モデルコースは着物をレンタルする項目があるためページを読み進めていくと「着物を着てこんな写真を撮りたい」「こんな雰囲気を感じてみたい」と感じることができるため。

京都らしいインパクトと内容と合わせた画像にすることでより自分ごととして想像しやすく、最終的に「予約」というアクションにつながることを意識し制作しました。

●カラー

全体のカラーは伏見稲荷大社の鳥居の色を中心に使用しています。ベース・メイン・アクセントカラーの黄色は鳥居に陽が射している部分のカラーを彩度や明度を変えて使用しました。

ファーストビューの鳥居の色を使用することで全体のまとまりを感じられるよう意識しています。

また、文字にはファーストビューは白を使用し幻想的な雰囲気を、モデルコース部分はブラウン系を使用し読みやすく柔らかい印象を感じられるように工夫しました。

●タイポグラフィ

キャッチコピーなど見出し部分は明朝体を使用しました。「Sawarabi Mincho」を使用し日本的な厳かな雰囲気を意識しました。

文章は読みやすさを重視し「Noto Sans JP」でまとめ、強調したい部分にはカラーを変更したりエフェクト(ドロップや袋文字)を使用し同じフォントでも印象に残りやすいように工夫しました。

●情報設計

作成時に工夫した点は2点です。

⑴視線誘導を意識したあしらいの使用

モデルコース部分は順番に見てもらうことでより魅力的に見える部分のため自然に視線誘導が行えるように工夫しました。

また、紹介する文章部分と、神社のアクセスや拝観料といった情報部分の差がわかりやすいように情報部分のみ背景を使用しました。

⑵パッケージプランの説明部分で新幹線・宿泊の図形を使用、価格を記載

図形を大きく使用することで一目でわかりやすい工夫をしました。また、モデルコースを見た後にパックプランと価格を記載することで旅行に行きたいと感じた方がより具体的なプランを考えられ、CTAボタンへのアクションに繋がりやすいよう意識しました。

シェア
海野結衣の他の作品
foriio

あなたのforiioを無料で作成

fori.io/
Logo
【HerTech 架空案件】京都旅行モデルコース紹介/LP-1
制作について

【デザインについて】

●ファーストビュー

ファーストビューには伏見稲荷大社を歩く女性の画像を使用しました。こちらの画像を使用した理由は3点あります。

⑴ほとんどの人が一目見れば「京都」であることがわかる画像を使用することで「京都の旅」の記事であるとわかるため。

⑵パッと目につく鮮明な赤の印象が幻想的であり目を引くため

⑶モデルコースは着物をレンタルする項目があるためページを読み進めていくと「着物を着てこんな写真を撮りたい」「こんな雰囲気を感じてみたい」と感じることができるため。

京都らしいインパクトと内容と合わせた画像にすることでより自分ごととして想像しやすく、最終的に「予約」というアクションにつながることを意識し制作しました。

●カラー

全体のカラーは伏見稲荷大社の鳥居の色を中心に使用しています。ベース・メイン・アクセントカラーの黄色は鳥居に陽が射している部分のカラーを彩度や明度を変えて使用しました。

ファーストビューの鳥居の色を使用することで全体のまとまりを感じられるよう意識しています。

また、文字にはファーストビューは白を使用し幻想的な雰囲気を、モデルコース部分はブラウン系を使用し読みやすく柔らかい印象を感じられるように工夫しました。

●タイポグラフィ

キャッチコピーなど見出し部分は明朝体を使用しました。「Sawarabi Mincho」を使用し日本的な厳かな雰囲気を意識しました。

文章は読みやすさを重視し「Noto Sans JP」でまとめ、強調したい部分にはカラーを変更したりエフェクト(ドロップや袋文字)を使用し同じフォントでも印象に残りやすいように工夫しました。

●情報設計

作成時に工夫した点は2点です。

⑴視線誘導を意識したあしらいの使用

モデルコース部分は順番に見てもらうことでより魅力的に見える部分のため自然に視線誘導が行えるように工夫しました。

また、紹介する文章部分と、神社のアクセスや拝観料といった情報部分の差がわかりやすいように情報部分のみ背景を使用しました。

⑵パッケージプランの説明部分で新幹線・宿泊の図形を使用、価格を記載

図形を大きく使用することで一目でわかりやすい工夫をしました。また、モデルコースを見た後にパックプランと価格を記載することで旅行に行きたいと感じた方がより具体的なプランを考えられ、CTAボタンへのアクションに繋がりやすいよう意識しました。

シェア
海野結衣の他の作品
foriio

あなたのforiioを無料で作成

fori.io/