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

【デザインの言語化】サイトレビューの方法
こんにちは。
新卒でフリーランスWEBデザイナーになったカナです!
今回は「デザインの言語化 サイトレビューの方法」をご紹介します!
この記事をおすすめな人
  • デザインのスキルアップしたい
  • WEBデザインのインプットをしたい
  • デザインの言語化をできるようにしたい
私が実際に1カ月間毎日サイトレビューして、感じた効果を紹介しますので、ぜひ参考にしてみてください!
目次

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

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

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

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

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

サイトレビューで得られる効果
  • デザインの目を養うことができる
  • デザインの幅が広がる
  • デザインの言語化練習ができる
デザインを毎日目にすることによって、街の広告やチラシなどを見ると、「違和感を感じる」ようになります!

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

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

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

サイトレビューの方法
  1. サイトを選ぶ!
  2. 最初のイメージを書き出す
  3. フォント・余白・配色・あしらい・レイアウトをチェックする
  4. 表現の仮説を立てる
  5. デザインのストックをする
各ステップを詳しく説明していきます!

Step1 サイトを選ぶ

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

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

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

例)信頼できる・安心できる・清潔感がある・業界のリーダー的存在・温かい・クール・スタイリッシュ・素朴・親しみやすい・可愛らしいなど

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

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

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

フォント

明朝体・ゴシック体・サイズ・ウェイト・字間・行間を調べる!

Google Chromeの拡張機能でフォントを調べられるので、活用して調べましょう!
▼おすすめの拡張機能
使用されているフォントから深掘りしていきます!

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

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

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

余白

margin(要素外の余白)、padding(要素内の余白)を調べる!

Google Chromeの拡張機能で余白を調べられるので、活用して調べましょう!
▼おすすめの拡張機能
ただ、こちらの拡張機能で全ての余白がわかるわけではないので、「このデザインいいな!」って思ったものはFigmaで正確に余白を測ったりしています!

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

例えば、ぎゅっと余白感がない場合は、緊張感が出るデザインに、ゆったりとした余白はエレガントさや落ち着いた雰囲気を出せます。
余白をもっと知りたい方はこちらがおすすめ!
▼おすすめの本
けっきょく、よはく。

配色

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

色には、それぞれ固有のイメージや機能があります。
上の表のように、色から読み取れるものが多いです!
例えば、コーポレートサイトで青を使用していると「誠実、信頼、堅実」を表現したいのかな?と深掘りできます!

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

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

あしらい

どのようなあしらい(装飾)が使用されているのか、調べる!

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

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

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

レイアウト

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

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

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

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

Step4 表現の仮説を立てる

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

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

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

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

ここでサイトをみて「このデザインいいな!」と思った箇所をストックしていきます!
スクショであとから書き込んだり、figmaでサイトを並べていいと思ったところを書いたりなど、自分だけのデザイン手帳を作ってみてください!
集めるポイント
マウスオーバー、ヘッダー、パンくず、見出し、ボタン、問い合わせ、フッター、スライダー、スマホメニュー、PCとSPのデザイン変更点、など
このデザインいいなと思ったり、LPだと各セクションで集めたり!など自分に合わせて作ってみてください!!

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

2023年の4月から、「デザインのスキルアップ」をしたいと思い1ヶ月間サイトレビューをしてみました。
感じた効果
  • サイト作成するときの参考サイト探しの時間が短くなった
  • デザインを提案するときの言語化に悩まなくなった
  • 面談の時に、「こんなサイトもいかがですか?」とすぐに提案できた
  • デザインの流行を知ることができた
私はこのぐらいの効果を感じました!
時間の短縮によって時給単価があがり、言語化もスムーズにできるようになったりなど、デザインレビューし続けてスキルアップできました!

終わり

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

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

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次