過去に、デザイン力アップのためにバナートレースをしていましたが、今回は新たにWebサイトをトレースすることをはじめました。

https://mito-lab.com/banner-trace-start/

mito

今回は、私なりのWebサイト模写の方法をまとめます！

なぜやるのか

#1日1サイトレビューをしていて、それ自体はインプットとしてとても勉強になります。

https://mito-lab.com/website-daily-review/

https://mito-lab.com/website-daily-review-3month/

ただ、デザインのスキルアップにつながる細かい気づき（特にピクセル単位）が得られないなと思いました。

mito

例えば、タイトル上下のマージンはどれくら開けているのか？ボタンの上下の余白は？フォントの大きさはサイト内でどのような規則性になっているか？などです。

momo

実際に手を動かすことで見えてくる部分だね！

また、コーディングの勉強をしているうちにコーディングを意識してもっとデザインできるようになりたいと思うようになりました。

今回は、

ことを目的に模写をします。

やり方

使うツールの紹介

momo

Chromeで画面キャプチャをとってXDを使って模写をするよ！

手順

模写準備~Chromeで準備~

以下の順番で準備をします。

1. 模写するサイトを決める
2. Chromeの拡張機能：Window Resizerで模写するサイズを選択する
3. Chrome拡張機能：Full Page Screen Captureでサイト全体のキャプチャをとる

模写準備~XDで準備~

以下の順番で準備をします。

1. XD拡張機能：MimicにURLを入れて画像やフォント、カラー情報を取得する
2. サイト全体のキャプチャをXDに貼り付ける
3. 上記をもう一枚複製してトレース用にアートボードの下に重ねて透過させる

模写

検証ツールやChrome拡張機能：WhatFontでフォントの種類やサイズを確認して、模写をします。

mito

Mimicで取得できなかった画像データは直接サイトから”右クリック→画像をコピー”で取得し、アートボードにペーストします。

模写で意識すること

バナートレース の時に意識していたことと似ていますが、以下マーカー線を引いている部分は特にWebサイトならではの特徴として意識しています。

mito

特にメインビジュアルのデザインは、サイトの顔となる部分なので学ぶべきポイントがたくさんあります！

https://mito-lab.com/design-trace-50/

実践結果

https://twitter.com/mito_works/status/1182182797059903488

あまり複雑ではないサイトを選び、模写をしました。
メニューバーが背景と同化しないようにシャドウが入っていたり、字間について、単語は特に広めに設定されているなどという気づきがありました。

mito

綺麗だな、いいなと思うサイトをいくつか模写して、その共通点や規則性を見つけていこうと思います！