2015/12/21 コラム

ホームページの流行を考える

サイトを見ているとき

「今風じゃないな。ってことは更新されてないな。」

と感じたことはありませんか？
そしてそのまま他のサイトへいってしまうことはないでしょうか。

デザインが古いと、こういった機会損失を生んでしまうことがあります。

洋服や食べ物には時代によってトレンドってものがありますよね。
もちろん、それはWEBやホームページにもトレンド・・・いわゆる「流行」というものは
存在します。

ホームページひとつとってもデザインだったり、
表現方法だったりと色々な方面でそれぞれの流行があるんです。

■UI（ユーザーインターフェース）の変化
昔は限られた表示領域の中に、多くの情報を詰め込んできました。
しかし最近では、UIを大型化し余白を十分にとるようになりました。
その結果、縦長のページが多くなりましたよね。

縦長ページに対応するように固定型ヘッダーや、
ページ上部に戻るようにスクロールすると現れるボタンなども
UIに変化によるものだと考えられます。

■フラットデザインとマテリアルデザインの出現
フラットデザインとは
すごく簡単に言ってしまえば

・立体感のない、単色的、平面的
・少ない色数
・動きや文字は最小限

というように、
「シンプルなものが本当のデザインだ」という考えから作られたデザインのため
本当にシンプルです。

わかりやすい例として、iPhoneやAndroid・スマートフォンの
アイコンを思い浮かべてもらえればと思います。

iOS7のホーム画面。

マテリアルデザインとは
フラットデザインから派生し、Googleが手がけた、直訳すると「物質的なデザイン」という
意味です。

概念として
ページを紙、載せる情報全てをインクと考えて
それらに縦・横・高さといった概念を加えて表現したものが
マテリアルデザインと呼ばれています。

フラットデザインと大きく異なる点は「アニメーションが多い」という点です。
ページを重ねられたり、ボタンを押すと自然に領域が広がる、といったアニメーションを
見たことはないでしょうか？
特にスマホのアプリなどでは、マテリアルデザインが多く使われていますね。

マテリアルデザインのサンプル例。ボタンや記事ごとに影が付き、やや立体的に表現されている。
こちらはマテリアルデザインを紹介しているページになります。気になる方はこちらからどうぞ

■JQuery／アニメーション
動きのあるホームページとかって、見ていて楽しいですよね。
「でも表現するのはコードとかよく分からないし難しい・・・」
そんな動きを簡単にできるようにしちゃおうということで考えられた
「JQueryライブラリ」です。

弊社のトップページで表示しているスライドショーも、
実はこのJQueryを使って表現しているんです。

弊社トップページ。赤枠で囲んだ箇所がスライドショー。

JQueryを使えばスライドショーといったアニメーションに限らず、
いろんな動きができるようになります。
参考サイトや書籍も沢山ありますので、気になる方は是非探してみてください。

レスポンシブデザインなども最近の流行ですね。
過去に記事ありますのでそちらも参考にしてみてください。
スマホサイトとレスポンシブデザイン

もちろん上記で紹介したような流行を常に取り入れることが
最善の結果に繋がるとは限りません。

目的に合わせて、しっかりと取捨選択をして取り入れるようにしていきたいですね。

スリーカウント株式会社
〒430-0919　浜松市中区野口町501 2F
TEL：053-581-8781（平日9:00～18:00）
FAX：053-581-8783

※2015年8月13日（木）～ 2015年8月16日（日）
上記期間は誠に勝手ながら夏季休暇とさせていただきます。
上記期間中にいただいたお問い合わせ等は
2015年8月17日（月）より、順次ご対応させていただきます。