サイト分析 vol.5 Ban Design Studio
今回分析するのは東京都国立市を拠点とするBan Design Studioさんのサイトです。
ひと目でキュンとして好き！と思いました。
ターゲット
このサイトは、Ban Design Studioさんの企業サイトで、トップページには作品が並べられています。
→ターゲットはBan Design Studioさんに仕事を依頼しようとしている人
商品パッケージやロゴの作成を依頼できる人を探している人
サイトのねらい
・これまで手がけたプロジェクトを知ってもらい、依頼につなげること
・どんなことができるのか知ってもらうこと
・どんな表現が得意なのか知ってもらうこと
・何を大事にしているのか知ってもらうこと
サイトから受ける印象
・シンプル
・柔らかくもあり少し力強さもある
・清潔感
・丁寧さ
使用フォント
・Outfit（Google Fontsから使える）⇨h1,h2,h3,h4
・A1ゴシック M（モリサワフォント）⇨h1,h2,h3,h4
・A P-OTF A1ゴシック Std M（モリサワフォント）⇨h1,h2,h3,h4
・こぶりなゴシック Std（モリサワフォント）⇨本文
・こぶりなゴシック W6 JIS2004⇨本文
・Sans Serif
全体的に柔らかくウェイトが大きいフォントを使用しているので、安定感を感じる。
使用カラー
・ベースカラー #fff
・メインカラー #111
・アクセントカラー #ff4e00
・ホバー時の背景 #f9f9f9
ほとんど無彩色で、ホバー時のリンクや表示中のページ位置の表示のみアクセントカラーを使用している。
ファーストビュー
左上にロゴ、その下にメニュー、中央にこれまで手がけた作品をスライドショーで表示している。
作品である商品の写真の背景はどれも白で、しっかり作品に見る側のフォーカスがあたるうえ、統一感がある。
画像の角は丸く切り取られているため、ここからも柔らかさを感じる。
右上にはBan Design Studioさんがこれまで手がけた商品を販売しているECサイトへのリンクが縦文字で表示されている。
そして、その下（FVの右下）にはコピーが書かれている。
余白の取り方
コンテンツ部分のmax-widthが指定されている。
コンテンツひとつひとつの間もゆったりとした余白が設定されている。
文字の組み方
行間（line-height:2）・字間（letter-spacing: 0.06em）と広めにとってある。
基本的に横書きだが、ところどころに縦書きの文字が混ぜられていて整った中にも変化がある。
写真の質感
明るく色鮮やか。商品自体を目立たせるように背景は白。また、見せたいものに焦点が当たっていて自然と目を引かれる。
視線の流れ
文章と写真を横並びにレイアウトし、上から写真が左で文章が右、文章が右で写真が左・・・と写真と文章の流れが交互になっていてリズムがあり、視線の誘導がスムーズだと感じた（S字の連続のようなかんじ）。
また、セクションの切れ目で画面幅いっぱいの次のコンテンツが配置されているなど区切れがはっきりしてわかりやすい。
良いと思ったところ
ファーストビューが可愛いと感じた。可愛いと感じたのは私の感覚（皆さんは可愛い以外の印象を受けるかもしれない）だが、それはフォントの丸さやウェイト、写真の質感やプロダクトのデザインがどストライクだったためだ。また、シンプルさにも心惹かれた。
このサイトはBan Design Studioさん自身の自己紹介のようなものだと思うが、サイト全体の雰囲気から丁寧さや柔らかさが伝わってくる。その上、これまで関わったプロジェクトも見ることができ、何ができるのか、どんなものを作るのかがわかるサイトだと思う。