週刊Webテク通信

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

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

ネットで見かけた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 リンク集を簡単に作って共有できるサービス

今週の気になるWebネタ

JR北海道,券面をスマホに表示させて乗車する「スマホ定期券」 - CNET Japan https://japan.cnet.com/article/35113361/

スマートフォンで購入・乗車ができる「スマホ定期券」サービスをJR北海道が開始するそうです。スマホの画面に定期券を表示して駅員に見せるという,デジタルなんだけどアナログチックな仕組みとなっています。

このニュースを見た人のほとんどが,画面キャプチャで偽造されるんじゃないかと思ったんじゃないでしょうか。アニメーションする要素がある,色が変化するなどで偽造対策はされているようです。

無人駅が多く定期券を購入するために有人駅まで行く手間をなくすという意味合いが大きいようで,利用者数が少ないので偽造すればすぐにバレるような環境なのでしょう。画面がバキバキに割れた状態だと,毎日定期券を見せるのが恥ずかしいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入