No.009「横浜スタジアム」港のトナカイ | Webサイト100選

-はじめに

横浜スタジアム公式Webサイトは、横浜ベイスターズの本拠地である横浜スタジアムの情報を発信するWebサイトである。
サイト概要とサイトデザインに分けて考察する。

-サイト概要

1.情報設計

横浜スタジアム公式Webサイト
ヘッダーのナビゲーションの横にチケット購入のリンクを採用。野球観戦を予定している人がチケットを購入出来るよう誘導する仕組み。

2.ターゲット

横浜スタジアム公式Webサイト
横浜スタジアムを利用する予定の人
野球観戦をしたい人
どちらかと言えば男性をターゲットにしている

3.コンセプト

かっこいい
スマート
遊び心

-サイトデザイン

横浜スタジアム公式Webサイトのサイトデザインを以下に考察する。

1.レイアウト

横浜スタジアム公式Webサイトのレイアウトは、テキスト中心で情報を整理して伝えることを重視している。

2.配色

横浜スタジアム公式Webサイトは、以下のような配色である。

ベースカラー:白#fff、白に近いグレー#f2f4f7

テーマカラー:鮮やかな青#0a3da0

ポイントカラー:黒#0c0c0c

チームカラーである青を大きく使用。ボタンやナビゲーションには黒を採用。

3.フォント

横浜スタジアム公式Webサイトは以下のフォントを使用している。文字の飾りは少なく、無機質で現代的な印象。

・英語書体:Barlow

(フォントカテゴリ:サンセリフ)

・日本語書体:Sawarabi Gothic

(フォントカテゴリ:ゴシック体)

 

4.FV(First View)

No.009「横浜スタジアム」港のトナカイ | Webサイト100選

横浜スタジアム公式WebサイトのFVは、スタジアムを真上から撮った写真を画面いっぱいに採用。芝の緑と座席の青との鮮やかなコントラストが印象的。縦書きのキャッチコピーが動きを感じさせる。

5.sectionごとの見え方

・スタジアムマップ
1~5階が上部のボタンで切り替え可能、拡大・縮小が+、-のマークで表現されており直感的に操作が可能。

 

・footer
ボールを打ち返すアニメーションに遊び心を感じる。

 

-総評

横浜スタジアム公式Webサイトは、横浜ベイスターズの本拠地である横浜スタジアムの情報を発信するWebサイトである。チームカラーである青を大きく使用しており、野球観戦を予定している男性中心の利用者をターゲットに、かっこよさや遊び心を演出している。

港のトナカイ | Webサイト100選

投稿者 港のトナカイ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です