週刊Webテク通信

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

Webテク, Webデザイン, Web広告, スタイルガイド, レイアウト, マテリアルデザイン, レスポンシブWebデザイン, スマートフォン

この記事を読むのに必要な時間：およそ 2 分

ネットで見かけた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サービス

今週の気になるWebネタ

ワイモバイルからハート型のPHS『Heart』，変形してストレート型に。セーラームーンコラボも実施 - Engadget Japanesehttp://japanese.engadget.com/2015/01/20/phs-heart-401ab/

ワイモバイルからハート型のPHS端末が発表されました。ねじってストレート型にして通話するそうです。最初に写真を見たときはスマートフォンと連携して通話するための端末かと思ったのですが，安いプランで使用できる通話専用端末でした。

これ，男性が女性に自分との通話用にプレゼントする端末なんでしょうか？ ブルートゥースも搭載していないそうで，電話帳はSMSで受け取って登録できるとのこと。ボタンもありません。

ワイモバイルといえばソフトバンクモバイルと合併することになりましたが，ブランドは継続するようです。とはいえ，こちらの記事「“⁠ついに来た⁠”ソフトバンク合併でワイモバイルの運命は？（石川温氏寄稿）」を見る限り，いずれブランド自体がフェイドアウトする可能性もありそうです。

Webテク, Webデザイン, Web広告, スタイルガイド, レイアウト, マテリアルデザイン, レスポンシブWebデザイン, スマートフォン

著者プロフィール

芦之由（あしのよし）

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター＆ライター。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては，以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URL：http://www.rgs680.com/dwt/