週刊Webテク通信

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

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

ネットで見かけた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バトル

今週の気になるWebネタ

「PayPay」アプリがリニューアル 個人間送金がより便利に - ITmedia Mobilehttps://www.itmedia.co.jp/mobile/articles/1904/03/news127.html

PayPayでは既に個人間送金ができましたが,アップデートにより匿名状態でのやりとりが可能になったそうです。PayPay IDを設定することで,携帯電話番号を知られることなくお金を受け取ったり送金を依頼できます。

「受け取りリンク」というのは,URLを生成して告知すれば,そこに誰からでも送金してもらえるリンクかと思ったのですが違いました。送金する側が金額を設定したリンクを作ってSMSなどで送れば,受け取った側がリンクから受け取れるという仕組みです。

オークションなどでのお金のやりとりに使えそうですが,現状現金化はできないことがネックだと思います。手数料を取られずに個人間送金できるサービスが増えることで,フリーマーケットやセミナーの集金などのお金のやり取りが便利になりそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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