週刊Webテク通信

2015年1月第4週号1位は、2015年のWebデザインのトレンド10個、気になるネタは、ワイモバイルからハート型のPHSHeart』、変形してストレート型に

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

1. Top 10 Web Design Trends for 2015 | TeslaThemeshttp://teslathemes.com/blog/top-10-web-design-trends-for-2015/

2015年のWebデザインのトレンドを10個挙げています。

  1. マテリアルデザイン
  2. レスポンシブデザイン再び
  3. SVGが一歩前進
  4. スタイルガイド
  5. スクロール前提のデザイン
  6. インタラクション
  7. タイポグラフィー
  8. ウェラブル端末への準備
  9. 表示速度
  10. Adobeと有名フレームワークの使用率の減少

10は、用途に応じた複数のツールを使い分けることでAdobeのソフトの出番が減ったり、用途に合わせた軽量なフレームワークを使用するケースが増えることでBootstrapなどのメジャーなフレームワークのシェアが減るだろうということです。

図1 2015年のWebデザインのトレンド10個
図1 2015年のWebデザインのトレンド10個

2. 4 essential layout trends for 2015 | Webdesigner Depothttp://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/

2015年のWebデザインにおけるレイアウトのトレンドを紹介しています。

  1. 分割画面
  2. 枠をなくす
  3. モジュラーまたはグリッドベース
  4. 画面全体を背景画像などで埋める

以上4つのトレンドについて、豊富なサンプルとともに解説していました。

図2 2015年のWebデザインのレイアウトのトレンド4個
図2 2015年のWebデザインのレイアウトのトレンド4個

3. Getting Started with Style Guides - Market Bloghttp://marketblog.envato.com/trends/getting-started-style-guides/

スタイルガイドを制作するための手引きです。

1の記事で紹介した2015年のトレンドにもスタイルガイドが入っていましたが、サイトのスタイルガイドを公開する企業も増えているようです。

適切に作られたスタイルガイドは、強力なマーケティングツールになるとのことでした。

図3 スタイルガイドを制作するための手引き
図3 スタイルガイドを制作するための手引き

4. LumXhttp://ui.lumapps.com/

AngularJSとGoogleのマテリアルデザインをベースにした、レスポンシブなフロントエンドフレームワークです。

フローティングアクションボタンなど、マテリアルデザインの要素がしっかり実装されています。

図4 マテリアルデザインのフレームワーク
図4 マテリアルデザインのフレームワーク

5. Responsive Websites Design ? 30 Fresh Examples | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2015/01/responsive-websites-design-2015/

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

ウィンドウサイズの変更でレスポンシブにレイアウトが変わるのではなく、UserAgentを見てデバイスによって切り替えているサイトも取り上げられています。最初レスポンシブじゃないのかと思ってしまいました。

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

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

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

Brandfolder - Brand Asset Management Simplified.https://brandfolder.com/

Brandfolderは、企業/ブランドのロゴや写真、ドキュメントなどを配布するためのWebサービスです。

Facebookが提供するFacebookブランド素材の使用ページのようなものを、外部サーバーに預けるということですね。

配布素材を外部に置くことでトラフィックを分散できますし、1つの素材を複数フォーマットに変換できるなど機能面でもBrandfolderを使うメリットは大きそうです。

また、Brandfolderがブランド素材のポータルとして機能すると、ブランドガイドラインなどを探すのも楽になりそうです。

図6 企業/ブランドのロゴや写真などを配布するためのWebサービス
図6 企業/ブランドのロゴや写真などを配布するためのWebサービス

おすすめ記事

記事・ニュース一覧