【デザイン強化月間】〜第一弾 サイトトレース〜
はじめまして！note初投稿です。
５月からデジLIGでwebデザインの勉強をしている、たかはしと申します。
３月までは金融事務（よくある金融機関の窓口）として働いていました。前職の話＆webデザイナーを目指すきっかけ等は、また別の記事で詳しく自己紹介ができればと思います！
現在、デジハリのカリキュラムはほぼ終了。残すところは１０月から始まる卒業制作だけとなりました。
Ps・Aiの使い方＆コーディングの基礎知識をなんとか身に着け、ようやくスタートラインに立ちました。でも、デザインに関してはまだまだ。寧ろここからが本番です。
卒制直前であるこの９月は少しでも出来ることを増やし、力をつけていきたい！ということで・・・
９月をデザイン強化月間と名付けました！（超個人的目標）
〜第一弾 サイトトレース〜
今までバナートレース・オリジナルバナーは取り組んでいたのですが、サイトトレースはやったことがありませんでした。最近課題の一貫でサイトのデザインに初挑戦したものの、かなり苦戦。余白や文字の大きさの感覚等、様々な事を勉強したかったので第一弾はサイトトレースから始めることにしました！
使用ツール
今回初めてXDを使用してみました！噂には聞いていたXD。いやいやすごい、すごすぎますね！とにかく直感的。Ps・Aiが使えればあとはなんとな〜く使えてしまいます。個人的にすごく肌に合う感じがして、これからバリバリ使っていきたいと思います・・・！
▼XDの操作方法は以下で勉強しました
学習のポイント
サイトトレース・・・といっても何をどう勉強すればいいの？となっていた私を救ってくれたnoteです。こちらの学習ポイントを参考にしながらトレースを進めました。
トレースしたサイト
今回トレースしたサイトはBOTANISTオフィシャルサイトです。
選んだ理由は何点かあるのですが、まずデジハリのトレーナーさんに、トレースするなら最初はあまりアニメーションメインではないサイトがいいと教えて頂きました。
また、卒制では美容院・美容師関係のサイトを作るので、似たジャンルでトレースしたいなと思い選択しました。（あとは、個人的にBOTANISTの商品パケやサイトの雰囲気、余白の感じが大好きで分析してみたかったのです、、笑）
お手本&トレース
※画像や同じ形式のテキスト等は省略しています。
・お手本
・トレース
情報整理
サイトコンセプト
ボタニストのブランドコンセプトは生活の中に植物を取り入れるボタニカルライフスタイルというもの。植物との共生を掲げている。
・植物由来成分を多く使った製品
・洗練されたシンプルなパッケージデザイン（シャンプーは派手な色のパッケージが多い中、シンプルな見た目で差別化）
→生活に溶け込むボタニストの自然派イメージを作り上げている。
上記のブランドイメージを損ねないように、サイトデザインもシンプルなデザインになっている。白黒二色のモノトーン、小見出しやボタン、商品一覧も長方形。グリッドに沿った配置に見える。無駄な装飾は一切なく、使用されている画像も白黒or植物が基調となっている。余白感がたっぷりとられ、一般的なシャンプーよりちょっとだけ高級感のある商品イメージに合っている。
【TG】
商品TGと同様、20代〜40代の女性と思われる。一言で表すならていねいな暮らし
【全体的なカラー】
商品コンセプトカラーと同様、白黒二色のモノトーン。背景色やフォントカラーは薄いグレー〜濃いグレーで変化をつけている。
【フォント関係】
種類
欧文・見出しタイトル：Josefin Sans
和文：A-OTF 中ゴシックBBB Pr6N
文字色
見出しタイトル：#111111
その他本文：#333333
フッターの見出しのみ：#222222
サイズ
グローバルナビ：12px
見出しタイトル：40px
その他：12〜16px程度
コンテンツごとの分析
メインビジュアル
6枚の画像がゆったり切り替わるスライドショー。画面いっぱいにコンテンツが広がっている。画像はどれも白や植物を使用したボタニストのブランドコンセプトが一目で感じられる物になっている。グローバルナビはスクロール後上部に固定され（position: fixed）白へ変化。僅かに透過していて、抜け感がある。←rgba(255, 255, 255, 0.9)
サイトを開いた時点ではグローバルナビの背景色がメインビジュアルに透過しているので、写真の邪魔をしない。
TOPICS
NEWSなどのお知らせ一覧。
右側が見切れていて、まだコンテンツが続いているのだなと分かりやすい。スライドショーの遷移ボタン（と呼んでいいのか？）を押すと、画面幅いっぱいに左右へスライドしていく。ニュースやコラムのような随時更新される情報なので、次から次へとキャッチしていると感じられる作りになっている。後ほど出てくるBOTANIST journalでも同じ作りになっていると感じられる。
PRODUCTS
シンプルな横並び。背景色は#F6F6F6。また、カテゴリごとに小見出しがついていて、ヘアケア・スキンケア・ボディーケアの商品があるのだなと分かる。
RANKING
基本的な作りはPRODUCTSと同様。背景色は#EFEFEF（PRODUCTSより少し濃いグレー）
PRODUCTSで「こんな商品があるんだ」と知った後、すぐにランキングを配置することで「これが人気商品なんだ」と購買意欲を掻き立てる。
BOTANIST journal
植物に関する様々なコラムが記載されている。唯一商品と直接は関係ない部分になるので、画像サイズも小さく（120×157px）、スライドショーの動きも少し特徴的。上記でも触れたがTOPICSと同様、随時更新され最新情報がキャッチされるような作りになっている。
BOTANICAL CLOSE-UP
商品に使われている植物を一つ一つ紹介している。ボタニストのブランドコンセプトの中に出てきた「植物への深い知識」を表すページかと思われる。
ゆったりと数種類の植物の画像が切り替わる。
footer
ソースを見ると、footer navとfooter mainの２層に分かれている。
・footer nav
ブランドコンセプトに関わる部分や、外部リンクを画像付きでリンクを配置。
・footer main
サイトマップになっている。カテゴリとサービスの２つに分かれて近接&整列されて見やすい。SNSアイコンも配置
全体部分
基本的にコンテンツ幅は約1000pxで統一。商品・ランキング部分のみ1200pxと少し広がっている。余白部分の法則は分からず・・・。
ボタンは170×60px(font-size:18px)
まとめ
ボタニストのオフィシャルサイトは、ブランドサイトでありながら、ネットショップ的側面もあると感じた。商品一覧やランキングページにカートボタンがついていたり下層ページに移動することなく購入できる。（グローバルナビにもカートボタンがついている）
また、ドライフラワーの作り方やスパイスシロップの作り方など、商品に関係ないコラムも搭載している。これはボタニストのブランドコンセプトである「植物との共生」に関する記事であり、生活・暮らしごとブランドとして作り上げていく狙いがあるのではないかと感じた。
おまけ（個人的な感想など余談）
今回トレースしてみて、お恥ずかしい限りなのですがJosefin Sansというフォントを知りました。めちゃくちゃお洒落ですね！ちょっとfuturaっぽい感じもします。調べてみるとGoogle Fontsで利用できるのですね・・・勉強になりました。
また、BOTANISTを展開している会社 アイエヌイー（I-ne）なのですが、調べてみるとなんとヘアスタイリングブランドSALONIAと同じ会社でした・・・！びっくりです。私はSALONIAのストレートアイロンを愛用していて、サイトも素敵だなぁと思っていたのですがBOTANISTと同じ会社と聞いて納得でした・・！調べてみると他にも色々な事業を展開しているみたいです。BOTANISTが誕生したのは2015年だそうですが、当時からInstagramを利用したSNSマーケティング戦略を行なっていたとのこと。５年も前となると今ほど「映え」の文化もなかったですし、インスタやYouTubeでの広告もここまで活発ではなかったような気がします。
なんだか脱線してしまいましたが、サイト一つには企業の思いがたくさん詰まっているなぁと思いました。ブレない軸もって作られたサイトはここまで説得力があるのだなぁ〜と勉強になりました。
▼ちなみに、BOTANISTを立ち上げるまでの記事がありました。すごい・・・！
長くなりましたが、ここまで読んで下さりありがとうございました！
この記事が気に入ったらサポートをしてみませんか？