タイミーのLPをSTUDIOでトレースしてみた！

デザインを勉強するにはまずトレースから！と思い、最近橋本環奈さんを起用したCMで話題だったタイミーさんのLPをトレースしてみました。

その様子の動画をTwitterにあげてみた所、300いいね以上も頂き、結構反響があったのでnoteにしてみました！

このnoteではトレースをする際のTipsを書いていこうと思います！

💡Tips1 : まずデザインを参考にしたいLPを探しましょう！

まず真似したいLPを探してみましょう！
僕は最近話題のスタートアップなどのLPを選ぶ事が多いですが、自分のデザイントレーニングの想定にあった難易度のLPを探してみましょう。

・ SANKOU!
・ MUUUUU.ORG
・ I/O 3000
・ 81-web.com
・ Web Design Clip

こちらのようなWebギャラリーからトレースするサイトを探してみるのもいいかもしれません。

💡Tips2 : カラーパレットや画像素材を事前に準備しよう

Webサイトをトレースするのにそのサイトで使われている色や画像が必要ですよね？その画像をトレースする前に全て準備しておきましょう！

画像素材
サイトにある画像を右クリックし、"名前をつけて保存”を選択して画像をダウンロードした後、STUDIOにドラッグ&ドロップするだけで完了です！

しかしたまにこの方法でダウンロードできな画像がありますのでそちらは以下の手順で画像をダウンロードしてください。

右クリックでタブを開き、その中から検証をクリックして下さい。

そうすると画面の端にこのようにディベロッパーツールが出てきます。

この画面右のElementsタブのコードからimgタグで挟まれたsrcのリンクをコピーして新しいタブで開きます。

↓imgタグはこんなやつ

<img class="xxxx" src="ここのリンクをコピーしてね" alt="xxx" width="xxx">

そうすると画像が出てくるので右クリックして"別名で保存"を選択してください。

必要な画像を全部ダウンロードした後、STUDIOにアップロードしてください。

・カラーパレット
サイト内で使うボタンや背景の色をデベロップメントツールを使ってSTUDIOのカラーパレットに登録しましょう。

デベロップメントツールを開き、色がついたボックスを選択し、カラーコードをSTUDIOにコピペすると完了です！

事前に使用する色のカラーパレットを作ると作業しやすいです🎨

💡Tips3 トレースする時はコピペしまくる

トレースに限らず、サイトを作る時は同じような構成を多用する事が多いです。そのため、コンテンツや似たようなテキスト構成などはコピーしましょう。そうする事で時間を短縮できるだけではなく、コンポーネントを意識したデザインを作成する事ができるようになります！

💡Tips4 : 細かい数値やフォントもしっかりトレースしよう

トレースする際に余裕があれば、サイトをデベロップメントツールを使いながら要素のマージン、パディング、px数やフォントなども確認しながら全く同じサイトを作ってみましょう！そうする事でより細かいWeb構造を意識しながらデザインの学びを得る事ができます。

このようにデベロップメントツールを開きます。

ここで注意する点としてまずここをクリックし、レスポンシブモードにし、

ここの数字を自分が今編集している画面の大きさの横幅と同じ数字にしましょう。そうする事で編集する時の数字とWebサイトの数字のズレを防げます。

そして検証ツールではボックスの大きさを見たり、

マージン、パディングなどをみる事が出来たり、

フォントの情報を見たりする事が出来ます。

これらの数字を参照しながらSTUDIOでトレースしてみましょう！

以上が私が思うトレースする際のTipsでした！
これからもまた定期的に動画やTipsなどをあげるので是非見てください！