週刊Webテク通信

2015年12月第4週号 1位は，2016年に目立つはずのWeb／グラフィックデザインのトレンド，気になるネタは，「スター・ウォーズ」新作のネタバレを防いでくれるクローム拡張「Force Block」登場

Webテク, Webデザイン, Web広告, CSS, Chrome拡張

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

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

1. 16 Web & Graphic Design Trends To Watch In 2016 — Mediumhttps://medium.com/@VisualErnesto/16-web-graphic-design-trends-to-watch-in-2016-bd0b30c9e475#.uejy3ua24

2016年に目立つと思われる，Webデザインとグラフィックデザインのトレンドを16個まとめた記事です。

  1. ユーザビリティ
  2. レスポンシブデザイン
  3. アプリに影響を受けたWebデザイン
  4. 気の利いたメニュー
  5. モジュールとモジュール化されたテキスト
  6. モジュールと無限スクロール
  7. マテリアルデザイン
  8. フラットデザイン
  9. ビジュアルでストーリーを語る
  10. インフォグラフィックス
  11. かっこいいタイポグラフィ
  12. モダンレトロ
  13. 豊かな色
  14. グリッドと幾何学的形状
  15. ストックフォトを使わない
  16. ビデオとGIFアニメ

図1　2016年に目立つはずのWeb／グラフィックデザインのトレンド

図1　2016年に目立つはずのWeb／グラフィックデザインのトレンド

2. Web components that can be built purely using css, NO Javascript | Technical news on web developmenthttp://technical.nailfashionsweden.se/web-components-that-can-be-built-purely-using-css-no-javascript/

JavaScriptを使わずCSSだけで作られた，Webページで使われる各種コンポーネントのデモとコードを紹介しています。

  • 段階を追ったプログレスバー
  • 垂直方向のタイムラインで確認できる通知パネル
  • チェックボックスのカスタマイズ
  • 高度なトグルスイッチ
  • 範囲の選択のカスタマイズ

図2　CSSだけで作られたWebデザインのコンポーネントいろいろ

図2　CSSだけで作られたWebデザインのコンポーネントいろいろ

3. Thomas Byttebier - The best icon is a text labelhttp://thomasbyttebier.be/blog/the-best-icon-is-a-text-label

「最高のアイコンはテキストラベル」と題した，インターフェイス要素としてのアイコンについて考察した記事です。

すべての人に100％明確ではない場合は，アイコンを使用しないほうが良く，テキストラベルは常に明確だと主張してありました。また，アイコンとテキストとを組み合わせるのは優れた解決策とのことです。

図3　アイコンについて考察した記事

図3　アイコンについて考察した記事

4. Design for Startuphttp://designforstartup.net/

スタートアップ（起業したばかりの企業）のために，デザインに関する有益な記事，ツールや素材をまとめた情報ポータル的なサイトです。

スタイルガイドやロゴを作るためのヒントとなる記事や実例，配色やフォント選びのツールなどが多数紹介されており，スタートアップに限らず参考になるはずです。

図4　スタートアップのためのデザインに関する情報ポータル

図4　スタートアップのためのデザインに関する情報ポータル

5. Best Background Patterns Ever | Freebieshttp://haeckdesign.com/freebies/patterns/best-background-patterns-ever

背景画像の素材を提供しているサイトと，背景画像を生成するWebサービスとをまとめています。

画像が不要でCSSだけで実現する背景パターンを生成するサービスも紹介されていました。

図5　背景画像の素材とツールいろいろ

図5　背景画像の素材とツールいろいろ

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

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

Capture the Christmas Mood: 20+ Festive Websites | NOUPEhttp://www.noupe.com/inspiration/showcases/christmas-mood-20-festive-websites-94193.html

今回は，クリスマス関連のWebサービスを多数集めた記事を紹介します。クリスマスのメッセージを送るサービス，クリスマスの伝統を紹介したサイト，サンタを使ったゲームなどが掲載されていました。

プレゼントを入れる大きな靴下をカスタマイズするサービスは，柄や色を選んで，名前やメッセージを入れて実際に購入できるようです。クリスマスオーナメントの色や柄などを変更して楽しむジェネレーターは，デザインを画像として書き出せます。

1980年からの時代ごとに流行ったクリスマスプレゼントのおもちゃが見られるサイトも興味深いです。ゲーム機はもちろん，たまごっちやポケモンなど日本でおなじみのものもいろいろと掲載されていました。

図6　クリスマス関連のWebサービスいろいろ

図6　クリスマス関連のWebサービスいろいろ

今週の気になるWebネタ

「スター・ウォーズ」新作のネタバレを防いでくれるクローム拡張「Force Block」登場 まだ見てない人は急いで入れて！ - ねとらぼhttp://nlab.itmedia.co.jp/nl/articles/1512/18/news136.html

「スター・ウォーズ」の新作映画をまだ見てない人のために，Webブラウズ中にネタバレ情報を目にしないようにブロックするChrome拡張が登場しています。

「スター・ウォーズ」のファンなら分かる有名フレーズを元にしたメッセージとともにネタバレページをブロックするそうで，なかなか面白い発想です。残念ながら日本語のネタバレをブロックすることはできないようです。

この発想で，連続ドラマの最終回とか，スポーツの結果のネタバレ防止ができると便利かもしれません。だいたいツイッターでネタバレすることが多いので，ツイッタークライアントにこういった機能があるといいのかも。もしかしたら既にあるのかもしれません。

Webテク, Webデザイン, Web広告, CSS, Chrome拡張

著者プロフィール

芦之由（あしのよし）

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

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

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