(架空案件) WEB制作 リゾートホテルLP デザインカンプ

Mone Webdesigner
webデザイナー
OVERVIEW

メンターからの課題で作成した架空リゾートホテルのLP制作依頼です。デザインカンプを作成しました。高級感を出しつつ適度な抜け感でゆったりとした印象を出せるよう工夫しました。

YEAR 2022

制作時間：45時間

制作期間：1か月半

制作範囲：情報設計・ワイヤーフレーム・デザインカンプ

使用ツール：Adobe XD / Photoshop

目次

①前提情報

  • クライアントからの要望書
  • ペルソナ設定

②制作したLP

③工夫したところ

  • 伝えたいことをユーザーに届けるための分析と要素
  • ペルソナのゴールを実現させる要素
  • 各項目ごとの工夫
  • 配色、あしらい

④感想

①前提情報


■クライアントからの要望書

ハワイ・ワイキキにある日本人向けリゾートホテルであるSummerResortからの夏用キャンペーンLP制作依頼

〈クライアント〉

Hotel Group Summer Resort

〈依頼詳細〉

  • 後述の強みを簡潔に訴求したページを作成したい
  • あまりポップスぎず適度にラグジュアリー館がありつつも堅苦しくならないような雰囲気を訴求したい

ターゲット：20代後半〜30代の働く女性向け、またはカップル

目的：夏にキャンペーンを利用して予約を促す

ホテルの強み：

  • 海水の透明度の高いリゾートビーチ
  • 海とワイキキしないを両方一望できるロケーション
  • ハワイの現地食材を使った朝食ビュッフェ、パンケーキのライブキッチン

キャンペーン詳細：

  • トロリー1日乗車し放題チケットをプレゼント
  • キャンペーン価格での宿泊 80,000→60,000
  • 夜景の見えるバーでのドリンク一杯無料

〈提供素材〉

キャッチコピー含め特になし


■ペルソナ設定

〈ペルソナ〉

山崎ほのか (28歳・保育士)

  • 隙間時間にTwitterを見るのが好き。Instagramには疎い。
  • 甘いものが好き
  • 子供は好きだが、毎日の肉体労働と喧騒から離れゆっくりする時間が足りない。

〈ペルソナのゴール〉

夏休みに、一泊二日くらいで少し贅沢にゆったりとリゾートホテルに宿泊することで日々の疲れを癒す

②制作したLP

■ワイヤーフレーム


■完成したLP


③工夫したところ


■伝えたいことをユーザーに届けるための分析と要素

  • SummerResortのLPではなく、あくまでもキャンペーンのLPであることを留意する

→キャンペーンロゴと日付を大きく上に持ってくる


  • 価格は心理的フックになるコンテンツのため、大きくアピールする

→キャンペーン期間中の価格の変更を大きく表示


■ペルソナのゴールを実現させる分析と要素

  • くつろぎ、ゆったりできることをアピール
  • (甘いものが好き...パンケーキライブキッチンを写真dねアピール)


■各要素ごとの工夫

1. ファーストビュー

  • 広めのホワイトスペースを設け、抜け感と高級感の演出をした
  • 海が見渡せるような写真を使用したことにより、のびのびとし、堅苦しくない印象を与えた
  • CTAと視線遷移を意識し、キャッチコピー→キャンペーン期間→写真→FVのすぐ下に予約ボタン を設置しました。


2. Introduction

  • ゆったりできることを強く印象づけるため、行間を広く設定
  • 賑わうビーチではなく、静かで人が少ない写真を採用


3. Features

  • 単調な印象を受けないよう、同じレイアウトだが左右を逆にして交互に配置することで、シンプルかつリズムのあるレイアウトにした。
  • ビュッフェ部分の写真は、パンケーキの写真→左向きで調理しているシェフ の順番で配置することでストーリー性を生んだ
  • タイトル部分と本文はどちらも無彩色だが、タイトル#000000,本文#707070でコントラストをつけ、タイトルの視認性を高めた


4. キャンペーン宣伝部分

  • 心理的フックの要素が大きい特別価格は他キャンペーン内容よりも大きく表示した
  • 視線遷移がスムーズになるよう、大きく表示する特別価格は横長に、その他内容を1/2 の大きさで配置した
  • 特別価格は可読性よりも視認性を重視し、一目でわかるよう文字の太さ・大きさでコントラストを生んだ
  • キャンペーン内容の枠線を省くことで、堅苦しさを排除した


■配色・あしらい

○配色

伝えたいイメージ...高級かつカジュアルに

→イメージから連想されるワード...高級、柔らかな

使用するトーン...Bk(無彩色),sf


○あしらい

  • ホワイトスペースを多く設け、空間の抜け感と高級感を出す
  • フォント...タイトル部分やボタンなどで明朝体やセリフ体を使用し、本文は角ゴシックを使用することで、読みやすくゴージャスな印象も持てるようにした

④感想

今回の制作では、「高級感」と「堅苦しすぎない」が両立したデザインになるよう留意した。具体的な手法として、「マージンを広く設ける」「写真の打ち落としで空間の逃げ場を作る」「無彩色でも色の強さでコントラストを生む」ことが効果的であり、うまく体現できたと感じられる。




WEBSITE