crageのデザイナーが実践するWebサイトレビューの方法
こんにちは、デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブカンパニー、crage（くらげ）株式会社 デザインチームのAです。
今回は、個人的に実施しているWebサイトレビューの方法と、レビューの際に意識していることをご紹介します。
デザインレビューを行うことで、引き出しを増やしたい、自分のデザインにマンネリ化を感じている、またはデザイン表現の言語化を強化したい、といった悩みを持つデザイナーの参考になれば幸いです。
レビューに使用しているツール「notion」
レビューするためのツールはnoteやFigmaでもいいと思います。
私がnotionを利用した理由としては、
無料で使える
同じアカウントならスマホやPCから気軽に入力ができる＝通勤時間でも記入できる
カスタマイズ次第で、業種やテイストでの絞り込みができ、過去のレビューを探しやすい
オリジナルのテンプレートを登録できるから複製の手間が不要
….といったメリットで選択しました。（notionの回し者ではございません）
デメリットは、レビューテンプレートを整える手間が必要なことです。
とはいえ、notionではいくつかテンプレートが存在しているので、ありがたく利用しましょう。「デザインポートフォリオ」系のテンプレートから使いまわすと手軽に利用できると思います。
レビューの目的・背景
ちょこっと余談ですが、私がWebサイトレビューをする理由を説明します。
私は元々インハウスデザイナーで、限られたテイストのデザインばかり着手していました。インハウスデザイナーだと会社が持つ事業内のデザインのみ携わるので、かっこいい系・可愛い系など触れられるデザインの方向性は少なくなります。そして携わるデザインが固定化されると、インプットするデザインもまた固定化されていきます。
将来性を考えるとデザイナーとしてよろしくない環境だと思い、クライアントワークに携わるcrageへと飛び出すことにしました。ただ、デザインの方向性の視野が狭いことが足を引っ張ることはわかりきっていたことなので、自分の引き出しを増やすために、重い腰を上げてWebサイトレビューを行うことにしました。
補足ですが、当時Twitterで拝見したWebサイトレビューを行っている方のnoteを参考にして取り組んでいます。
私がレビューする目的は２つあります。
様々なデザイン（トンマナ＆あしらい）のテイストをインプットする
流行のデザインを知る
crageには個人が目標設定し、その達成度を評価する制度があります。私は個人目標を利用して取り組んでいるため、単にレビューをまとめるだけではなく、デザイナーのみの定例で２週間に１回ほど、レビューしたポイントをアウトプットしています。
※15〜30分ほど時間を頂いているのですが、チームメンバーからも好評なようでした。
参考にしているWebサイトまとめサイト
次に、レビューするサイトを探すための、Webデザインまとめサイトをいくつかご紹介します。
Webサイトごとに掲載されているデザインに偏りがあるので、レビューする際はなるべく１つのサイトに偏らず、下記まとめサイトから交互に探すようにしています。
①Good Web Design
おしゃれでクール、最新の流行を取り入れたサイトが多めです。国内外のWebサイトがあります。気になったらテイストから類似デザインを探せるのが特徴です。
②SANKOU!
国産の、LPやスマホ特化型のデザインも多くあるサイト。国産ということもあり、地に足ついたデザインが多く、実際の制作に参考として取り入れやすいです。
③Awwwards
最先端を走る世界中のWebデザイナーが入賞を目指したり評価し合うアワードサイト。
3Dやアニメーションが多分に使用しており、日常的な制作の参考にするにはかなりハードルが高いサイトが多いです。ただ、１年くらい当サイトを見続けていると、国産サイトがだんだんとAwwwardsの入賞デザインを取り入れている変化がわかります。
④制作会社の実績から探す
稀に、サイト制作の経緯を記事状に紹介している制作会社があります。
サイトがどのような経緯でできたか、どうしてそのようなデザインにしたかを把握しながらデザインを見ることで、自分の想像にはなかった新しい表現方法や思考をインプットすることができるのでオススメです。
レビューの際に意識していること
次に、私がレビューする際に意識していることをご紹介します。
見てわかるような、デザインの良し悪しを列挙するだけでは勿体ないです。（時間がない時私もやってしまいがちなのですが...。）
せっかくなら「なぜそうしたのか」を思考することで、記憶の定着と思考する力を鍛えましょう💪
意識①：ポジティブな言葉で褒める
「褒めよう」と意識することで、デザインの新しい良いポイントを見つけやすくなります。
否定系の言葉（〜していないから良い）ではなく肯定の言葉（〜しているから良い）を使いましょう。その方が言葉がシンプルになるので人に伝わりやすく、またポジティブな言葉の方が気分がいいので。
もし明確にダメなポイントがあったら「どうしてダメなのか」を、自分の感性ではなく、どうしてダメなのかの理由を言語化しましょう。
意識②：理由を考える
レビューするサイトが現在のトンマナになった理由や、またこのモーションになった理由を考えます。また、その際に、サイトの想定ターゲット、サイトの目的（サービス認知拡大、採用強化など）を調べたり仮説を立ててみるとヒントが得られやすくなります。
どうしてもデザインの理由が思い浮かばない場合は、ChatGPTに現状のデザインの特徴を伝え「メリットを教えて」と聞くとヒントを得られる場合もあります。ただ適当なことも言うので信じすぎないように。
意識③：疑問を作る
これはデザインの雑学を増やすために実施しています。
例：
幾何学模様を見つけた→幾何学模様には名前や種類があるのか調査。
最近よく見かけるデザインには名前があるのか。どんなメリットがあるのか。
フォントは、統一の線の太さに見せるため微調整がされているが、実際は縦横の太さが異なる。どんな錯覚の対策なのか。
名称やパターン、流行デザインに名称がつくことで提案時の引き出しが増えます。なぜなぜ期になったつもりで疑問を持ちまくりましょう。
レビューの着眼点
ここまで長くなりましたが、普段使用しているテンプレートの項目と、具体的に何を記載しているかをご紹介します。
ただ、アウトプットする中で反応が微妙な項目や、自分のレビューに不満がある項目は随時変更を加えています。
▼レビュー項目
①良いと思った印象
②使用フォント
③配色
④デザインポイント
⑤スクショ
⑥総評
↓こちらが実際のテンプレートと記載項目です。↓
具体的な記載内容とその理由は下記です。
①良いと思った印象
レビューするサイトとしてピックアップした理由を記載します。
理由例：
写真やテキストなど情報量が少ないけど色やあしらいでリッチに見せている。
UIが親切な設計になっている。
最新デザインのOBENTOやY2Kテイストを取り入れている。
など。
レビューするWebサイトを選定する際、「このサイト制作したことないし、なんか雰囲気いいジャン！」でピックアップすると、UIが微妙だったり、よく見ると雪崩が起きているサイトを捕まえてしまい、せっかくレビューを始めたのに褒めポイントがほとんどなかった事態になります。まず初めに「なぜこのサイトが良いと思ったのか」を整理することで、雰囲気ではなく、確実に自分の力にするため、しっかり何が良いと思ったのか言語化してサイトを選べるようになれます。
②使用フォント
フォントの知識やレパートリーを知るための項目です。以下のように調査を行っています。
▼調査方法
検証ツールを使って使用されているフォントを調べる
制作でも活かせるか知るため、配布サイトを見つける（Googleフォント／Adobeフォント／それ以外）
フォントのコンセプトや制作経緯、特徴を調べる。
※配布サイトに記載がない場合は、フォントの公式サイトから見つけられます。
どの時代を意識して作られたフォントなのか、鱗や曲線、懐といったこだわりを知ることで、フォント選択のヒントになるかもしれません。
余談ですが、知って面白かったのはNotoSans＝No豆腐（フォントがない時に表示される◻︎をなくすという意味）でした。
③配色
配色についてのルールや、色の微調整ポイントを学びます。
▼調査方法
検証ツールで使用されている色を拾いあげる
Googleでカラーコードを検索したり、Figmaなどのデザインツールに色を入れて、HSBベースで色を数値で見る。数字で見ることで黒でも彩度を３ポイントだけ下げているなど微調整ポイントが視覚化されます。
集めた色のトーンが何かをチェックする（例：ビビットトーン、ダルトーンなど）。サイトから感じられる雰囲気は、どのトーンで再現されているのかパターンをインプットします。
主に使用されている色が色相環のどこに位置するか、配色ルールをチェックする（例：ダイアード、トライアドなど）
３，４は、配色に慣れている方はスキップして良いかと思います。
また、写真の色彩にも注目してみてください。写真にフィルターを重ねたり、一部被写体の色をプライマリーカラーにするなど、写真を含めてサイト全体の色彩が統一されていることがわかります。
④デザインポイント
いよいよあしらいやモーションなどのデザイン的な要素を見ます。
TOPページから下層ページ、メニュー画面など、サイト全体を見て、デザインの良いと思ったポイントをスクショに撮りまくり、Notionに貼ります。モーションもスクショで録画して貼ります。
そして、ポイントごとになぜ自分が良いと思ったのか、どうしてこのデザインになったのか理由を考えて記載します。
ちなみに、私が良い基準としているものは下記です。
ユーザーにとって便利なUI
例：カルーセルの番号を囲む円が次のスライドまでの秒数を示している。１つにまとまっているので、画面上の要素が少なく、スッキリしていて且つわかりやすい。雰囲気を出しているあしらい
例：イラストの掠れやガタガタしたアウトラインがまるで木版画を意識している。カジュアルで温かみのある和風な雰囲気が感じられる。ぱっと見わからないような細かい工夫
例：ラベルの色が不透明度100％ではなく70%に抑えることで、最も強い色である黒が過度に主張しすぎないようにしている。最新のトレンド
例：右から左に流れるハッシュタグや罫線を目立たせるデザインが、最近若者むけデザインに流行りのY2K感を出している。
⑤スクリーンショット
ここではレビューしたデザインのサイト全ページをスクリーンショットにして添付します。
割と頻繁にサイトは変わってしまうため、記録として保存しておきましょう。
⑥総評
デザインをレビューしてみて、実際にどんなWebサイトの制作に取り入れられそうかを、想像して記載します。
１年半レビューを続けて、身に付いたこと
始めた頃は、効果はあるのかと疑問に思う日々でしたが、やってみると、自制作やチーム内のデザインチェックをしている際などのデザインアイディアが欲しい時に、レビューしたサイトからすぐにアイディアを浮かぶ効果がありました。
また、チーム内に発表することで、自分の視点とは異なったデザインの仮説を聞くことで、新しい視点と知識が得られました。
※ちなみに、crageではレビューは「やりたい人が勝手にやっているだけ」なので強制ではありません。
Webサイトレビューはやって損はないです。
私のように引き出しを増やしたい人、自分のデザインにマンネリ化を感じたり、デザイン表現の言語化を強化したい人にはオススメです。
この記事がWebサイトレビューの参考になれば幸いです。
crageのデザイナーに興味を持った方は、ぜひご連絡お待ちしております！
crageでは現在メンバーになっていただける方を募集中です。
ご興味ある方はぜひエントリーください！
新たな才能、求めています。
＼ デザイナーチームページもあります ／
＼ エントリーはこちらまで ／