週刊Webテク通信

2018年1月第4週号1位は、UIデザインにおけるゲシュタルトの法則、気になるネタは、JR北海道、券面をスマホに表示させて乗車する「スマホ定期券」

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

1. Gestalt principles in UI design. – Muzli -Design Inspirationhttps://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965

UIデザインにおけるゲシュタルトの法則を解説しています。⁠個々のパーツが集まった輪郭から形を判断する」とか「欠けている部分があっても脳に記憶されている形を元に補完して認識する」などの視覚的認識の法則を元に、UIデザインを考えてみようという記事です。

  • 近接
  • 共通領域
  • 類似性
  • 閉鎖
  • 対称
  • 継続
  • 同じ方向に動く

自然と実践していることが多いように思えますが、こうやって法則としてまとめられた理論は説得力がありますね。

図1 UIデザインにおけるゲシュタルトの法則
図1 UIデザインにおけるゲシュタルトの法則

2. Bye bye Material Design – Techtrument – Mediumhttps://medium.com/techtrument/bye-bye-material-design-acaebcc7c6b4

マテリアルデザインが普及することにより、ユーザーに対し操作の一貫性を持たせられたことを評価しつつも、これ以上ファンシーなボタンや効果は必要ないと主張しています。

マテリアルデザインの問題点として、以下の項目に分けて説明していました。

  • 土台としているものが間違っている
  • 影を使いすぎている
  • すべてのケースに合わせたインタラクションが揃っているわけではない
  • フィードバックを表す効果が強烈過ぎる
  • データ指向のコンポーネントの数が少ない
図2 マテリアルデザインの問題点
図2 マテリアルデザインの問題点

3. Call For Attention. Powerful CTA Button Design. | Tubik Studiohttps://tubikstudio.com/call-for-attention-powerful-cta-button-design/

行動を促すためのボタンデザインについて、良いボタンを作るためのヒントを解説しています。

  • サイズ
  • 色と形
  • 場所
  • 文字
図3 良いボタンを作るためのヒント
図3 良いボタンを作るためのヒント

4. 5 Basic Tips for Illustrating – Al Power – Mediumhttps://medium.com/@alpower81/5-basic-tips-for-illustrating-debf50cccccc

イラストを描く上での5つの基本を紹介しています。ベクターベースで図版やアイコンに使うようなイラストを前提とした内容です。

  1. カラーと線のパレットを用意する
  2. 影をつける
  3. 線幅を制御する
  4. パスファインダーの使い方を学ぶ
  5. ショートカットを使う
図4 イラストを描く上での5つの基本
図4 イラストを描く上での5つの基本

5. Open Concept Layoutshttps://designshack.net/articles/graphics/design-trend-open-concept-layouts/

家のレイアウトで最近流行っている「オープンコンセプト」とは、空間を壁で仕切らず複数の用途に使うなどして、空間を最大限に生かすレイアウトだそうです。

このオープンコンセプがウェブデザインのトレンドにも当てはまるそうで、例を挙げて解説しています。

図5 ウェブデザインにおけるオープンコンセプトレイアウト
図5 ウェブデザインにおけるオープンコンセプトレイアウト

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

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

Linqes - Manage and share your bookmarks http://www.linqes.com/

公開することを前提としたオンラインブックマークのサービスです。シンプルできれいなデザインのリンク集を作ることができます。

リンクのURLを入力するだけで、ページタイトルや解説文(description)は自動で取得されます。タイトル・解説文はあとで変更することも可能です。リンク集はグループに分けて作成でき、グループごとに個別のURLを持っています。

何かのテーマでリンク集を作って共有する場合に便利に使えるサービスだと思います。各リンクの解説文のところは自由に文章を入れられるので、自分の制作したサイト集にも利用できそうです。

図6 リンク集を簡単に作って共有できるサービス
図6 リンク集を簡単に作って共有できるサービス

おすすめ記事

記事・ニュース一覧