週刊Webテク通信

2016年7月第2週号1位は、フォームのデザインにおいてやりがちなミスの対処方法、気になるネタは、初期Eye-Fiサポート終了「テクノロジーが時代遅れに」

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

1. Design Better Forms — uxdesign.cc – User Experience Designhttps://uxdesign.cc/design-better-forms-96fadca0f49c#.gkm6r9pd5

フォームのデザインにおいてやりがちなミスの対処方法をまとめた記事です。良い例と悪い例との比較画像だけですぐに理解できます。

  • 段組しないで1カラムにするべき
  • ラベルテキストを上に配置する
  • ラベルテキストと入力欄とのセットがわかるよう配置する
  • すべてを大文字にしない
  • 6個以内の選択肢は最初からすべて表示する
  • ラベルテキスト代わりにプレースホルダーを使わない
  • 目で追いやすいようにチェックボックスやラジオボタンはタテに並べる
  • ボタンのテキストを行動に合わせたものにする
  • エラーメッセージはエラーのある箇所に表示する
  • 入力途中で値チェックのエラーを出さない
  • 注釈の文字は常に表示する
  • サブミットボタンとキャンセルボタンとを見た目上も区別する
  • 入力欄の大きさを想定される値に対して適切なものにする
図1 フォームのデザインにおいてやりがちなミスの対処方法
図1 フォームのデザインにおいてやりがちなミスの対処方法

2. Don’t Make These 10 Mistakes in Your App Design | Design Shackhttps://designshack.net/articles/ux-design/dont-make-these-10-mistakes-in-your-app-design/

アプリデザインにおいて、やってはいけないミスを10個紹介しています。

  1. 最初の印象が悪い
  2. アクションを行う手がかりがない
  3. 雑然としたデザイン
  4. タッチ操作する要素が小さすぎる/近づきすぎている
  5. 一般的ではないアイコンや動作
  6. 不整合性のあるデザイン
  7. 不完全なフィードバックの繰り返し
  8. プラットフォーム(OS)の流儀に合わせない
  9. インターフェイスが複雑すぎる
  10. 規定の設定(デフォルト状態)に戻せない
図2 アプリデザインにおいてやってはいけないミス
図2 アプリデザインにおいてやってはいけないミス

3. Bootstrap 4: A Visual Guide to What’s New — WDstack — Mediumhttps://medium.com/wdstack/bootstrap-4-whats-new-visual-guide-c84dd81d8387#.ben30qwhx

Bootstrap 4で新しくなった点を、3との比較でビジュアルで紹介しています。

ざっくりとまとめると、文字は大きくデザインはシンプルになっており、グリッドシステムは4段階から5

段階へと変わりました。

図3 Bootstrap 4の新しくなった点をビジュアルで紹介
図3 Bootstrap 4の新しくなった点をビジュアルで紹介

4. Website Design Inspiration: 8 Sites to Spark Your Creativity | WordStreamhttp://www.wordstream.com/blog/ws/2016/07/07/website-design-inspiration

クリエイティビティを刺激する8つのサイトとして、クリエイターの作品集やWebデザインのギャラリーサイトなどをまとめています。

Crayonは、Webデザインのスクリーンショットを過去のバージョンまで遡って見られるところが面白いです。

図4 Webデザインの参考になるサイトいろいろ
図4 Webデザインの参考になるサイトいろいろ

5. The Future of Browser History — Mediumhttps://medium.com/@patrykadas/browserhistory-2abad38022b1#.8hjubgoks

「ブラウザの履歴機能の未来」と題して、現状の問題点と改善案を紹介しています。

確かに現在の履歴は改善の余地があると思いますし、ここで解説してあるアイデアはなかなか魅力的に感じました。

図5 ブラウザの履歴機能の改善案
図5 ブラウザの履歴機能の改善案

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

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

Rapid fire meetings to get shit donehttps://www.usebench.com/

benchは、複数人で同じ画像やテキストを編集しながら打合せができるサービスです。ブラウザ上のデスクトップをみんなで共有し、同時に書き込んでいくことが可能です。

画像をアップロードし、簡単なドローツールで書き込みができるので、デザインのチェック作業や簡単な校正などに役立ちそうです。ノートを作ればテキストも扱えます。また、複数人での音声通話もできるところも便利です。

同時に何人までが参加できるのかの記述が見つからなかったのですが、サイトに載っているイメージ画像では7人が同時に参加しています。また、無料プランでも人数の制限などはないようです。

図6 複数人で同じ画像やテキストを編集しながら打合せができるサービス
図6 複数人で同じ画像やテキストを編集しながら打合せができるサービス

おすすめ記事

記事・ニュース一覧