見方編

【完全自己流】 #1日1サイトレビューの見方

AMI🍓

こんにちは。AMI（@ami_i_design）です。
本日は#1日1サイトレビューでレビューをするときに、どんな視点でまとめているかをお伝えしたいと思います。

1日1サイトレビューとは？、レビューの手順についてはこの記事にまとめています。よかったら見てください。

今回はサイトをどんな視点で見ているかお伝えします。

レビューのルール

レビュー内容に関して、ルールは決めていません。
自由です！
15分で感じたことをそのまま書いています。
（第一印象とか、どこが楽しいとかかわいいとか）
とりあえず3つ以上書ければいいかなぐらいに思っています。
レビュー内容にルールを決めていないので、ストレスなく続けられています。

レビュー内容はその時に勉強していることに左右されたりしますが、
何日も続けているうちに、だいたい毎日見るポイントが決まってきました。
そのポイントを本日お伝えしたいと思います。

ちなみにnoteの記事には書かないことが多いですが、だいたいのペルソナやターゲットを考えながらレビューをしています。

1.メインビジュアルについて

メインビジュアル（ファーストビュー）はサイトの印象を決める大事な要素なのでしっかり見るようにしています。

メインビジュアルについてはこちらの記事が参考になります。

・どんな画像を使っているのか、またはイラストなのか？
・余白はあるか、フルスクリーンなのか？
・グローバルナビゲーションの位置や項目
・どんなアニメーションを使っているか？
（スライドなのか動画なのか？スクロールを促すアイコンはあるか）
・どんなコンテンツが含まれているか

メインビジュアルでは、以上のようなことを見ています。

2.フォントについて

デザインにおいてフォントに迷うことが多いので、フォントについてもよく見ています。
フォントはWhatFontというGoogle Chromeの拡張機能を利用しています。

たくさんのサイトを見ているうちに、よく使われるフォントがわかってきたり、フォントの特徴をつかむことができてきました。
新しいフォントを発見することもあります。
欧文フォントは種類が多すぎて、全然覚えられません……

知らないフォントが出てきたときは都度ググるようにしています。
Adobe Fontの場合はまだアクティベートしていないものはアクティブにしたり、フリーフォントの場合はダウンロードするようにしています。

大体、メインフォントとして欧文フォントと和文フォントが1種類ずつ。
見出し用のフォントが1種類使われていて、合計3種類のことが多いです。
たまに数字用のフォントが用意されている場合もあります。

フォントについては、大きさが何ptなのかや太さを検証モードを使って調べることもあります。

3.SP（スマホ）での表示について

私は基本的にPCを使ってレビューをしているので、検証モードを利用してSPでの表示を確認しています。
スマホファーストの時代ですからね。

・PCで変わった表現を使っている場合に、SPでどうしてる？
・SPでのメインビジュアルは？
・グローバルメニューをどうしているか？
・SPでの固定表示は？
・何か省略されてる？

以上なようなことを確認しています。

4.構成について

LPの場合はとくに構成を注意してみています。
Webサイトの場合は、TOPのコンテンツをどこまで充実させるかを確認しています。

・結果的に案内したいものをどのような順番で案内しているか？
・TOPに含まれているコンテンツ
・NEWSはどこにあるか？
・動画がある場合はどこにおいているか？

どこにどんなコンテンツをおくかを常にチェックしていることで、
ワイヤーフレームを作ることが以前より楽になりました。

5.配色について

配色はどんな色を使っているかというよりも、何色使っているかを見ています。
サイトを見て色を数えるのは大変なので、ツールを使っています。

Twitterでｶｽﾐさんが紹介していて、見つけました。

フォントも調べられるのですが、個人的にはWhatFontが好きです。
文字色と背景色が一緒に見えても、微妙にちがう時もあったりします。

その他

その他には、検証モードを使って気になる箇所をどうやって表現しているかを調べたりしています。
（imgで表現しているのかコーディングで表現なのか？コーディングならどんな手法？）

ページのソースを表示して、HTMLの書き方やコメントの使い方を見たりすることもあります。
（これをやるのはほんとにたまに）

初心者におすすめの手法

いろいろ紹介してきましたが、いきなりそんなに無理！とか
デザインの勉強を始めたばかりですって人には「あるあるデザイン」という本がおすすめです。

この本はよくあるデザイン手法をおもしろいフレーズで紹介しています。

まずはこの本を読んで、あるある手法を覚えて、
レビューしたサイトにどのフレーズが使われているか観察してもいいと思います。
私はこの本を読んで、デザインの幅がさらに広がったり、見方が変わった気がします。

最後に

最後までお読みいただき、ありがとうございます。
相変わらず、長くなってしまいました。

私なりのレビューの方法をまとめてきました。
誰の役に立つかわからないですが、役に立てれば嬉しいです。


デザインの勉強をするために活用させていただきます。