週刊Webテク通信

2014年12月第3週号1位は、2014年のWebデザインにおける良いトレンドと悪いトレンド、気になるネタは、東京03番号のスマホ03スマホ』登場

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2014年12月8日~14日の間に見つけた記事のベスト5です。

1. The Best & Worst Web Design Trends of 2014 - Market Bloghttp://marketblog.envato.com/trends/best-worst-web-design-trends-2014/

2014年のWebデザインにおける、良いトレンドと悪いトレンドとをまとめた記事です。

良いトレンド
  • ミニマルなフラットデザイン
  • 改良されたWebフォント
  • フルスクリーンの背景
  • 改良されたレスポンシブデザイン
悪いトレンド
  • モーダルウィンドウによる広告
  • 多すぎるソーシャルメディアボタン
  • ひっきりなしのローディング画面
  • スクロールバーのカスタマイズ

悪いトレンドの方が、話のネタとしては盛り上がりそうです。

確かにソーシャルメディアボタンが多すぎるのは、デザイン面でもUI面でも良くないですし、スクリプトなどの読み込みの負荷も気になります。

図1 2014年のWebデザインにおける良いトレンドと悪いトレンド
図1 2014年のWebデザインにおける良いトレンドと悪いトレンド

2. The Decade in Web Design Trendshttp://www.templatemonster.com/infographics/web-design-trends-years-2004-2014.php

2004年~2015年のWebデザインのトレンドを年ごとに見られます。2014年までの10年史としてまとめたようです。

10年前の2004年には全面Flashサイトがトレンドとなっており、時代が移り変わったことを感じました。とはいえ、全体的には大きな画像や大きな文字を使ってシンプルにという方向に徐々に進んできたようです。

図2 Webデザインのトレンドの10年史
図2 Webデザインのトレンドの10年史

3. Best of SVG 2014: Icons, Tools and Resources - noupehttp://www.noupe.com/essentials/freebies-tools-templates/best-of-svg-2014-icons-tools-and-resources-86159.html

SVGのアイコン、ツール、チュートリアルをまとめた記事です。ファイル容量が小さく、スケーラブルで高解像度のディスプレイでも美しく表示されるSVGファイルは、モバイル端末への対応においても有効です。

12 Best Free SVG Viewers and Editorsという、SVGのビューワーとエディタをまとめた記事も併せてチェックしましょう。

図3 SVGのアイコン、ツール、チュートリアルをまとめた記事
図3 SVGのアイコン、ツール、チュートリアルをまとめた記事

4. Best Freebies for Designers: December 2014 - Inspired Magazinehttp://inspiredm.com/freebies-designers/

デザイナーに役立つフリー素材を多数紹介しています。

手持ちの素材を合成して使えるモックアップを中心に、アイコン、UIキット、HTMLテンプレート、Photoshopテンプレートなどが紹介されています。

図4 デザイナーに役立つフリー素材いろいろ
図4 デザイナーに役立つフリー素材いろいろ

5. Responsive Design Websites - 30 Examples | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2014/12/responsive-design-websites-30-examples/

レスポンシブWebデザインのギャラリーです。

全面に使った背景画像や、スクロールで見せていくシングルページデザインなど、最近のトレンドを踏まえたサイトが目立ちました。

図5 レスポンシブWebデザインのギャラリー
図5 レスポンシブWebデザインのギャラリー

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

先週の気になるWebサービス

Testing Your Mobile Responsive Design: 20 Useful Resources - WDPhttp://webdesignpool.com/testing-mobile-responsive-design

レスポンシブなWebサイトの表示チェックができるWebサービスをまとめた記事を紹介します。

作成したWebページを表示チェックする際、Windows/Macでの複数ブラウザのチェックだけでも手間が掛かりますが、その上iOS/Android端末までチェックするとなると大変です。そこで、ブラウザ上でチェックを行えるサービスを併用すると便利です。

無料で使えるお手軽なサービスとしては、レンダリングエンジンは使用しているブラウザをそのまま使い、複数サイズでの見え方を同時にチェックできるものがあります。

実際の端末をエミュレートして遠隔操作でチェックが行えるようなサービスは、非常に便利ですが有料のものがほとんどです。

図6 レスポンシブなWebサイトの表示チェックのためのサービスいろいろ
図6 レスポンシブなWebサイトの表示チェックのためのサービスいろいろ

おすすめ記事

記事・ニュース一覧