8.DeNAアスレティックスエリート サイトレビュー

DeNAアスレティックスエリート [DeNA Athletics Elite]

アスリートのカッコいい一瞬を捉える
ギャラリーサイトのMUUUUU.ORGから発見した、株式会社DeNA様が行っているスポーツ事業のWEBサイトです。
トラック競技およびマラソンのアスリートを支援活動を主に行っている組織のようです。
アスリートの方たちのカッコいい一瞬が詰まっているので、ぜひ一度サイトの方を覗いてみてください!!

目的
・アスレティックスエリート・選手への取材を増やす
・アスレティックスエリートについて知ってもらう

ターゲット
・スポーツ関係者やメディア
・所属選手のファン

特徴

余白
余白は結構バラつきがあります。縦160pxとかでも小さい方なので、全体的な余白は結構大きいと思います。

配色
#ff0b7e アクセントカラーのピンク
#3c3c3c 黒
#EBEBEB 灰

配色は基本黒白で、アクセントカラーにピンク、ボタンは灰色でした。全体的にスタイリッシュな印象になっています。

フォント
"Noto Sans JP" Google Fontで利用可
gill-sans-nova 　Microsoft Storeで利用可
PC:72px(h2)14px(本文)

gill-sans-nova
ギルサンズはイギリスの著名な芸術家エリック・ギルによって作られた書体だそうです。一見幾何学的だけど柔らかい書体と言われています。(こちらの記事参照)
このサイトでは結構シャープなイメージがあったので、幾何学的な書体の仲間だと思ってみていました!ですが確かにちゃんと見たらこの書体独特のシャープな感じがします。
トップページは文章よりも写真などビジュアルで見せています。
タイトルは画像なのですが、大体120pxくらいかな?色合いと合わせてインパクトがあります。

メインビジュアル

メインビジュアルはアスリートの写真が動画で切り替わっていきます。左右で切り替わるものなので、走っているアスリートの写真と相性がいい感じ。シャープでかっこいいです。サイト名が左に投げれていく感じもカッコいいです。
左下にヘッダーがある配置は珍しいですよね。右上にハンバーガー目ニューもあるので、遷移するためというより、こんなコンテンツがありますよって教えるために配置しているのかな?と思いました。

文字・写真切り抜き

このサイトは文字や写真の切り抜きが上手に使われているサイトです。
文字の切り抜きはタイトルに使用されています。メインビジュアルで使われているところは見たことがあったのですが、タイトルで使用したのは初めて見ました。これもスタイリッシュな感じがして素敵です。モノクロのサイトでワンポイントで使うなど取り入れやすそうです。
写真の切り抜きは何かのアイコンでしょうか。切り替わり方もおしゃれです。ブランドロゴの形で切り抜いたりできそう。メインビジュアルとかでも使えるインパクトです。

真似したいポイント

・パターンにとらわれない配置。タイトルも縦・横自由に。
→自由感が増える。その分統一感を持たせることや、コードの記述が大変などの懸念はある。

・メインビジュアルは走っているところをイメージするような左右の切り替え。
→他にも時間の流れとかを表したい時に使えそう。

・メインビジュアルで左右に流れる文字。背景画像とかぶるとき、色を変えている。

・カーソルを合わせると●が右へ移動するボタン。
→メインビジュアルと同じように左右の移動で統一しているところがよい。

・文字の切り抜き
→スタイリッシュな印象。

・写真の切り抜き
→おしゃれ。切り抜く形や画像切り替わりの仕方で色々な表現にアレンジできそう。このサイトの写真の枠でも切り抜きが使われている。

・名前を縦に入れることでスタイリッシュな雰囲気がでる。

・四角いボタンホバーで左から右に色が変わる。
→これも走る動きを表現しているのでは?

・フッターの面積大きい
→マスクすることでスタイリッシュな締めにかわる。

感想

今回はDeNAアスレティックスエリー様のWEBサイトを紹介させていただきました!
これまで紹介したサイトは女性的なものが多かったので、今回はカッコいいサイトを紹介したいなと思い、こちらのサイトのレビューを行いました。
サイトをスタイリッシュにするための工夫や、陸上をイメージできるような左右に移動する動きなど拘りがたくさん感じられるサイトでした。