ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。 4 iOS Rules to Break by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade on July 9, 2015 日本語版2015年8月31日公開 巨大ソフトウェア会社（たとえば、AppleやMicrosoft、Google）はユーザーとデザイナー双方のためにデザインガイドラインを作成している。 おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての

iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた

消えるハードとソフトの境界線 Apple Watch のドキュメンテーション には、以下のような言葉がデザインコンセプトとして記載されています。 Even the physical border of the Retina display has been considered, resulting in edge-to-edge UI design that effectively renders that border invisible. Thoughtful app design should contribute to this experience of hardware and software feeling indistinguishable. 物理的なオブジェクトとソフトウェアには境界線がなく、UI デザインにもそれが表れています。よく考えられたアプリデザインは、ハード

1. やはりスイッチの記号は分かりにくい 先日、「【|と◯】知ってる？ アプリや電機のスイッチと電源ボタンの記号の意味」という記事を掲載したところ、予想外に反応が大きかった。 「 | 」と「 ◯ 」は、それぞれIEC（国際電気標準会議）によって国際的に標準化された記号であり、前者が電源ON（オン）、後者が電源OFF（オフ）を意味するものだ。 スイッチに採用されているこれらの記号の意味が分かりにくいことをテーマにした記事だったが、反応の大きさやソーシャルメディア上のコメントなどから、筆者と同様にこれらの記号のみではスイッチのONとOFFを判断しにくいと感じている人が多いことが分かった。 また、スイッチの操作部分上にON・OFF表示があったり、iOSの設定アプリのようにスイッチ内部の操作部分以外の場所にON・OFF表示があると、現在の状態を示しているのか、操作後の状態を示しているのか混乱すると

小さなパッケージとしてのカード 前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。

Webユーザーは、情報過負荷へ適応するため、重要でなさそう、あるいは広告のように見えるエリアから注意をそらすように自分たちを訓練してきた。しかし、サイドバーは適切にデザインすれば、コンテンツを発見しやすくし、ユーザビリティをうまく向上させることができる。 Fight Against “Right-Rail Blindness” by Hoa Loranger on October 12, 2013 日本語版2013年12月17日公開 残念なことだが、Webサイトクリエイターが右カラム（Webページの右レールとも呼ばれる）を広告の掲載によく使うので、ユーザーはこのエリアをチェックしないように自分たちを訓練してこざるをえなかった。これは右カラムはやめるべきということだろうか。いや、そんなことはない。 ページの右側で消費されるピクセルは利用可能な量のうちの20％程度だが、ピクセルとはコンピュータ

iOS 7がリリースされてから二ヶ月ほどがたちました。iOS 7はiOS 6のスキューモーフィックデザイン（Skeuomorphic Design）からフラットデザインに変わったと言われていましたが、iOS 7のデザインはメトロUIのようにテクスチャーとシャドウを削ぎ落としたデザインとは異なり、奥行き感が備わったり、動きの演出が見せやすくなっていることから2013年のトレンドであったフラットデザインとは異なると言えます。 スキューモーフィックデザインは、単にボタンなどに立体感を与えて押せる感や触れる感を出すためのものでなく、現実に存在するもののテクスチャーや形状をアプリケーションデザインにも反映させることで、ユーザーがアプリを初めて触る時でも使い方がすんなりわかるように工夫されていました。わかりやすい例がiOS 6以前のボイスメモアプリです。アプリを開くとまず目に入るのがマイクで、その他に

Techcrunch で、「Great Mobile Apps Are Remote Controls For Real Life（すばらしいモバイルアプリは実生活のためのリモコンである）」 という記事が公開されています。リモコンは、ただボタンを１回押すだけでチャンネルを変えたり、利用者が求めている操作を実現することができます。すばらしいアプリも同様に、面倒な操作や画面遷移を辿ることなく、リモコンのように１タップで済むものであると解説しています。その一例として、最近日本でもサービスを開始した Uber が挙げられています。サイトに「ボタンをタップするだけで、Uber アプリはお客様のドライバーを探します。」と書かれているとおり、リモコンのような手軽さが、人気の秘密なのかもしれません。 昨年の記事ですが、今のスマートフォンの存在を上手に表現していますし、スマートフォン向けのアプリや Web

ペーパープロトタイピング講座シリーズ。第2回は準備編。前回はこちら。プロトタイピングを始めるにあたって必要なものを列挙する。 必須ツール 紙 まず紙は大量に必要。A4コピー紙や大型のポストイットが一般的。スマホアプリの場合は、弊社が専用に開発したペーパープロトタイプ用ノートが便利。実寸で検証できるように心がけよう。 シャーペン 下書き用ペン。消しやすい芯がよい。個人的にはステッドラーを愛用。 サインペン 清書用のペン。チーム共有やテスト時に読みやすくするために使う。細い、普通、太いの3種類のペンがあるとよい。個人的には0.05mm、0.3mm、1.0mmの3本を使っている。オススメはピグマかコピックマルチライナー。 マーカー 清書用ツール。タップエリアや、注目させたいコンポーネントを面で見せる為に使う。最低限２色。薄いグレーと濃いグレーがあるとよい。可能ならばアプリとタップ色や警告色なども

iA Writer is a great app for distraction-free writing, but before reading Jason’s tweet I’d never considered it a tool for UI design — but by combining text with some basic HTML I’ve found mocking up text-only UIs to be a helpful step in judging the overall effectiveness of an app. To quickly demonstrate text’s value, here are some popular feeds, sans graphics. Note: I tried to show the visual wei

15. オン ラ イン ショップの 開 設 に 必 要 な 情 報を 入 力してください 。 * は 必 須 で す 。 英 数 字 は 半 角 英 数 字 で入 力してください 。内 容 は 後で 変 更 することもで きま す 。 ご希 望 のア カウント http:// 姓 名 stores.jp ログイン I D パ スワード メールアドレス メールアドレス（ 確 認 ） 代 表 者 電 話 番 号 登 録 者 名 セイ メイ登 録 者 名（ カナ ）

ホア・V・ディン：2004年以前、僕は自宅のサーバーをメールホストに使っていました。2004年頃はちょうどMacを使い始めた頃で、当時はAppleが作ったメールソフトに満足していました。自分のサーバーを管理するのに疲れてきて、ソフトウェアの開発に集中したいと思ったとき、すべてのメールをGmailに統合することにしました。その当時、結構なメールの量を保管できるのはGmailしかなかったので。 ですが、MacのメールソフトはGmailにうまく対応していませんでした。メールの保管はできないし、ラベルの分類の仕方もおかしくて、動作がすごく遅かった。メール検索すると、コピーが見つかってしまうこともありました。そんなわけで、僕はMacのメールソフトを使うのをやめて、ウェブ上でGmailを使い始めました。デスクトップとの統合はできませんでしたが。 その後、2007年になって、iPhoneが登場しました。

最近続々とスマートフォンの新機種が発売され、さまざまな機種や画面サイズのものが出てきました。今後も画面サイズの多様性は増えていくことが考えられ、さらに今後はGoogle Glassや発売されるのではないかと噂のiWatchなど、スマートフォンとは全く異なる表現ができるデバイスも登場してきます。デザイナーはさまざまな表現に対応しなければいけないので大変かと思いますが、ユーザーからすると新たなデバイスの出現により、できることが増えていくという可能性もあるのではないでしょうか。そう思ったきっかけは、あまり話題になっていないですが、ドコモ GALAXY S4の「スマートポーズ」機能です。 これは画面から目を離すと再生中の動画が止まる機能です。僕が知っている動画を一時停止する方法は停止ボタンを押すだけだったのでとても新鮮でした。 この機能は先日のブログ「アプリケーションのジェスチャーとデザインについ

もう電車内でガラケーを見かけるのが珍しい時代ですね。僕はiPhone 4が出たころにガラケーからスマートフォンに切り替えました。スマートフォン（iPhone）に切り替えたことで、今までのガラケーではできなかったことがたくさんできるようになり、とても感動した記憶があるのですが、一番感動したのは画面をタッチして操作できることでした。 ガラケーとスマートフォンを比べた時の大きな違いは、直接指で画面を操作することだと思います。しかし、UIデザインやWebデザインについて書かれたブログは多いですが、スマートフォンのジェスチャーに関して書かれているブログはあまり見たことがありません。そこで今回のMEMOPATCHではジェスチャーについて書かれている海外の記事を翻訳してご紹介します！ （参考記事: Why all your apps feel the same） あなたはスマートフォンに驚くべき体験を提