【クリックができる？できない？もやもやをなくすWEBサイト集】

こんにちわ！
キューブデザイナーの片山です。

最近webサイトを見ている中で、私が気づいた問題が
クリックができると思ったバナーやボタンが
「あ。これはクリックできない」ということです。

先日ブログでも紹介したように、2015年の流行でもあり、
シンプルなフラットデザインが多くなってきていますが…

フラットになりすぎて、
クリックができるのかできないのかがデザインによっては
一目でわかりにくい場合もあるのではないかと感じました。

そこで今回は、
ロールオーバーの工夫がされているwebデザインを集めてみましたので、
紹介していきたいと思います。

この記事の目次

■ FRONTAGE
■ 高知家 ALLSTARS
■ 代々木アニメーション学院サイト

■ FRONTAGE

http://frontage.jp/

ブランド戦略・事業戦略・デジタル戦略等のサービスを
提供する企業のサイトです。

メインビジュアルにかぶさるように
斜めに配置されたナビゲーションが特徴のこのサイト！
そんな特徴を活かしたロールオーバーの効果が上手く使われているので
見ていきましょう♪

まず下にスクロールしていくと、
「WORK」の部分がありますが、そこのバナーに触れると、
バナーに対して斜め右上がりに黄色の影ができたような表現がなされます。
サイト全体はシンプルですが、クリックできるということが
とてもわかりやすいのではないでしょうか？

また最近の表現としてもよく使われているのですが、
マウスをのせると、少し透明度をかけた白の枠に
詳しいテキストが新たに出てくるようになっています！
これもユーザーに興味をもってもらうための仕組みですね。

その他のリンクがされているテキストもふれると、少し斜めになります！
これはフォントスタイルをイタリックというものに
CSSで簡単に設定することでできるのです。
シンプルですが、珍しい表現に新しさを感じられ素敵ですね♪

■ 高知家 ALLSTARS

kochiya
http://www.kochike.pref.kochi.lg.jp/~top/

高知県の食・自然・人々のつながりなどを広める
「高知家」という企業のサイトです。

まずサイトを開けた瞬間から
まるでポスターを見ているかのような
個性的な感じが印象に残りやすいデザインですが！

そんな個性を活かしたマウスオーバーがされているのです！

まず少しだけスクロールさせると、
早速クリックできる場所があります！
「8月のスター進出プロジェクト」や
「プロジェクトアーカイブ」のバナーに注目です！
ふれるとただ薄くなるだけではなく、星が光ったようなイメージになり、
黒い宇宙のような背景に目立つような仕組みになっていますね。

そして、もう少し下の方へスクロールしていくと、
「スター図鑑」があり、人の写真がずらりと並べられています。
そこにふれてみてください♪
虹色の枠でちょっとした自己紹介と一緒に浮き出たように表示されますね。
また一瞬ですが、写真の部分が右から左へと
シュッと流れ星が通ったような表現もされていて、
細かいところまで工夫が行き届いているデザインですね。

カラフルでにぎやかなデザインである分、
クリックができるところの表現に工夫があることで、
できないところとの差がわかりやすいデザインではないでしょうか？