かよきせきデザイン|千葉のホームページ制作>kayokiseki-designブログ

2016年のWebデザインは?


昨年のWeb業界を揺るがしたGoogle社のモバイルファーストによるSEO。それによって大手サイトの、特に困難と思われたショッピングサイトのレスポンシブデザイン化がいっきに進んだように思われますが、一般サイトのモバイル対策はまだまだ進んでいるとは言えません。果たして2016年はどうすべきか?について書きます。


またすっかりCSSによるシンプルなデザインへとWebデザインの主流を変えたフラットデザインの登場から早2年。2016年どのように変わっていくのかを、私なりにこうなったらいいなという願いも加味し勝手に予測を立ててみました。今年も何かやりそうなGoogle社の動きから目が離せませんね!

モバイルファースト

2015年にGoogle社がモバイルファーストの対策をとっていないサイトの評価を下げる方向に大ナタを振るい、一気に大手サイトもモバイル化を進めました。モバイルファーストをレスポンシブにて行うか、スマホ専用サイトを作ってデバイスで振り分けるかは業種によっても向き不向きがあると思います。が、とにかく2016年はモバイルファーストになっていないサイトは早急に対策をすべきです!


今インターネットアクセスのデバイス比率がどれほどかというと、例えばこちらは人気ベーカリーさんのサイトですが…

このように、モバイル経由が62%、PCが32%、タブレットが6%です!これはメインターゲットを家族のパンを買うヘルシー志向の女性層にしているため、スマホで場所や営業時間、価格帯などを調べてから来店するケースが多いものと思われます。


あなたの業態のメインターゲットがPCを持たない、あるいはデスクワークでない女性層や若年層であるならば、早急にきりかえてください。例えば、塾教育関係、ヘアサロン、外食業のホームページなどは待ったなしでしょう。また急に訪問が必要になる業態、病院・クリニック・動物病院のホームページもスマホで場所や診療時間を調べられるよう、モバイルファーストであるべきです。


2012年くらいは、日本ではまだレスポンシブが定着するかは懐疑的な意見も少なくなく手法も手探りでしたが、2016年現在はBootstrapMaterial Design Liteなどの便利なフロントエンドテンプレートも登場し、レスポンシブデザインにトレンドは来ていると個人的には思っているし、何といってもわたしがレスポンシブ推しですのでそうあって欲しいと思っています!


Webデザイン

2013年からシンプルにCSSメインで装飾するフラットデザインが主流でしたが、いまだに昔ながらのリッチな画像メインのホームページが多く存在するのは事実です。これは、ホームページをリニューアルする予算うんぬんはもちろんあることと思いますが、フラットデザインではどうしても表現しきれない部分があるから、それに対して経費をかけることが魅力的ではないという経営者さんのご判断ということだと思っています。


ここでちょっとここ数年のWebデザインのトレンドをざっくりとボタンを例にあげます。

■画像時代のボタン

まずフラットの前はボタンは画像で用意するのが当たり前でした。よってこのような複雑なグラデーションによりリッチなボタンを用意できていましたが、この問題はなにかと言えば「モバイルファーストでないこと」でした。画像で用意するために、サイズがデバイスによって変形しにくいこと、また解像度の違いによりスマホでは粗く見えてしまうなどの問題がありました。


■フラットデザインのボタン

windows8が登場した時の衝撃!フラットデザインによるどぎついカラーによるべた塗りの正方形がずらっと並んでいるスタート画面には本当に驚きましたね。このマイクロソフトの冒険がフラットデザインを主流にしたと言ってもいいです。CSSでボタンを用意すれば、デバイスごとに変形もできるし解像度で粗くなる心配など皆無ですし、何より軽量化により読み込みの速さを実現したのです。


■マテリアルデザインのボタン

わたしは以前どのエントリーだったか、フラットはもう少し昔に戻るという予言を立てていましたが、ちょうどGoogleによって提唱されているマテリアルデザインに見られる特徴がそんな感じです。フラットと同じくCSSで用意するのですが、フラットのクールで機械的な感じから少し温かみと質感を感じる、親しみやすさを出します。具体的に書けば、角丸を若干いれ、ドロップシャドウをつけます。場合によってはボーダー1pxで立体感を演出します。


語弊なきよう付け加えておきますが、マテリアルデザインの主眼は、ユーザがより自然なWeb画面において直感的に操作を実現させることです。androidをお使いの皆さんはGoogle提供のアプリで多く見ていることと思いますが、このような感じ。要素の高低差を出すことでコンテンツの把握がしやすく、操作に必要なボタンの形状も重要度によって分かれており、マテリアルデザインの約束では、もっとも重要な働きを持つボタンはその画面においてたった1つのみ配置できるという正円型のものとなっています。これはもっとも手前に位置するため、影が遠くなっているんです!


他にもいろいろなコンポーネントがMaterial Design Liteでは用意されています。わたしがいいなと思ったのはこちらの「Cards」というもの。レスポンシブデザインでは、グリッドが動いたときにコンテンツの区切りを明確にするために、大きく余白をとることが必須なのですが、「Cards」はその名の通り、コンテンツを1枚のカードにしてしまいます。これなら余白がとりにくいケースでも区切りが分かりやすい上に、とても華やか!

※画像はMaterial Design Lite(http://www.getmdl.io/components/index.html#cards-section)より


いかがでしょうか。Webデザインでは「1pxの効果」が重要視されます。人間の目はたった1pxの違いも無意識に感じ取っているからです。こちらはCSSで可能な微細なひと手間を加えることで、こんなにもリッチになるといういい例と言えます。

蛇足ですが2015年にキュレ―ションメディア、バイラルメディアが流行ったことにより、小遣い稼ぎで記事を書いている素人ライターが増えました。その結果としてフリー素材の写真やイラストがとにかく人目につくこととなり、人気のモデルさんに関しては若干食傷気味という方も少なくないと思います。ということで、「なるべく自分で素材は用意しましょう!」と勝手なわたしのこだわりですが書いておきます。


このような点を参考に、当サイトの「制作の流れ」と「プラン」のページのプチリニューアルを行いました。イラストの背景色はCSSで表現していますが、マテリアルデザインカラーを使用しています。いかがでしょうか?だいぶ見やすくなったと思います!