Design#02｜NOTds:Webサイトリニューアルデザイン/STUDIO構築
NOTds 0期生として日々多くのことを学んでいます。
今回は課題の一つであるWebサイトデザインからSTUDIO構築、最終的に制作したサイトと提案資料を持って実際の企業に営業しました！
こちらの過程をnoteにまとめましたのでNujabes聴きながらコーヒーかワインのおともに読んでいただけると嬉しいです！
Summary
課題：実在する企業を一つ選び、コーポレートサイトをリニューアルするというていでリサーチと情報設計、デザインをする。
業種：ホテル(熊本県/阿蘇)
担当範囲：リサーチ/情報設計/デザイン/構築/提案資料制作
使用ツール：Figma/Studio
サイトURL：https://preview.studio.site/live/xmaZG2nAWR
対象サイトの選定
地元熊本/阿蘇への誇りと愛が強めです
今回、実際にあるサイトを選定しそのサイトに対して改善案を出しリニューアルの提案ベースでデザインを行う。ということが今回のWebサイトデザインの課題の内容でした。
まずは対象サイトを選ぶことから始まりました。
数ある中のサイトから今回の対象サイトを選んだのは
①地元熊本が大好きで、熊本の良さをもっと知ってもらいたいと思っていたこと
②単純に旅が好き
③最終的にはこのサイトを持って実際に企業様に提案をして熊本に貢献できたらいいな。
この思いから今回の対象サイトを選びました(③については後ほど解説します！)
みなさん阿蘇という場所をご存知でしょうか？
美しい自然と世界最大級のカルデラ、そこに住まわれている地域住民の方と自然が共存する本当に美しい場所です。
自然景観だけではなく阿蘇が産地の美味しい食材や温泉、2500余年の歴史をもつ、全国に約500社ある「阿蘇神社」の総本社などの観光地もあります。
そんな阿蘇の素晴らしさを知ってもらえる様なサイトを制作したい。という思いがありました。
完成した際の最終目的：実際の企業様への提案
また、今回は課題合格後、提案資料を作り、実際の企業に送ってみるまでセットで行う予定で選定を行いました。
デザインや構築はもちろんのこと、この提案資料の作り方などもカリキュラムに含まれています。
資料制作は今まで自分の中で曖昧になっていた課題でもあったので提案資料を作成することはとても学びになりました！
また頭の中がクリアになりデザインを制作した後のまとめにもなります。
サイトの目的とターゲットの定義
さてここからが本題です。
デザイン着手の前に既存サイトや企業が出しているプレスリリースを検索して読み漁りました。
サイト自体にはコンセプトやMVVといった企業のことが書かれていなかったのでその他の情報を集める必要があったのです。
旅の目的アンケート
今回の対象サイトのコンテンツを届けたいユーザーは誰なのか。を再確認する必要があります。
そこでまず、旅行者の九州を訪問する目的を検索
続いて熊本/地域別の観光客推移
宿泊者数
https://www.pref.kumamoto.jp/uploaded/life/190000_477617_misc.pdf
サイト訪問者の現状と理想
次にSNSの情報などの調査も行い仮説を立てました。
【現状】
女性(20代〜)/20代家族
自然が好き
インスタ映えが好きな人(インスタのタグから)
【誰に来てほしいのか（理想）】
女性/カップル/家族(キャンプ等もアクティビティあるので)
30代〜を想定
アクティブに行動というよりは、ホテルステイを楽しんで食を満喫したいと考える旅行者
ペルソナ設定
次に上記をもとに具体的なペルソナを設定しました。
ゴール設定と達成するためのブレイクダウン
KGIを決める
来期の月間宿泊者数：現状の数×1.2
上記を今回のリニューアルのゴールに定めました。
※「利用されている客室数」÷「利用可能な客室」×100％
それを達成するためのブレイクダウン
①アクセス数を増やす
②サイト内のコンテンツ設計(ユーザーが見やすいように情報をまとめる)
③サイト閲覧→問い合わせまでの導線をわかりやすく整理する
そこから考えられる施策を出す(上記は大きく分類された代表格となる施策3つです)
そしてこちらの施策を細分化/具体化していきます。
具体的な施策
①【現状】
サイト内の情報がバラバラで見にくい
【施策】
情報をまとめ適切なグルーピングを行いページ数もそれに合わせて絞る
②【現状】
タイトルに英文のみを使用している
【施策】
日本語を添えて、直感的にわかりやすく情報をキャッチできるようにする
③【現状】
コンセプト/ミッションビジョンバリューなどの想いが見えない
【施策】
提案段階では仮説を立て、こちらで設定。
それをもとにヒアリングを行い他社との差異化を図りコンセプトを設計する。
④【現状】
写真素材が中途半端になっている
【施策】
モダンな建物と魅力的な館内施設が多いので良い部分を魅力的に伝えるために撮影の提案を行う。その際にトンマナを決め、統一感のある仕上がりを目指す
⑤【現状】
強みである料理を訴求し切れていない
【施策】
観光客の目的で多かった、地域の食を楽しむをもっと全面的に訴求することで予約数の増加を狙う。
また、阿蘇近辺は車がないと不便なので館内で全て補うことができる。という部分もポイントとしてあげていいと考えられる。
⑥【現状】
予約ボタンがサイト内の背景色などと同化して見えにくい
【施策】
アクセントカラーの選定や使い方を考慮し、ユーザーが一番邪魔にならないポジションでかつクリックしやすい箇所に追従として設定する
⑦【現状】
サイト内の導線/情報設計がバラバラで離脱率をあげている可能性がある
【施策】
サイト内のコンテンツを思案し導線整理/情報設計を細かく行う必要がある
⑧【現状】
インバウンド向けの情報がない
【施策】
英語の翻訳切り替え機能を追加(もしくは統計をとり中国語or韓国語も追加)
上記を改善できる施策として挙げました。
競合調査
ここでは周辺の同価格帯のホテル。もしくはワンランク価格の上のホテル。
また、熊本県下で阿蘇についで観光地として有名な天草のホテルなどを競合にし他社サイトを10社ほど下記の項目で調査しました。
・運営会社url
・設立日
・資本金
・規模(部屋数)
・地域
・コンセプト
・キャッチコピー
・ターゲット層
・価格帯
また、競合のwebサイトを見て、どのようなコンテンツ/サイトマップになっているかを調査します。そうすることで、属性やどの流れがユーザーが一番操作しやすいのか、また新しいアイデアも出てきます。
3C分析
1.市場・顧客
【業界の市場規模】
熊本県の温泉旅館業界の市場規模は年間数百億円から数千億円の規模と推定されています。熊本県には多くの温泉地があり、それぞれに温泉を利用した旅館やホテルが存在します。特に、阿蘇や黒川温泉などは国内外から観光客が訪れる人気の高い温泉地です。
【市場の成長性】
①観光需要の拡大: 熊本県は自然景観や歴史・文化遺産が豊富な地域であり、国内外から観光客が訪れます。観光需要が増加すると、温泉旅館業界もその恩恵を受ける傾向があります。
②外国からの訪日観光客の増加: 近年、日本への訪日観光客が増加しています。熊本県もその人気のある観光地の一つであり、外国からの観光客の増加が温泉旅館業界の成長を後押しする要因になっています。
③地域振興や観光資源の活用: 熊本県では地域振興や観光資源の活用に積極的な取り組みが行われています。地域資源を活かした新たな温泉施設や観光プランの開発が進むことで、温泉旅館業界の魅力が高まり成長が促進されます。
④インバウンド観光の促進: 日本政府や地方自治体の観光振興策により、インバウンド（外国からの訪日）観光客の増加が期待されています。これにより、熊本県の温泉旅館業界も国際的な観光需要に対応し成長する可能性があります。
ただし、温泉旅館業界にはいくつかの課題や制約も存在します。例えば、施設の老朽化や人材不足、自然災害のリスクなどが挙げられます。これらの課題を克服しながら、熊本県の温泉旅館業界は地域経済に貢献し、観光産業の成長を牽引する重要な存在として期待されています。
【顧客ニーズ】
①温泉体験の充実: 温泉旅館を訪れる顧客は、まず温泉体験を求めています。熊本県の温泉旅館は、豊かな自然環境に囲まれた露天風呂や内風呂を提供し、リラックスや癒しを求める顧客に合った温泉体験を提供しています。
②高品質なサービスとおもてなし: 顧客は快適な滞在を求めるため、温泉旅館では高品質なサービスとおもてなしを期待しています。接客や食事、客室の清潔さなど、細やかな気配りが大切です。
③季節や地域の特色を活かしたプラン: 熊本県は四季折々の美しい景色や地域の文化が楽しめる場所です。顧客はその特色を活かした季節限定のプランや地域の観光スポット巡りなどを楽しみたいと考えています。
④食事の充実: 温泉旅館では食事も重要な要素です。地元の食材や郷土料理を活かした料理や、季節感溢れる会席料理などを提供することが求められます。
⑤プライベート空間とくつろぎ: 温泉旅館は都会の喧騒を離れてリラックスしたいという顧客が多いため、プライベート空間やくつろぎを重視する傾向があります。客室の広さや設備、周辺環境の静寂さが顧客にとって重要です。
【顧客の消費行動】
①リラックスと癒しを求める: 温泉旅館の顧客は、忙しい日常から離れてリラックスしたいと考えています。温泉の効能や自然の景観を楽しみ、ストレスを解消することが目的です。したがって、温泉旅館は静かで落ち着いた雰囲気を重視し、癒しを提供することが求められます。
②食事や地元の食材にこだわる: 熊本県は食材の豊富な地域であり、地元の食材や郷土料理が人気です。温泉旅館では、季節の食材や地元の味を活かした料理が提供されることが重要です。顧客は地元の食文化を楽しみながら宿泊を満喫します。
③季節やイベントに合わせたプランを選ぶ: 熊本県では四季折々の風景やイベントが楽しめます。顧客はこれらの季節やイベントに合わせたプランを選び、観光やアクティビティを楽しみながら宿泊します。例えば、桜や紅葉、地元のお祭りなどに関連したプランが人気です。
④宿泊施設の設備やサービスに期待: 温泉旅館の顧客は快適な宿泊施設や充実したサービスを求めます。客室の清潔さや広さ、温泉施設の充実度、接客の質などが顧客満足度に直結します。特に、露天風呂や内風呂からの景観、マッサージやエステなどのリラクゼーションサービスに高い期待が寄せられます。
⑤口コミや評価に影響される: インターネットの普及により、口コミやレビューが消費者の選択に大きな影響を与えています。良い評価を得ている温泉旅館は顧客獲得に有利です。逆に、悪い評価やクチコミは顧客離れを招く可能性があります。
【購買行動】
①温泉体験への価値観: 温泉旅館を利用する顧客は、温泉体験や癒しを求める傾向があります。温泉の質や種類、泉質によって顧客が選択する旅館が異なることがあります。また、露天風呂や貸切風呂などの施設も重視される要素です。
②宿泊施設の特性: 顧客は宿泊施設の特性によって選択します。熊本県の温泉旅館は、和風の趣や地元の食材を活かした料理、周辺の自然環境などが魅力です。
③口コミや評価: インターネットやSNSの普及により、顧客は他の人の口コミや評価を参考に温泉旅館を選ぶことが増えています。良い評判や高い評価を受けている旅館は、顧客の選択肢に上位に入りやすい傾向があります。
2.競合
競合は上記で説明しているのでここでは割愛します。
3.自社
自社の企業理念
仮説：進化しつずけるホテル
ビジョン
仮説：環境への配慮や持続可能な経営を重視したホテル。地域社会との連携強化。
既存事業
ホテル運営
SWOT分析
SWOT分析とは
①自社の強みを表す「Strength」
・阿蘇の広大な敷地
・温泉
・リニューアルしたてなので新しい施設
・ホテル内で完結
・キャンプやバーベキューなど子供も楽しめるアクティビティが充実
②自社の弱みを表す「Weakness」
・インバウンドに対して追いついていない
・サイトが見にくい
・顧客が若いイメージ(もう一つ年齢層を上げて客単価を上げたい)
③機会を表す「Opportunity」
・比較的に熊本の中心地からそこまで時間がかからない
・周辺観光地の充実
・インバウンドによる海外からの顧客の上昇
・TSMCによる台湾人の来日数の増加
・熊本空港国際線の増築、国内線の改築による路線の増加
Threat（脅威）
・交通の便が悪い
・働き手の減少
クロスSWOT分析
SWOT分析をした後にそれぞれを掛け合わせることで、選択すべき戦略を明確にしていていきました。
①どんなコンテンツを作る＆掲載するべきか
・情報設計を明確に
・料理の詳細や地産地消を押したメニューの紹介など
・周辺観光地の情報のわかりやすさ
・ーベキューやキャンプのアクティビティが他者との差別ポイントになるのでその部分の打ち出し
②どのようなデザインにするべきか
・高級感を出す
・写真の良さを引き立てるデザインに
・阿蘇の景観を出した画像を使用(自然が近いことをアピール)
・温泉宿なので和の感じもだしつつ、モダンな感じも演出
③誰をターゲットにするのか、しないのか
・30代後半-40代の独立した大人をターゲットに。
・キャンプなどのアクティビティができるので家族連れをターゲットに
情報設計
コンテンツ企画
競合調査やペルソナ設定を行なって見えてきた課題をもとに掲載予定のコンテンツを提示します。
サイトマップの作成
上記をもとにサイトマップを作っていきます。
デザイン
ここからデザインフェーズに入っていきます。
デザインコンセプト
まずはこの段階でデザインのコンセプト設定を行います。
どうやったら魅力的なものになるか、どうやったら阿蘇の素晴らしさが伝わるサイトになるのか、雰囲気を伝えるために言語化して落とし込んでいきました。
全てを言語化するのではなく、言葉で表せない表現などはどんなシーンで感じることができる感情/雰囲気なのか、などを考えてコンセプトシートを作成しました。
参考サイト調査
次にコンセプトに定めたものに近い参考サイトを数サイトあげていきます。
日頃から海外のWebサイトを集めたサイトやもちろん日本のそういったサイト、またグラフィックデザインを見る。という趣味がありまして、(夜中にニヤニヤしながら見てます。)そのおかげか、コンセプトシートを作る段階で、あ〜あの時のあのサイト、この雰囲気にあってるよな〜というサイトたちが脳内で選出されていきました。
その脳内選出メンバーたちを、notionにまとめている好きなデザイン集の中から呼び出してきます。(数年前からとりためていたこのnotionのページは宝物です！)
そのキャプチャをとり、Figmaに並べてデザインを進めていきます。
参考にしている参考サイト(有名すぎてきっと皆さんご存知なはず)
まだまだたくさんあるのでこれについてはまたいつかnoteに綴って行こうと思います。
初校で提出したデザイン
五感(視・聴・嗅(きゅう)・味・触)をコンセプトにしているので、ローディングの画像、topのサイトの流れとそれぞれのセクションタイトルの付け方など
”視・聴・嗅(きゅう)・味・触"を意識して制作しました。
また、阿蘇の景観の美しさを画像で訴求しようと思い、写真を多く使っています。MVにはインパクトの残る阿蘇の雪山を使用してユーザーの興味関心の獲得を狙いました。
セクションごとのBefore/After※解説付き
ローディング
五感にフォーカスして阿蘇の景観と視・聴・嗅(きゅう)・味・触をそれぞれ交互に配置しアニメーションで0.4secほどで切りかわる使用にしました。
ちょっと怖い印象であったりアート的な印象を受けてしまうことや、
五感=視覚=目というのも、少し直接的すぎる表現というFBを受け、とても納得。そして反省しました！
個人的にアート的な雰囲気のデザインが好きなので知らぬ間にそちらに寄せすぎてしまっていました。
ガラッと画像を変更して、ローディングでは阿蘇の景観の美しさに引き続きフォーカスして、サイトをみた人に、【阿蘇に行ってみたい】と思ってもらえる写真を選びました。
並びは、春夏秋冬また、朝から夜に移り変わる順番に写真を配置しています。
MV
そしてメインビュー。
この雪山の画像を選んだことによって別のサイトや業種を連想させてしまう可能性があることを指摘いただきました！
インパクトを出すため、この雪が積もった阿蘇はなかなか見れないこと、友人のフォトグラファーに撮影してもらったオリジナルの写真であったことからこの写真を起用しましたが、確かにユーザーからすると何のサイトか判断するのに時間がかかってしまいそうな画像でした！
最終的にこちらの写真を使用。
右の4枚はホテルに関連する画像を選定し、フェードインで写真が切り替わるようにアニメーションをつけることでMVでホテルのサイトであることを直感的にわかるよう変更。
また、タイトルとテキストのフォントサイズであったり、読ませたい部分の行間を長くとったりと細部の調整を行いました。
コンセプト
画像の選定を再度行い、文章も長すぎたので4-5行を目安に変更。また、文章の左は揃っていたものの右側が揃っていなかったのでAlignmentで調整を。
Room/Spa/Food
このセクションでは、テキスト群と画像群の左右比の設定が課題となりました。
ホテルの良さを出す上で画像での訴求の方がテキストでの訴求よりも優先したつもりだったのですが、これだとテキスト範囲/画像範囲の比率で言うとテキストの範囲の方が広くなっているのでガイドラインを追加してレイアウトの比率を考えながらレイアウトの変更を行いました。
また、セクションタイトルの五感に合わせた1文字を強調するために色をサイズを変更していたのですが、コントラストの関係で目立たせたいはずなのに逆に目立たなくなっている印象があるとFBをいただきました。
また、背景のブラックが重すぎると言うご意見をいただき数色カラーを変更して検証も行いました。
上記をふまえ、最終的に決定したデザインがこちらです。
ここでは何を使って訴求するのか、どの順番で訴求するのか、を考えてレイアウトを組むことを深く学ぶことができました！(ここでいただいたメンターさんのわかりやすく細かい丁寧なFBが今後ずっと活きてくると思います！)
Plan/Activity
ここでも細かい部分のこだわりと変更でより良いものが完成しました！
テキスト内容も1つ1つこだわりっていますし、画像の選定基準やどういった印象を持たせたいからどの画像を使う。などの意図もしっかりつけて選んです。
例えばactivityの真ん中のバーの画像ですが、バーの店内の雰囲気をとった画像とカクテルを写した画像ですと直感的な伝わり方が全く違います。
また、バーベキューの画像も夜のものから昼のものに変更したのは、Beforeだと3枚とも夜の画像になっており、昼間のアクティビティが無いイメージになってしまいます。
このイメージを無くすためにバーベキュー画像はあえて昼間の画像を使うことにしました。
周辺観光
ここではテキストでの魅力の伝え方をプラスし、画像のサイズアップをすることで全体的なバランスと見え方が大きく変わり完成度が高くなりました。
フッター
神は細部に宿る。
フッターにこだわりと遊びゴゴロを。
この2つを頭に入れていつも制作しているのですが、今回は大好きな阿蘇の魅力を伝えたい！という思いが強かったこととフッターまでのデザインのベースカラーがオフホワイトだったのでフッターにはカラーの変化を加えて最後がしまって見えるように暗めの写真を使用しました。(こちらの写真も友人が撮ってくれたオリジナル)
画像の空の部分にマスクをかけて神様のグラデーションを拝借しております！
ここではメンターさんからのFBをいただき画像のトリミングで左の柱を排除することで印象が変わり、フッターの範囲が広かったので地図を縮小するなどして全体をサイズダウン。また、テキスト詳細箇所のバックに黒ベース背景をおくことで視認性がグッと上がりました。
Studio構築
本当はここまでを1つのnoteにまとめたかったのですが、、、長い。
ここまで読んでいただくのが申し訳ないくらい長い。
ということで構築編は別記事にまとめます！
Studioのスーパーメンターさんにたっくさん教わった先を見越しての構築方法などアウトプットできたらと思います！
最後に
こちらをひっさげて実際のホテルに営業してきました
今回のサイト構築を行い、提案資料を制作して実際に企業様にメールをお送りし、1本電話を入れました！
こちらの内容も次回のStudio構築編にまとめたいと思います！
NOTdsでの学び
私が実際にNOTdsで感じるよかった点は、もちさんをはじめとした様々なバックグラウンドを持った、実力派のメンターさんがたくさんいらっしゃることだと思います。
課題ごとに担当メンターさんがいらっしゃるのですが細かくFB をくれて、かつ"指示"ではなく"考え方"や"進め方"を教えてくださるので、その場だけではなく今後、デザインをするときの大事な軸を学ぶことができます。
このように、全てをおしみなく妥協なく教わったのでここから先は自分次第だと思っています。
実際の案件でもメンターさん方から教わった考えや取り組み方をたくさん取り入れてデザインの精度を常に上げることを頭に入れて制作に取り組んでいます。
そんなNOTdsの記事はもちさんのnoteから読めます！
兎にも角にもデザインのスキルを上げたい。という思いで日々奮闘しておりますので今後もこのnoteやXで学びのアウトプットを続けていこうと思います！
ここまで読んでくださった方々、ありがとうございます！
最後になりましたが私はNOTdsに入り、大好きだったデザインがもっともっと好きになりました。
いつも多くの学びをありがとうございます！
もちさん、メンターさんたちへ感謝を込めて。