週刊Webテク通信

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

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

ネットで見かけた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製のレスポンシブデザイン表示チェックサービス

今週の気になるWebネタ

Google Docsの編集や書式化の指示を音声(“口頭命令”)でできる | TechCrunch Japanhttp://jp.techcrunch.com/2016/02/25/20160224you-can-now-edit-and-format-your-google-docs-by-voice/

Google ドキュメントに,音声で操作する「音声コマンド」機能が追加されました。「select all(すべて選択)」「align center(センタリング)」「bold(太字)」のように,ほとんどの操作を音声で実行できるようです。

しかし,この機能はまだ日本語には対応していません。操作の指示くらいだったら英語でもいけるかもと思ったんですが,「アカウントの言語とドキュメントの言語は両方とも英語に」とあったので試すのを断念しました。

なお,音声でのテキスト入力はすでに日本語対応しているので,この機能も近いうちに日本語対応するんじゃないでしょうか。キーボード無しでの文字入力&編集操作を早く試してみたいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入