Webデザインの勉強に!XDでサイトトレース(デザイン編)

こんにちは!moco(@moco_megane)です。

以前の記事でHTML/CSSのコーディングを一通り身に付けたと書いたのですが、

ここにきてふと疑問が。

mocoのアイコン画像moco

私、そもそもWebデザインは十分に出来ると言えるのか?

そうなんです。

私はECサイトのWebデザイナーをやっているのですが、なにせインハウスなのでサイトを一からデザインした経験がなく…

Webに関しては、主に下層ページや商品画像、バナーのデザインしか経験しかなかったのです!

mocoのアイコン画像moco

気づくの遅!

というわけで、コーディングの勉強は一旦区切りを付け、まるっとコーポレートサイトを作る練習を開始しました。

目次

Webデザインの勉強方法とは?

mocoのアイコン画像moco

まずはサイトをデザインするためのイロハを学びたいな〜

参加しているサロンのコーチに勉強方法を相談したところ、デザインのトレースを提案されました。

なるほどトレースかー!と思いつつ、最初は

mocoのアイコン画像moco

一応デザイン未経験ではないし、トレースで勉強になることってあるのかなあ…

と、半信半疑でした。

しかし実際に一つのサイトをトレースしてみて分かりました。

私はなんて傲慢だったのかと…!

実際にやったトレース手順

ここからは私がAdobe XDを使い、実際にやってみたトレースの手順です。

①ギャラリーサイトでトレース元サイトを選ぶ

まずは課題となるサイトを選びます。

私がトレース元サイトを選ぶポイント

  • ある程度大きい企業のサイト(信頼性が高く、デザインシステムを学べる)
  • 最近公開されたサイト(Webデザインはトレンドの移り変わりが早い…)
  • 自分が作れるようになりたいサイト(自分が学ぶ目的を再確認)
  • 自分がトレースをして楽しめそうなサイト(せっかくやるなら楽しみたい)

このあたりをおさえておけば、トレースで得られるものが大きくなると思います。

おすすめの定番ギャラリーサイト

高品質なサイトが集められており、更新頻度も高いサイトばかりです!

Webデザイナーなら毎日のチェックを日課にしたいところ。

もっと言えば、掲載サイトを検証ツールで開いて裏側まで見に行くと非常に勉強になります。

②スクショを撮る

今回はPC版・SP版のデザインをやると決めたので、それぞれ全体のスクショを撮ります。

Chromeの検証ツールから撮ることもできるのですが、なぜか上手くいかないことが多いので私はChromeの拡張機能であるGoFullPageを使いました。

PC版のドロップダウンメニュー・SP版のドロワーメニューを展開した状態も撮影し、全部でこれだけ用意しました。

これはトレース完成時。左にお手本、右がトレース。

③画像データをDLする

Chromeの拡張機能であるImage Downloaderを使うと、サイト内で使われている画像が簡単に一括DL出来ます。

ただし背景画像(background-imageとして設定されているもの)は拾ってこれないので、検証ツールを開き該当部分のソースから画像を直接開きます。

URLをクリックすると画像が開けます

④XDに配置し、デザインのトレースをする

まずはPC版(1280px幅)、SP版(375px幅)のアートボードを用意します。

そこに②で用意したスクショをペッと貼ります。

透明度を30%程度にしてから、画像をロックします。

お手本として、透明度を下げていないスクショも隣に置いておきます。

ガイドも引いておくとやりやすいです

この上に重ねるようにパーツを配置しトレースしていきます。

サイトトレースで学べたこと

課題サイトの選定からトレース完了までにかかった時間は約3時間ほど。

実際にやってみると、想像していなかったメリットがたくさんありました。

サイトトレースで学べたこと一覧

  • 書体
  • フォントサイズ
  • 配色
  • paddingやmarginのサイズ
  • SP版とPC版のデザインの違い
  • テキストの文字量
  • 画像のトリミング

などなど。

ただ見ているだけでは分からなかったことも、自分の手でトレースしてみることで実感をもって学べました。

mocoのアイコン画像moco

印刷物のレイアウトとは異なりカルチャーショック…!

トレースは勉強にならないという意見もありますが、まずは謙虚に一度試してみてはいかがでしょうか。

まとめ:デザイントレースは学びの宝庫!

やはりギャラリーサイトに掲載されているようなサイトは、業界でも名の知れた制作会社が制作していることが多いです。

印刷物の場合はそう簡単に人の生データを見ることはできませんが、Webは検証ツールさえ使えば誰だって中身を覗くことができます。

先人たちが作り上げた素晴らしい実績を活用し、引き続き自分の学習に活かしていこうと思います!

mocoのアイコン画像moco

さて、次回はXDを駆使し動きを付けていきます!(目標)

この記事が気に入ったら
フォローしてね!

目次
閉じる