トップページへ戻る

メンズファッションサイトのデザイン・コンテンツを解説!

この記事を書いた人 :

メンズファッションサイトのデザイン・コンテンツを解説!

デジタルシフトが進み、ECに進出するブランドも増えてきているメンズファッション業界。ウェブ上でも熾烈な競争が行われています。
ここではメンズファッション業界のウェブサイトを配色やフォントサイズといったデザイン面、必要なコンテンツの面などから考察。業界の今後の動向と合わせて、「メンズファッションサイトのあるべき姿」を提案していきます。

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ

Google検索でUIの高いメンズファッションサイトをピックアップ

ユーザーがメンズファッションサイトにたどり着くチャネルはInstagramやTwitter、TikTokなどさまざまです。しかし、これらのプラットフォームで露出しているメンズファッションサイトは、「サイトとして優れている」かどうかがわかりません。

そこで今回はGoogle検索を利用して、分析対象となるサイトをピックアップします。Googleには「ユーザーに有益な情報を提供しているページを上位表示させる」というアルゴリズムが搭載されており、Google検索上位表示サイトを分析すれば「ユーザーのためになるサイト構造」がわかると考えられるためです。

2021年2月現在、Googleで「メンズファッション」と検索すると下記のようなサイトが上位表示されました。

・ZOZOTOWN
・WEAR
・楽天
・MEN’S FASHION PLUS
・SHOPLIST
・Amazon
・MAGASEEK
・OTOKOMAE
・Collection
・Yahoo!ショッピング

ZOZOTOWNや楽天、Amazonといった大手通販サイトが並んでいます。
また、通常検索結果(オーガニック検索)の上部には、現在地(東京都新宿区)にパーソナライズされる形でGoogleマイビジネスに登録されているメンズ洋服店の情報が掲載。右側にはGoogleショッピングからの広告も画像で掲載されています。
単純に検索結果画面への露出を狙うなら、このあたりも押さえておきたいポイントです。

● 検索結果例①

※2021年2月調査時点の検索結果画面です。

また、検索結果画面下部には動画・画像検索の結果が表示されました。動画・画像検索部分には着こなしや人気アイテムを伝えるコンテンツが並んでいます。

● 検索結果例②

※2021年2月調査時点の検索結果画面です。

「メンズファッション」と検索するユーザーのニーズは多様です。例えば以下のようなニーズが考えられます。
・近所のメンズファッションショップが知りたい
・メンズ服を通販で買いたい
・流行りのメンズ服が知りたい
・メンズ服の着こなしを学びたい

Googleの検索結果画面ではこれらのニーズに対し、大まかには下記のような対応で回答していると言えるでしょう。
・近所のメンズファッションショップが知りたい→ローカルボックス
・メンズ服を通販で買いたい→オーガニック検索
・流行りのメンズ服が知りたい→画像
・メンズ服の着こなしを学びたい→動画

さて、ここからはGoogleオーガニック検索結果のうち、ファッションに特化したサイトを取り上げて、メンズファッションサイトのコンテンツやデザインについて考察していきます。

一部のコンテンツが切り取られて表示されている動画・画像検索よりも、オーガニック検索に表示されているサイトの方が、「サイトでできるウェブ体験全体」「サイト構造全体」が、ユーザーニーズに適ったものになっているであろうと考えられるためです。

メンズファッションサイトのコンテンツ・デザインの考え方とは?

メンズファッションサイトに流入してくるユーザーのニーズは、「ほしいものがどの程度決まっているのか」の度合いによって下記のように分類可能です。

・ほしい服が既に決まっている人(雑誌やTVなどで見かけた服をピンポイントで探しにきている)
・「よさそうなアウターがあればほしい」といった、大まかに欲しいものが決まっている人
・特に目的はないが色々と服を物色したい人(リアルで言えばウィンドウショッピングのようなニーズ)

これらのニーズに応えるためにあたって大切になるのが「回遊性」です。移り変わりが激しいファッション用語を的確に反映したカテゴリ構成を作ったり、ユーザーのファッションセンスに合わせたコーディネートの服をまとめて提案したりといった工夫を凝らしつつ、それぞれのページにスムーズに遷移できるようにしなくてはなりません。

ファッション通販の大手ZOZOTOWNでは2020年11月にカテゴリー構成とこだわり条件検索の大幅な見直しを行なっており、これもユーザー体験を向上させるためのものでした。すでに多くのユーザーを獲得しているであろう業界最大手のサイトでもカテゴリー構成・条件検索といったサイト回遊性を高める工夫をし続けているのです。

■参考URL:【ZOZOTOWN】SEO担当者が「カテゴリー」を見直したお話し
https://technote.zozo.com/n/n714ebc3d317d

さまざまな基軸で服を絞り込めるファーストビュー要素

まずは各サイトのファーストビュー要素を見ていきます。MEN’S FASHION PLUSではグローバルメニューにカットソー・ライトアウター・パンツ・シューズなど、服のジャンルを並べて、見たい服の情報が掲載されたページに遷移できるようにしています。同時にスライダー画像でセール情報をアピールすることも忘れていません。ファーストビュー左下に「LINE友達追加」への訴求ボタンがあるのも見逃せないポイントです。

ZOZOTOWNでは、左側のカラムに「ブランドから探す」「ショップから探す」「こだわり条件から探す」といった「探す基準」をアンカーテキストでわかりやすく表記したリンクを配しています。また、その直下には「トップス」「ジャケット/アウター」「パンツ」などの洋服の種類でカテゴライズしたリンク集も設置。これらはしっかりとファーストビューに入っているので、流入したユーザーの目に付きます。
ユーザーにとって、自分が欲しい服をピンポイントで探すにも、なんとなくのイメージから絞り込んでいくにも迷わずに済むファーストビューが設計されていると言えるでしょう。

WEARのファーストビューにも、左側のカラムに「コーディネートを探す」「アイテムを探す」「ブランドを探す」リンクがあります。注目したいのはWEARのアプリに登録している著名なユーザーもファーストビューに表示される点。

メンズファッションサイトにはユーザーに商品を購入してもらったり知ってもらったりといった目的以外に、「ユーザーとの接点を確保する」という役割もあります。
ユーザーとの接点確保には「サイトへの会員登録」や「アプリダウンロード」、「友達登録」などさまざまです。ウェブ戦略全体の中でサイトがどういった位置づけになるのかによって、どんなタッチポイントを持つのがベストなのかは変わってくるでしょう。

いずれにしても、既存のサイトからはサイト内の回遊性と同時に、こういったサイト外のタッチポイントの作り方も学びたいところです。

メンズファッションサイトのカラー選択

2021年2月時点でGoogle検索上位に表示されているメンズファッションサイト10サイトのカラーを調査しました。結果は以下の通りです。

背景色:白
メインカラー:黒、グレー、赤

メインカラーに赤を使っているのは楽天やYahoo!。いずれもファッションに特化していない総合通販サイトで、ロゴカラーがメインカラーに使われているケースです。つまり、メンズファッションサイトはほとんどの場合、背景色に白、メインカラーに黒かグレーを用いていることになります。

背景色

今回調査したメンズファッションサイトすべてで、背景色に白が使われていました。メンズファッションサイトでは商品(服)の画像が主役です。服のカラーが背景色によって過剰に鮮やかになったりくすんで見えたりといったことは、あってはなりません。通販サイトであればユーザーから「ネットで見たものと実際に購入したものとが全然違う」と不満をかう原因にもなるでしょう。
商品である服のカラーに余計な影響を与えないため、背景色に白が採用されていると考えられます。

また、異なる色の服の画像が並んだ時に「余白」の役割を果たしてくれるのも、背景色に白が使われる要因。大量の画像が並ぶメンズファッションサイトでは画面上に色があふれてゴチャつきがちです。
かといって商品画像を、都度色彩バランスを考えながら配置するのは手間がかかります。
背景を白に設定して画像間のmarginを適度に取れば、色彩間にワンクッション設けられるため、全体がまとまった印象になるでしょう。

メインカラー

メインカラーには黒・グレーが使われています。メンズファッションサイトで背景色に用いられる白、そしてメインカラーに配されている黒・グレーはいずれも「無彩色」と呼ばれる彩度がゼロの色。彩度を伴う服の色を邪魔する心配なく使えるカラーです。

こういった実用的な目的とは別に、背景色を白、メインカラーを黒・グレーに設定すると画面全体がモノトーンになり、スタイリッシュな印象を与える効果も期待できます。
メインカラーを黒・グレーにしたモノトーンなデザインのサイトが多いのは、「メンズファッションサイトである以上ダサいデザインにはできない」「とはいえサイトカラーを華やかにすると商品が目立たない」といった葛藤のひとつの落としどころなのかもしれません。

ボタンカラー

メンズファッションサイトのボタンカラーには背景色・メインカラーとは打って変わって、青や赤、緑などの目立つカラーが使われていました。
ただし、いずれのサイトも彩度・明度を抑えた落ち着きのあるボタンカラーにしています。
サイト全体がスタイリッシュなモノトーンになっているので、ボタンカラーもけばけばしい印象にならないよう配慮しているのでしょう。

背景色・メインカラーともに無彩色のサイトであれば、ボタンカラーを何色にしても基本的には問題ありません。周囲の色合いと調和しつつも、ユーザーの視線を惹きつけるボタンにできます。

注意したいのは購入ボタンとその他のボタンの色をしっかり分けること。例えば、メンズファッションサイトの中には「LINEの友だち登録」をすすめるサイトもあります。その場合、「LINEの友だち登録」ボタンはLINE公式のからーである緑色になるはず。LINE登録ボタンの近くに、同じ緑色で別の機能を持つボタンがあるとユーザーの混乱を招きます。

現在、メンズファッションサイトの多くはLINEやInstagramなどさまざまなアプリと連動しており、ボタンの数も多くなりがち。ユーザーが一目で「それが何をするためのボタンなのか」判別できるような配色を心がけましょう。

他サイトのカラーを参考にする

「メンズファッションサイトは全体的にモノトーンが多い」と知ると、カラーデザインは容易いように思えるかもしれません。しかし、実際にはモノトーンは余白の取り方や有彩色の彩度・明度のコントロールが繊細で、難易度の高いカラーデザインです。

前知識を持たずにいきなりサイトに配色していくと、「なんとなく見栄えが悪い…」「色がないから野暮ったさが際立つ…」と収集が付かなくなり可能性もあります。
シンプルな配色だからこそ、メンズファッションサイトを制作・運用する上では完成度の高い他サイトを積極的に参考にするべきです。

「data maison」をはじめとする、競合サイトの細かなデザインデータを集めてくれるツールを利用して、自サイトの完成度を上げていきましょう。

メンズファッションサイトのフォントサイズ

Googleに上位表示されるメンズファッションサイトのフォントサイズを調査したところ、以下の結果になりました。

・本文フォントサイズ:最小12px / 最大14.4px / 平均13.54px
・見出しフォントサイズ(H2またはH3):最小12px / 最大20.8px / 平均17.68px
・CVボタンのフォントサイズ:最小12px / 最大18px / 平均14.6px

調査結果を深掘りして検討していきます・

本文のフォントサイズ

本文のフォントサイズは最小値12px、最大値14.4pxとあまり差がなく、平均値は13.54pxという結果。
メンズファッションサイトにおいて、テキスト情報はあまり重視されません。ユーザーが心を惹かれるのは商品画像やコーディネートです。今回調査したサイトでもTOPページから商品個別ページ、購入ページまでテキストは価格やサイズなどの基礎情報がほとんどでした。
商品ページ間の回遊性が重要なメンズファッションサイトでは、じっくり読ませるテキストは基本的に不要であるため、本文の平均フォントサイズが13.54pxというやや小さめな値に落ち着いているものと考えられます。

見出しのフォントサイズ

見出しのフォントサイズは最小値12pxに対して最大値20.8pxと開きが出る結果に。読ませるコンテンツが少ないメンズファッションサイトでは見出し構造もあまり重視されないようで、今回調査したサイトでもHタグ構造はかなり混沌としていました。サイドカラムのリンク集すべてにHタグが付加されていたり、H1タグの直下にH3タグが配置されていたりといった具合です。

見出しに使われるHタグはテキストの論理構造を表すためのものなので、文章が少ないメンズファッションサイトではHタグ構造が整序されていなくても構わないのかもしれません。実際に、商品ページでHタグ見出しでマーキングされるべき情報は商品名くらいのものです。

Hタグの構造がGoogleアルゴリズムに(ということはユーザーにも)重視されない以上、見出しのフォントサイズは純粋に「見た目」の問題になります。
今回調査したサイトの見出し最小値12pxは、一般的なサイトの感覚からすると小さ過ぎますが、メンズファッションサイトでは特に影響はないようです。

CVボタンのフォントサイズ

「カートに入れる」ボタンや「購入する」ボタンのサイズを調査した結果、平均値は14.6pxでした。ショッピングサイトで最も目立たせたいボタンのフォントサイズとしては小さいと言えるでしょう。

ボタンのフォントサイズが小さいのは、メンズファッションサイトが全体的にテキストの少ないサイトであるのが理由と考えられます。
本文テキストが長く続き、見出しHタグがいくつも出現するようなページであれば、CVボタンには他のテキストに紛れないように大きなフォントサイズをあてる必要があるでしょう。

メンズファッションサイトは基本的にテキストではなく画像がメインです。そのため、CVボタンが他テキストに埋もれる心配がなく、結果的にフォントサイズも小さめになっていると仮説立てられます。

CVボタンを目立たせるなら、フォントサイズではなく、ボタンカラーに注意を払った方がいいかもしれません。
メンズファッションサイトのスタンダードである背景色白、メインカラー黒・グレーのモノトーンデザインでは、色鮮やかなボタンの方が大きなフォントサイズよりも視認性を効率的に上げられるためです。

他のサイトのデザイン戦略をものにする

テキスト情報がさほど重視されないメンズファッションサイトですが、それは「フォントサイズを勝手気ままに設定して構わない」ということではありません。メインの商品画像を際立たせるために、「悪目立ちしないフォントサイズのバランス」を追求する必要があります。

重要なテキストや見出しを目立たせればいい通常のサイトとは全く異なるセンスが必要とされる分、デザイン上の難易度は高いと言えるでしょう。

そんなメンズファッションサイトのフォントサイズを考えるにあたっては、既に成功している競合サイトを参考にしたいところです。しかし、各サイトのフォントサイズを一々手作業でピックアップするのは膨大な労力がかかり、取得できる情報量にも限りがあります。

そこでおすすめしたいのは「data maison」です。data maisonは月額165円から、サブスクリプションで使用できるサービス。競合サイトのファーストビューやサイトカラー、フォントサイズといった細かな情報を取得してくれます。
data maisonを活用して手に入れた「メンズファッションサイトのウェブスタンダード」の情報は、王道サイトを作るのにもオリジナリティのあるサイトを作るのにも役立つでしょう

ぜひメンズファッションサイトの制作・運用にdata maisonを役立ててください。

メンズファッションのプロモーション戦略

メンズファッションをプロモーションする方法は、大きく分けるとウェブとリアルの2つ。ウェブのプロモーション戦略にはサイト制作・運用の他にSNSの活用や自社アプリの開発などが含まれます。リアルのプロモーション戦略としてはファッション誌への掲載やテレビ広告などが考えられるでしょう。

メンズファッション業界がいま注目すべきはウェブプロモーションのSNS戦略。特にInstagramは見逃せない存在です。株式会社ジャストシステムが2019年6月に行った調査によると、「流行ファッションの情報収集」に使われるサービスはInstagramが1位(29.4%)。2位はGoogleで28.3%でした。
アパレルのウェブプロモーションにおいて、いまやInstagramはGoogleを超えるほどの勢いを持つサービスです。

参考URL:
https://ascii.jp/elem/000/004/009/4009450/

Instagramには投稿した画像に付けたタグを利用して直接ECサイトに遷移・商品購入ができる「Shop Now」という機能が実装されています。Instagramは長期的なブランディングのみならず、短期的な売上増大にも寄与できるのです。

メンズファッション業界のこれから

2020年2月に日本国内で新型コロナウイルスの感染が拡大して以降、多くのファッション関連企業がEC化をはじめとしたデジタルシフトを図っています。業界全体の取り組みとして、2020年には「VR展示会」も開催されました。
参考URL:
https://digital-shift.jp/startup_technology/3XtIn

流行がスピーディに移り変わるメンズファッション業界では、ユーザーの情報収集手段を常に把握しておかなくてはなりません。

アパレル業界全体で見ると2019年まで市場規模は順調に拡大しています。新型コロナウイルスの感染拡大で今後の見通しは不透明ですが、ファッションに対する需要は確実に存在するのです。
いかに市場でのシェアを獲得するか、次のファッショントレンドに、そのプロモーションにいかに速く動けるかがメンズファッションに関わる企業にとって課題になってくるでしょう。

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ