Webデザインを考える。見た目だけじゃなく、動きとかサイトの使いやすさとかも含めて考えていきたい。今日は女性のための競馬サイトを見て考える。
UMAJO
UMAJO
※記事掲載時のデザインから変更されている場合があります。
UMAJOは、JRA（日本中央競馬会）の女性職員が立ち上げた、女性への競馬普及を目的としたプロジェクトです。
全面にピンクを使い、一目見ただけで女性向けとわかるデザインです。
全体は同系色でまとめられていますが、写真の色や、各所にカラフルな紙吹雪が散りばめられているので、色合いにほどよい広がりが出ています。
また、馬のひづめに付ける蹄鉄や芝など、競馬に関連したモチーフをかわいくしてデザインに取り込むことで、競馬のサイトである事もうまく表現されています。
蹄鉄をモチーフにしたであろうロゴ
芝風の背景
フラッグと…紙吹雪でしょうか。ハズレ馬券をまき散らすのはマナー違反です。
アナログ感で、親しみとかわいさが出ている
文字は手書き風の書体が使われていたり、ロゴは縦のラインが揃っていなく、文字の大きさにもばらつきがあります。
他にも手作り感のある要素がありますが、あしらいをあえてカッチリとせずに、ばらつかせたり不揃いにしているので印象がやわらかくなり、かわいさや親しみが感じられるデザインになっています。やり過ぎると子供っぽくなってしまうのですが、ほどよいバランスです。他にも布や紙等の素材感も使われています。
ナビゲーションのアップ。キラキラマークがかすれていたり、メニューをつなぐ点々も不揃いになっている。よく見るとナビゲーションの境目がミシン目の様になっていて、芝風背景にも質感がでています。
動きについて
画面が広く感じられる横スクロール
スクロールすると、画面全体が左右にもスクロールされます。パララックスの応用ですね。見えない部分を想像させられるので、画面が広く感じます。
競馬場の広さを表現しているのでしょうか。横スクロールはやりすぎると見る人のストレスになりかねないのですが、このサイトは適度で効果的に使われていると思います。
馬が駆けるナビゲーション
スクロールを止めると上部にナビゲーションがでてきて、馬の走っている位置でサイト上の現在地がわかるようになっています。
サイト全体のボリュームも見え、他のページにジャンプもできて、デザイン的にもかわいく動きも出ている、ステキなナビゲーションです。
その他のメモ
- ページのダウンロード時には馬が走る。
- テイスト：女性的・かわいい
- 色：ピンク（ファンシー過ぎない）
- レイアウト：ファーストビュー2カラム／他1カラム
- スマホ対応：有り。コンテンツは流用。
- 動き：パララックス、現在地同期のナビゲーション
サイトのコンテンツを少し考えてみたメモ。行った事のない人にとって、競馬場は得体の知れないものだから、「競馬場ガイド」のような、初心者向けの説明的なコンテンツをもう少し充実させた方がいいかもと思った。
あとは、更新される箇所がわかりにくいからリピータが少なそう。構造的に書き換えが手間なのだろうか。紹介サイトだからいいのか。
これだけ大胆に競馬の新しいイメージを作れちゃうのがすごい。ターゲットを明確に意識したサイトを作れるようになりたいもんです。では、よいwebデザインライフを。
