週刊Webテク通信

2019年4月第2週号1位は、モバイルインターフェイスのためのヒューリスティックな原則、気になるネタは、「PayPay」アプリがリニューアル 個人間送金がより便利に

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

1. Heuristic Principles for Mobile Interfaces | Toptalhttps://www.toptal.com/designers/usability/mobile-heuristic-principles

モバイルインターフェイスのためのヒューリスティックな原則について解説しています。

ヒューリスティックとは、必ず正しいとは限らないけれど、推論や経験則である程度のレベルで正しい解を導き出す方法のことらしいです。

  1. システム構造の透明化
  2. アクションに対する即時的なフィードバック
  3. エラーに対する案内
  4. 使い方の柔軟性
  5. 一般的でなじみのある経験
  6. デザインの美学を制限して情報を伝える
  7. 形状よりも機能の方が優先される
  8. 情報の入手可能性
  9. 一貫性による信頼性
  10. 賢明な冗長性
図1 モバイルインターフェイスのためのヒューリスティックな原則
図1 モバイルインターフェイスのためのヒューリスティックな原則

2. Why Cancel Buttons Should Never Have a Colorhttps://uxmovement.com/buttons/why-cancel-buttons-should-never-have-a-color/

キャンセルボタンには色をつけてはいけない理由を解説した記事です。

  • ニュートラルなボタンにはニュートラルな色を
  • キャンセルをあらわすいろんな言葉がある(言葉ではなく色のないことで直感的に区別できる)
  • 十分に暗いグレーにする

色のついたボタンはユーザーに行動を呼びかけるものなので、安全な状態に戻るためのキャンセルボタンは色をつけるべきではないということでした。

図2 キャンセルボタンには色をつけない理由
図2 キャンセルボタンには色をつけない理由

3. What Is a Wireframe? (+ How to Create One in 5 Simple Steps)https://learn.g2crowd.com/wireframe

ワイヤーフレームとは何かを説明したうえで、作る方法について解説しています。

  1. リサーチする
  2. 調査結果を参考にして戦略を立てる
  3. UXを中心としたユーザーフローを図面化する
  4. 各ページに対し複数バージョンの下書きをする
  5. 改良、詳細を追加、そしてテストを開始
図3 ワイヤーフレームとは何か&作る方法
図2 ワイヤーフレームとは何か&作る方法

4. System Fonts - Fonts - Apple Developerhttps://developer.apple.com/fonts/system-fonts/

iOSとmacOS Mojaveのシステムフォントの一覧で、Appleが提供するページです。

Windows 10のシステムフォントをまとめたFont List Windows 10 - Typography | Microsoft Docsや、その他のOSも含めたシステムフォントに関するまとめ的なDefault Fonts | Scott Grannemanというページもありますのでご参考に。

図4 iOSとmacOS Mojaveのシステムフォント一覧
図4 iOSとmacOS Mojaveのシステムフォント一覧

5. 17 Best Sketch Plugins for Designershttp://www.webdesigndev.com/17-best-sketch-plugins-for-designers/

Sketchのプラグインを17個紹介しています。

アニメーションを追加するもの、デザインをHTML / CSSコードにエクスポートするもの、ダミーのテキストを生成するものなどがあります。

図5 Sketchのプラグインいろいろ
図5 Sketchのプラグインいろいろ

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

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

CSSBattlehttps://cssbattle.dev/

お題と同じ図形を、いかに短いCSSコードで実現するかを競うサービスです。短いコードが勝ちということで、CSSゴルフとも呼んでいます。

コードを書くと自動的に反映されるエディタを使って、お手本と同じになるように記述していきます。お手本は常に横に保存されていますし、自分の作ったコードのプレビュー画面に重ね合わせて比べることもできます。

点数はコードが短いというほかに、お手本にいかに近いかという要素もあるそうで、あえて完璧に一致しないけど短いコードを書くという手もあるのかもしれません。短いコードでという以前に、CSSだけで再現すること自体がむずかしそうなお題ばかりです。

図6 CSSのコードの短さで勝負するCSSバトル
図6 CSSのコードの短さで勝負するCSSバトル

おすすめ記事

記事・ニュース一覧