【初心者でも簡単】XDを使ったWEBデザイントレースのやり方

スポンサーリンク
スポンサーリンク
ランドゥ
ランドゥ

Webデザイン初心者はトレースでデザインを学びましょう。

 

【初心者でも簡単】XDを使ったWEBデザイントレースのやり方

 

こんにちは。僕はWeb系の会社でアルバイトをしつつ、デザインの勉強をはじめた学生です。Webデザインの勉強って何から始めればいいか迷いますよね。

 

いきなり難しい理論は面食らっちゃう…

手を動かして勉強する方法は無いの?

 

そんなあなた。Webデザイントレースを始めてみませんか。

Webデザイントレースとは

Webデザイントレースやそのメリットについては、こちらの記事で詳しく説明しています。

 

 

 

本記事では、Webデザインをトレースするために必要なツール、および方法をご説明します。

僕も同じくデザイン初心者ではございますが、実体験や多くの文献をもとにまとめた記事ですので、あなたの勉強のお役にたてばうれしいです。

 

それではさっそく解説していきます。方法の一覧は目次をご覧ください。

スポンサーリンク

サイトを見つける

まず、トレースの参考にするサイトを探します。以下のようなサイトから探すのが便利です。

 

MUUUUU.ORG

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
縦長のwebデザインをがむしゃらに集めています。

Web Design Clip

Web Design Clip [L] | LP・ランディングページのクリップ集
Web制作の参考になるLP・ランディングデザインのリンク集

I/O 3000

I/O 3000 | Webデザインギャラリー
I/O 3000は、Webデザインに関わる人のためのWebデザインギャラリーサイトです。国内外を問わず、Web制作の参考となるサイトをセレクトしています。

1GUU

webデザイナーのためのギャラリー・サイトリンク集
クオリティの高いWebデザインを集めました。Webデザイナーのためのギャラリー・サイトリンク集です。

81-web.com

81-web.com
「81-web.com」はWebサイト制作に役立つ、日本の優れたデザインのWebデザイン・Webサイトギャラリー&リンク集です。

 

好きなサイトを1つ選び、アクセスしてみましょう。

迷ってしまった場合は、よりデザインが複雑なサイトをトレースするのが勉強になっていいですね。

キャプチャする

次に、トレースするWebページ全てをキャプチャします。

 

 

使用ブラウザはChromeで、Full Page Screen Captureというプラグインを用います。

プラグインをChoromeへ追加

こちらのページへアクセスし、Chromeに追加をクリックします。

 

プラグインをChoromeへ追加

 

このように、一見するとスマイリーであやしげな画面表示となりますが、正常です。

ファイルをダウンロードして保存

Chrome右上のパズルのアイコンをクリックした後、

Full Page Screen Capture右横のピンのマークを選択し、拡張機能を固定します。

 

chromeの拡張機能を追加

 

すると、先ほどのパズルのアイコンの左横にカメラのアイコンが登場。

こちらをクリックするとキャプチャが開始され、以下のような画面へ遷移します。

 

Full Page Screen Captureでキャプチャした様子
例えばGoogleトップページならこんな感じです

 

右上にいくつかボタンが出ておりますが、今回はPNG形式で保存するため右から4番目のボタン(↓の下に―)を選択して、PCへ保存して下さい。

Adobe XDへ貼り付ける

 

 

ここからは、Adobe XDというAdobe社のプロトタイピング作成ツールを使用します。

トレースでは非常に便利なソフトですので、これを機に検討してみるのもいいですね。

 

 

Adobe XDの詳細はこちら: 公式サイト

 

 

新しいファイルを作成

XDを開き、ダウンロードしたサイトの幅に合わせたファイルを新規作成します。

今回はPC向けのページですので『Web1920』を選択しました。

貼り付け

開いたファイルへ、先ほどキャプチャしたファイルを貼り付けます。

一般的には PC > ダウンロード に保存されており、このようにドラッグ&ドロップするのが最も速いです。

 

キャプチャをXDへ貼り付け
ドラッグ&ドロップする様子

配色・フォント・画像を調べる

次に、参考にするWebページの配色やフォント、画像を調べます。

以下3つのツールを使い分けると便利です。

 

  • XDのプラグイン『Mimic』
  • Chromeのプラグイン『WhatFont』
  • Chromeの検証ツール

 

Mimicの使い方

まずXDのプラグイン『Mimic』の使い方を説明します。

 

XDを開き、左サイドメニューの下部にある「プラグイン」を選択。

「+」マークをクリックし、開いたウィンドウの『検索』へ「Mimic」と入力してください。

 

 

 

検索結果からこちらのプラグインを見つけ、インストールしてください。

 

 

インストールが完了したらXDを開き、先ほどのサイドバーの「プラグイン」に表示された「Mimic」を選択。

このようなウィンドウが開きます。

 

 

調査したいWebサイトのURLをバーへ入力すると、あとは自動的にフォント、配色、画像がアートボード上へこのように抽出されますよ。

 

mimicでフォント、配色、画像がアートボード上へこのように抽出される様子

WhatFontの使い方

次に、Webページのフォントを調査することに特化したChromeのプラグイン、WhatFontの使い方をご紹介します。

 

先ほどのFull Page Screen Captureと同じ手順でこちらからプラグインを追加します。

 

追加後、Chrome右上に「f?」のようなアイコンが表示されます。

 

 

ここをクリックした後、Webサイト上の特定の文字列へカーソルを合わせますと、

 

 

このように、フォントのfamily、Style、Weightなどが一目瞭然です。

Chromeの検証ツールの使い方

最後に、Chromeの検証ツールを紹介します。

有名なツールですので必要な理由だけ申し上げますと、MimicやWhatFontの情報のみでは不十分な場合があるからです。

 

例えば以下のような場合に用います。

 

  • Mimicで羅列されたフォントがどこで使用されているか分からない
  • Mimicで抽出されない画像がある
  • WhatFontでフォントが正しく認識されない

 

 

関連記事

Chromeの検証ツールについてはこちらの記事でも紹介しております。

 

トレースする

いよいよトレースによる練習開始です。

先ほどXDで作成したファイルを開き、アートボードをコピー&ペーストします。

 

 

次に、右側のアートボードの不透明度を下げます。

 

XDに要素を配置する様子

 

このように、参考にするWebデザインを横に並べて、薄いほうのアートボードへ要素を配置すると、初心者は練習しやすいです。

 

ロゴを配置する様子

おわりに

本記事では、Webデザインをトレースするために必要なツール、および方法についてご説明しました。

本記事に登場した必要ツールをまとめると、以下のようになります。

 

 

 

 

また、本記事で登場したXDのみならず、画像やバナーを編集・作成する際に便利なAdobeソフトは他にも以下のようなものがございます。

 

 

Adobe illustrator (公式サイト)

Adobe Photoshop (公式サイト)

 

 

 

これらすべては、Adobe Creative Cloud というサービスを契約することで、サブスクリプション形式で利用できます。

おトクに購入できる情報をこちらの記事でご紹介しております。

 

 

ランドゥ
ランドゥ

最後までお読みいただき、ありがとうございました。

(文責・ランドゥ)

コメント