Design Stock

デザインのアレコレ

  1. HOME
  2. レイアウト
  3. Webデザインをトレースしよう!「ネイルサロン」編

Webデザインをトレースしよう!「ネイルサロン」編

f:id:mtk-hcwj:20180313131156p:plain

前回の記事「アウトプットのレベルを上げよう!Webデザインのトレースって?」ではWebデザインをトレースする方法についてご紹介しました!

今回は、僕が実際にネイルサロン「Annabel Lee」さんのサイトをトレースしてみて気がついたことをまとめて見たいと思います!

 

選んだ理由

f:id:mtk-hcwj:20180313165817p:plain

今回、Annabel Leeさんのサイトをお手本に選んだ理由は以下の3点です。

  • ターゲット層が20代〜30代の女性
  • 可愛らしいテイストで縦に長いフラットなデザイン
  • 美容・ヘルスケア関連のサイト

女性向けの美容関連のデザインをあまり作ったことがなかったので、今回はAnnabel Leeさんのサイトを選ばせていただきました!

ちなみに見つけるきっかけになったギャラリーサイトは「Web Design Clip」です。

 

気がついたこと

インパクトのあるメインビジュアル

f:id:mtk-hcwj:20180313131156p:plain

やはり一番の特徴は、メインビジュアルに使用されている女性の写真です。
「寄りの写真」にすることで女性のビジュアルが強調され、ファーストビューでユーザーにインパクトを与えています。

また、写真や文章を配置しているコンテンツ幅(1200px)からあえてはみ出すことによって空間的な広がりを演出しています。
横幅いっぱいの写真は時間が進んでいるような感覚も与えることができますね。

「裁ち落とし配置」に関してはこちらの記事↓をご覧ください

裁ち落とし配置をマスターしてイメージを上手くコントロールしよう

 

可愛らしいフォント

f:id:mtk-hcwj:20180313171508p:plain

メインビジュアルに使用されているフォントは「Caviar Dreams」のRegularサイズです。丸みを帯びた柔らかい印象を受けます。
特に小文字の「w」は曲線が特徴的ですね。
女性的な可愛らしいフォントが使用されていることがわかります。

 

写真と文章の大きさ

f:id:mtk-hcwj:20180313174152p:plain

写真のジャンプ率は高く、文字のジャンプ率は比較的低く設定され、メリハリをつけているのがわかります。
写真を大きく配置することによって、店内の空気感や広々とした印象を直感的に伝えることができます。

また、写真に比べて文字を小さく設定することにより、落ち着いた印象や高級感を演出しているのもわかりますね。
「RECRUIT/SCHOOL」のコンテンツエリアでは、社員の明るく楽しそうな写真を横に広く配置することによって賑やかな印象を与えています。

 

広い余白

コンテンツを分ける際、上下の余白は80~100pxに設定されています。
余白をたっぷりとることで、ゆったりとした印象になっていますね。

また、サイト上に空間の逃げ場を多くつくることによって心理的に落ち着いた、安心感のあるデザインに仕上がっています。

 

配色

f:id:mtk-hcwj:20180313174444p:plain

清潔感のある白をベースカラーに、コンテンツエリアの見分けがつくよう交互に白と薄い灰色を背景色に使っています。
全体の統一感は保たれているので、薄い灰色は女性らしさを出したい場合でも活用できるんですね!
写真で見られるネイルの赤色やピンク色がアクセントカラーになっており、可愛らしさがうまく演出できています。

 

最後に

トレースをするだけで、様々なデザインのポイントに気がつくことができます。
今回得られたことを参考に、これから自分の制作でも活かしていきたいと思います!

皆さんもぜひ、参考にして見てください!