週刊Webテク通信

2016年11月第4週号 1位は，2017年のWebデザインの手法を予測，気になるネタは，LINE、著名人向けサービス「LINE BLOG」を一般開放

Webテク, Webデザイン, Web広告, モバイル, クラウド, HTML, ブログ

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

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

1. 6 Web Design Style Predictions for 2017https://envato.com/blog/6-web-design-style-predictions-2017/

2017年のWebデザインの手法を予測した記事です。

  1. ちょっとしたマイクロインタラクション
  2. 奥行きのある重なり合った要素
  3. 手描き風のアイコン
  4. 色鮮やかなグラデーション
  5. 最小限のモックアップ
  6. 大きな色つきの影

Googleのマテリアルデザインを意識しつつ，グラデーションやドロップシャドウが復活していく傾向のようです。

図1　2017年のWebデザインの手法を予測

図1　2017年のWebデザインの手法を予測

2. Mobile Design Best Practiceshttp://babich.biz/mobile-design-best-practices/

モバイルデザインの最善の技法について解説しています。

  1. 1つの画面で1つのタスク
  2. 見えないユーザーインターフェイス
  3. 息をつくための間
  4. 簡単なナビゲーション
  5. 片手で操作できる
  6. アプリを速く見せる
  7. 賢くプッシュ通知を使う

図2　モバイルデザインの最善の技法

図2　モバイルデザインの最善の技法

3. 4 Ways to Improve Usability and User Experience by Decluttering Designs - Designmodohttps://designmodo.com/improve-usability-decluttering-designs/

余計なデザインを取り除くことで，ユーザビリティとユーザーエクスペリエンスを向上させる方法を紹介しています。

  1. コピーを短くする
  2. 見た目の装飾を取り除く
  3. デザイン要素を再利用する
  4. 常に一つのユーザー目標を念頭に置く

図3　ユーザビリティとユーザーエクスペリエンスを向上させる方法

図3　ユーザビリティとユーザーエクスペリエンスを向上させる方法

4. How to use Adobe CC shared libraries and make the most of it?https://uxdesign.cc/how-to-use-adobe-cc-shared-libraries-and-make-the-most-of-it-d5e114014170#.fi36rfeax

Adobe Creative Cloudの共有ライブラリの使い方と活用方法を解説した記事です。

複数人で同じアセットを利用できる共有ライブラリの使い方を初歩から説明しています。また，Sketchでも同じようなことを実現するためのプラグインの紹介と，Adobe CCの共有ライブラリとの比較も載っています。

図4　Adobe Creative Cloudの共有ライブラリの使い方と活用方法

図4　Adobe Creative Cloudの共有ライブラリの使い方と活用方法

5. Progress Bars vs. Spinners: When to Use Which - UX Movementhttp://uxmovement.com/navigation/progress-bars-vs-spinners-when-to-use-which/

読み込み途中を表現するプログレスバーとスピナーについて，いつどちらを使うべきかを説明しています。

待ち時間が4秒以上の場合はプログレスバー，4秒未満だとスピナーを表示するというルールで，1秒以上ユーザーを待たせる場合にはスピナーを表示すべきだそうです。

図5　プログレスバーとスピナーの違いについて

図5　プログレスバーとスピナーの違いについて

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

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

HTML Div Table Generatorhttp://divtable.com/generator/

HTMLの表組み（Table）を作成できるサービスです。ビジュアルとコードを同時に見ながら作業でき，どちらからも編集できるところが便利です。

ビジュアルで編集して生成されたコードをコピーして使うというツールが多い中，このサービスはビジュアルエディタとHTMLコードエディタの両方から編集できます。表組みのHTMLコードをペーストして，ビジュアルエディタで編集するといった使い方も可能です。

「Settings」で幅やボーダーの太さを設定できるのですが，最初にこの設定を忘れて作ってしまうと，あとから設定することができませんでした。また，CSSコードを編集してもビジュアルエディタとは連動していません。

図6　HTMLの表組み作成サービス

図6　HTMLの表組み作成サービス

今週の気になるWebネタ

LINE，著名人向けサービス「LINE BLOG」を一般開放。シンプル操作，フォント30種駆使しこだわりのブログを開設可能 - Engadget 日本版http://japanese.engadget.com/2016/11/14/line-line-blog-30/

著名人専用だったブログサービス「LINE BLOG」が，一般ユーザーも開設できるようになりました。スマートフォンアプリからLINEアカウントを使って登録し，記事の投稿もアプリから行います。

完全にスマホ専用で，動画や写真の挿入などスマホから投稿しやすいところが特徴のようです。お気に入りのユーザーをフォローするSNS的な要素や，ハッシュタグ検索など最近のトレンドは押さえていますし，記事を投稿するとLINEタイムラインに共有する機能もあります。

LINEの友達限定に公開できる機能があると，複数の写真とキャプションを入れた，ちょっとしたレポートなどを友達に公開したいときに重宝すると思います。ちなみに，Facebookにはそういったことができる「ノート」機能があるのですが，あまり知られていません。

Webテク, Webデザイン, Web広告, モバイル, クラウド, HTML, ブログ

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote