こんにちは。mito（@mito_works）です。
過去に、デザイン力アップのためにバナートレースをしていましたが、今回は新たにWebサイトをトレースすることをはじめました。
デザイン力アップを目指して、バナートレースはじめます！こんにちは。mito（@mito_works）です。
デザイン力アップのためにバナートレースを始めることにしました。
ここでは、私な...
mito
今回は、私なりのWebサイト模写の方法をまとめます！
なぜやるのか
#1日1サイトレビューをしていて、それ自体はインプットとしてとても勉強になります。
Webデザインのインプットを増やしたい！それなら#1日1サイトレビューがおすすめです。こんにちは、mito（@mito_works）です！
6月から開始した1日1サイトレビューも3週間が経過しました。
今回は、1日1サ...
3ヶ月続けた1日1サイトレビュー、3つの学びとやってよかったことまとめこんにちは。mito（@mito_works）です。 今回は3ヶ月間毎日twitterに投稿を続けていた1日1サイトレビューの総集...
ただ、デザインのスキルアップにつながる細かい気づき（特にピクセル単位）が得られないなと思いました。
mito
例えば、タイトル上下のマージンはどれくら開けているのか？ボタンの上下の余白は？フォントの大きさはサイト内でどのような規則性になっているか？などです。
momo
実際に手を動かすことで見えてくる部分だね！
また、コーディングの勉強をしているうちにコーディングを意識してもっとデザインできるようになりたいと思うようになりました。
今回は、
デザインの細部に宿るこだわりや規則性を理解して、デザイン力を上げる
コーディングを意識したデザインができるようになる
ことを目的に模写をします。
やり方
使うツールの紹介
momo
Chromeで画面キャプチャをとってXDを使って模写をするよ！
- Chromeの拡張機能：Window Resizer
- Chrome拡張機能：Full Page Screen Capture
- Adobe XD
- XD拡張機能：Mimic
- Chrome拡張機能：WhatFont
手順
模写準備~Chromeで準備~
以下の順番で準備をします。
- 模写するサイトを決める
- Chromeの拡張機能：Window Resizerで模写するサイズを選択する
- Chrome拡張機能：Full Page Screen Captureでサイト全体のキャプチャをとる
模写準備~XDで準備~
以下の順番で準備をします。
- XD拡張機能：MimicにURLを入れて画像やフォント、カラー情報を取得する
- サイト全体のキャプチャをXDに貼り付ける
- 上記をもう一枚複製してトレース用にアートボードの下に重ねて透過させる
模写
検証ツールやChrome拡張機能：WhatFontでフォントの種類やサイズを確認して、模写をします。
mito
Mimicで取得できなかった画像データは直接サイトから”右クリック→画像をコピー”で取得し、アートボードにペーストします。
模写で意識すること
バナートレース の時に意識していたことと似ていますが、以下マーカー線を引いている部分は特にWebサイトならではの特徴として意識しています。
フォントの種類/サイズ/ウェイト/字間/行間
余白の取り方
画像サイズ
見出しの大きさ
コンテンツが入る幅はどれくらいか
メインビジュアルのサイズとデザイン
余白の取り方、オブジェクトの配置やフォントのサイズや行間、字間の規則性
mito
特にメインビジュアルのデザインは、サイトの顔となる部分なので学ぶべきポイントがたくさんあります！
バナートレースからデザイントレースへ。50個トレースしてわかったこと＆Tipsこんにちは、mito（@mito_works）です！ すきま時間に続けていたバナートレースも気づけば50個になりました。
（途中...
実践結果
https://twitter.com/mito_works/status/1182182797059903488
あまり複雑ではないサイトを選び、模写をしました。
メニューバーが背景と同化しないようにシャドウが入っていたり、字間について、単語は特に広めに設定されているなどという気づきがありました。
mito
綺麗だな、いいなと思うサイトをいくつか模写して、その共通点や規則性を見つけていこうと思います！
ABOUT ME
