サイト分析

本

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

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

#WEBデザイナー

サイト分析（2023.03.04）

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

サイト分析（2021.12.27-12.31）

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

サイト分析（2021.12.20-12.26）

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

サイト分析(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→実績→会社説明の順番にしている。より強みであるビジュアルを見てもらうためにスクロールした時に背景の色を反転させる、実績のサムネを画面両端から表示させる、サムネを数秒ごとに切り替えて多くのビジュアルを見せるようにしている。サイト全体の色はモノトーンとロゴのオレンジを使用。装飾的な部分などはなく、実

サイト分析（2021.10.25-10.29）

FVの「より良い働き方があります」というメッセージや左下に「Our Culture」の導線があること、サービスの具体的な訴求が外部のサイトが担っていることからこのサイトのメインターゲットは求職者であると考えられる。写真はオフィスと従業員の写真がメインになっている。様々な社員の写真やオフィス、在宅ワークの写真を載せることで社内の雰囲気を伝え、働きやすそうなイメージを作っている。写真だけでなく、紙をちぎったようなモチーフや手書きの線、アイコンを用いることでもカジュアルさを

サイト分析（2021.10.18-10.22）

このサイトはアプリの開発などIT・テクノロジー系のサービスを提供している。そのため背景に物体が変化する動画を設置することでハイテク・テクノロジーなイメージを演出している。こうした複雑な動画を流すことで高い技術力を持った企業に見えると思った。また欧文フォントには「ITC Avant Garde Gothic Pro」が使用されている。「O」の形が正円になっており、幾何学的な形状がモダンな印象を与えている。テクノロジーを提供しているこのサイトに沿った選定になっている。デザ

サイト分析（2021.10.04-10.08）

FVはブランド名を大きく配置し、商品画像を散りばめている。 →DHCのような有名なブランドではないためまず認知度を上げたい、またロゴがシンボルマークのみのためブランド名のジャンプ率をかなり大きくすることでサイトを訪れた際に確実に目に入るようにしている。 FV直下は様々な商品の画像を散りばめている。インテリアの中に商品を置くことでパッケージのデザイン性の高さを訴求。3BLの世界観をFV、FV直下で作っている。サイトの配色はパッケージの色を踏襲しているのと、利用者の声が4

サイト分析（2021.06.07-06.11）

Wild Souls商品のラインナップは上下にずらす、アニメーションで流す、商品名を座布団からずらすことで短調にならず、没個性的にならないようにしている。見出しのフォントはCanelaを使用。形はセリフ体っぽいが線が太めなのでカジュアルっぽく見える。 Kや？など形にクセがあるためこのフォントを使うだけでサイトに味が出るなと思った。その一方で本文のフォントはクセのないGraphik LGを使用。読みやすさやサイトのイメージを考慮したフォント選定になっている。色が#000だ

サイト分析（2021.06.01-06.04）

MEITECFVはキャッチコピーをセンターに置き、画像を見切れさせている。 →スクロールしてもらうために、続きがあることが分かるようにしているのと最初にメイテックとは何なのかを伝えたい。写真を２つ並べて高さを変えることで短調な印象になっていない。またコードの写真と働く様子を合わせることで、１枚では伝わりにくい内容をうまく補い合って伝えている。写真の１枚に人物を入れることで冷たい印象を回避している、また仕事に対しての誠実さ、熱心さを感じる（写真も明るめにしている） F