Webデザインの専門校での学習の一環として、東武百貨店 池袋店の公式サイトを分析しました。トップページを開いたとき、催し物のバナーがずらりと並んでいて、まず「情報の量」に驚いたサイトです。
はじめに
この記事でわかること
- 30点以上のバナーが並んでも、ごちゃつかない理由
- 催し物の「TOPICS」と、事務的な「INFORMATION」の見せ方の違い
- 来店前から館内までをつなぐ、7項目の案内メニュー
- 私が「自分ならこう作る」と考えたこと
結論
東武百貨店 池袋店の公式サイトは、30点以上の催し物のバナーを「正方形のマスにそろえる」という一つの決まりで整理したサイトです。色をそろえるより、並べ方をそろえることで、情報の多さと見やすさを両立しています。
サイトの基本情報
- サイト名：東武百貨店 池袋店
- 業種：百貨店
- 基礎知識：東武百貨店 池袋店は1962年開業。東武鉄道グループの中核店舗で、池袋駅東口に直結しています。
トップページは「カタログ」のような作り
トップページで一番目立つのは、催し物やキャンペーンのバナーの多さです。最初に「TOBU SUMMER SALE」のような大きなバナーがあり、その下の「TOPICS」には正方形の小さな画像が並んでいます。ここだけで、いつも20〜30件ほどの催し物の情報が載っていました。
百貨店は「毎日どこかの売り場で何かをやっている」お店です。その忙しさが、そのまま画面に表れているように感じました。
色より「並べ方」をそろえている
土台は白で、ブランドの色と考えられる赤がところどころに使われています。ただ、このサイトはブランドの色を強く押し出していません。催し物ごとのバナーが、それぞれの色を持ち込んでいます。
それでもごちゃつかないのは、すべてのバナーを正方形のマスにそろえて並べているからだと感じました。色の統一よりも、一覧して見比べやすいことを優先した作りです。
「TOPICS」と「INFORMATION」は見せ方が正反対
ページの途中には「INFORMATION」というまとまりがあり、支払い方法の変更やシステム障害のお知らせなどが日付つきで並んでいます。こちらは画像を使わず、文字のリンクだけの一覧です。
楽しい催し物は画像で大きく見せ、事務的なお知らせは文字だけで静かに見せる。情報の種類によって見せ方をはっきり分けているので、利用者は「今見ているのはどちらか」を迷わずに済みます。
来店前から館内までをつなぐ案内メニュー
画面の上のメニューには、次の7項目が並んでいます。
- 催事カレンダー
- フロアマップ
- ショップガイド
- レストラン・カフェ
- アクセス
- よくあるご質問
- オンラインショップ
並びを見ると、「何をやっているか調べる」→「どこにあるか確かめる」→「行き方を知る」と、来店前から館内での行動までが一本の流れになっていることが分かります。
言葉は日本語のほか、英語・簡体字・繁体字・韓国語に切り替えられます。Facebook・X・Instagram・LINEへの入り口もページの上にいつも置かれていて、観光で訪れる人や、SNSで情報を受け取りたい人にも配慮されています。
このサイトから取り入れたいこと
- 数が多いものは、形と大きさをそろえて並べる：色がばらばらでも、並べ方の決まりが一つあれば、まとまって見えます。
- 情報の種類で見せ方を分ける：楽しい情報は画像で、事務的なお知らせは文字だけで。読む人が迷いません。
- メニューは使う人の行動の順に並べる：「調べる→確かめる→行く」の順にすると、自然に次のページへ進めます。
東武百貨店 池袋店公式サイトを見て、私が気づいたこと
このサイトから学んだこと
Webデザインの専門校での課題として分析したサイトです。百貨店という業種の特性上、多くのショップやイベントの情報を載せていますが、サイト全体のデザインはシンプルにそろえられています。
ショップごとに雰囲気の違うバナーや季節のイベントの告知が並んでいても、全体としてまとまりがあり、見やすさが保たれている点が印象的でした。実際にトップページのバナー・小さな画像を数えてみると30点以上あり、これだけの数が並んでもごちゃつかないのは、正方形のマスにそろえるという一つの決まりを最後まで崩さなかったからだと感じました。情報の多いサイトほどデザインをシンプルにすることの大切さを学べました。
自分ならこう作る
サイト全体に統一感はありますが、もう少し目を引く要素があっても良いと感じました。たとえば、季節のイベントやおすすめのショップを紹介する部分に動きを加えると、利用者の興味を引きやすくなると思います。
また、店舗の写真が少ないため、実際に訪れたときの雰囲気が想像しづらい印象を受けました。店舗や館内の写真を増やすと、来店前の期待感を高められるのではないかと思います。
ただし、百貨店は幅広い年齢の人が使うサイトです。それを考えると、今のシンプルで分かりやすいデザインが最適なのかもしれないとも感じました。
これから学ぶ人へ
幅広い年齢の人や多くのショップの情報を扱うサイトほど、シンプルなデザインが大切になることを学びました。デザインを足すことだけでなく、情報を整理して見やすくすることも、Webデザインの大切な役割だと感じています。
※本記事はWebデザイン学習の一環として、実際の公開サイトを観察・分析した記録です。
同じ「お店・サービス」のサイトとして、「No.015 Netflix公式サイトのデザイン分析」も分析しています。見比べると、それぞれの工夫の違いがよく分かります。
この記事のまとめ
東武百貨店 池袋店の公式サイトは、30点以上の催し物のバナーを正方形のマスにそろえて並べ、情報の多さと見やすさを両立したサイトです。楽しい催し物は画像で、事務的なお知らせは文字だけで見せ分け、案内メニューは来店前から館内までの行動の順に並んでいます。一方で、季節の催しや館内の様子をもう少し見せると、さらに足を運びたくなるサイトになりそうです。
よくある質問（FAQ）
Q. バナーの色がばらばらなのに、なぜまとまって見えるのですか？
A. すべてのバナーを同じ大きさの正方形にそろえて並べているからだと思います。色がそろっていなくても、形と並べ方の決まりが一つあると、全体がまとまって見えます。
Q. お知らせが文字だけなのはなぜですか？
A. 支払い方法の変更やシステム障害など、事務的なお知らせだからだと思います。催し物は画像で、お知らせは文字だけで見せ分けることで、どちらの情報なのかがすぐに分かります。
Q. 情報の多いサイトを作るとき、まず何を決めればいいですか？
A. 並べ方の決まりを一つ決めるのがおすすめです。このサイトでは「正方形のマスにそろえる」がその決まりでした。決まりがあると、情報が増えてもくずれにくくなります。実際の画面は東武百貨店 池袋店公式サイトで見られます。
