スクリーンショット_2020-03-04_12.30.01

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

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

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

スクリーンショット 2020-03-04 12.32.41

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


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

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

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

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


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

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

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

画像6

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

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

スクリーンショット 2020-03-04 15.22.02

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

スクリーンショット 2020-03-04 18.28.16

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

↓imgタグはこんなやつ

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

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

スクリーンショット 2020-03-04 15.37.14

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

スクリーンショット 2020-03-04 15.43.49


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

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

画像15

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

スクリーンショット 2020-03-04 19.18.57


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

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

画像15


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

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

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

スクリーンショット 2020-03-04 16.57.13

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

スクリーンショット 2020-03-04 17.02.06

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

スクリーンショット 2020-03-04 17.02.29


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

スクリーンショット 2020-03-04 17.10.32

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

スクリーンショット 2020-03-04 17.10.52

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

スクリーンショット 2020-03-04 17.12.38

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

画像16


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

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
77
Green School 日本人初卒業生で現在SFC休学中。 株式会社gazでWeb/UIデザイナーとして活動中。STUDIOを触ることに関しては誰にも負けない自信があります。