1日1サイトレビューを実践してWebデザインを言語化しよう

しゅん（@shun_webdesign）です。こんにちは。
雨が続いて蒸し暑い1日が続きますね。

今回はツイッターでツイートしてる「1日1サイトレビュー」を実践しましたので
自分のレビューの方法を紹介させていただきます。

※サイトレビューに正しい方法はないのであくまでボク個人でのやり方であり、推奨という訳ではありません。

1日1サイトレビューとは

1日1つWebサイトを観察し、レビューすること。
ツイッターで「#1日1サイトレビュー」とエゴサーチすると出てきます。

僕自身、Webサイトのデザイン作りに関して引き出しの少なさと
デザインをうまく言葉で表現できる言語能力の乏しさを感じていたため、Twitterでデザイナーの方がやっている「1日1サイトレビュー」を実践しました。
レビューの方法とルールはこの後説明させていただきます。

ルール

今回サイトレビューにあたり最低でも1ヶ月続けることを目標とし、
自分が今後どのようなサイトを作りたいのかというのを考えて結果、以下をルールとしました。

ボクのサイトレビュールール

サイトを選ぶ時はギャラリーサイトから
➡️デザインの良し悪しがわからないため
スマホからサイトを確認し決める
➡️スマホからのアクセスが多いため
日本で作られたサイトをレビュー
➡️日本人向けのサイトを想定しているから
レビューはできるだけ具体的に
➡️言語化の訓練

— し ゅ ん | web design (@shun_webdesign) June 8, 2020

サイトを選ぶ時はギャラリーサイトから選択

Webサイトは数えきれないほど数がありますし、地元の美容院や普段使ってるECサイトなど身近なサイトをみてもデザインの明確な良し悪しの判断ができません。

Webデザイン良し悪しが明確にわかる方法として良質なWebサイトやLPを紹介しているギャラリーサイトを使用するとレビューしやすくなります。

また、ギャラリーサイトのサイトを閲覧しながらサイトを選ぶことでたくさんのWebサイトに触れることができるメリットもあります。

スマホからサイトを確認し決める

近年はスマートフォンの登場でPCより圧倒的にモバイル端末からのサイトアクセスが増えています。

PCに比べてスマートフォン向けのサイトは動き多いアニメーションやエフェクトは制限されることが多いため、
PCからサイトを閲覧した後、スマートフォンから見たらPCとデザインやエフェクトが違い、魅力を感じないなんてこともあります。

日本で作られたサイトをレビュー

これは僕ら日本に向けたアクセスを想定しているサイトのためです。海外のサイトは記載されてるテキストが英語のものが多く、アクセスを想定している人が違います。文字の構成やデザインも日本のサイトとは根本的に違うものが多いので今回はレビュー対象外としました。

レビューはできるだけ具体的に

レビューが感想やコメントにならないように具体的にどこが良いのかというのは大切に感じました。
よくあるのが「お洒落」「かっこいい」「可愛い」これはサイト内のキャラクター、写真、イラストぐらいに留めた方が良いです。
というのも誰を想定し作ったサイトなのか、アクセスを多くするため、滞在時間伸ばし離脱率を低くするため等のバックグラウンドが読み取りにくくなってしまうためです。

WebGL等アニメーションを多様したサイトは禁止。

WebGLやアニメーションのエフェクトは見ててすごいのはわかるのですがどうしてもエフェクト中心の感想になってしまうので禁止しました。

レビュー方法

レビューにかける時間ですが約1,2時間かけていました。
最初は言語化が難しいと時間がかかってしまうかもしれませんが慣れていけば徐々に早くなっていくと思います。

サイトの選び方

サイトを選ぶ時はギャラリーサイトから選びましょう。『ギャラリーサイト』と検索すれば沢山表示されます。

ギャラリーサイトに掲載されてるサイトは似たり寄ったりなサイトが多いかもしれませんがギャラリーサイトによって趣味嗜好が異なるサイトがあるので3つほど見比べながら選ぶとレビューできるサイトの幅が広がります。

Web制作の参考におすすめギャラリーサイト7つ

レビューの書き方

レビューを具体的に書く上でWebサイトの各パーツやレイアウトの種類、スクロールについて調べてみると書きやすくなります。

僕はサイトの特徴、気になった箇所を箇条書きに書いて各パーツのメリットについて調べました。
「どうしてこのデザインにしているのか？」製作者側のバックグラウンドを調べてみましょう。

サイトを見る時は大体以下を確認してます。

ツイッターで投稿したい場合、140文字で収めるは難しいのでレビューを書いたものを画像として投稿しても良いと思います。

1ヶ月の経過

ボクが上記の方法でサイトレビューを1ヶ月続けて思ったことが以下です。

こちらもオススメ

2021年7月15日 【Adobe XD】WebサイトトレースをしてWebデザイン力を上げる

感覚的にデザインの善し悪しがわかってきた

日頃からギャラリーサイトに掲載されてるWebサイトをたくさん見ることでデザインを見る際に比較しやすくなります。

サイトのパーツ名に詳しくなった

サイトのどの部分が具体的にいいのか？なんという種類のパーツなのか？
という疑問を持つことでパーツの種類ごとに検索し、サイトの滞在時間や視覚効果も変わることがわかりました。

ユーザー視線を気にするようになった

以前はWebページの見た目の良さを見て判断することが多く、利用者の感情は考えにほぼありませんでした。

良いサイトは見ても使っていても心地良いので自己満足では無く、Webサイトはユーザーに使ってもらうものという考えを前提に持つようになりました。

徐々に言語化できるようになってきた

これは完全に言語化できるようになったというよりは、レビューの言葉の言い回しやパターンが増えたと思ってます。
実際にレビューしていくことで過去のレビューを見ると自分のレビューパターンがわかってきます。

ファーストビューが非常に重要

ギャラリーサイトのサムネイルなどを判断してサイトを見ていますがファーストビューは利用者に取って顔であり、第一印象なのでファーストビューで見える情報や印象に残るインパクトは非常に重要と感じました。

まとめ

無理せずサイトレビューを行いましょう。最後まで見ていただきありがとうありがとうございます。