サイト分析（2021.04.19-04.23）
記事の中にある「分析に対してのFB」はムラマツさん（@muuuuu_chang）が、私が分析したものに対しての意見だったり、サイトのいい所を話してくれたのをまとめたものになります。
弊社では毎日１サイト分析し、金曜日にムラマツさんが私やウェブボーイさんの分析したサイトの中からいくつか選んで、サイトのいい所を話してくれます。そのため私の分析だけのものや、ムラマツさんのFBだけのものなどチグハグになっています。
「テプラ」PRO "MARK"
credit：studio ditailsさん
使用フォント：Noto Sans JP / Lato
【制作目的】
・簡単で楽しいことを伝えたい
・家庭用としても使える（＝オフィス以外での活用も普及したい）
従来のゴツい、会社で使うような見た目のイメージを払拭するため、
デザイン性の高さ、邪魔にならないサイズ感であることを伝えるために
FVでは、商品を部屋の中に置いた写真にしている。
最初にコンセプトを設置して、MARKとは何か。他のシリーズとは何が違うのかを説明。
大事な部分のため、テキストだけで余白を広く取ったデザインにすることで
しっかりとユーザーに伝えている。
APPLICATIONでは最初にアプリの操作画面を大きく、たくさん見せることで
引っ掛ける。またアプリって面倒臭そう、難しそうと言ったイメージを払拭する。（＝手軽にできそうなイメージをつける）
このサイトではまず「テプラって楽しそう」と印象付けたいため
商品の機能性に関する情報は下層に流している。
使用イメージのアニメーション部分では、様々な使用イメージを載せることでテープのデザイン性の高さ、バリエーションの豊富さを見せて汎用性の高さを訴求。
【デザイン的な工夫】
ボタンを丸、画像を角丸にする、余白を大きく取る、落ち着いた配色にすることで女性に刺さるような柔らかいデザインにしている。
落ち着いたデザインのため単調になりすぎないようフルスクリーンのFV、INTERVIEWの画像やアプリの操作画面を見切れさせる、アプリ操作画面を山なりに配置して動きを出す、画像にパララックスを入れるなどメリハリをつけてバランスを取っている。
テキストよりも画像を大きく配置することで直感的に内容を理解できるようにしている。
【改善案】
インタビューの引きが弱いように感じた。
人の写真だけでなくて「実際にテプラを何に活用したか分かる」画像も一緒に入れるとか、見出しも「手間が削減」と「便利さ」を感じるようなタイトルにするのではなく「テプラを使えばこんなことも出来るんだよ」みたいなものにしたらいいと思った。
全体的にスナックミーみたいにボタンにキャッチーな動きを入れるとか動画を差し込むと楽しい感じが伝わるかなと思った。
写真も子供がテプラを使っている様子も載せると「子供でも使える＝手軽さ」と楽しさが伝わると思った。（※ただやりすぎると幼稚になってしまいそうなのでバランスは必要になりそう）
DESCENTE ALLTERRAIN
credit：sunnyさん
使用フォント：Helvetica Neue LT
商品に興味を持ってもらうために、モデルの着用画像や商品のアップの写真をたくさん並べることで生地感や着心地をイメージさせる。
インスタグラムはその商品についたいいねの数を載せることで何が人気なのかを可視化して興味を引く。
文字周りは詰めているが、要素は大きく余白を開けている。
→かっこよさもあるが、洗練された印象も感じる。
→商品の価格が高く、機能性などを追求して作っているためこだわって
作ったことや商品の質の高さを感じさせたい。
【いいと思ったところ】
商品の詳細ページに飛んだ時にパンくずがついてるが、スクロールすると格納される。
フッターにもパンくずがついている。
→どのページを見ているのかが把握できるし、閲覧の邪魔にならない。
分析に対してのFB
・何でカッコよく感じるのか
1.セクションごとに綺麗に色が分かれている。
2.スクロールした時の縦に割れるような動き。
→デジタルっぽい。デジタルっぽいものはハイテクに感じる。
服がハイテク（機能性が高いことが売り）のためデザインでも
そういった印象を感じる表現を用いている。
3.写真のクオリティが高い。（解像度が高い）
4.フォントがいい（Helvetica Neue）
5.見出しとその下のテキストのジャンプ率が大きく、メリハリがついている。メリハリがあるとデザインが決まって見えやすい。
6.クリッカブルエリアが画面幅いっぱいになっており海外っぽい。海外っぽいデザインはカッコよく見える。
DDD HOTEL
credit：Garden Eightさん
通常のホテルとは異なり、長期休暇の際に泊まるのではなく日常生活の中でたまに泊まることで、日々の生活を癒す場所として位置付けている。
【売りにしているもの】
綺麗な景色、おいしい食事、豪華な部屋→✖️
静寂・上質な空間、ホテルで過ごす時間→○
静かな空間で自分の時間を過ごせるということを伝えるためサイトの写真はフルスクリーンなど大きく見せるのではなく、小窓にする、暗くざらっとした質感にすることでひっそりとした印象を感じさせている。
また構図も椅子のアップの写真や、部屋の隅の写真など少し外した構図にすることで部屋の設備ではなく、空間の雰囲気を感じる。
英語のフォントサイズがかなり大きいことや写真の画角が縦長なのが海外っぽさを感じさせる。
→通常のホテルとは立ち位置が違うこと、都会の喧騒から離れて上質な時間を過ごすというコンセプトのため新しさを感じさせたいのではないか。
サイトのカラーには深い緑や黄土色を使用している。
こうした深めの色合いはウェディングなど価格が高いサイトに使われることが多いため高級感、上質といった印象を受ける。
ページ遷移の動き、nextの導線にホバーした時に写真がズームされる動きなどぬるっとした動きがサイトの少し怪しい雰囲気と合っていていいなと思った。
分析に対してのFB
海外っぽいサイト。
写真の視差や予約ボタンをただ色が変わるのではなく、四角が丸に変わる挙動にしている所が使い勝手を悪くしてないしオシャレ。
HARIZURY
企業姿勢やものづくりに対しての思いを一番伝えたいため、トップページやAbout usページの見せ方を工夫することでより共感してもらえるようにしている。（1〜3）
1.FVの画像はコンセプト〜About us間で変形する。
→各コンテンツを画像が変形する一連の流れの中に一緒に組み込むことでより内容が伝わってくる。
2.Our Businessはテキストが左に寄っていて、写真が中央に来ている。
→ビジュアルを一番に見せることで、ものづくりに真摯に向き合っている様子を感じる。
3.Brand Storyは左に画像が固定され、テキストを読み進めるごとに中身が切り替わり、読み終わると画面幅いっぱいにカバンを作っている様子の画像が表示される。
→伝えたい思い、コンセプトを想起させるような画像を入れることで
より内容を印象付けている。
また、思いをしっかりと伝えるために行間をかなり広めにとっている。
サイトは英語と中国語に切り替え可能。
→海外進出も視野に入れている。
→デザインもいかにも日本のコーポレートサイトではなくトレンド感がある。
＜具体的には＞
影や座布団を敷かない、タグの部分を線だけで構成するなどフラットなデザインにしている。
ページ遷移の時にページタイトルをあえて右に置く、タイトル上の余白を大きく空ける、英語部分に色が変わる動きを入れることで引っ掛けている。
色が変わる動きもあえて右から左に変化させている。
（文字自体は左から右に読むが、要素を右に置いてるため視線の流れを考えてそうしたと考えられる）
buddies
credit：baqemono.inc.さん
FVはストレッチしている女性の写真が大きく配置されているためヨガ、フィットネス、ジムのサイトなのかなという印象。
また「あなたの理想を」とコピーにあるため理想（＝なりたい体型）を表しているとも考えられる。
最初に見た時に左にあるモックアップの画像だと音楽とかダンスっぽいため、モックアップよりも女性の写真を大きく配置することでどんなサイトなのか分かる。
About buddiesではテキストだけでは内容がわかりにくいため、アイコンをつけることでどんな内容か想像できるようにしている。
プログラムが「400種類」もあるのは強みのため、より強く訴求したい。
→最初にモックアップと後ろにトレーニング画像を画面いっぱいに敷き詰めることで感覚的に数の多さを伝えている。
また、数字に動きをつけることで視線が集中する。より多い印象を受ける。
プログラムのジャンルをアイコンを並べて一覧にしている箇所も豊富な印象を受ける。
Program、Performerなどは見出しと説明文だけでなくメリット、魅力も端的に伝えることで興味を持たせる、アプリ導入のハードルを下げる。
アプリの操作画面を載せることで具体的なイメージが湧く。また追従させることで、どこまでがアプリの説明なのかが分かりやすくなっている。
フッター直前のアプリの案内の部分でも女性の写真（＝理想の体型）を見せることで、「こうなれる」という期待を持たせてアプリ導入につなげている。
サイトはのカラーは、基本白と黒で構成されておりシンプルな印象。
黒色（#222323）には若干水色が入っており、サイトのアクセントに用いられている#33ffe7と色味を合わせることで、サイト全体に統一感を出している。
アイコンは細めの線で構成されている。
見出しと本文のジャンプ率があまりない。見出しは頭文字だけ大文字であとは小文字。フォントが太めなので少し可愛らしい印象。
→一流のパフォーマーのプログラムの割にはキツく見えない。手軽に始められそう。
この記事が気に入ったらサポートをしてみませんか？