ファッション系コーポレートサイトのトレースをしました。


■構成
トップページ

BUSINESS(事業内容)

COMPANY(会社や理念について)

RECRUIT(採用)

PRESS RELEASE(新着ニュース)

CONTACT(お問い合わせ)

フッター(SNSなど)


(トップの画像は小さいものしか手に入れられず画質が荒くなってしまいました。。)
↑ ※5/12追記 photoshopにてラスタライズしてから拡大して書き出しすることで少し劣化を抑えることができました。


項目が多いながらもかなりコンパクトにまとまっていてすごいと思いました。
4枚の写真、横幅いっぱい使った写真の背景、段組など、レイアウトのおかげで単調じゃない印象になっています。
逆に反復して使われているのは、フォント、白地に黒英字のカードっぽいデザイン、黒地に白英字のボタン、丸ボタン。


カラーはコーポレートサイトに多く見られる白と黒を使用しています。
適宜、白と黒を逆にしたりグレーを入れることで、綺麗に引き締まって見えます。
上質な写真+小さめの白テキストにより洗練された印象になっています。外国のモデルを起用した上質な写真+英字テキストのスタイルはファッション系のサイトで多く見られ、このサイトもその特徴がみられますが、BAYCREW'Sはファッション以外にも飲食や家具、フィットネスなどの事業を展開していることもあり、ライフスタイルを提案する明るい雰囲気のあるサイトになっているようです。
BAYCREW'Sのロゴは青のイメージもありますが、WEBサイトでは青は使われておらず、ロゴも黒地に白になっています。
メインカラーを青にすると、また違った印象で、テキストや写真の雰囲気も相まってより女性的な柔らかい可愛いイメージが強くなる印象。黒の時の方が洗練されてしっかりとした引き締まった印象になると思いました。黒の方がより固すぎず可愛すぎない印象。(下画像参照)


フォントは英字がPoppinsというフォント(GoogleFontsにある)で、日本語は角ゴシックを主に使用していました。
Poppinsはゴシック系フォントで固すぎず可愛すぎない印象。BAYCREW'Sのイメージに近くてぴったりだと思ったので、自分もコンセプトやイメージに合わせてフォントをしっかり選べるようになりたいです。


■洗練されたファッション系のコーポレートサイトをつくる要素
・色数を抑えて、無彩色をうまく使う
・上質な写真を使う
・写真+白テキスト
・小さめのテキスト
・ゆったりめのアニメーション
・線などのあしらいが良いバランスで入っている
・先端の山が小さめの矢印


ぜひ実際のサイトもご覧ください。

黒→青にしてみたイメージ

Back to Top