2019.09.08

Webデザイン100トレース


こんにちわ!最近はフロント開発も担当させていただいてます、Yamamotoです。
今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。

エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。

目次

  • なぜ Webデザインを学ぼうと思ったのか
  • デザイントレースについて
  • 100トレースして学んだこと

なぜWebデザインを学ぼうと思ったのか

ざっくりですが、実務を行いながら以下のように思うことがありました。

  • 細部のデザイン指示がなく、開発の手が止まってしまう
  • どう実装するか目線の発想・提案しか浮かばない
  • 綺麗なコードだけではなく、視野を広げてより良いものを作りたい

などなど...

デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効率化はもちろん、純粋に作り手として、デザインの領域までアウトプットしたいと思うようになりました。

デザイナーさんに相談したら「まずはWebサイトをトレースしてみるのはどう?」とアドバイスをいただいたので、実践してみました。

デザイントレースについて

トレースをすることによって得られる効果やトレース方法、ポイントについてなどご紹介したいと思います。

  • トレースの効果
  • トレースの仕方
  • トレースのポイント

トレースの効果

そもそもトレースとは、既存のデザインをそのまま忠実に再現、模写するという試みです。

期待値としては...

デザインの型、ルールを知る

近接、整列、反復、コントラストなど基本的なルールを、手を動かしながら行う事で、感覚的にも身に着ける。

また、今流行りのサイトをトレースしていくことで、デザインのスタンダードなクオリティーやパターンを把握し、引き出しをとにかく増やす。

ツールに慣れる

XD・Sckech・figma・photoshopなど、何かしらのデザインツールに慣れて作業効率をUPさせる。

デザイナーの思考法を学ぶ

エンジニアにはない発想論が、デザイナーにはあると思います。それは魅せるデザインから、問題解決のためのデザインなど様々です。

Webサイトは、デザイナーが試行錯誤を繰り返した末の成果物(ベストプラクティス)なので、そこから学ぶことは多くあります。

トレースの仕方

実際に、僕が行ったトレース方法の流れをご紹介します。

デザインツール

初めにツールを決める必要がありますが、僕はAdobe の XDを使用しました。
多くの現場で実際に使われており、初心者でも比較的に扱いやすく、基本無料で使用することができます。

操作方法については割愛させていただきますが、公式サイトにハウツー動画が公開されているので、是非ご参考ください。

① サイトを選ぶ

今回は100サイトが目標なので、下記のWebデザインまとめサイトから、ジャンルごとに10サイトづつピックアップし、TOPページをトレースしました。

大手企業や、日本だけでなく海外のサイトも多く掲載されているので、眺めているだけでも楽しいです😁
是非、自分が気に入ったサイトを選んでみてください!

② サイズを決める

いざ選んだサイトをトレースするにあたり、基準となる画面サイズを決める必要があります。
今回は、

  • PC : 1280px
  • SP : 375px

に決めてトレースを行いました。

letters

サイズについての考え方は、下記サイト等を参考にさせていただきました。

8の倍数という考察や、実際にPCのワイドモニターでサイトを閲覧する際に画面いっぱいではなく、複数のブラウザを立ち上げて閲覧することも多いので、ちょうど良いサイズではないでしょうか。

また、SP版のサイズに関しては、実際のLP制作では750px(Retina対応)等が多いかもしれません。デバイスの進化に伴い基準もどんどん変わっていくので、常に最適なサイズを意識していく必要があると思います。

③ スクショを撮る

次に、トレースするサイトのスクショを撮りXDのアートボードに貼り付けます。Chromeの拡張機能等を使うと、簡単にスクショを撮ることができるのでおすすめです。

letters

また、フォントやカラーは何を使っているかを調べるのも、重要なトレース作業です。
こちらも、便利な拡張機能がたくさんありますので、下記ご参考ください。

④ アートボードにパーツを配置していく

準備ができたら、いざトレースを行っていきます!
スクショの横に新規アートボードを並べて、パーツサイズを測りながら作成・配置していきます。

letters

ですが、最初は貼り付けたスクショの上に、直接配置していく方が早いかもしれません。

letters

上の写真では、サンプルとして目立つ色をつけていますが、画像やフォント、テキストや色もまったく同じにトレースしていきます。
その際、探す手間を極力省くため、既存サイトから画像やテキストはコピペしましょう。

画像は右クリックのメニューで保存するか、ChromeデベロッパーツールのApplication → imagesで一覧を見ることも可能です。

letters

駆け足ですが、トレース作業の流れは以上です。

最初は、サイトのデザインやツールにもよりますが、1サイト2〜3hほど作業時間が掛かっていました...ですが、慣れてくると作業スピードも上がってきますので、是非チャレンジしてみてください👍

トレースのポイント

次に、トレースする際に意識して取り組んだポイントです。

ショートカットを使う

せっかく新しいツールを使って取り組むため、全ての作業をショートカットで行おうという気持ちで取り組みました。
理想は、デザインの商談中にプロトタイプを作り上げれるようなスピード感です。

デザインの本を読む

トレースの合間に、本も何冊か読んでみました。
知識をつけることで気づきの視点が増え、より多く学びを得られるようになったと思います。 読む前と後では明らかに違いを感じたので、ぜひトレースと並行して読んでみてください。

下記、おすすめの本です。

  • ノンデザイナーズ・デザインブック / Robin Williams
  • デザイン、新・25+00の法則 / William Lidwell
  • UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX / 安藤剛

観察する

思考停止してトレースを行っても何も得られないため、サイト全体から細部のデザインまで、じっくり観察します。

大切なのは、何を発信しているサイトなのかコンセプトを把握し、デザイナーは何をどう伝えようとしているのかを、考えて想像を膨らませることだと思います。

  • ファーストビューを見る

ファーストビュー(最初に表示される画面)はサイトの顔でもあり、ユーザーはそのページを見て、さらにコンテンツを掘り下げていくかどうかの判断をする、とても重要なページです。

letters

また、人はZパターンや、テキストの多いページではFパターンのように、ページを読み取り、興味深いキーワードを探す傾向があるようです。
どのように興味を引く工夫がされているかも観察します。

letters

アイキャッチやヒーロー画像も、重要なデザインの1つですね🧐
視覚パターンについては、こちらの記事がとても詳しく書かれています。
UX MILK 眼の動きのメカニズム

  • 細部のデザイン

ボタンに少し丸みがかかっていたり、パーツに影がついていないか、マウスホバー後はどのように変化するのかなどを見ていきます。

letters

letters

letters

  • その他

他にも見る箇所は無限にありますが、事前に観察ポイントを決めておき、気づいたことや良いと感じた点、逆にもっと改善できるところはあるのかなど...
最低5つは絞り出してみよう!など、トレース後に分析をまとめてみるのも良いかもしれません。

letters

以上が、意識して取り組んだポイントになります。

100トレースして学んだこと

身体で覚える

手を動かし考えながら学ぶことで、自然とどうデザインするかをイメージできるようになってきたことが、一番成長を感じたところです。

サイズや余白の取り方、色やコントラストなど。基本的なビジュアルデザインをイメージすることは、トレースを行う前では出来なかったことでした。

また、デザインの良し悪しに対して、なぜこうなるのか?を言葉にできるようになってきたのも大きな学びです。

letters

letters

流行のWebデザイン傾向

100サイトだけですが、国内・海外のサイト問わずデザイントレースを行ったことで、共通点や違いなど、いろいろな気づきがありました。

フォント

どのサイトからも、フォントの種類や使い方にとてもこだわりを感じました。

文章はセリフ体や明朝体を細字で使っていたり、見出しはデザイン書体で個性的にしたり、日本語と英語の相性の良いフォントなど...
サイトの印象を決める重要なデザイン要素の1部であるため、フォントだけでもとても奥が深いと学びました。

下記はよく使われていたフォントです。

セリフ
・Times New Roman, Rockwell.

サンセリフ
・Helvetica, Furuta, Proxima Nova, Gothem, Roboto.

SNS

全てのサイトに、何かしらのSNS連携がされていました。集客効果や、よりユーザーの利便性を高めるためにも必須のようです。
また、どのSNSをサイトに連携させるか、リンクまたは埋め込みなのかも、デザインの観点で考える必要があると思いました。

Js

こちらも、全てのサイトで使用されていました。
演出からシームレスな使い心地の表現まで、フロントでリッチな表現をするということは、これからも主流になっていきそうです。

どのような技術があるのか、良いプラグインは何かなど。技術を知った上でデザインすることが大切だと思いました。

構成

TOPページをトレースしていて思ったのは、他ページとの連携を考えてデザインをしなければならないことです。それは、情報アーキテクチャやコンテンツモデル、優先度をきめるなど…サイトの全体像から考える必要があるということです。
ここに関しては、これからもより深く学んでいきたいと思いました。

ただ、今回ジャンル毎にトレースを行いましたが、サイトの種類(コーポレート、EC、ブログ...など)によって、それぞれの構造や流行りのパターンがあると思ったので、これはまた記事にできたらと思います。

モチベーションの維持

トレースをしている時、慣れてくるとつい早く終わらせようと、作業的になってしまうことがありました。

目標を立て、日々継続して取り組むには工夫も必要です。

そこで、まだ早いと思いつつも...自分でデザインをしたい衝動があったので、架空のサイトをデザインしてみたり、実際にページリニューアルのお仕事を請け負ったりなど。
トレースの合間に取り組みました。

・既存のマイページを使いやすくしたい、という依頼。 letters

letters

自分が今どれくらい成長できているのか、足りない部分はどこなのか。
アウトプットをして知ることで、トレースをするモチベーションも上がり、やりきることができたと思います。

なりたい自分像を意識して取り組むことが、大切だと改めて思いました。

エンジニア視点

Webデザインを学ぶ中で、エンジニアの視点からも思うところがたくさんありました。

ブレイクポイント

ブレイクポイントは、レスポンシブの基準点になります。PCやスマホ、タブレットなど対応範囲を事前に決めておくことが大切です。

また、SP版LPを横幅750px(Retina対応)で制作した場合、コーディングは375pxの実機サイズで行います。全て1/2サイズで余白やフォントを設定することになるので、それを理解した上で、デザイナーはLP作成をする必要があると思いました。

箱を考える

エンジニアは、デザイナーから受け取ったLPを見て、箱をイメージしてコーディングをしていきます。

その際に、どのように作ろうか迷うポイントの1つに余白があります。
これは、箱を意識したデザインができれば、よりコーディングがスムーズに進むと思いました。

ざっくりですが、後者のデザインであれば、迷うことなくHTMLコーディングを行うことができる例です↓

letters

保守性を考える

Webサイトはリリースして終わりではなく、運用保守をしていきます。
それは、既存デザインの修正から、新規機能の追加など様々なことがあると想定されます。

そのため、できるだけ修正・変更のしやすいコードを考えた時に、デザインがパーツからコンポーネントとして切り出しやすいか、再利用がしやすいかで保守性に大きく影響してきます。

よくあるのが、ボタン要素です。
ボタンは、サイト内の用途によって「色・形・サイズ」など、バリエーションが増えていきます。その際に、複雑なことをどれだけシンプルにデザインできるかが大切だと思いました。

letters

例外は必ず出てくるので、その意味をしっかり考え、可能な限りシンプルに落とし込んでいくことが、デザイナーの腕の見せ所なのかもしれません。

システム側にも、寄り添って考えていけたらと思います。

最後に

毎日1時間トレースを行い、6ヶ月...なんとか100本やり終えました!

letters

正直100はやらずとも、十分学びはあると思いま...

ですが、問題解決のデザインや、それだけではないデザインの良さみたいなものがあると感じ、改めてデザインって面白いな〜と。
定期的にサイトをトレースすることと、デザインをアウトプットしていくことは、これからも続けて行きたいと思います。

なんだか伝えたいことが多すぎて、上手くまとめられずに長文となってしまいました...

エンジニアもデザインを学ぶことで、良いもの作りができ、より素敵なサービスが世の中に出たらいいな〜と思っています。

ぜひ一緒に頑張っていきましょう!記事に対するフォードバックも、何でもいただけたら嬉しいです🤣

以上、Webデザイン100トレースの感想でした。

参考

デザイントレースは、他にも素敵な記事がたくさんあり、参考にさせていただきました。
ありがとうございました!


<!-- Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com --><!-- License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->