gihyo.jpサイトのロゴ

週刊Webテク通信

2015年1月第2週号1位は、2015年のWebデザインのトレンドとWeb制作者が生き残るためのヒント、気になるネタは、「Google TV」は結局終了　「Android TV」に一本化へ

2015-01-15

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

1. 10 web design trends you’ll actually see in 2015 (and how to survive them) | Webdesigner Depothttp://www.webdesignerdepot.com/2015/01/10-web-design-trends-youll-actually-see-in-2015-and-how-to-survive-them/

2015年のWebデザインのトレンドと、それらトレンドを受けてWeb制作者が生き残るためのヒントを紹介しています。

  1. レタリング（デザイン文字）
  2. IEとのお別れ（IE6とIE7のサポートをやめる）
  3. マイクロデザイン（細かいところのデザインやアニメーションで差別化する）
  4. モノのインターネットはまだまだ
  5. モバイルビデオ
  6. フレームワークが群雄割拠になる
  7. （FacebookやPayPalなど）従来勢力を持っていた歴史のあるサービスたちの終わりの始まり
  8. アートディレクションが重要となる
  9. 蓄積されたデータの解析（データを販売することでお金になるケースも）
  10. SVGがついに普及していく

4は原文では「The Internet of No Thing」という項目名で、Internet of Things（IoT＝モノのインターネット）をもじっているんですね。

図1　2015年のWebデザインのトレンドとWeb制作者が生き残るためのヒント
図1　2015年のWebデザインのトレンドとWeb制作者が生き残るためのヒント

2. Things To Consider While Designing Your Website - INCUBASYS BLOGhttp://blog.incubasys.com/things-consider-designing-website/

Webサイトをデザインするときに考慮すべき事をまとめた記事です。

  • お客さんのことを知る
  • サイトの目的を考える
  • 一貫性を持たせる
  • 競合を知る
  • コピーライティング
  • スケーラビリティ
  • データ収集
  • 企画
  • SEO
図2　Webサイトをデザインするときに考慮すべき事
図2　Webサイトをデザインするときに考慮すべき事

3. 7 Mobile Web Design Strategies That Are In Voguehttp://designwebkit.com/web-design/mobile-web-design-strategies/

モバイルに向けたWebデザインのための戦略を7項目紹介しています。

  1. スクロール対クリック
  2. フラットデザインはマテリアルデザインへと変化
  3. レスポンシブデザイン
  4. モバイルアプリのようなWebデザイン
  5. アイコンによる誘導
  6. 画像を使う場合の注意点
  7. タッチスクリーンによる一般的操作を画像閲覧に取り入れる

7は、ピンチインのような一般的な操作方法を使えるのが望ましいということです。

図3　モバイルに向けたWebデザインのための戦略
図3　モバイルに向けたWebデザインのための戦略

4. Web Developers - What to learn in 2015?http://www.revillweb.com/web-developers-what-to-learn-in-2015/

Web開発者が2015年に学ぶべき技術をまとめています。Webデザイナーにはちょっと敷居の高そうな、AngularJSやNode.jsといったような技術の話題です。

LAMP（Linux, Apache, MySQL, PHP）は知っていましたが、今はMEAN（MongoDB, express.js, AngularJS, Node.js）が注目のようです。個々の名前は聞いたことありますが、全然ついて行けてません。

図4　Web開発者が2015年に学ぶべき技術
図4　Web開発者が2015年に学ぶべき技術

5. The Best Wireframe Tools / Wireframe Appshttp://haeckdesign.com/blog/design/standards/wireframe-tools-wireframe-apps

ワイヤーフレームを作るのに役立つツールを10個紹介しています。

月額の課金が必要なWebサービスが中心で、有料のデスクトップアプリケーションもあります。WiresというWebサービスだけが無料のようです。

図5　ワイヤーフレームを作るのに役立つツール
図5　ワイヤーフレームを作るのに役立つツール

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

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

Material UI | Material Design | Material UI Colorshttp://www.materialui.co/colors

Material UI Colorsは、Googleが提唱するマテリアルデザインのカラーパレットから色を選ぶことができるWebサービスです。

色をクリックすると、HEX値／RGB値／RGBA値がコピーされますので、CSSなどにペーストして使用します。URLの末尾に「/red」のように色の名前を入れると、その色だけのパレットが表示されます。レスポンシブなデザインになっていますが、スマートフォンからは色の値をコピーすることができないようです。

なお、Googleによるマテリアルデザインのサイトに、カラーパレットとその解説が掲載されていますのでご参考に。

図6　マテリアルデザインのカラーパレット
図6　マテリアルデザインのカラーパレット

おすすめ記事

記事・ニュース一覧