こんにちは、このBLOGを含めた弊社サイトの制作を担当しているWebデザイナーの増見です。いわゆるインハウスWebデザイナーという肩書きになります。

この度、弊社コーポレートサイトをリニューアルしました（詳しくはこちらの記事を参照）。実は2012年4月にもリニューアルしているのですが、その当時と比べて刷新したことが多く、Webを取り巻くトレンドや技術の移り変わりの速さをとても感じました。

というわけで、今回はサイトリニューアルで押さえておきたい10のWebトレンドを弊社事例をもとにご紹介したいと思います。「自社のサイトをリニューアルしたいけど、最近のWebトレンドって何だろう？」とお悩みの方の参考になれば幸いです。

① フラットデザイン

トレンドとしてもうすっかり浸透したと言えるフラットデザイン。弊社も装飾を極力削ぎ落とし、シンプルでミニマルなデザインを追求しました。もともと表現したかった「上品さ」「洗練された雰囲気」というイメージにフラットデザインはマッチしており、フラットデザインを取り入れたのは自然な流れでした。

試しに2011年当時のサイトとリニューアルしたサイトを比べてみました。当時はドロップシャドウ、グラデーションを多用していたのがわかります。

② レスポンシブWeb

2年前のリニューアル時には、マルチデバイス対応はほとんど議題にも上がりませんでしたが、今回は「レスポンシブ当たり前」という空気になっていました。弊社はBtoB企業なので、BtoC企業ほどの緊急度はないかもしれませんが、それでも増え続けるスマートフォンからのアクセスを無視するわけにはいきません。

ちなみにGoogleアナリティクスで弊社サイトの過去5年間のデバイス別のアクセス比率を調べてみましたが、確実にモバイルユーザーが増えているのがわかります。

マルチデバイスに対応するにはいくつかの方法がありますが、2012年6月13日にGoogleが「レスポンシブWebを推奨する」と発表したことで、レスポンシブWebに人気が集まりました。

とはいえ、レスポンシブWebにこだわらずサイトの構造や目的を考えた上で、最適な手法を選択するのがベストだと思います。

③ アイコンフォントの活用

以前は緻密に作りこんだアイコン画像を多用していましたが、今回はアイコンフォントを導入しました（一部のページでは旧サイトの画像をそのまま使っていますが……）。

①のフラットデザイン、②のレスポンシブWebを考えると、シンプルでモバイルでも表示が美しいアイコンフォントが使われるようになるのは自然な流れですね。
Font AwesomeならCDN（Contents Delivery Network）を利用してすぐに使えるので、アイコンフォントの使い勝手を試したい、という人にもお勧めです。

④ CSSフレームワークの活用

CSSフレームワークはここ2年ほどで急速に広まりました。今回のリニューアルでは、中でも最も有名な「Bootstrap」にお世話になりました。グリッドシステムはそのまま使い、ボタンやテーブルなどのスタイルはBootstrapの設計を参考にオリジナルで作成しました。

ちなみに従来のWeb制作はPhotoshopなどでデザインカンプを作成してからコーディングするのが一般的でしたが、近年はデザインカンプを作成せず、コーディングしながらブラウザー上で直接デザインする「インブラウザデザイン」という手法が広まりつつあります。

コンポーネントがすでに用意されたフレームワークを利用すると、このインブラウザデザインを行いやすいので工数削減が期待できます。とはいえ、フレームワークに頼りすぎるとオリジナリティのないデザインになってしまう可能性もあるので、使いどころを考えるのが大切かなと思います。

⑤ HTML5

2014年10月28日にHTML5が勧告されましたが、弊社のサイトもXHTML 1.0からHTML5に移行しました。

や

※記載されている内容は掲載当時のものであり、一部現状とは内容が異なる場合があります。ご了承ください。