週刊Webテク通信

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

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

ネットで見かけた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 複数人で同じ画像やテキストを編集しながら打合せができるサービス

今週の気になるWebネタ

初期Eye-Fiサポート終了「テクノロジーが時代遅れに」http://ascii.jp/elem/000/001/190/1190070/

スマホがおもちゃのリモコンに 乾電池型Bluetoothデバイス「MaBeee」発売 ミニ四駆の加速・減速もOKhttp://www.itmedia.co.jp/news/articles/1607/06/news135.html

初代Eye-Fiはサポートが終了し,主要サービスの一部が停止されるため,事実上使えなくなるようです。脆弱性の問題があるようですね。最近その動向を追っていませんでしたが,Eyefi Mobiというのが現行のモデルとなっています。

SDカードのサイズそのままでWi-Fi機能が内蔵されているという画期的なものでしたが,デジカメ自体にWi-Fiが搭載され,そもそも写真はスマートフォンで撮るのが当たり前となり,需要も減っていると推測されます。

単3形乾電池の形状で,Bluetoothでコントロールできる「MaBeee」も,同じような発想ですね。なお,このデバイスには単4の乾電池をセットするというところも,なるほどと思いました。子供の夏休みの工作にこの電池を使った何かをと考えたんですが,スマホは提出できないので難しいと気付きました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入