自主練の記録

Webデザインのトレース #6.Lecole Blanc

f:id:ne-ochi:20181022140903p:image
今回は、フラワーアトリエ「Lecole Blanc」さんのWebデザインをトレースさせて頂きました。
お花を扱うアトリエということで、女性向けの落ち着いた上品なデザインでした。
 

デザインの観察

大きなメインビジュアル

f:id:ne-ochi:20181022140911p:image
まずは2500×1200pxの大きなメインビジュアルが目立ちます。
お花と女性が写っているので、ページが開いてすぐに主に女性をターゲットとしたお花を扱うお店というのが分かります。みずみずしく綺麗なお花と女性の横顔、女性の私から見てとっても魅力的な写真です。
 

 配色は写真が映える無彩色ベース

f:id:ne-ochi:20181022140907p:image
配色は無彩色で落ち着いた印象です。これだけでは寂しい印象も受けますが、メインビジュアルも含めて使用されている写真の色が鮮やかなので、全体で寂しい印象はありません。スタバのデザインもでしたが、基本の配色が無彩色だと他の写真素材の色が引き立ちます。
 

多彩なフォント使い

主なフォントは以下のようになっています。
f:id:ne-ochi:20181022140930p:image
※順番がばらばらですみません。 
「Tangerine」は無料のカリグラフィーフォントで、ラインがやわらかくて上品なイメージです。
「IM FELL English」も無料フォントでかわいらしい雰囲気のセリフ体です。字間が広めでゆったりした印象を受けます。
 
テキストの要素数が他より多いinformationの部分は(1番下)、フォントをセリフ体、明朝体、ゴシック体と使い分けると共に、背景色や下線を加えるなどして各要素の差別化を図っています。
 

セクション区切りの特徴

f:id:ne-ochi:20181022140924p:image

各セクションの区切りは書体の変化や文字のジャンプ率、ライン、上下の余白などによってメリハリをつけています。今までトレースしてきたサイトは背景色を変えることでセクションを区切るものが多かったですが、こちらのデザインでも十分わかりやすいです。

 

メインロゴは3種類の大きさを用意

f:id:ne-ochi:20181022140854p:image
画像を一括DLすると、こちらのロゴは同じデザインが3つのサイズで用意されていました。繊細なデザインなので、画面の幅を変えた時に倍率が変わって見えにくくなってしまうことがないように、大小異なるサイズを用意しているものと思われます。
  

手書き風のイラストが可愛いメニュー

f:id:ne-ochi:20181022140859p:image
こちらのメニューは9枚の画像データからできていました。
各要素間の余白が横60px(青)、縦70px(ピンク)できちっと整列していました。
文字だけじゃなくて手書き風のイラストがワンポイントになっていて可愛いです。
 

最後に

今回、フラワーアトリエ「Lecole Blanc」さんのWebデザインをトレースしました。上品かつ可愛い、お店に足を運んでみたくなる素敵なデザインでした。メインビジュアルの写真も自分でこんなに上手く撮れたら楽しいだろうなと憧れました。
ABOUT ME
fuyu_na
独学でデザインを学びフリーランスのデザイナーになった元理学療法士。グラフィック・Webデザインの仕事を中心とし、SEO・Webライティングの腕も磨いてます。とにかくデザインに夢中。