gihyo.jpサイトのロゴ

週刊Webテク通信

2017年12月第3週号1位は、インタラクションデザインの10個の基本原則、気になるネタは、「iMac Pro」発売 ハイエンド構成だと約150万円に

2017-12-21

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

1. 10 Basic Interaction Design Principles to Boost the UX Designhttps://www.mockplus.com/blog/post/interaction-design-principles

インタラクションデザインの基本原則について解説した記事です。

  1. ユーザーのメンタルモデルに従う
  2. ユーザーのニーズを満たす
  3. 一貫性
  4. 少ないことは豊かなこと（Less is More）
  5. 技術用語の代わりに簡単な言葉を使う
  6. キレイにするより機能的にするためにデザインする
  7. 考えさせない
  8. 直感的
  9. ユーザーの間違いを許容する
  10. フィードバックを提供する

1のメンタルモデルとは、「⁠人間が実世界で何かがどのように作用するかを思考する際のプロセスを表現したもの」とのことです。ここの解説は、本能的にそう思われるような操作方法を裏切らないといった内容でした。

図1　インタラクションデザインの10個の基本原則
図1　インタラクションデザインの10個の基本原則

2. 18 Designers Predict UI/UX Trends for 2018 – Figma Designhttps://blog.figma.com/18-designers-predict-ui-ux-trends-for-2018-2d04d41361c6

18人のデザイナーによる、2018に向けてのUI/UXのトレンド予想です。

名言風の短いフレーズは翻訳しにくいのですが、ざっくり訳したものを載せますのでご参考に。

  1. アクセシビリティが第一、エゴはその次
  2. デザインの共同作業はエンジニアリングに影響を与える
  3. デザイナーは倫理に焦点を当てる
  4. デザイナーは業界標準により大きく傾いている
  5. 大きな効率化が大きな責任につながる
  6. トレンドを無視するようになる
  7. デザインは社会を変える重要な要素になる
  8. デザインツールがデザイナーを生み出す
  9. Jason Schwartzman（コメディアンらしいです）が一番いいことを言った（ジョークだと思います）
  10. あなたの主観をチェックする時が来た
  11. 人間力がこれまで以上に重要
  12. 環境に動的に反応する時が来た
  13. より良いデザインツールはより良いブランディングにつながる
  14. デザインシステムは製品ではなく人にサービスを提供する
  15. デザインシステムは重要度によってのみ成長する
  16. フラットデザインはもう中心にならない
  17. デザインシステムは部門間のギャップを埋める
  18. CSSの改良は驚くほどウェブデザインに影響を与える
図2　18人のデザイナーによるUI/UXのトレンド予想
図2　18人のデザイナーによるUI/UXのトレンド予想

3. Using CSS Counters - Pinehttps://pineco.de/using-css-counters/

自動で番号を振ることができるCSSカウンタの使用例を紹介しています。

  • 自動的に記事が何号かを表示
  • 入れ子になった番号リスト
  • チェックボックスにチェックされた数を表示
図3　CSSカウンタの使用例
図3　CSSカウンタの使用例

4. Modern Websites and Elements: 8 Sources of Inspiration for Designers | NOUPEhttps://www.noupe.com/inspiration/modern-websites-and-elements-8-sources-of-inspiration-for-designers.html

ウェブデザインのインスピレーションを得ることができるサイトを8つまとめた記事です。

UIデザイン、1ページ完結型のサイトデザインなど、いろいろな切り口でのデザインギャラリーを紹介しています。

図4　ウェブデザインのインスピレーションを得ることができるサイトいろいろ
図4　ウェブデザインのインスピレーションを得ることができるサイトいろいろ

5 Best Sketch Plugins for UX/UI Designers in 2018 – Prototyprhttps://blog.prototypr.io/5-best-sketch-plugins-for-ux-ui-designers-in-2018-f03d7b38f7b0

UX/UIデザインに役立つSketchのプラグインを5つまとめた記事です。

Sketchのアートボードから自動でHTML＆CSSを生成して書き出すものや、ダミーの画像やテキストをランダムに埋め込むことができるものなどを掲載しています。

図5　UX/UIデザインに役立つSketchのプラグイン5つ
図5　UX/UIデザインに役立つSketchのプラグイン5つ

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

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

Feed43 : Convert any web page to news feed on the flyhttp://feed43.com/

Feed43はサイトの更新情報を自動で取得して、RSSファイルを生成するサービスです。最近仕事で必要となり使ってみたので紹介します。

RSSを作りたいページのURLを入れて、正規表現の要領でどの要素を取り出すのかを設定します。ヘルプで表示される例文を参考にすれば記述方法は分かると思います。検索すれば日本語で解説してくれている記事も見つかります。

ログインなしで手軽に使え、ログインなしでも作ったフィードの設定をあとから変更することができます。無料版だとフィードの本文にFeed43のクレジットが入るので、わたしは有料版にしました。年29ドルとリーズナブルなお値段でした。

図6　RSSファイルを生成するサービス
図6　RSSファイルを生成するサービス

おすすめ記事

記事・ニュース一覧