まなびめも

新卒でWEBデザイナーとなる22歳女子が、自由気ままにお勉強メモを残していきます。

上達への近道。まねっこWEBトレース! #2

WEBトレース記事、第二弾!

今回は、実際のトレースの手順を説明しながら
気づいたことをまとめていこうと思います!


キャプチャを撮って、ワイヤーを作る



f:id:krdrsk:20160522170753p:plain

サイトのキャプチャをPhotoshopで開き、ガイドを引きながら各要素のpx数値を測っていきます。


余白のサイズはおおよそ 20px で統一されていて、大きく要素が変わる所では 50px 取っています。




f:id:krdrsk:20160522172101p:plain

また、レイヤー周りをきっちり整頓する練習にもなるので、最初にグループを作って分けておくと良いと思います!




f:id:krdrsk:20160522171708p:plain

また、背景画像が 水色のところと白色のところでは余白の取り方やコンテンツのサイズが違っていて、メインビジュアル周りと その他の細かい要素との 差別化 がきっちりなされている印象がありました。


テキストの観察


じっくり観察すべきポイントとして、 「テキスト」  が挙げられます。

テキストサイズ

テキストのサイズは 以下の通りでした。

・グローバルメニュー 漢字 ▷ 14px
・グローバルメニュー 英字 ▷ 9px
・h1 ▷ 19px
・h2 ▷ 16px
・本文 ▷ 14px (最小部分は11px)

h1は19pxと、少し大きいな〜という印象がありますが、 実際は  斜字にしている + 横に13pxの英字を添えている  ことで 浮いている印象がしないのかもしれません。 細かいところもきちんと配慮されてます!!

テキスト設定

f:id:krdrsk:20160522174401p:plain

上がテキストツールで打ち込んだままの文字、 下が実際のサイトで使われている文字です。

きちんと 文字詰め されているのがよくわかります。 画像テキストとして使用する文字列はこの細かい作業が必須ですね!



f:id:krdrsk:20160522174941p:plain

また、グローバルメニューの9pxの細かい文字は、アンチエイリアスが  OFF になっていました。

アンチエイリアスをOFFにしたことはあまりないのですが、 細かい文字だとOFFの方が見やすい のですね。めもめも!


その他細かいビジュアル

苦手なグラデーション

このサイトはいたるところにグラデーションや ドロップシャドウが使われていて、 とてもリッチなデザインでした。


f:id:krdrsk:20160522192429p:plain

ボタンもうっすら水色のグラデーションが! そして締め色として 一番下に白の1pxの線 が使われています。 こういう細かいところは本当に勉強になります...!

境界線の角の丸み

メインビジュアルのところは5pxの白い縁がついていたのですが、 これは 効果レイヤー の 境界線 で表現しています。

f:id:krdrsk:20160522192618p:plainf:id:krdrsk:20160522192617p:plain

しかし、ただ境界線レイヤーをつけるだけだと、初期設定通り 外側 に線がついてしまい 画像のように 角に丸みがついてしまいます。

その解決方法として
線は必ず 内側 にすること! そうすると、丸みはなくなります!

f:id:krdrsk:20160522193031p:plain

ですがこの場合、オブジェクトは 境界線を含めたサイズにしておく  ことが大切です。


まとめ

今回のトレースでこれだけたくさんのことを吸収できたので、やっぱり効率のいい勉強法だな〜と改めて思いました。

ですが、今回は  作業時間の目標を立てる ことをすっかり忘れていました。先輩から作業を振られるときに「どれくらいでできそう?」と聞かれることが多いと思いますが、私は この作業にはこれくらいかかる という見積もりがとても苦手です。いつも的外れな時間を答えてしまいます。

次のトレースではそのあたりにも注意しつつ、また時間ができた時にやってみようと思います!