はじめに

以前(2年半前、当時学生)、Webデザインの勉強中にトレースの記事を書いたことがありました。

こんなサムネイルを見たことがある人が居るかもしれません..。(記事は昔のものなのでリンクは貼りません)
なぜかこの記事が未だにじわ伸びし、noteで紹介されたりしており、「まずい..」と思ったため新たに記事を書くことにしました。

ちなみにサーチコンソール見ても「Webデザイン トレース」の検索が多く、勉強したいけどやり方がわからない人が多くいるんだなと再認識しました。

学生の時の私もまさにそれで、デザイン系の学部に通っていたため「じゃあデザインできるんだね!」的な印象を持たれがちでした。
でも大学ではWebやアプリのデザインの授業があるわけではないので、その辺は独学だったり、アルバイト先のデザイン事務所で教えてもらったりで勉強していました。

トレースは実際に手を動かすので、ツールの勉強にもデザインの勉強にもなるので、取り掛かりには良い勉強法だと思います。

本記事では、これからWebやアプリのデザインの勉強をしたい人、勉強始めたての人に向けてどんなことを意識すると良いか、どんなやり方があるかなどを、デザイン勉強中の学生→デザイナーとして働くようになった私目線で書いていきたいと思います。

粒度を決める

始める前に、どのくらいの粒度でやるかを決めると進めやすいです。
大体分けるとこんな感じかなと思います。

がっつりトレース

全く同じものを作るぞ!くらいの勢いでやるパターンです。デザインツールに慣れていない人に特にオススメしたいです。
自分で一つ完成させてみるということ、ツールに慣れることが主な目的になります。

ここで大事なのはツールのショートカットキーを覚えたり、必要であればプラグインを入れたり、レイヤーの整理を意識したりといったところです。
ただなぞるだけでなく、「デザインデータ」を作るのを意識してやると勉強になります。

全ページやる必要はないですが、TOPと子ページを1ページとかやると、どんなところが共通化されてるのか・どうやって同じサイトだと認識させてるか、みたいな勉強になると思います。

選んでトレース

デザインパターンを増やしたい、なんかなまりそうなので手を動かしたい、みたいな人には選んでやるパターンが良いと思います。

例えば、選択のUIだけ真似してみる・ボタンのデザインだけ真似してみる・アイコンやイラストをトレースしてみるなどです。
バナーのトレースでも良いと思います。バナーは必要な情報をうまく配置しないといけないので頭を使います。

良いと思ったWebサイト、アプリなどを眺めているだけでも勉強になると思うのですが、実際に手を動かすともっと勉強になります。
意外と、「これどうなってんだ?」みたいな発見があったりもします。

ペンツールが苦手な人は、アイコンやイラストのトレースすると良いかもしれません。

眺めるだけ

最近の私は結構これです。ツールには慣れたので、良いと思ったものをめっちゃ眺めています。

よくやってるのは電車広告を見て良いところを頭の中で考えます。配色やフォント、文字詰め、写真の使い方などを主に見ています。
文字詰めされてない広告は頭の中で文字詰めしたり、装飾がなされたものは、頭の中でPhotoshopやIllustratorを立ち上げて再現できそうか試してみます。

もちろんDTPのデザインだけでなく、Webサイトやアプリでも良いなと思った理由を考えるようにしています。癖づけです。

テーマを決める

また、自分の中でテーマを決めておくと、どこに注目して勉強を進めていくかがより明確になります。

例えば…情報が多い

教育、不動産、旅行系などが当てはまりそうです。

大量の情報をどのように見せると分かりやすいか、使いやすいか、見ていてしんどくならないか、の勉強をするのに良いと思います。

不動産や旅行系のサイトだと、大量の選択肢があることが多いので、そこだけピックアップしていろんなサイトを見て回るようなやり方も良いと思います。
全ページを隅々まで見るというよりは、勉強したいところをピックアップして数をこなす方が勉強になります。迷ったらTOPページで。

例えば…キャンペーン、ランディングページ(LP)

これらのページは訴求力が強いことが多いため、初めての方には取り掛かりやすいと思います。
テキストのジャンプ率が高いページがよく見られるため勉強になります。

LPは大体「◯◯を始める」「無料相談」「無料で試してみる」のようなボタンがドカッと配置されているので、ボタンデザインの参考にもなります。

またこれらは1ページで完結していることが多いので、ページ全体を見る方が良いかと思います。

LPを探すときは、

例えば…コーポレートサイト、ブランドサイト

これらは、企業やブランドのイメージを表現できるように作られています。
ブランディングを含めたデザインの勉強にはこういったサイトを見て回ると良いと思います。

この時チェックしたいのは、ブランドの表現を強めている要素は何か?ブランドカラーをどのように使っているか?とかかなと思います。

熊本空港のWebサイトだと
→くまモンという強力なキャラクターを使用、雲っぽい表現が多い、白ベース・青アクセントで空っぽい配色
みたいな感じですね。

  
そのほかにも、子供向け・スポーツ・医療・SNSなどテーマはそれぞれで決めるのが良いと思います。
初めてでよくわからない!って人には上に挙げたランディングページとかが分かりやすいと思うので、1度挑戦して見てくださいな。

紹介したものがWebに偏ってますが、もちろんアプリのデザインでも同じことが言えます。
アプリで迷ったらツイッターや標準アプリをとりあえずトレースしてみる、とかから初めてみると良いと思います。

チェックしておきたいところ

トレースをする際、こういうとこチェックしておきたいなってところをまとめてみました。
以下のチェックしておきたいところは見た目的な話になります。

ページ全体

  • ・ベースカラー、メインカラー、アクセントカラー

よく見るこの図です。

これは一つの目安なので、もちろん準拠しないことも多々あります。
こちらのWebサイトを参考にすると、

こんな感じになりそうです。

テキスト関連

  • ・ジャンプ率
  • ・line-height
  • ・文字詰め
  • ・色
  • ・フォント

  
Webサイトのテキスト情報を調べるのにはWhatFontを使っています。

こんな感じでfont-familyなどなどが見られるので便利です。(BEAMSの公式サイトです。)

テキストが参考になりそうなページ

レイアウト関連

  • ・マージンの取り方(要素内でのマージン、要素間のマージンなど)
  • ・サイズの違うウィンドウ、またはデバイスによってどう見え方が変わるか

レイアウトが参考になりそうなページ

実際の手順を簡単に紹介

今回はSketchを使います。最近のUIデザインはSketchで事足りると思ってるので、Sketchでやっていきます。
例に使用させていただくのはこちらのWebサイトです。

スクリーンショットを撮ってアートボードに貼り付ける

適当にアートボードを追加して、スクショ貼り付け→アートボードを選択して[Resize to Fit]すると良いです。スクショがずれると面倒なのでロックをかけておきます。

大体のガイドを引く

[Ctrl]+[R]で定規を表示して、簡単にガイドを引いてみます。
横幅は最低限欲しいところ。あとはグリッドデザインぽかったらグリッドに沿って引いてみるとか、粒度はそれぞれで変えてくと良いです。

なぞってみる

サンプルなので3つのセクションだけトレースしてみました。

オススメのやり方は、Webインスペクタを表示しておいて適宜カンニングすることです。(Chromeだと[右クリック→検証])
使用されているカラーを以前はスポイトで取得していましたが、正確に取得できないのと、alphaなのかそうでないのかが分かりづらいので、カンニング方式に変更しました。

このブックマーク部分の、背景色なんかまさにそうで、濃い青のalphaを調節しているのか?それとも水色なのか?が分からないですが、実際は水色でした。

ちなみにレイヤーもちゃんと分けて、シンボルも作って、と整理しながらやると良いと思います。
こんな感じです。

まとめる

一例ですが、フォント&カラーを簡単にまとめました。
↑のチェックしておきたいところを中心に簡単にまとめて見ると良いかと思います。(わざわざ画像として作らなくても。頭の中で整理できれば◎)

「グレーの濃淡が数種類あるな〜」とか「セクションごとにリストのmarginが違うな〜」とか「¥マークはアイコンフォントか〜」とか「全体的に若干文字間があけてあるな〜」とかとか、発見があれば立派に勉強になってると思います。

(おまけ)初めてのアプリトレース

Sketchで初めてアプリのトレースをした時のものをおまけで載せてみます。ここまでやらなくて良いと思いますが、ここまでやると「デザイン、大変だ…」という気持ちになれます。

一部抜粋です。時間と心に余裕がある時にやるのをオススメします。

今回はデザインの勉強のためにトレースを例に挙げましたが、兎にも角にも手を動かすのが一番勉強になるなあというのが持論です。
新米デザイナーさん一緒にガンバリマショ〜

おしまい。