【デザインの言語化】サイトレビューの方法

こんにちは。
新卒でフリーランスWEBデザイナーになったカナです！
今回は「デザインの言語化　サイトレビューの方法」をご紹介します！

この記事をおすすめな人

私が実際に1カ月間毎日サイトレビューして、感じた効果を紹介しますので、ぜひ参考にしてみてください！

1　サイトレビューについて

前提としてサイトレビューには正解はないです！
だからこそ最初は戸惑ったり、うまく言語化できずに続けられないかもしれません。

サイトレビューは「正解を求める」のではなく「なんで私はこう思ったのか？の言語化の練習」です！

実際に私が行っているサイトレビューの紹介をしていくので、そこからどんどん自分流に項目を増やしたりして、「特に自分が伸ばしたい部分」を伸ばせられるようにしてみてください！

サイトレビューするメリット

サイトレビューで得られる効果

デザインを毎日目にすることによって、街の広告やチラシなどを見ると、「違和感を感じる」ようになります！

これは、デザインの法則がわかっているから、違和感を感じられるようになっている証拠です！
このデザインの目を養えることで、サイトデザインをさらにブラッシュアップできます！

自分が得意とするジャンル以外のサイトを見ることで、デザインの幅が広がり、提案方法も増えて、スキルアップできるので、ぜひデザインで悩まれている方は、サイトレビューしてみてください！

2 サイトレビューのやり方

サイトレビューの方法

各ステップを詳しく説明していきます！

Step1　サイトを選ぶ

デザインはまとめサイトから選びます！
デザインは一番上のものを選ぶ！など自分の好みではないものを選びましょう！
自分の言語化の能力向上とデザインストックを目的とするなら、いろんなデザインを見ていきましょう！

▼おすすめのまとめサイト

SANKOU!

SANKOU! | Webデザインギャラリー･参考サイト集 Webデザイン制作の参考になるステキなWebサイト･LPを集めたギャラリー。業種･テイストなどで絞込検索可能。最新トレンドをチェック！

Webデザインギャラリー・参考サイ…

Webデザインギャラリー・参考サイト集｜MUUUUU.ORG 縦長のwebデザインをがむしゃらに集めています。

Web Design Clip [L] LP・ランデ…

Web Design Clip [L] LP・ランディングページのクリップ集 Web制作の参考になるLP・ランディングデザインのリンク集

Step2　最初に感じたイメージを書き出す

最初にサイト全体を見て感じた印象を書きましょう！

ここでどう思ったのか？は作成者が狙っているテイストだと思っています！
この部分が根幹になるので、パッと見て感じたことを書いていきましょう！

Step3　フォント・余白・配色・あしらい・レイアウトをチェックする

ここからデザインの深掘りをしていきます！言語化の練習です！

フォント

Google Chromeの拡張機能でフォントを調べられるので、活用して調べましょう！
▼おすすめの拡張機能

あわせて読みたい

WhatFont – Chrome ウェブストア The easiest way to identify fonts on web pages.

使用されているフォントから深掘りしていきます！

例えば、 https://naganoanzen.jp/　こちらのサイトで見てみると

・ゴシック体でウェイトが太め
→どっしりしていて安心感を感じる
→（なぜ？安心感があるのか）自動車のサイトで安心感を売りにしているから！

このぐらい「なぜ？」で深掘りしていくと、自分の中でデザインの引き出しが増えていきます！

余白

margin（要素外の余白）、padding（要素内の余白）を調べる！

Google Chromeの拡張機能で余白を調べられるので、活用して調べましょう！
▼おすすめの拡張機能

あわせて読みたい

Dimensions – Chrome ウェブストア A tool for designers to measure screen dimensions

ただ、こちらの拡張機能で全ての余白がわかるわけではないので、「このデザインいいな！」って思ったものはFigmaで正確に余白を測ったりしています！

余白を調べたら深掘りしていきましょう！
「この雰囲気にしたいから、このぐらいの余白で表現している！」とわかるようになります！

例えば、ぎゅっと余白感がない場合は、緊張感が出るデザインに、ゆったりとした余白はエレガントさや落ち着いた雰囲気を出せます。

余白をもっと知りたい方はこちらがおすすめ！
▼おすすめの本
けっきょく、よはく。

配色

メインカラー・アクセントカラー・フォントカラー・背景色を調べる！

色には、それぞれ固有のイメージや機能があります。

上の表のように、色から読み取れるものが多いです！
例えば、コーポレートサイトで青を使用していると「誠実、信頼、堅実」を表現したいのかな？と深掘りできます！

また色の組み合わせによっても、変わります！
日本カラーデザイン研究所の「イメージスケールの基本」がわかりやすいので、おすすめです！

組み合わせる色によって「どうイメージできるか」が言語化されているので、ぜひ見てみてください！

あしらい

どのようなあしらい（装飾）が使用されているのか、調べる！

あしらいで、デザインに持たせたい雰囲気にすることや視線誘導ができます。
例えば、見出し周りにあしらいが多いと見出しに注目してほしいとわかります。（視線誘導）

斜めの画像の場合は、シャープさ、スタイリッシュさを出したいことがわかります。

あしらいを深掘りしていくことで、「この雰囲気に対して、このあしらいを使用しているのか！」と新たな気づきもできます！
あしらいでインプットできる情報が多いので、いろんなサイトを見て分析していきましょう！

レイアウト

パッとデザインをみて「私今ここみたな？」って思ったところを見つける！

その部分に注目してほしいから、レイアウトが工夫されているはずです！
例えば、周りに余白があるから、文字のサイズが大きいから、人が写った画像だからなど！

「なんで私ここに注目したのかな？」を深掘りしていくとさらにデザインの強弱がわかるはずです！

強を見つけたら、弱を見つけて、「この部分を目立たせたいから、ここが控えめなのかな？」と分析して、「このサイトで伝えたいことは強の部分？なんで？」とさらに深掘りしていきましょう！！

Step4　表現の仮説を立てる

細かく分析した後は、その表現からどんな効果が得られるか？を深掘りしていきます！
「その印象をなぜ与えたかったのか？」問いかけましょう！

例えば、「誠実・安心感な印象を与えている」と感じたら、手厚いサービスが受けられ、安心して任せられそうと思います！そうすると今度サービスを利用したいときにお問い合わせに繋がる！という効果が現れるかもしれません！

ただ、「こんな印象を与えている」で終わるのではなく、印象・表現からどんな効果を与えられるか？の部分まで深掘りしていくことで、サイトの目的が見えてきます！

Step5　デザインのストックをする

ここでサイトをみて「このデザインいいな！」と思った箇所をストックしていきます！
スクショであとから書き込んだり、figmaでサイトを並べていいと思ったところを書いたりなど、自分だけのデザイン手帳を作ってみてください！

集めるポイント
マウスオーバー、ヘッダー、パンくず、見出し、ボタン、問い合わせ、フッター、スライダー、スマホメニュー、PCとSPのデザイン変更点、など

このデザインいいなと思ったり、LPだと各セクションで集めたり！など自分に合わせて作ってみてください！！

3 1ヶ月間サイトレビューをした結果

2023年の4月から、「デザインのスキルアップ」をしたいと思い1ヶ月間サイトレビューをしてみました。

感じた効果

私はこのぐらいの効果を感じました！
時間の短縮によって時給単価があがり、言語化もスムーズにできるようになったりなど、デザインレビューし続けてスキルアップできました！

終わり

最初にお伝えしたように、デザインレビューには正解がありません！
同じサイトでも人によって感じ方にはばらつきます！あなたがどう感じたかの部分を深掘りしてください！！

そうすることで、言語化できたり、スキルアップにつながります！ぜひデザインレビューをやってみてください！

デザインレビューの方法やこの記事に質問がある場合は、Xから受け付けているので、ご連絡ください！
また、日々感じたことをつぶやいてるので、ぜひフォローしてください〜！