ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの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 がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。
Introducing Paper from Facebook on Vimeo. FacebookがリリースしたニュースアプリPaper、さっそくダウンロードして触ってみた。 使ってみた第一印象は、「意欲的な実験作だが、まだ実用品ではない」といった感じだ。 外見や手触りが注目されるPaperだが、しかし僕自身が一番注目しているのは右上のナビゲーションだ。Paperの右上は、「人」「会話」「通知」 というFacebookの基幹アプリとまったく同じ構成なのである。そしてFacebookの同機能にアクセスする。つまり、Paperはニュースアプリの形をしているが、本質的にはFacebookクライアントなのだ。 これは。何を意味するのか・・・ つまりFacebookは今後、様々なコンセプトのFacebookクライアントを複数リリースするということだ。 右上のボタン群が主張するUI上のメッセージは、
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
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 パ スワード メールアドレス メールアドレス（ 確 認 ） 代 表 者 電 話 番 号 登 録 者 名 セイ メイ登 録 者 名（ カナ ）
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
最近続々とスマートフォンの新機種が発売され、さまざまな機種や画面サイズのものが出てきました。今後も画面サイズの多様性は増えていくことが考えられ、さらに今後はGoogle Glassや発売されるのではないかと噂のiWatchなど、スマートフォンとは全く異なる表現ができるデバイスも登場してきます。デザイナーはさまざまな表現に対応しなければいけないので大変かと思いますが、ユーザーからすると新たなデバイスの出現により、できることが増えていくという可能性もあるのではないでしょうか。そう思ったきっかけは、あまり話題になっていないですが、ドコモ GALAXY S4の「スマートポーズ」機能です。 これは画面から目を離すと再生中の動画が止まる機能です。僕が知っている動画を一時停止する方法は停止ボタンを押すだけだったのでとても新鮮でした。 この機能は先日のブログ「アプリケーションのジェスチャーとデザインについ
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
もう電車内でガラケーを見かけるのが珍しい時代ですね。僕はiPhone 4が出たころにガラケーからスマートフォンに切り替えました。スマートフォン（iPhone）に切り替えたことで、今までのガラケーではできなかったことがたくさんできるようになり、とても感動した記憶があるのですが、一番感動したのは画面をタッチして操作できることでした。 ガラケーとスマートフォンを比べた時の大きな違いは、直接指で画面を操作することだと思います。しかし、UIデザインやWebデザインについて書かれたブログは多いですが、スマートフォンのジェスチャーに関して書かれているブログはあまり見たことがありません。そこで今回のMEMOPATCHではジェスチャーについて書かれている海外の記事を翻訳してご紹介します！ （参考記事: Why all your apps feel the same） あなたはスマートフォンに驚くべき体験を提
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
