Webデザイン初心者はトレースでデザインを学びましょう。
こんにちは。僕はWeb系の会社でアルバイトをしつつ、デザインの勉強をはじめた学生です。Webデザインの勉強って何から始めればいいか迷いますよね。
いきなり難しい理論は面食らっちゃう…
手を動かして勉強する方法は無いの？
そんなあなた。Webデザイントレースを始めてみませんか。
Webデザイントレースとは
Webデザイントレースやそのメリットについては、こちらの記事で詳しく説明しています。
本記事では、Webデザインをトレースするために必要なツール、および方法をご説明します。
僕も同じくデザイン初心者ではございますが、実体験や多くの文献をもとにまとめた記事ですので、あなたの勉強のお役にたてばうれしいです。
それではさっそく解説していきます。方法の一覧は目次をご覧ください。
サイトを見つける
まず、トレースの参考にするサイトを探します。以下のようなサイトから探すのが便利です。
MUUUUU.ORG
Web Design Clip
I/O 3000
1GUU
81-web.com
好きなサイトを1つ選び、アクセスしてみましょう。
迷ってしまった場合は、よりデザインが複雑なサイトをトレースするのが勉強になっていいですね。
キャプチャする
Chrome右上のパズルのアイコンをクリックした後、
Full Page Screen Capture右横のピンのマークを選択し、拡張機能を固定します。
すると、先ほどのパズルのアイコンの左横にカメラのアイコンが登場。
こちらをクリックするとキャプチャが開始され、以下のような画面へ遷移します。
右上にいくつかボタンが出ておりますが、今回はPNG形式で保存するため右から4番目のボタン(↓の下に―)を選択して、PCへ保存して下さい。
Adobe XDへ貼り付ける
ここからは、Adobe XDというAdobe社のプロトタイピング作成ツールを使用します。
トレースでは非常に便利なソフトですので、これを機に検討してみるのもいいですね。
新しいファイルを作成
XDを開き、ダウンロードしたサイトの幅に合わせたファイルを新規作成します。
今回はPC向けのページですので『Web1920』を選択しました。
貼り付け
開いたファイルへ、先ほどキャプチャしたファイルを貼り付けます。
一般的には PC > ダウンロード に保存されており、このようにドラッグ&ドロップするのが最も速いです。
配色・フォント・画像を調べる
次に、参考にするWebページの配色やフォント、画像を調べます。
以下3つのツールを使い分けると便利です。
- XDのプラグイン『Mimic』
- Chromeのプラグイン『WhatFont』
- Chromeの検証ツール
Mimicの使い方
まずXDのプラグイン『Mimic』の使い方を説明します。
XDを開き、左サイドメニューの下部にある「プラグイン」を選択。
「+」マークをクリックし、開いたウィンドウの『検索』へ「Mimic」と入力してください。
検索結果からこちらのプラグインを見つけ、インストールしてください。
インストールが完了したらXDを開き、先ほどのサイドバーの「プラグイン」に表示された「Mimic」を選択。
このようなウィンドウが開きます。
調査したいWebサイトのURLをバーへ入力すると、あとは自動的にフォント、配色、画像がアートボード上へこのように抽出されますよ。
WhatFontの使い方
次に、Webページのフォントを調査することに特化したChromeのプラグイン、『WhatFont』の使い方をご紹介します。
先ほどのFull Page Screen Captureと同じ手順でこちらからプラグインを追加します。
追加後、Chrome右上に「f?」のようなアイコンが表示されます。
ここをクリックした後、Webサイト上の特定の文字列へカーソルを合わせますと、
このように、フォントのfamily、Style、Weightなどが一目瞭然です。
Chromeの検証ツールの使い方
最後に、Chromeの検証ツールを紹介します。
有名なツールですので必要な理由だけ申し上げますと、MimicやWhatFontの情報のみでは不十分な場合があるからです。
例えば以下のような場合に用います。
- Mimicで羅列されたフォントがどこで使用されているか分からない
- Mimicで抽出されない画像がある
- WhatFontでフォントが正しく認識されない
関連記事
Chromeの検証ツールについてはこちらの記事でも紹介しております。
トレースする
いよいよトレースによる練習開始です。
先ほどXDで作成したファイルを開き、アートボードをコピー＆ペーストします。
次に、右側のアートボードの不透明度を下げます。
このように、参考にするWebデザインを横に並べて、薄いほうのアートボードへ要素を配置すると、初心者は練習しやすいです。
おわりに
本記事では、Webデザインをトレースするために必要なツール、および方法についてご説明しました。
本記事に登場した必要ツールをまとめると、以下のようになります。
また、本記事で登場したXDのみならず、画像やバナーを編集・作成する際に便利なAdobeソフトは他にも以下のようなものがございます。
これらすべては、Adobe Creative Cloud というサービスを契約することで、サブスクリプション形式で利用できます。
おトクに購入できる情報をこちらの記事でご紹介しております。
最後までお読みいただき、ありがとうございました。
(文責・ランドゥ)
コメント