ユニクロのサイトは、商品の写真がたくさん並んでいるのに、ごちゃごちゃして見えません。「写真が多いのにすっきりしているのはなぜだろう」と思ったのが、分析のきっかけです。
はじめに
この記事でわかること
- 写真が多くてもすっきり見える、色と余白の決まり
- 写真の上に値段と期限を直接のせる見せ方
- 「women／men／kids／baby」でサイト全体が切り替わるしくみ
- 書体について、私が「自分ならこう作る」と考えたこと
結論
ユニクロ公式サイトは、白・黒・赤の3色ほどに色をしぼり、写真の間に余白をとることで、たくさんの商品を「迷わせない」画面にまとめたサイトです。値段を写真にのせる、性別や年齢で全体を切り替えるなど、探す手間を減らす工夫がそろっています。
サイトの基本情報
- サイト名：ユニクロ公式サイト
- 運営会社：株式会社ファーストリテイリング
- 業種：アパレル（企画から販売までを自社で行うブランド）
- 基礎知識：ユニクロの前身は1949年創業の小郡商事（山口県）。1984年に広島でユニクロ1号店を出店し、現在はファーストリテイリング傘下です。
3色と余白で「写真が多くてもすっきり」
土台は白、文字やボタンは黒、そしてアクセントにロゴの赤。使っている色は、ほぼこの3色だけです。色の数が少ないので、画面の中で目立つのは商品の写真になります。
ボタンは四角いシンプルな形で、黒か白にそろっています。見出しも、大きさと太さの差だけで強弱をつけていて、飾りはほとんどありません。
値段と期限を、写真に直接のせる
印象に残ったのが、値段の見せ方です。バナーの写真の上に「¥990 7月16日まで期間限定価格」のように、値段と期限が文字で直接のせてありました。
値段だけの欄を別に作るのではなく、写真そのものに情報をまとめているので、写真を見た瞬間に「いくらで、いつまでか」が分かります。商品が多いサイトほど、こうした「一目で分かる」工夫が効いてくるのだと思います。
サイト全体が切り替わる、探しやすいしくみ
ページの一番上には「women／men／kids／baby」のタブがいつも置かれています。ここを切り替えると、サイト全体がそのカテゴリの内容に一気に変わります。自分に関係のない商品を見なくて済むので、探す手間がぐっと減ります。
その下には「カテゴリから探す」として、17種類ほどのカテゴリのアイコンが横に並び、指で横に動かして選べるようになっていました。さらにその下に、Tシャツ・ニット・パンツなど、商品ごとのバナーが続きます。
「UT ちいかわ」のようなキャラクターとのコラボ企画も、ふつうの商品と同じ並びに入っていました。特別扱いしすぎず、同じ形で並べることで、画面のまとまりが保たれています。
このサイトから取り入れたいこと
- 色は3色までにしぼる：商品の写真が主役になり、画面がすっきりします。
- 大事な情報は写真にのせる：値段や期限を写真の上に書くと、一目で伝わります。
- 見る人に合わせて全体を切り替える：関係のない情報を見せないことも、使いやすさの一つです。
自分のサイトでまねするなら、まず「土台の色・文字の色・目立たせる色」を1色ずつ決めて、それ以外は使わないところから始めるとよさそうです。商品やサービスの紹介では、値段や期間を本文の奥に書くのではなく、写真や見出しのすぐそばに置くと、ユニクロのように一目で伝わりやすくなると考えています。
ほかのサイトと比べると
無印良品のサイト（「No.003 無印良品のデザイン分析」）も色をしぼったシンプルな作りですが、無印良品は読み物を混ぜて「考え方への共感」を大切にしていました。ユニクロは値段を写真にのせ、性別や年齢でサイト全体を切り替えるなど、「早く見つけて買える」ことを優先しています。同じシンプルでも、目指しているものが違うと工夫の向きが変わるのが面白いところです。
ユニクロ公式サイトを見て、私が気づいたこと
このサイトから学んだこと
写真のインパクトで、視線が自然に導かれている点が印象的でした。建物や自然を背景にした商品写真は、情報が多くても内容がすぐに分かります。全体的に飾りが少なく、無駄のない作りになっています。
自分ならこう作る
書体はややシンプルで実用性を重視しているため、少し古いWeb広告のような印象も受けました。ただ、これは「商品を主役にする」という考え方でもあると思います。
もし今っぽく寄せるなら、Appleのサイトで使われているような洗練された書体を選び、字の間を少し広げ、影を抑えることで、すっきりした印象にできそうです。
一方で、このシンプルさは「余計な情報を除いて、商品に集中させる」というユニクロらしい考え方とも合っています。
これから学ぶ人へ
書体の選び方や余白の使い方で、同じ写真でも印象は大きく変わります。情報の整理と見た目のバランスが大切で、優れたサイトほど使う人の目線で作られていることが分かりました。サイトの分析を続けることが、自分の制作の力にもつながると感じています。
※この分析は、Webデザインの専門校での学習の一環として、公開サイトを実際に観察・整理した記録です。
同じ「お店・サービス」のサイトとして、「No.003 無印良品「店舗・ネットストア」ページのデザイン分析」も分析しています。見比べると、それぞれの工夫の違いがよく分かります。
この記事のまとめ
ユニクロ公式サイトは、白・黒・赤の3色と広い余白で、たくさんの商品写真をすっきり見せているサイトです。値段と期限を写真に直接のせ、「women／men／kids／baby」でサイト全体を切り替えるなど、探す手間を減らす工夫が徹底されています。書体を今っぽくする余地はありますが、商品を主役にする考え方は、自分の制作にも取り入れたいポイントです。
よくある質問（FAQ）
Q. ユニクロのサイトは、なぜ写真が多いのにすっきり見えるのですか？
A. 色を白・黒・赤の3色ほどにしぼり、写真と写真の間に余白をとっているからだと思います。ボタンや見出しの形もそろっているので、画面にまとまりがあります。
Q. 値段を写真にのせるのはなぜですか？
A. 写真を見た瞬間に「いくらで、いつまでか」が分かるようにするためだと思います。値段の欄を別に作らないので、画面もすっきりします。
Q. 商品が多いサイトで大切なことは何ですか？
A. 見る人に関係のない情報を減らすことだと感じました。ユニクロは「women／men／kids／baby」のタブで、サイト全体を切り替えられるようにしていました。
