サイト分析

本

気になったサイトを分析して言語化した記事をまとめています。

運営しているクリエイター: en

サイト分析：NATOCO

●下層ページのフォーマット・ディレクトリ構成：下層はメインのページは第二階層まで、ニュース記事など詳細ページも含めると第三階層まである。・ニュース詳細や社員インタビュー詳細などCMSで量産するページは固有のレイアウトにしている。またニュース詳細のみパンクズがない。第二階層は2種類のフォーマットがある。・H1の左端の位置（X座標）はアンカーリンクの有無によって異なる。 →アンカーリンクがない場合はその分、左に詰められている。・頭の位置（Y座標）は全ページ統一されてい

サイト分析（2023.03.04）

デザインの意図の推測というよりは、"どういった部分が効いているのか"という見た目のスタイリングに関して気づいた点をメモしています✍️ 余白を生かしたデザイン見出しを3行に改行して高さを出しつつ、右側に空間を作っている。左下の文章も見出しとは頭を揃えず、下に配置している。見出しを「Works」ではなく「Selected Works」にするなど、敢えて単語の数を増やすことで改行できるようにし、余白を作っている。また、画像の頭をずらしている。 PERSONページでは、

サイト分析：inter office

●下層ページのフォーマット・基本は背景色がベージュ・一覧ページ（ServicesとProjects）、社員インタビュー詳細は背景がベージュ+英語・Productsとnewsの詳細は背景が白・Service、Careers＞募集要項のモーダルの背景色は黒・一覧ページ（Service、Projects、news）はメインビジュアルなし・About、Products、Cateersはメインビジュアルあり ●H1のルール・h1の頭の位置は同じ（Projects、Car

サイト分析（2021.10.11-10.15）

KVはコピーなどはなくイラストのみ。クリックで動画が再生される。FV直下の「ここは、僕らのヒミツ基地」を表現したイラストになっているが動画が流れる時にモーダルなどで開かずそのまま流れることでよりコンセプト部分との繋がりが自然でより内容が伝わってくるなと思った。 KVで使用していたイラストの線画を背景に敷くことで、制作の様子を表わしている。画像の周りの赤枠や袋文字の装飾も線画に合わせたものになっており、アナログっぽさを感じる。→アナログ＝手作り感を感じさせることで多くの人や工

サイト分析（2021.06.21-06.25）

ヘッダー、ボタン、ブログのタイトルには線が引いてあり、クリックできることを伝えている。トップのFVは女性４人と男性の写真だが女性を多く載せることで女性が活躍している、女性でも働きやすい会社というイメージをつけている。代表メッセージは見出しと本文が横並びになっている。読みやすい文章の長さが１行あたり30文字程度のため、本文のエリアを狭くすることで読みやすくしている。数字をつけることでリズムをつけて内容を入りやすくしている。色を使ったり、丸を突然使うことで目を引くよう

サイト分析（2021.12.27-12.31）

欧文フォントはCanela（見出しに使用）とInter（ヘッダー等）の2種類。日本語フォントはNoto SerifとNoto Sans。 VCという今どきな事業を行なっている会社のため見出し部分はモダンでお洒落なフォントを使用し世界観を作っている。一方でヘッダーなどには小さいサイズでも可読性の高いフォントを使用することで使いやすさも担保している。 ●良いと思った箇所01 写真がない中でのビジュアルの起こし方、より企業の想いを伝えるための見せ方が勉強になるトップページ

サイト分析（2021.12.20-12.26）

FVはどんな会社なのかを説明するコピーが設置されている。ホワイトスペースが大きく取られているため、サイトを訪れた際にコピーに目が留まるよう設計されている。またその下にビジュアルを見切れさせることで続きがあることがわかるようにしている。実績を立たせるために装飾的な部分はなく色もモノトーンで構成されている。使う色が限られているためヘッダーの文字や本文の文字の濃さを見出しよりも薄くして濃淡をつけることで情報の優先度をつけている。そのため日本語の見出しと本文のジャンプ率がそこまで

サイト分析（2021.12.13-12.19）

メインのニュースとサブの情報を左右で分けているパターン。左右で分割して情報に優先度をつけるのはなるほどと思った。大体メガメニューは開いた時に背景がつくがこれは文字だけのパターン。意外と文字だけでも見やすいなと感じた。ただ背景の写真など後ろにあるものによって使い所が限られそうではある。第2階層をタップするとアコーディオンで3階層目が表示される。個人的には画面が切り替わるよりそのまま下に表示された方が使いやすいなと感じた。また病院のサイトのため一番上にはアクセスへの導線が

サイト分析(2021.12.06-12.12)

画面右側にはコピーライトが配置されている。普通のサイトはMVで装飾的な意味合いで配置したりするが、このサイトではMVだけでなくスクロールすると追従するのでめずらしいと思った。 MVにはフルスクリーンで制作実績の動画が設置。その下のコンテンツも実績の画像を多く載せている。またメニューは一番左が「works」、その次が「services」になっており、「about us」は3番目に配置されている。 →実績の豊富さや実力の高さを訴求することで高いレベルの作品を求めている顧客に

サイト分析（2021.11.29-12.05）

アパレルのデザインを行なっている会社のサイト。 FVは何の会社か分かるようにコピーとファッションモデルが撮影している動画を設置している。動画ではより服にフォーカスを当てるためにモデルの顔を見切れさせて上半身に目が行くようにしている。 FV直下はロゴの「R」と手がけたアパレルの写真を大きく配置することでブランドの認知を高めようとしている。サービスの説明の中に「角度やスタイルは関係ない」あることから制限や縛りがない会社であることが分かるが、デザインでもそうした姿勢が表現さ

サイト分析（2021.11.22-11.28）

銀行はサービスの種類が多く、内容も難しく複雑だがメニューのラベルを「ためる」「かりる」「そなえる」など誰でも感覚的に分かる言葉にすることで目的の情報を探しやすくしている。またメニューをクリックするごとに内容を切り替えるのではなく第一階層から第四階層まで全て一覧で見える形にした方がサイト全体の構造を理解しやすいなと思った。サイトには「はじめてのいわぎん」というコンテンツが設置されておりまだ銀行を利用したことがない層に向けて疑問や不安を解消するコンテンツを用意することで口

サイト分析（2021.11.15-11.19）

理念の部分などに「創造がコミュニケーション戦略の中心となるはずだと信じている」「単なる広告代理店ではなく、グローバルなソリューションを考え出し〜」「情熱」などとあることからFVではコピーを大きく配置することで、ただ綺麗な絵作りをする会社ではなくクリエイティブに対して情熱のある会社だと見せたかったのではないか。フォントはシャープなセリフ体の「Iskry」とサンセリフ体「NeueMontrea」を使用している。見出しの中には2つを混ぜて使用しているものもある。セリフ体だけだと

サイト分析（2021.11.08-11.14）

フォントの販売サイト。サイトはモノトーンでまとめられているがこれはフォントの形などが見やすいようにコントラストの高い色にしている。またトップでは短時間で多くのフォントが見れるように４カラムで配置されており、マウスホバーで実際に使用した文章が見れるようになっている。各フォントの下層ページのFVはそれぞれ写真が異なるがこれは文字だけにしか違いがないと似たような形のフォントを連続して見た時などに混乱するためそうしたことが起こらないよう配慮したのではないか。右下の目のマークに

サイト分析（2021.11.01-11.07）

↓FVから2セクション目までのスクロールした際の動きデザイン会社のサイトの構成としてFV→会社説明→実績が多いが、この会社はビジュアルの作成を専門とした制作会社のためFV→実績→会社説明の順番にしている。より強みであるビジュアルを見てもらうためにスクロールした時に背景の色を反転させる、実績のサムネを画面両端から表示させる、サムネを数秒ごとに切り替えて多くのビジュアルを見せるようにしている。サイト全体の色はモノトーンとロゴのオレンジを使用。装飾的な部分などはなく、実