最後に参考Openこんにちわ!最近はフロント開発も担当させていただいてます、Yamamotoです。今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。Webデザインを学ぼうと思ったのかデザイントレースについて100トレースして学んだことなぜWebデザインを学ぼうと思ったのかざっくりですが、実務を行いながら以下のように思うことがありました。細部のデザイン指示がなく、開発の手が止まってしまうどう実装するか目線の発想・提案しか浮かばない綺麗なコードだけではなく、視野を広げてより良いものを作りたいなどなど...デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効率化はもちろん、純粋に作り手として、デザインの領域までアウトプットしたいと思うようになりました。デザイナーさんに相談したら「まずはWebサイトをトレースしてみるのはどう?」とアドバイスをいただいたので、実践してみました。デザイントレースについてトレースをすることによって得られる効果やトレース方法、ポイントについてなどご紹介したいと思います。トレースの効果トレースの仕方トレースのポイントトレースの効果そもそもトレースとは、既存のデザインをそのまま忠実に再現、模写するという試みです。コントラストなど基本的なルールを、手を動かしながら行う事で、感覚的にも身に着ける。今流行りのサイトをトレースしていくことで、デザインのスタンダードなクオリティーやパターンを把握し、引き出しをとにかく増やす。ツールに慣れるXD・Sckech・figma・photoshopなど、何かしらのデザインツールに慣れて作業効率をUPさせる。デザイナーの思考法を学ぶエンジニアにはない発想論が、デザイナーにはあると思います。それは魅せるデザインから、問題解決のためのデザインなど様々です。Webサイトは、デザイナーが試行錯誤を繰り返した末の成果物(ベストプラクティス)なので、そこから学ぶことは多くあります。実際に、僕が行ったトレース方法の流れをご紹介します。多くの現場で実際に使われており、初心者でも比較的に扱いやすく、基本無料で使用することができます。操作方法については割愛させていただきますが、公式サイトにハウツー動画が公開されているので、是非ご参考ください。サイトを選ぶ今回は100サイトが目標なので、下記のWebデザインまとめサイトから、ジャンルごとに10サイトづつピックアップし、TOPページをトレースしました。サイズを決めるいざ選んだサイトをトレースするにあたり、基準となる画面サイズを決める必要があります。375pxに決めてトレースを行いました。サイズについての考え方は、下記サイト等を参考にさせていただきました。倍数でできている8の倍数という考察や、実際にPCのワイドモニターでサイトを閲覧する際に画面いっぱいではなく、複数のブラウザを立ち上げて閲覧することも多いので、ちょうど良いサイズではないでしょうか。SP版のサイズに関しては、実際のLP制作では750px(Retina対応)等が多いかもしれません。デバイスの進化に伴い基準もどんどん変わっていくので、常に最適なサイズを意識していく必要があると思います。スクショを撮る次に、トレースするサイトのスクショを撮りXDのアートボードに貼り付けます。Chromeの拡張機能等を使うと、簡単にスクショを撮ることができるのでおすすめです。フォントやカラーは何を使っているかを調べるのも、重要なトレース作業です。こちらも、便利な拡張機能がたくさんありますので、下記ご参考ください。アートボードにパーツを配置していく準備ができたら、いざトレースを行っていきます!スクショの横に新規アートボードを並べて、パーツサイズを測りながら作成・配置していきます。最初は貼り付けたスクショの上に、直接配置していく方が早いかもしれません。上の写真では、サンプルとして目立つ色をつけていますが、画像やフォント、テキストや色もまったく同じにトレースしていきます。その際、探す手間を極力省くため、既存サイトから画像やテキストはコピペしましょう。imagesで一覧を見ることも可能です。駆け足ですが、トレース作業の流れは以上です。最初は、サイトのデザインやツールにもよりますが、1サイト2〜3hほど作業時間が掛かっていました...ですが、慣れてくると作業スピードも上がってきますので、是非チャレンジしてみてください👍トレースのポイント次に、トレースする際に意識して取り組んだポイントです。ショートカットを使うせっかく新しいツールを使って取り組むため、全ての作業をショートカットで行おうという気持ちで取り組みました。理想は、デザインの商談中にプロトタイプを作り上げれるようなスピード感です。デザインの本を読むトレースの合間に、本も何冊か読んでみました。知識をつけることで気づきの視点が増え、より多く学びを得られるようになったと思います。読む前と後では明らかに違いを感じたので、ぜひトレースと並行して読んでみてください。下記、おすすめの本です。観察する思考停止してトレースを行っても何も得られないため、サイト全体から細部のデザインまで、じっくり観察します。大切なのは、何を発信しているサイトなのかコンセプトを把握し、デザイナーは何をどう伝えようとしているのかを、考えて想像を膨らませることだと思います。ファーストビューを見るファーストビュー(最初に表示される画面)はサイトの顔でもあり、ユーザーはそのページを見て、さらにコンテンツを掘り下げていくかどうかの判断をする、とても重要なページです。人はZパターンや、テキストの多いページではFパターンのように、ページを読み取り、興味深いキーワードを探す傾向があるようです。どのように興味を引く工夫がされているかも観察します。視覚パターンについては、こちらの記事がとても詳しく書かれています。眼の動きのメカニズム細部のデザインボタンに少し丸みがかかっていたり、パーツに影がついていないか、マウスホバー後はどのように変化するのかなどを見ていきます。他にも見る箇所は無限にありますが、事前に観察ポイントを決めておき、気づいたことや良いと感じた点、逆にもっと改善できるところはあるのかなど...最低5つは絞り出してみよう!など、トレース後に分析をまとめてみるのも良いかもしれません。以上が、意識して取り組んだポイントになります。100トレースして学んだこと身体で覚える手を動かし考えながら学ぶことで、自然とどうデザインするかをイメージできるようになってきたことが、一番成長を感じたところです。サイズや余白の取り方、色やコントラストなど。基本的なビジュアルデザインをイメージすることは、トレースを行う前では出来なかったことでした。デザインの良し悪しに対して、なぜこうなるのか?を言葉にできるようになってきたのも大きな学びです。流行のWebデザイン傾向100サイトだけですが、国内・海外のサイト問わずデザイントレースを行ったことで、共通点や違いなど、いろいろな気づきがありました。フォントどのサイトからも、フォントの種類や使い方にとてもこだわりを感じました。文章はセリフ体や明朝体を細字で使っていたり、見出しはデザイン書体で個性的にしたり、日本語と英語の相性の良いフォントなど...サイトの印象を決める重要なデザイン要素の1部であるため、フォントだけでもとても奥が深いと学びました。下記はよく使われていたフォントです。Roboto.SNS全てのサイトに、何かしらのSNS連携がされていました。集客効果や、よりユーザーの利便性を高めるためにも必須のようです。どのSNSをサイトに連携させるか、リンクまたは埋め込みなのかも、デザインの観点で考える必要があると思いました。Jsこちらも、全てのサイトで使用されていました。演出からシームレスな使い心地の表現まで、フロントでリッチな表現をするということは、これからも主流になっていきそうです。どのような技術があるのか、良いプラグインは何かなど。技術を知った上でデザインすることが大切だと思いました。構成TOPページをトレースしていて思ったのは、他ページとの連携を考えてデザインをしなければならないことです。それは、情報アーキテクチャやコンテンツモデル、優先度をきめるなど...サイトの全体像から考える必要があるということです。ここに関しては、これからもより深く学んでいきたいと思いました。今回ジャンル毎にトレースを行いましたが、サイトの種類(コーポレート、EC、ブログ...など)によって、それぞれの構造や流行りのパターンがあると思ったので、これはまた記事にできたらと思います。モチベーションの維持トレースをしている時、慣れてくるとつい早く終わらせようと、作業的になってしまうことがありました。目標を立て、日々継続して取り組むには工夫も必要です。そこで、まだ早いと思いつつも...自分でデザインをしたい衝動があったので、架空のサイトをデザインしてみたり、実際にページリニューアルのお仕事を請け負ったりなど。トレースの合間に取り組みました。・既存のマイページを使いやすくしたい、という依頼。自分が今どれくらい成長できているのか、足りない部分はどこなのか。アウトプットをして知ることで、トレースをするモチベーションも上がり、やりきることができたと思います。なりたい自分像を意識して取り組むことが、大切だと改めて思いました。エンジニア視点Webデザインを学ぶ中で、エンジニアの視点からも思うところがたくさんありました。ブレイクポイントブレイクポイントは、レスポンシブの基準点になります。PCやスマホ、タブレットなど対応範囲を事前に決めておくことが大切です。SP版LPを横幅750px(Retina対応)で制作した場合、コーディングは375pxの実機サイズで行います。全て1/2サイズで余白やフォントを設定することになるので、それを理解した上で、デザイナーはLP作成をする必要があると思いました。箱を考えるエンジニアは、デザイナーから受け取ったLPを見て、箱をイメージしてコーディングをしていきます。その際に、どのように作ろうか迷うポイントの1つに余白があります。これは、箱を意識したデザインができれば、よりコーディングがスムーズに進むと思いました。保守性を考えるWebサイトはリリースして終わりではなく、運用保守をしていきます。それは、既存デザインの修正から、新規機能の追加など様々なことがあると想定されます。そのため、できるだけ修正・変更のしやすいコードを考えた時に、デザインがパーツからコンポーネントとして切り出しやすいか、再利用がしやすいかで保守性に大きく影響してきます。あるのが、ボタン要素です。ボタンは、サイト内の用途によって「色・形・サイズ」など、バリエーションが増えていきます。その際に、複雑なことをどれだけシンプルにデザインできるかが大切だと思いました。例外は必ず出てくるので、その意味をしっかり考え、可能な限りシンプルに落とし込んでいくことが、デザイナーの腕の見せ所なのかもしれません。システム側にも、寄り添って考えていけたらと思います。最後に毎日1時間トレースを行い、6ヶ月...なんとか100本やり終えました!正直100はやらずとも、十分学びはあると思いま...ですが、問題解決のデザインや、それだけではないデザインの良さみたいなものがあると感じ、改めてデザインって面白いな〜と。定期的にサイトをトレースすることと、デザインをアウトプットしていくことは、これからも続けて行きたいと思います。なんだか伝えたいことが多すぎて、上手くまとめられずに長文となってしまいました...エンジニアもデザインを学ぶことで、良いもの作りができ、より素敵なサービスが世の中に出たらいいな〜と思っています。以上、Webデザイン100トレースの感想でした。参考デザイントレースは、他にも素敵な記事がたくさんあり、参考にさせていただきました。Web開発に関するトピックを発信する技術ブログです。無料配布されています。