入社１年目の新人デザイナーがWEBデザイン徹底観察してみた【第二回】
こんにちは！
新人デザイナーのH.K.です。
今回はWebサイトを1つ選んで、じっくり徹底観察する回の第二回となります！
前回の記事が好評だったため、調子に乗って第二回もお送りする運びとなりました。
前回の記事はこちら↓
デザイナーとして成長するためには、他の優れたサイトを研究することが欠かせません。
Webデザイナーとしてのスキルアップを目指している自分と同じ境遇の方には、ぴったしの記事となっているので、ぜひ最後までご覧ください！
(仕事が終わったあと頑張って書いているので、"スキ"がめちゃくちゃ励みになります笑)
今日観察するサイトはこれだ！
この観察を通して、以下のようなWEBデザイナーとしてのスキルアップができたらなと思っています。
今回観察するサイトはコチラ
今回は、ファッションブランドnico and …のオフィシャルブランドサイトを見ていきたいと思います。
早速、観察に入る前にこのブランドのざっくりとした情報をまとめてみました
・主にアパレル関連を販売している日本のファッションブランド
・ブランド名の由来は「nobody i know own style ‐ わたし以上にわたしのことを知っている人はいない。つまり、わたしのことはわたしが一番知っている」から
・ターゲットは10-30代の女性(予想)
・アパレルだけでなく雑貨やインテリアなども扱う大型店舗も展開している
なんとなくですが、サイトのターゲットやブランド全体のコンセプトを掴むことができました。ここでまとめた内容は、今後セクションごとの観察をする際に、どうしてそのデザインにしたのかを考察する際に役立ちます。
ざっくりとサイト全体の構成や雰囲気を掴んだところで、セクションごとの観察に移りましょう。
セクションごとに観察
ヘッダー・フッター
ヘッダーの要素は以下で構成されています。
・ロゴ
・今日の日付
・Pick Up記事
・バナー
・記事カテゴリ
・検索ボタン
ヘッダーはブランドサイトと言いつつ、実態はメディアサイトととも言えるので、ユーザーが見たい記事をいかに簡単に見つけられるかを重視したパーツ構成になっている印象を受けました。
また、検索ボタンは押すと、エリアが展開され、キーワードなど詳細な検索ができるようになったり、関連ページへの導線などを確認することができます。nico and..はブランド単位でのファンが多く、特定の記事を探すようなユーザーが少なそうなため、キーワードなどの詳細検索は格納したのかもしれません。
日付表示のあしらいが、「今日だけの画面」感を演出していて可愛らしいです。
つづいて、フッターです。
なんと驚いたことに、フッターは、先程のヘッダー内の検索ボタンに格納していたエリアがまんま流用されています。というよりも、フッターが、ヘッダーに流用されていたという見方が正しいでしょうか。
ヘッダーもフッターも、情報構造として適切な量は変われど、「サイト内の重要なコンテンツへの導線集」という共通の役割があるため、パーツを増やさずに済むという点でもコーダーに優しいこの方法は、自分でも取り入れる機会がありそうだと感じました。
FV
FVでは、左側に大きくメインで見せたい記事を配置、右側にはサブで押し出したい記事とともに、人気の記事ランキングを配置しています。
結果的に、FV中で8記事の動線を配置していることになっているのですが、最近よく話題に上がるBento UIを使用したレイアウトや、細かいアニメーションをちりばめることで、デザイン性の高い楽しげなサイトになってい臨床です。
丸い「NEW」のタグがコロコロしていたり、ランキングのアイコンがメダルになっていたり細かいグラフィックを考えるの楽しかっただろうな〜。
最新の編集記事
最新の記事コンテンツがリスト化され4×2の合計八個並べられています。レイアウト自体はよく見るものですが、ホバー時の挙動や新着アイコンの動きなど一手間を加えることで、サイト全体の世界観をここでも表現しています。
また、全記事一覧変動線ではなく、「連載記事一覧」と「特集記事一覧」の動線を右上に、設けることで、各ユーザーの目的ごとにサイト内回遊を進めるのを手助けています。
"連載"を選ぶユーザーは特に見たい記事が決まってそうですもんね。
ニコアンドからのお知らせ
ここでは(おそらく)最新のお知らせを４つ表示しています。
表示数が４つというのは少ないと最初は感じましたが、更新頻度を見ていくと、ほぼほぼ一週間ごとレベルでしか更新されないコンテンツということがわかり、むしろ最小限に表示数を抑えて、世界観を寄せたデザインにすることに振ったのではないのでしょうか。それを踏まえると、このお知らせではあまり見ない、かなり凝ったデザインの意味も納得できます。
他が六角形のサムネのなか、丸型サムネのものがあるのは最新の記事だから？おそらくルールがあると思うのですが、、リピートしなきゃですね(笑)
ニコアンドのなかま
nico and…系列のサイト導線が設置されています。
他社サイトでは、気持ち程度の導線を配置して、セクションを済ませている印象ですが、さすがこのサイト。スクラップ調の加工をしたりして、サイト自体のポップなトンマナにこのセクションも合わせています。
切り抜きの形を各動線で揃えていないのは、すべて実写の画像素材のため、ただ並べてしまって個性を消してしまわないようにでしょうか。高級感を担保したものや、カジュアル一点重視のものまで切り抜きだけでイメージを担保しているのは、参考にしたいテクニックです。
お店から発信するコンテンツ〜各国のフラッグシップストア
この2つのセクションも単なるカードタイプのデザインで終わらせず、斜めに配置したり、丸型にしたりして、サイト全体のポップな雰囲気に合わせています。
ただこちらは、将来的に更新される可能性を考慮してなのか、先程の「ニコアンド」のなかまと比べて、デザインがおとなしめで、拡張性の余地が残されているデザインの印象です。機能的にも優れたデザインづくりをこういったことからも確認できました・
コラム
記事の連載企画が表示されているセクションです。ここも、今後増える可能性が高く、量も無限に増えていく可能性もあるため、よりレイアウト自体はシンプルにしつつ、細かいデザイン性でサイトの雰囲気を担保している印象です。
ここでも新着アイコンのアニメーションが使われていてかわいいですね。こういった、オリジナルの装飾ルールも繰り返し使われることで、ユーザーに共通UIとして浸透されていくため、実際のデザイン制作で意識してみるといいかもしれません。
スタッフポスト
ここでは店舗スタッフのインスタが閲覧できるようになっています。
参照元がインスタのため、そのままインスタを意識したデザインになっている印象です。インスタの画像は1枚目で投稿タイトルなどがひと目でわかりやすくなっているものが多く、そこを意識した結果、インスタのフォーマットをそのまま流用しているのではないかと思います。
最後に
さて、今回も駆け足にはなりましたが、新人WEBデザイナー視点で「第二回」となるWebサイトの徹底観察をしてみました。
今回観察した「nico and…」のオフィシャルブランドサイトでは、Z世代など若い層に刺さるカジュアルなアパレルブランド表現を心がけているサイトのように感じました。情報のムダを抑えつたワイヤー設計を抑えつつ、飽きないデザイン作りはぜひ自分の引き出しにも取り入れたいです！
ちなみに今回のサイトも前回と同じくWEBデザインのギャラリーサイトで探してきたものです。
ギャラリーサイトについて、僕がよく使っているサイトを以前まとめた記事があるので、ぜひチェックしてみてください！
今回の観察を通じて、WEBデザイナーとしての引き出しをさらに増やし、より魅力的なサイトを作れるようになっていけたらと思っています。
引き続きの購読をお待ちしています！
(もしよければフォローもおねがいします)
では、また！
この記事が気に入ったらサポートをしてみませんか？