Webサイトトレースを20個やってみた結果

最近デザイン力不足を痛感する機会が多く、初心に帰ってサイトトレースをすることにしました。
期間を決めて取り組み、トレースできたサイトは20サイト。
今回はトレースをしてどうだったかをまとめたいと思います。

サイトトレースを行ったきっかけ

これまでWebデザイナーとしてサイトを制作した経験はありますが、制作スピードが遅すぎると感じていました。
サイト1つをどのくらいの時間で作れるか聞かれる機会があり、その際にお伺いした目安がトップページのみなら1営業日、遅くとも3営業日以内には初稿が作れるのが目安とのこと。

もちろん必要とされるスピードは環境によって異なりますが、私は到底そんなスピードでデザインを作ることができません。

何に時間がかかっているのかを自分なりに分析したところ

こんな感じで、作る前の下調べに時間がかかっていることに気がつきました。

サイトトレースの目的

というわけで目的を決めてトレースをすることに。
トレースすること自体を目的にしては意味がないので、下記のような要素を観察しながらトレースをしました。

ざっくりやり方

トレースにはFigmaを使用。
比較的スタンダードなデザインをインプットしたかったためコーポレートサイトをメインに集めました。
(複雑なアニメーションがついたサイトやレイアウトが特殊なサイトは対象外としました)
検証ツールも使いながらなるべくピクセルパーフェクトを心がましたが、あまり細かいズレは気にせず1個2時間以内で終えられるようにしました。

なおトレースしたのはトップページ。トレースする要素は色・フォント・レイアウトのみで装飾に使うイラストや写真までは再現していません。

サイトトレースを20個やってみた結果

フォントに迷う時間が減ったと同時にフォント沼にハマる

まず課題だったフォント選定に時間がかかる問題ですが、トレースを通してかなりフォントの知識を増やすことができました。

同じフォントを使っているのに印象が全く違うサイトを見つけると楽しかったり。
（下記のサイトは見出しにbrandon-grotesqueを使ってます)
https://corp.every.tv/
https://she-inc.co.jp/

だんだんフォントの特定作業が楽しくなってきて、Adobeフォント・Googleフォント・デバイスフォント・フリーフォントから自分用に一覧表みたいなのを作りました。(汚すぎますがいい感じのフォントを見つけたらイラレに追加していく形でざっくりと。現在これをFigmaで綺麗にまとめなおしているので準備出来次第公開しますがんばるぞ)

新たなcssの設定を知れたり、Figmaをより使いこなせるようになった

フォントサイズとletter-spacingの設定は合わせているはずなのになぜかぴったり重ならないサイトがいくつかありました。

例えばLINEヤフー株式会社のサイトやキリンホールディングスのサイトには
font-feature-settings: “palt”;
が設定されていて、自動的にカーニングしてくれるcssです。
これによりテキストをベタ打ちするよりも非常に美しくなります。

あとはYakuHanJPという記号を自動的に半角にしてくれるフォントの存在もはじめて知りました。

Figmaで自動カーニング設定とyakuhanjpを再現する方法もあります。
こちらの記事を参考に設定しました。

こんな感じでFigmaの機能を知るきっかけにもなり、手を動かすと新たな発見があるなーと思いました。

他にもこんな良かったことが

ヘッダーやフッターなど、どんなサイトにもほぼ必ず存在するコンテンツのデザインの引き出しや、配色の引き出しが増えました。

また、なぜこのデザインなのか？考えるクセもついてきました。ビジュアル面の美しさだけでなく、誰に何をどんな目的で伝えるためにこんな情報設計になっているんじゃないか、こんなデザインなんじゃないか？と仮説を立ててサイトを見るようになりました。

逆にデザインのイマイチな部分にも気づくように。
この業界のサイトでメインビジュアルにこの写真を使う意図は？
この採用サイト、デザインはめちゃくちゃかっこいいけど募集要項が見当たらない・・会社の住所も見当たらないから通勤圏内かどうか即判断できないのは候補者にとって応募するかどうかの判断材料をしっかり伝えられていないのではないか？
このサイトに訪問するユーザーは50代以上の方が多いと予想されるが、この文字サイズで読んでもらえるのか？など。

そしてUI・UX的な観点で使いやすいか？という視点も。
例えばリンクに下線が引いてあるデザイン。サイト内で統一されているのかと思いきや、リンクじゃないのに下線が引いてある箇所が。これではユーザーは間違えてクリックしてしまうかもしれない、サイトの読み込みが遅すぎて離脱につながってしまうのでは？などなど。

これまでビジュアルの美しさだけをなんとなく見ていましたが、様々な視点でサイトを見ることができるようになったのもトレースをしたおかげだと思います。

長期運用する場合どんなデザインパターンが必要か？ということも気づきやすくなった

トレースしたサイトの中には画面幅を変えると表示が崩れてしまっているものもいくつかありました。
また、おそらく公開後に情報が追加されデザインが崩れて見えるような箇所を見つけたりしました。

そのことからコーポレートサイトなど長期で運用・情報更新が発生することが想定されるサイトでは公開後の運用を考えデザインのパターンを考えておく必要があることに改めて気づきました。

ざっとですが、下記のようなデザインパターンを作成する必要があるのではと思った点をメモしておきます。

・画面幅が変わったときのデザイン
・ブログガード型のデザインでコンテンツ内の情報量が変わったときのデザインはどうするか(タグの数、タイトルの文字数、テキストの行数等)
・ボタンのサイズはPCSPで共通か、ボタン内のテキスト量が変わる場合幅は可変？固定？
・テキストのサイズはPCSPで共通か、最大最小の文字サイズは？
・ホバーしたときのパターン
・サイト表示時のアニメーションや画面遷移のアニメーション
・画面幅が変わったときにヘッダーメニューはどのように表示するか(PC版でもハンバーガーメニューを採用するか、大規模サイトでヘッダーメニューの情報量が多い場合SP版ではどのように整理すべきか)
・例えばメンバー紹介などで人員の入れ替わりがあった場合、更新は誰がやるのか、写真の差し替えだけで対応できるデザインなのか、それとも写真に特殊な加工をしたうえで掲載するのか
・リンクの個数が増えた場合、文字数が多い場合にレイアウトをどのように可変するか

デザイン力を上げたい人にトレースはおすすめ。ただし、トレース自体が目的にならないように注意

自分用の忘備録として書いたのでまとまりのない文章になってしまいましたが、以上がトレースをした感想でした。

個人的には様々な気づきがあったのでトレースをしてよかったです。

ただしトレースをすること自体が目的になり、デザインをなぞっただけで満足してしまうのはあまり効果的ではないと思いました。
(その点、デザインソフトの使い方が曖昧なレベルでトレースをすると、トレースしながらソフトの使い方を習得するので精一杯になってしまうと思うのである程度慣れてからトレースしたほうが良いのではと思いました)

今後はアニメーション(ホバーアニメーションやスクロールアニメーション)の引き出しがまだまだ少ないことを実感したのでコツコツ事例を集めていきたいです。

また、LPや採用サイトなどジャンルの違うデザインは全然見れていないので、様々なサイトを見て分析は続けたいと思います。

あとはサイトを作るときにトレースしたパーツをアレンジして使えるようなオリジナルのレイアウト集として使えるようにしたいなあ。(もちろん丸パクリはしないけど、ボタンのデザインだけがまとまってたらすぐ参考にできるからいいよね)

取り急ぎフォントのまとめを作って公開できるようにがんばります。それでは。