Design Stock

デザインのアレコレ

  1. HOME
  2. レイアウト
  3. アウトプットのレベルを上げよう!Webデザインのトレースって?

アウトプットのレベルを上げよう!Webデザインのトレースって?

こんにちはー

今回は僕がWebデザインの勉強をするのによくやる「トレース(模写)」についての投稿です!

当ブログではデザインに関する様々な知識を紹介していますが、そういった知識を吸収するのはアウトプットの質を上げるためですよね。

断片的な知識をたくさんインプットしても最終的なアウトプットに応用できなければ意味がありません。

そして、手っ取り早くアウトプットのレベルを上げる方法は真似て盗むことです!

優れたデザインをそのまま真似ることによって、制作者の意図を読み取ることができます。

今回はそんな真似て盗む勉強法であるトレースのやり方をご紹介したいと思います!

 

Webデザインのトレースって?

トレースとは「なぞる」や「写す」「追跡する」といった意味をもつ言葉です。

模写とも言いますよね。

様々な場面で使われる言葉ですが、デザインの世界ではお手本の作品をそっくりそのまま真似ることを指します。

 

 

トレースのメリット

ではトレースをすると一体どんなメリットがあるのでしょうか?

今回は3つほど、トレースのメリットを挙げてみたいと思います!

  1. レイアウトの引き出しが増える
  2. サイズ感覚が身につく
  3. デザインを考える力が身につく

 

 レイアウトの引き出しが増える

Webサイトのレイアウトは

  • ヘッダー
  • グローバルナビゲーション
  • メインビジュアル
  • メインコンテンツエリア
  • フッター

など様々な要素からできています。

それらの位置や幅、高さなどを読み取ることができるのはトレースの大きなメリットです。

制作者がどんな意図を持ってレイアウトを組んだのか汲み取ることにより、同じようなコンセプトの作品を作ることになったとき応用することができます。

 

 

サイズ感覚が身につく

トレースをすると、

  • ヘッダーの幅
  • フォントの大きさ
  • 罫線の太さ
  • ボタンの大きさ
  • 要素同士の間隔(余白の大きさ)

など様々な要素のサイズを知ることができます。

デザインで設定したサイズをWebページやスマートフォンで見るとどのような印象を受けるのか?というのも大事なポイントですね。

このようにトレースをすることで、サイズ感覚を養うことができます。

サイズと受ける印象についての関係がわかれば、

「なぜその大きさなのか?」

といった細かい部分まできちんと説明することができますね。

 

 

デザインを考える力が身につく

トレースをすると、レイアウトやフォント、配色から素材選びまでデザインの根拠を深く考えるきっかけになります。

もちろん、ただトレースするだけでなく考える姿勢を持つことが大切です。

デザインの引き出しを増やすことによって、論理的にデザインを説明する力が身につきます。

 

 

トレースの手順

トレースの手順は以下の通りです。

  1. トレース元を探す
  2. サイトキャプチャを撮る
  3. サイト内の画像を一括保存する
  4. ワイヤーフレームを書き出す
  5. デザインカンプを作成する

順に見ていきましょう!

 

①トレース元を探す

まずはトレース元になるサイトを探します。

尊敬するデザイナーさんが作ったサイトでもいいですし、以下のギャラリーサイトから選んでもOKです!

ギャラリーサイトはデザインのトレンドを把握するというメリットもあります。

 

 

②サイトキャプチャを撮る

f:id:mtk-hcwj:20180313144323j:plain

Google Chromeの拡張機能に『Awesome Screenshot』があります。

いざ、サイトの全体画像を撮ろうすると、スクリーンショットをして、スクロールして

、またスクリーンショットをして…

と繰り返しそうですが、『Awesome Screenshot』を使えば一気にサイト全体のキャプチャを撮ることができます!

 

 

③サイト内の画像を一括保存する

f:id:mtk-hcwj:20180313144601p:plain

トレースする際に、サイト内の画像を使用したい方もいると思います。

しかし、いちいち画像元を探してダウンロードしては手間がかかってしまいますよね。

そんな時は『ImageCyborg』で、トレース元のURLを記入すれば、サイト内の画像を一括でダウンロードすることができます。

 

 

④ワイヤーフレームを書き出す

Illustratorなどのデザインツールでワイヤーフレームを書き出します。

ワイヤーフレームとはデザインの下地となる設計図のことです。

この作業をすることで、要素の大きさや余白の使い方などレイアウトの意図を読み取ることができます。

「サイトのカラム数はどうか?」

「要素同士の間隔はどれくらいか?」

「写真と文章の比率はどうか?」

など、ワイヤーフレームを書き出すだけでも考えられるポイントは多くあるので、ぜひ確認しておきましょう。

 

 

⑤デザインカンプを作成する

SketchやPhotoshopなどのデザインツールでいよいよ模写に移ります。

少し大きめのキャンバスを作り、Googleの検証ツールでコンテンツ幅を測った後、定規を使いながら正確に模写をしていきます。

Googleの検証ツールを使えば、フォントの大きさや罫線の太さまで細かに調べることができるので、1px単位できちんとコピーすることが大切です。

「神は細部に宿る」

と言われますが、細部が異なるだけで印象はガラリと変わってしまいます。

手間がかかるかもしれませんが、観察をしながらしっかりと模写をしていきましょう。

 

最後に

模写をする際に大切なのは、デザインの目的やターゲットを想像して制作者の意図を読み取ることです。

今回ご紹介したトレースの方法は、デザインの根拠を探すところに意味があります。

  • デザインの目的
  • ターゲット層
  • コンセプト
  • フォントの種類
  • 配色

など考えれる点をしっかり書き出すのもいいですね。

ぜひ、トレースを積み重ねてデザインの根拠を説明する力を身につけていきましょう!