スクール課題:架空のホテルキャンペーンサイト

概要

デザインスクールSHElikesの課題で、架空ホテルのキャンペーンのLPデザインと、LPに誘導するバナー制作に取り組みました。

使用ツール:Figma / Photoshop

制作時間 :164時間

      要件整理    :30分

      ワイヤーフレーム:1時間

      コンセプト設計 :2時間30分

      デザインカンプ :38時間

     

製作時期 :2023年2月~3月

要件定義とペルソナ

制作目的リゾートホテルLIKESの新規オープンにあたりSNSキャンペーンを実施するため、キャンペーンサイトとバナーを制作する
ターゲット自分の時間がなかなか取れなくてストレスを抱えている人
 週末を利用して心身ともに整えたい人
 アクティビティよりリラクゼーションを求めてくる人
 ワーケーションに興味がある人
 1人で旅行に行ったことがないが興味がある人、初めての1人旅行者
 身体にご褒美を与えたい人
 自分なりに丁寧に暮らしている人
 無農薬野菜やオーガニックという言葉に惹かれてしまう人
ホテルの特徴周りに自然(木)が多い
都心からのアクセスは1時間半~2時間
ワーケーションプランも用意あり
瞑想用のメディテーションルームが備わっている
ヨガの朝クラス開催あり
大浴場あり
食事はからだにやさしい、野菜中心のメニューを提供
アメニティにもこだわっており、自然由来の質の良いものを使用
朝は焼き立てパンのビュッフェがついてくる
指定条件・使用画像は提供された写真の中から選ぶ
・サイト、バナーに掲載するテキストの提供あり

制作したデザインカンプとバナー

ハンバーガーメニュー
GDN用(336px × 280px)
Twitter用(1200px x 1200px )
Instagramストーリーズ用(1080px × 1920px)

工夫したところ

都会と田舎の中間に位置するホテルをイメージした、洗練された自然

ホテルの周りには自然が多いものの、都心から1時間半~2時間とアクセスしやすいため、都会と田舎の中間のような、ゆったりとした自然がありつつも洗練された自然なホテルをイメージしました。

そのため、カラーはホワイトをベースカラーとして、自然を感じさせる淡く爽やかなグリーンよりのブルーをメインカラー。キャンペーン部分には少し高級感を出すために、落ち着いたゴールドをアクセントカラーとして使用しました。

使用したカラー

たっぷりと余白を取って、やすらぎを表現

瞑想やヨガもできるホテルのため、ゆったりとした時が流れるイメージで全体的に余白を広めに取りました。

アクセス方法は整理して感覚的に理解しやすく

アクセス方法の図は、感覚的に理解しやすいように移動ルートが共通しているものはまとめました。特に、比較的近くに位置する東京駅発と新宿駅発の移動ルートの違いが分かりやすいようにしました。

アクセス

ギャラリーで自然にセクションを切り替え

キャンペーンセクションとアクセスセクションの切り替えには、ホテルのイメージ画像のギャラリーを用いました。ホテルの洗練されたイメージを表現するために、背景色を変えるよりもさりげなく、かつホテルの様子をイメージできるようにしています。

セクション切り替えのギャラリー

ホテルのイメージとキャンペーンがわかるメインビジュアル

メインビジュアルにはホテルの内装をイメージした画像を用いました。

オープン記念キャンペーンがあることを伝えるために、丸いバッジで表現しています。写真のイメージを壊さないように、バッジの色は写真のフローリング・壁と調和して、特別感もあるゴールドにしました。

メインビジュアル

宿泊体験をイメージできるキャンペーンセクションのバナー

キャンペーンセクションでは、応募したくなるように無料宿泊券プレゼントで体験できる内容をイメージできるバナーを配置しました。

キャンペーンセクションのバナー(PC)
キャンペーンセクションのバナー(SP)

ハッシュタグは手書き風フォント

キャンペーン応募のためのハッシュタグは、ホテルでリラックスしている様子をイメージできるように手書き風フォントにして、アクセントにしました。

キャンペーンのハッシュタグ