見出し画像

2021.1-7 デザイン日記#2(任天堂のWebサイトを考察)

現在サイトデザインのインプットを目標に、1日3つWebサイトやECサイト、ホームページを調査して何が良いのかをまとまる活動をしております。そして今回は任天堂のWebサイトを調査してみることにしました。考察材料には、任天堂公式のホームページと、任天堂Switchのゲームカセットで人気のある”あつまれどうぶつの森”と”大乱闘スマッシュブラザーズ”のホームページを選びました。

また今回のホームページの比較材料には、WillのホームページとWiiのゲームカセットのホームページを選びました。約10年前のゲーム機と今最新のゲーム機のホームページを比較することで、サイトデザインの進化や工夫された点が感じ取れるのではないかと思ったためです。


任天堂を選んだ経緯

昔からゲーム機といえば任天堂というイメージが僕の中ではあります。小学生の頃は友達同士で任天堂のWiiを使って遊んでいましたし、今でも任天堂switchを使って友達と遊んだりします。そんないつも僕の身近な存在であった任天堂ホームページのデザインを考察してみたいと考え、今回任天堂のホームページを考察することにしました。




任天堂公式ホームページとWiiのホームページを比較

任天堂公式ホームページ

画像1

Wiiのホームページ

画像2

1.彩り豊か

2つのホームページを比較した時、任天堂公式ホームページの方が彩り豊かにデザインされていました。彩り豊かなデザインされていることにより、任天堂公式ホームページの方がWiiのホームページよりも楽しそうでワクワクする印象が与えられます。”ゲーム=楽しい!”という一番伝えたい内容を色彩豊かなデザインを通して伝えられていると感じました。


2.ナビゲーションメニューの見やすさ

任天堂公式ホームページ

画像3

Wiiのホームページ

画像4

ナビゲーションメニューを比較してみても、任天堂公式ホームページの方が見やすくわかりやすいのは明らかです。任天堂公式ホームページでは文字にカーソルをのせると写真と商品名が出てくる仕様になっていますが、Wiiのホームページでは水色の下線が表示され、文字の不透明度が少しだけ下がるだけの仕様になっています。どちらのデザインもクリックすれば良いということはわかりますが、任天堂公式ホームページのデザインの方がユーザーにわかりやすいデザインになっていました。


3.文字の見やすさ

任天堂公式ホームページ

画像5

Wiiのホームページ

画像6

お知らせページを見比べてみると任天堂公式ホームページの方が項目に応じて文字の太さや大きさを変えており、見やすいデザインになっていました。またマウスホバーした時の文字色の変化も任天堂公式ホームページの方がわかりやすく、サイトのトンマナが意識されていました。



ゲームカセットのホームページ比較

1.Switchのあつ森とWiiのあつ森のホームページを比較

1-1.Switchのあつ森

画像8

1-2.Wiiのあつ森

画像7


色使いの違い

2つのサイトを見比べてみて、Switch版の方がWii版と比べて色の彩度が高いということに気付きました。高彩度なSwitch版のサイトの方が、鮮やかで動的な印象が与えられます。Wii版のサイトも優しくてほんわかした印象が伝わってきましたが、Switch版の方が楽しそうな印象が伝わる色彩の使い方をしていると感じました。

アニメーションムービーを使った紹介

画像9


Switch版のサイトではゲーム紹介をアニメーションムービーをWebサイトに組み込んで紹介していました。Wii版のテキストと画像だけの紹介文と比べるとゲーム内の雰囲気が感じとれやすい印象を持ちました。




2.SwitchのスマブラとWiiのスマブラのホームページを比較

2-1.Switch版スマブラのホームページ

画像10

2-2.Wii版スマブラのホームページ

画像11


サイト全体の雰囲気

2つのサイトを見比べた時に、Switch版スマブラのホームページは全体的に1つの大きな箱に綺麗に収まっており、画像とカテゴリーボックスの重なりも自然でした。一方Wii版スマブラのホームページはカテゴリーボックスと画像の重なりが不自然で無理やりボックスを置いた感じが出てきてしまっていました。


2-3.Switch版スマブラのキャラクター紹介ページ

画像12

2-4.wii版スマブラのキャラクター紹介ページ

画像13

トンマナを統一したデザイン

Switch版のキャラクター紹介ページはサイトのトンマナに沿ったデザインがされていました。テキストやロゴをキャラクターの画像の横に表示させ、背景色を黒くすることで、Wii版の紹介ページとは全く印象の違ったスマブラの世界観が伝わってきました。単純に画像の近くにテキストを置くだけでなく、背景の色やテキストの色を工夫したり、スマブラの世界観を考えてデザインをすることでより良いデザインを作れそうだと感じました。

この記事が気に入ったらサポートをしてみませんか?