自主練の記録

Webデザインのトレース　#1. napla

  /
f:id:ne-ochi:20180914080403p:plain

9月に入ってWebデザインのトレースを始めました！
いろんな記事を参考にしつつ手探りで勉強中です。
時間はかかるけど学べることがたくさんあって楽しいです！
アウトプットの練習と記録用にトレース結果を記事にしてみようと思います。

今回は「napla」さんのWebサイトをトレースさせて頂きました。

選んだ理由

f:id:ne-ochi:20180913205009p:plain

 naplaさんのサイトを選んだ理由は3つ。

  • シンプルだけど動きがあって楽しいデザインに惹かれた
  • ナチュラルな雰囲気と清潔感あるデザインが好きになった
  • バナー広告でよく見ていて商品自体が気になっていた

率直に言ってかなり私好みで、一目惚れに近いデザインでした。 

トレースして気づいたこと

以下、トレースしてみて気づいたことです。
実際気づいたことはたくさんあるのですが、今回はいくつかに絞りました。

レイアウト

f:id:ne-ochi:20180917073646p:plain

ガイドを引くとグリッドレイアウトになっています。
グリッドレイアウトを使うことで、整然とした美しいレイアウトになります。
また、レスポンシブデザインでも後から編集しやすくなっています。

余白

f:id:ne-ochi:20180919072732p:plain

各画像間の余白は基本的に80〜82pxに統一されていてます。
「PRODUCT」の部分は 44px の大きな余白をとって
ゆったりとした印象を与えつつ上の要素との差別化を図っています。

「INFORMATION」は文字を小さく、余白を大きくとることで、
他の部分より文字の量が多くなるにも関わらず静かな印象を与えています。

Text / Font

全体的に文字は細めで、女性的で明るい印象を受けます。
Google Fonts の「Overpass」という Webフォントが使われています。
見出しやサイトマップなどはBoldでメリハリをつけています。
字間は全体的に letter-spacing: 2px とゆとりがあります。

  • グローバルメニュー　：11px
  • h3　「PRODUCT」　 ：34px
  • PRODUCTのリンク　 ：16px
  • INFORMATION　　　 ：14px　見出しのみBold
  • サイトマップ　　　　：14px　Bold 

COLOR

f:id:ne-ochi:20180919074954p:plain

清潔感があり飾らない白を基調としたナチュラルな配色。
緑を使うことで自然や草木を連想させ、穏やかな気持ちを与えています。
また、少ない色数で構成され、全体的に落ち着いた雰囲気です。
画像が多めのデザインなので、色鮮やかな画像もアクセントになっています。

色が変化するコピー

f:id:ne-ochi:20180913214614p:plain
「SALON’S BEST PARTNER.」というコピーには、
グラデーションの色が変化するアニメーションがついています。
これ、CSSでできるんですね！驚きました！
「animation」「@keyframes」を使うみたいです。

「ひとつひとつに寄りそう。」はSVG画像になっています。
SVG画像はどれだけ拡大・縮小しても滑らかな曲線を描くことができ、
テキストデータとして編集できるなどのメリットがありますが、
諧調豊な画像には不向きだといわれています。
上のコピーにSVGを採用しなかったのはそのためだと思われます。

いずれも Letter-spacing: 6px で字間をゆったり広くすることで
一文字ずつの印象が強くなり目立ちやすいビジュアルになっています。 

コンテンツ

f:id:ne-ochi:20180916173228p:plain3つの商品画像がメインビジュアルとして使われています。
下にもサイズが異なる画像が2つあるのですが、
この3つの画像に関して両サイドが裁ち落としになっていて
横にスライドするデザインになっているので、メリハリがついています。

中心とサイドの画像の間には緑色のラインが入っていて、
画像が左右に動くことを視覚的に理解しやすいです。

画像の角は丸角になっていて、安心感ある優しい印象を受けます。

固定された「PAGETOP」と「商品を探す」ボタン

f:id:ne-ochi:20180920171731p:plain

左下には縦書きの「PAGETOP」リンクがあります。
クリックするとサーッとページ上方へスクロールします。（jQuery）
縦書きにすることでスクロールしても他の要素の文字と重ならず、
ページの余白内に収まって迷子になりにくくなっています。

右下には「商品を探す」ボタンが配置されています。
アクセントカラーを使った大きめの丸いボタンがよく目立ちます。
また上のコピーと同じようにグラデーションの色が変化しています。
触れるとボタンが拡張するので押したくなるところも良いです。

最後に

今回は「napla」さんのWebデザインをトレースさせて頂きました。
ひとつのサイトからたくさん学ぶことがあり、参考になりました！
よく見ないと気づかないポイントもありますし、トレースして損はないです。
自分好みのサイトをトレースすることで得意分野を伸ばしたり、
苦手なサイトの練習をすることによって幅広い分野の対応ができそうです。
今後もっと多くのサイトをトレースして技術を盗みたいと思いました！

独学×デザインの本を発売中！
「独学の流れ」と「デザインの独学方法」について
まとめた薄い本を作りました！現在販売中です！

本の販売ページはコチラ

あわせて読みたい