週刊Webテク通信

2016年3月第1週号1位は、Webデザインにメリハリをつける5つの方法、気になるネタは、Google Docsの編集や書式化の指示を音声(“口頭命令”)でできる

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

1. 5 Ways to Boost Contrast in Your Web Design | Design Shackhttp://designshack.net/articles/graphics/5-ways-to-boost-contrast-in-your-web-design/

Webデザインにメリハリをつける方法を5つ紹介しています。

  1. 大きくする(あるいは小さくする)
  2. ちょっとしたテクスチャーを加える
  3. 形を変える
  4. 色を追加する(あるいはなくす)
  5. 何か意外なことをやる

対比を付けることで、各要素の区別をハッキリさせたり特別なものを目立たせることができます。

図1 Webデザインにメリハリをつける5つの方法
図1 Webデザインにメリハリをつける5つの方法

2. Essential design trends, February 2016 | Webdesigner Depothttp://www.webdesignerdepot.com/2016/02/essential-design-trends-february-2016/

2016年の重要なデザイントレンドについてまとめた記事です。

以下の3項目について、実例とともに解説しています。

  1. ダブルトーンのカラースキーム
  2. スクリーンを分割したデザイン
  3. 画像に被ったタイポグラフィ
図2 2016年の重要なデザイントレンド
図2 2016年の重要なデザイントレンド

3. 40 Clever Empty State Designs for Mobile Apps - Hongkiathttp://www.hongkiat.com/blog/mobile-app-empty-state-designs/

モバイルアプリの「何もない状態」のデザインギャラリーです。

ユーザーがサービスを使い始めたばかりでファイルやプロジェクトが何もない状態の時などに、どんな画面を表示するかの実例を多数紹介しています。イラストを使ったものが多いですね。

図3 モバイルアプリの「何もない状態」のデザインのギャラリー
図3 モバイルアプリの「何もない状態」のデザインのギャラリー

4. Why Minimalist Design Can Benefit Your User Experience. - Jixee Bloghttps://blog.jixee.me/why-minimalist-design-can-benefit-your-user-experience/

ミニマルなデザインがユーザーエクスペリエンスに有効だという記事です。

ユーザーエクスペリエンスをミニマルなものにするために、以下のステップが紹介されていました。

  1. 焦点を当てる範囲を狭めて厳選していく
  2. 洗練させたものを開発する
  3. テストを行い、データを収集・分析する
  4. データの評価を元に簡素化、最適化する
図4 ユーザーエクスペリエンスのためのミニマルデザイン
図4 ユーザーエクスペリエンスのためのミニマルデザイン

5. REM vs EM – The Great Debate | Zell Liew's blog about web design and developmenthttp://zellwk.com/blog/rem-vs-em/

CSSでのサイズ指定の単位REMとEMについて、それぞれの説明とどちらを使うべきかについての考察がまとめられています。

それぞれに良い点と悪い点があるので使い分けることを推奨しており、いくつかの検証した結果が掲載されていました。

図5 REMとEMについてのまとめ
図5 REMとEMについてのまとめ

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

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

Resizer - Google Designhttp://design.google.com/resizer/

Resizerは、Googleが提供するレスポンシブデザインの表示チェックのためのWebサービスです。表示したページは、スクロールしたりリンク先に移動するなど普通に操作できます。

PC、タブレット、スマートフォンでの表示を同時に見ることができ、PCサイズ、モバイルサイズだけをそれぞれ表示できます。さらにサイズを切り替えることができ、ブレイクポイントとしてよく使われるサイズが用意してあります。

同様のサービスもいろいろありますが、デザインやUIも洗練されていますしGoogle製ということで、この手のツールの決定版となりそうです。

なお、UserAgentなどで端末を判定して切り替えているようなページのチェックには使えません。

図6 Google製のレスポンシブデザイン表示チェックサービス
図6 Google製のレスポンシブデザイン表示チェックサービス

おすすめ記事

記事・ニュース一覧