Webデザインのトレース #6.Lecole Blanc
今回は、フラワーアトリエ「Lecole Blanc」さんのWebデザインをトレースさせて頂きました。
お花を扱うアトリエということで、女性向けの落ち着いた上品なデザインでした。
デザインの観察
大きなメインビジュアル
まずは2500×1200pxの大きなメインビジュアルが目立ちます。
お花と女性が写っているので、ページが開いてすぐに主に女性をターゲットとしたお花を扱うお店というのが分かります。みずみずしく綺麗なお花と女性の横顔、女性の私から見てとっても魅力的な写真です。
配色は写真が映える無彩色ベース
配色は無彩色で落ち着いた印象です。これだけでは寂しい印象も受けますが、メインビジュアルも含めて使用されている写真の色が鮮やかなので、全体で寂しい印象はありません。スタバのデザインもでしたが、基本の配色が無彩色だと他の写真素材の色が引き立ちます。
多彩なフォント使い
主なフォントは以下のようになっています。
※順番がばらばらですみません。
「Tangerine」は無料のカリグラフィーフォントで、ラインがやわらかくて上品なイメージです。
「IM FELL English」も無料フォントでかわいらしい雰囲気のセリフ体です。字間が広めでゆったりした印象を受けます。
セクション区切りの特徴
各セクションの区切りは書体の変化や文字のジャンプ率、ライン、上下の余白などによってメリハリをつけています。今までトレースしてきたサイトは背景色を変えることでセクションを区切るものが多かったですが、こちらのデザインでも十分わかりやすいです。
メインロゴは3種類の大きさを用意
画像を一括DLすると、こちらのロゴは同じデザインが3つのサイズで用意されていました。繊細なデザインなので、画面の幅を変えた時に倍率が変わって見えにくくなってしまうことがないように、大小異なるサイズを用意しているものと思われます。
手書き風のイラストが可愛いメニュー
こちらのメニューは9枚の画像データからできていました。
各要素間の余白が横60px(青)、縦70px(ピンク)できちっと整列していました。
文字だけじゃなくて手書き風のイラストがワンポイントになっていて可愛いです。
最後に
今回、フラワーアトリエ「Lecole Blanc」さんのWebデザインをトレースしました。上品かつ可愛い、お店に足を運んでみたくなる素敵なデザインでした。メインビジュアルの写真も自分でこんなに上手く撮れたら楽しいだろうなと憧れました。