UIデザインのバグを減らすための施策
UIデザインにもあるバグ 今年の WWDC 2019 で印象に残っているセッションのひとつが「Introducing SwiftUI: Building Your First App 」。SwiftUI は開発がよりスマートにできるようになるだけでなく、デザインツールの新しい可能性を示しているように見えました。SwiftUI はとてもエキサイティングですが、個人的に刺さったのが上の写真。改めて意訳した図を作りました。 UI デザインは単に理想型を作れば良いのではなく、様々な状態（ステート, State）を考慮する必要があります。情報量に応じてどう見せるかだけでなく、様々な種類のエラーにどう対応するか考えなければいけません。How to fix a bad user interface で紹介されている UI Stacks のように、少なくとも 5 つのスクリーンデザインが必要になります。
デザインシステムに採用する色を決める5つのルール : could
始めの一歩としての色共有 ひとりのデザイナーに頼らず、チームで運用できる体制を作るためにも デザインシステム は有用なツールです。しかし、様々な UI コンポーネントと決まりごとが揃ったものを作るのは骨が折れる作業です。デザイナー（もしくはエンジニア）が独自で作って「さぁ使いましょう」と公開しても、使ってもらえるとは限りません。また、デザインシステムをどこで共有して、どのように使われるのかも考慮しなければならず、他社の真似事では済まないこともあります。 作る前から課題が山積みでなかなか手が出せないかもしれませんが、何か始めなければゴールに辿り着くことはありません。そんな現場でデザインシステムを作る場合、色から始めることをオススメしています。 色なんて単純なところは出来ていると思う方は多いと思います。デザイナーであればパレットにしてまとめているでしょうし、エンジニアであれば色は変数にして整理
成熟期に入ったUIデザインとデザインシステム
先進的から最適化へ 3年前、Facebook が今までのニュースフィードを完全に変えた「Paper」というアプリをリリースしました。ネイティブコンポーネントが使われていないオリジナルの UI とインタラクション。今までありそうでなかった新しい操作方法を提案していました。Paper をはじめ、様々な実験的なアプリを Creative Labs としてリリースを続けていましたが、2015 年にラボは閉鎖され、その半年後には Paper も配信停止されました。 今でも Things 3 for iOS のように新鮮な UI とインタラクションが生まれる場があるものの、あまり見かけなくなりました。今のアプリ UI デザインは、目新しいものを作るより、今まで培われたノウハウを基に使いやすさ、見やすさを磨き上げるフェイズに来ています。斬新なアニメーションと目新しい形状のメニューを作るより、ガイドライン
デザイン原則がどの現場でも必要な理由
大企業だけのものではないデザイン原則は、ひとりのデザイナーがマニフェストとして明示することもありますが、最近は多くの企業がスタイルガイドと一緒に作られることが多くなりました。ここで言うデザイン原則とは、タイポグラフィや配置といったデザインするためのノウハウではなく、「我々が考える良いデザイン」が文章として表されたものを指します。つまり、自分たちのスタンス（立ち位置）を示したものです。 Material Design だと、以下の 3 つの原則があります : 実世界にも通じる空間と動きをメタファとして扱う力強く、視覚的であると同時に意図的動きを通して操作や表示の意味を伝えるまた、Facebook のデザイン原則だと、「ユニバーサル」「一貫性」「使いやすさ」など１単語でシンプルに表現されています。もちろんこれだけだと分かり難いので解説が添えられています。例えば「一貫性」であれば、再利用できるも
プロトタイプに発生する溝と対処法
完成品になれない溝をどう埋める あたかも完成品に見えてしまうデザインカンプには、様々な暗黙の了解が存在します。グラフィックツールで Web ブラウザ上での見た目を再現しようとしても、実際 HTML / CSS で組まれたデザインの見た目と同じになることはありません。どこまで静止画を作り込んでも、実際の完成品には成り得ない大きな溝が存在します。この溝が大きな誤解に繋がることがあります。 例えばレスポンシブ Web デザインの場合、幾つかの大きさで静止画のデザインを用意したとしても、その間（可変状態）でどうなるか想像するのが難しい場合があります。また、レスポンシブ Web サイトにおける表現は多彩になってきています。要素の順番を Flexbox で変えることもできますし、画像の配置の仕方もより柔軟で表現豊かになってきています。知識や経験がある方であれば静止画では表現されていない「実はこうなる」
正しくKeynoteでプロトタイプを作るコツ
09より最新版を ChatWorkの社内勉強会で、Keynote をプロトタイプ制作に使う方法を共有したことがあります。コード不要な点と、共有が比較的しやすいのでオススメしています。しかし、他のプロトタイプツールと同様、得意・不得意をしっかり理解していないと時間がかかるだけで無意味な作業になることがあります。 古くから Keynote を使っている方は Keynote 09 を好む方がいます。最新版に比べて UI が分かりやすく分類されていたり、AppleScript のサポートが充実していることから、今でも使っている方がいると思います（私も講演時は 09 を使うことがあります）。ただ、プロトタイプを作る際は必ず最新版を使うようにしています。最新版のほうが優れているのは以下の4点です。 0.01秒単位で微調整が可能 Keynote 09 では、スライドショーを再生しなければアニメーションを
コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
カードUIとコンテンツのパッケージング
小さなパッケージとしてのカード 前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。
コンテンツからみるWebアクセシビリティの課題と提案 : could
コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2 つの『デザイン』があります。ひとつは、情報を分かりやすく整理し、目的の情報へた辿り着くための Web アクセシビリティ。この要素は、色、形状、動き、スピードなど、UI デザインの課題と重なるところが多いです。もうひとつの要素は、情報の構成や文章のスタイルといった「編集」とも呼べる Web アクセシビリティです。 前者の情報構造や操作性は、明確なガイドライン化がしやすく、チェックもしやすいですが、後者の編集の部分は、パッと見では判断がしにくいだけでなく、ガイドラインとして共有するのも難しいです。 Webアクセシビリティにある 2 つの『デザイン』 もちろん JIS X 8341–3:2010 でも「利用者が理解できるコンテンツ」を制作・維持できるようにすることが重要であると書かれていますが、技術で解決できるところに
ほんとに使える「ユーザビリティ」 : could
ユーザビリティ本 ほんとに使える「ユーザビリティ」 「使いやすさ」という考えが異なるだけでなく、「明快さ」の表現も異なる日本。海の向こうの人々が考える理想を、そのまま押し付けるのではなく、本書から何を抜き取り、自分たちの仕事に合うように変形させるのかが課題です エリック・ライス氏が 2012 年に刊行した「Usable Usability」の訳書です。 この種類の専門書は原書で読むことが多いので、久しぶりの訳書になりました。訳書の魅力は、日本語で読めるのはもちろん、原作者の住んでいる国の文化やニュアンスを理解していないと、伝わり難い部分を補っているところです。世界中を飛び回っているライス氏なので、世界のユーザビリティに興味をもつ読者に向けて執筆しているはずです。しかし、それでも『日本から』という視点では見え難いこと、分かり難いことは少なくありません。そこを、訳者 浅野紀予 さんは工夫されて
カンプがなくなったときのデザイナーの役割
手段を再想像する 昨年末に開催された CSS Nite Shift 5 で「Reimagination（再想像する） 」の話をしました。人とコンピュータの関わり方が行動や価値観を再定義しているのと同じように、Webサイト制作にしても同様のことがいえます。今までの当たり前を疑い、未来に柔軟に対応できるワークフローが必要とされています。 例えば従来必須だと言われていたワイヤーフレームも考慮対象です。少し前に ASCII へ「柔軟性あるデザインプロセスへ移行するためのヒント」という記事を寄稿しました。ワイヤーフレームが果たそうとしているコミュニケーションの目的は間違っていませんが、つくるためのツールや手法に問題があるのではないかという疑問を投げかけた記事。絶対いると思い込んでいるものも、今の時代にマッチしなくなってきているものは少なくありません。 また、Photoshop や Fireworks
保存アイコンでみえてくるアイコンデザインの勘違い
先日 Goodpatch さんが 保存アイコン＝フロッピーディスクの時代は終わった…？ という興味深い記事が掲載されていました。フロッピーディスクを保存アイコンをとして採用するのは古いのではないか、という議論は国内外で何年かに一回はあります。私も 2009 年に変わりゆく「保存」の存在と題してフロッピーディスクアイコンのあり方も踏まえて、今後の保存の姿を模索していました。また、先月開催された Android Bazaar Conference 2013 Spring でも同じ話題に触れています。 アイコンと問題解決について 様々なデザイナーが新しい保存アイコンを提案しているものの、「うん、これは保存だ」と納得できたものはほとんどなかったと思います。ダウンロードにみえるものも少なくありませんし、中には抽象的すぎて何を意味しているのかさえ分からないのもあります。自分たちのクリエイティブアウトプ
紙プロトタイピングから始まる問題解決への議論
先週オープンしたばかりの名古屋のコワーキングスペース basecamp NAGOYA で、「プロトタイピングからはじめよう」という題名でセミナー＋ミニワークショップを行いました。今年の春に開催した青森のセミナー以来、2度目のプロトタイピングセミナーになります。前回は、セミナーだけだったのに対し、今回は短めのワークショップ付き。また、プロトタイピング全般の話ではなく、ペーパープロトタイピングにフォーカスした内容にしました。 ペーパーが最強ではない プロトタイピングだけではありませんが、何かを作る話題になると、どうしても「どのツールがベスト？」みたいな話になりがちです。すぐに作れるだけでなく、手を動かすというアナログな感覚が心地良いことから、ペーパープロトタイピングは人気の手法です。しかし、他の手法と同様、弱点がありますし、万能の手法ではありません。 ツールは自分の好みで一途に使うのではなく、
UXとUIが混同されるワケ
最近 UX と UI を混同して表記されているのを見かけるようになりました。私もウケやすいということで、混同させたことがあります。しかし実際のところ UX と UI は同義語ではありません。良い UI デザインをすれば、UX が向上する可能性はありますが、必ずしもそうではありません。逆もしかりです。最近も UX と UIの違いを分かりやすく表現しようと、シリアルとボールの写真を使った例が登場しましたが、「そうでもない」という意見も多数ありました。 それでは、なぜ混同されやすいのかというと、今のスマートフォン向けのデザインを見るとヒントが隠されています。例えば Twitter クライアントの中で人気のある Tweetbot を見てみましょう。このアプリの中で装飾と呼べるデザインはどれだけあるでしょうか。ほぼ皆無だと思います。 スマートフォンという小さなスクリーンには、UI しか存在しません。
習慣になるまでの UI と操作の変化
タッチしてもらうための第一歩 タッチデバイスへの違和感や不安をもっている方はまだ少なくないと思います。 毎日の生活に登場するタッチデバイスの代表といえば、ATMや電車の切符販売機がありますが、処理速度が遅くスクリーンのオブジェクトを触れている感覚はあまりありません。そのせいか、スクリーンを強く押している方をたまに見かけます。また、タッチインターフェイスだけでなく、触れて押すことができる物理的なボタンが用意されている場合もあります。タッチへの不安を解消するための配慮なのかもしれません。 毎日の生活から比較すると、タッチデバイスでスイスイいろいろな操作が出来るというのは、未知の世界に見えてもおかしくありません。操作の仕方が分かる iPad や Galaxy の CM が TV で流れているとはいえ、「本当にタッチでこんなに動くのか」という不安をもっている方もいるはずです。 UI デザインのひと
レスポンシブWebデザインから始まる適応への道
2月22日 Web担当者Forum 主催のイベント 企業サイトのスマホ“対応”とその一歩先の”最適化”とは？ に登壇させていただきました。今回はレスポンシブ Web デザインの話題を中心に、Web への窓口がますます増える今後にどう対応していけば良いのかを、技術・デザイン・企画・そして具体的なソリューションなど様々な視点で講演されました。 今回は、先月執筆したレスポンシブにデザインするために克服することをキッカケで話すことになりました。「未来へレスポンシブに対応するための設計と戦略」と題して、スマートフォンやタブレットだけでなく、もう少し視野を広げてレスポンシブの実現について話をしました。 クロスオーバーする時期が来た 制作者向けのセミナーであれば、レスポンシブ Web デザインを語るのにふさわしい人は他にいると思うのですが、今回は Web担当者Forum という制作者以外の方が多く参加さ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
