Web8の気鋭ディレクターが選ぶ！J1クラブのサイト勝手にランキング2016

はじめまして！
ウェブエイトの気鋭ディレクターことマルヤマヒロシ(41)です。
皆さん、Jリーグ観てますか？好きですか？
少なくともこの記事に辿り着いてくれたあなたはJリーグ好きそうですね。
嬉しい限りです。

2014年にJ3リーグができ、いまやJリーグも53クラブ。
その全てのクラブのウェブサイト見たことはありますか？

「そんなもの見たことないよ！（怒）」というあなたのために、
マルヤマがJ全クラブのウェブサイトを（徹底）調査してランキングにしちゃいました。

実は私、地元松本市のサッカークラブ「松本山雅FC」の大ファンです。
シーズンパス買ってホームは毎試合、アウェイも車で6時間以内でしたら嬉々として参戦するガチサポです。
そんな気鋭ディレクター+ガチサポ目線で選ぶJクラブウェブサイト勝手にランキングここに極まれり！

そもそもJリーグとは…

Jリーグは1993年に開幕しました。私が高校3年生18才の時ですね。
当時はなんと週に2回も試合がありテレビ中継もされていました。

「オーレー　オレオレオレー♪」

オレオレ詐欺撲滅ソングではございませんよ。
Jリーグ発足当時のオフィシャルソング「WE ARE THE CHAMP ～THE NAME OF THE GAME～（THE WAVES／1993年4月7日 ポニーキャニオン）」の超有名フレーズです。
あの頃はまだバブリジャスなこともありJリーグが非常に盛り上がっていました。

J1リーグのクラブ分布（2016年）

2016年現在のJ1クラブの各々のホームタウン、ホームスタジアムを一覧でまとめてみました。

▼J1［18クラブ］ … ホームタウン（ホームスタジアム名）

• ベガルタ仙台 … 宮城県 / 仙台市 （ユアテックスタジアム仙台）
• 鹿島アントラーズ … 茨城県 / 鹿嶋市、神栖市、潮来市、鉾田市、行方市 （茨城県立カシマサッカースタジアム）
• 柏レイソル … 千葉県 / 柏市 （日立柏サッカー場）
• 大宮アルディージャ … 埼玉県 / さいたま市 （NACK5スタジアム大宮）
• 浦和レッズ … 埼玉県 / さいたま市 （埼玉スタジアム2002）
• FC東京 … 東京都 / 東京都 （味の素スタジアム）
• 川崎フロンターレ … 神奈川県 / 川崎市 （等々力陸上競技場）
• 横浜F・マリノス … 神奈川県 / 横浜市、横須賀市 （日産スタジアム、ニッパツ三ツ沢球技場）
• 湘南ベルマーレ … 神奈川県 / 厚木市、伊勢原市、小田原市、茅ヶ崎市、秦野市、 平塚市、藤沢市、大磯町、寒川町、二宮町 （Shonan BMW スタジアム平塚）
• ヴァンフォーレ甲府 … 山梨県 / 甲府市、韮崎市を中心とする全県 （山梨中銀スタジアム）
• ジュビロ磐田 … 静岡県 / 磐田市 （ヤマハスタジアム）
• アルビレックス新潟 … 新潟県 / 新潟市、聖籠町 （デンカビッグスワンスタジアム）
• 名古屋グランパス … 愛知県 / 名古屋市、豊田市、みよし市を中心とする全県 （パロマ瑞穂スタジアム、豊田スタジアム）
• ガンバ大阪 … 大阪府 / 吹田市、茨木市、高槻市、豊中市、池田市、摂津市、箕面市 （市立吹田サッカースタジアム）
• ヴィッセル神戸 … 兵庫県 / 神戸市 （ノエビアスタジアム神戸）
• サンフレッチェ広島 … 広島県 / 広島市 （エディオンスタジアム広島）
• アビスパ福岡 … 福岡県 / 福岡市 （レベルファイブスタジアム）
• サガン鳥栖 … 佐賀県 / 鳥栖市 （ベストアメニティスタジアム）

J1クラブのサイトランキング

さて、お待たせしました。
ここから気鋭ディレクター マルヤマが独断と偏見で選んだJ1全クラブのウェブサイトランキングを発表します。

◎ランキング算出方法

• デザイン
• UI
• スマホ対応

の項目に分けてそれぞれを10点（1:最低 → 10:最高）の合計30点満点で評価。
全項目の合計点数によって順位をつけています。

じゃん！
栄えある1位は「サンフレッチェ広島（24点）」でした！！！！！！

せっかくなので1位〜3位までを解説してみましょう。

［1位］サンフレッチェ広島（24点）

• デザイン（8点）

チームカラーの紫をメインに使いつつも面積の広い場所には紺を使い、全体的に軽くなりすぎないよう気を使っている点が素晴らしいです。そしてポイントに補色の黄色をちょうどいい分量で持ってきてとても勉強になります。

さり気なく入った黄色いラインが全体を引き締めつつグローバルメニューに目が行きやすいよう計算されています。

• UI（8点）

まず、サイトが表示されたらスクロールしてみてください。
グローバルメニューがページの上部に固定されているはずです。
こういった作りは特段珍しいわけではなく、今ではいろいろなサイトで見かけるかと思います。どんなサイトでもこういった固定したメニューが必要ということでもありませんが、サッカークラブのサイトのように情報量が多くなる場合は非常に便利です。
なんですが、J1クラブのサイトでこの固定メニューを採用しているところは少数派でした（名古屋グランパスのサイトも固定メニューでしたが英語表記のみなのでUIとしての評価は低く（3点）なりました）。

• スマホサイト（8点）

重要な情報は上のほうに目立つようにレイアウトされていて非常に使いやすいサイトだと思いました。
特にページ中ほどの「チケット販売について」というリンクに注目。
このリンクだけ黄緑で一層分かりやすくなっています。おそらくチケットについての問い合わせが多かったのでは、と推測できます。ユーザーが必要としている情報を分かりやすく伝える、何よりもこれが最も大切なことです。

［2位］FC東京（22点）

• デザイン（7点）

「あれ？このデザインで？」と思われた方、いると思います。
はい、確かにメニューの背景などにグラデーションがかかっていたりと、若干『今』っぽくない要素もありますよね。
しかし、全体的なデザインで見ると「赤・青・ゴールド」という非常に使いづらい色を上手く使い分けて表現されていると感じました。

• UI（6点）

グローバルメニュー、見づらいですよね。
マウスオンするとサブメニューがごっちゃと出てきて見づらいですよね。
ただ、それ以外の下に四角く並ぶメニューは、こういった場合にありがちの分かりづらさも無く上手に色分けされていると思います。総合的にこの点数が妥当でしょう。

• スマホサイト（9点）

素晴らしい！と一目みて感じました。
デザイン、UI共にスマホサイトに関してはここが一番でしょう。

［3位］ジュビロ磐田（21点）

• デザイン（8点）

チームカラーのサックスブルーで綺麗に統一されていますね。
（使いやすい色といこともありますが）全体的に同系色の濃淡で見やすくデザインされています。

• UI（6点）

これもマウスオンでサブメニューがごちゃーと出てきてて見づらいですね。
その他もごちゃごちゃした印象があるのでUI点数は高くありません。

• スマホサイト（7点）

PCサイトに比べ、よく考えられて作られていると思います。
大きなメニューが導線となりユーザーが必要としている情報への誘導がきちんとされているサイトだと思いました。

あれ？？
25点を叩き出しているのに一番下にいるチームがありますね。
実はヴィッセル神戸のサイト、デザインにもUIもスマホサイトもいいんです。
すごくいいんですがFirefoxで見るとメインのスライダー画像が表示されない、という致命的な欠陥を最後の最後に見つけてしまいノーカウントにしました。

色合いも好きなんですけど残念です。。
ヴィッセル神戸さんのサイト担当者様、これを見ていたらぜひ直してくださいね。
（そして来年こそは絶対ノエスタで…山雅が勝…）

まとめ

こうして改めて（勝手に決めた）ランキングを見ると、あることに気が付きませんか？「青系」のチームカラーのサイトが順位が高く、「赤系」のチームカラーのサイトが順位が低いですね。暖色系のほうがインパクトが強いので単純に考えると順位は高くなりそうですが、こういった情報量が多くなりがちなサイトは寒色系を使うことで落ち着きを加味したほうが見やすく感じるのかもしれませんね。

次回は、J2チームのランキングを発表しちゃいます！
気になる緑チームは何位だろう？！！！