【課題】ゲストハウスのLP

【コンセプト】

情報の場所がわかりやすい。また、古い建物を生かしつつアーバンな雰囲気を持つゲストハウスの世界観を伝えるデザイン。

【プロセス】

＜課題内容/要件＞

オリジナルのWebサイトを制作する
テーマ：自由
構成：1ページのサイト
セクション数：5つ以下におさめる
レスポンシブ：PC/スマホに対応する

＜LP制作の過程＞

①架空事業について設定
②架空サイトの目的とターゲットを設定
③ワイヤーフレーム作成/サイトの情報設計
④デザイン
⑤コーディング

＜事業について設定＞
業態　カフェ併設ゲストハウス
場所　長野県松本市
特徴　古い建物を改修したアーバンな雰囲気。
コンセプト　松本市の魅力である大自然と城下町ならではの雰囲気を生かし、旅人と地元の人の両方にとって、人・アイデア・モノ・体験などさまざまな媒体が「交錯（MEET）する場所」

⁨⁩＜サイトの目的・ターゲットの設定＞
目的
①ゲストハウスのコンセプトと魅力を伝える。
②宿泊予約を成約する。
③地元の人にも楽しんでもらえる場としてのカフェと古本屋を紹介し、利用につなげる。

⁨⁩ターゲット
・松本を訪れる20代〜50代の観光客１人〜３人くらいまで
・松本を起点に長野の美しい自然や城下町をゆったり楽しみたい人
・松本在住の20代〜40代の感度高めな若者〜中年（古本屋・カフェバー）
・素敵な空間で本を読んだりお酒を飲んだりしたい人（古本屋・カフェバー）

＜ワイヤフレーム/情報設計＞

・宿泊目的のお客様と、宿泊以外のサービス利用目的のお客様の両方がスムーズに目的を達成できる
・「宿を利用したくなる」ために、「必要な情報に迷わずアクセスできる」という流れを生む

ヘッダーに予約ボタンを固定

全てのセクションにアクセスできるナビゲーションメニュー、および宿泊予約ボタンを設置し、画面上部に固定。
いつでも気になるセクションへアクセスできる。

宿泊・併設サービスセクションへのアンカーリンクの設置

宿泊者と併設サービスの利用者とでは必要な情報が異なる
▶︎ファーストビューにアンカーリンクを設置

宿泊者向け情報である[STAY]セクションと、地元の方にも利用いただける[CAFE&OLD BOOK-SHOP]セクションの両方にファーストビューからワンクリックでアクセスできる。
各ボタンの色は遷移先のメインカラーにマッチ。

【デザイン】

＜配色＞

メインカラー：ブルーグリーン
古い立物の深みと、大自然に囲まれた街・松本の
イメージを込めて、メインカラーにブルーグリーンを採用。

アクセントカラー：黄色
アーバンな雰囲気を出しました。

＜フォント＞

Noto sans JP
癖がなく、アーバンなイメージのMeetsに
ピッタリだと考え、採用。
本文・見出しの日本語部分に使用。

Monsserat
丸みがあり、等幅な英字体。
見出し・ボタンの英語表記部分に使用。

＜工夫点＞

ファーストビュー：宿の印象を強く与えるために、イメージ写真を大きく配置。


最初に目に入るファーストビューで、宿のイメージを強く印象付けるメイン写真を画面いっぱいに配置。

コンセプト：空欄内の単語が変わるアニメーションでコンセプトを表現
空欄内の単語が「people」「idea」「view」など変化するアニメーションをつけることで、宿のコンセプトである人・アイデア・モノ・体験などさまざまな媒体が「交錯（MEET）する場所」を表現。

全体：余白を大きく取り、宿のゆったりとしたイメージを表現。

古本屋・カフェセクション：２カラムデザインにより情報整理
古本屋の紹介とカフェの紹介を２段に分け、2カラムのエリアを交互にすることで、2つの情報を一つのセクションに共存させながら、内容が別であることを視覚的にわかりやすくした。

写真を多く使用し宿の魅力を伝える
宿の内装、風景、ベッドルームなど写真を多く使用することで、宿の魅力を伝える。