プロダクトに眠る時限爆弾「UX負債」との向き合い方
デザインにもある『負債』 作ってから指標を考えるのではなく、何を計測すべきか事前に決めたほうがデザインがしやすくなります。作る目的がハッキリしますし、目的に沿った デザインフィードバックができるのもメリットです。 プロダクト / サービスの成長のためには、適切な指標をもつことが必須です。しかし、すべての施策が計測できるわけではないのが悩ましいところです。例えば「ボタンの一貫性を整える」といった施策に取り組んだところで、クリック率は上がらないですし、ユーザーテストをしても判断が難しい場合があります。 だったらすぐにユーザーインパクトのある施策をしたほうが良いということになって後回しになりがち。こうした『しっかり考えて作ったほうが良いけど、優先順位が落とされてしまう施策』はたくさん眠っています。他にも大事なことがあるのは間違いありませんが、放置しておくとだんだんプロダクトの『負債』が溜まってい
ジェネレーティブUIデザインが作り方を変える
デザインツールのもうひとつの未来 「次世代デザインツールはどこへ向かうのか（後編）」で、デザインプロセスはよりチームスポーツのようになると書きました。デザインツールはより開発との連携がしやすくなり、より実装を考慮したデザインがしやすくなるのでは？と仮説しました。しかし、デザインと実装の溝がなくなることだけがデザインツールの未来の姿ではないと思います。 デザインツールにあるもうひとつの可能性が、ジェネレーティブデザイン（generative design）です。 ここでいう『ジェネレーティブ』とは、コンピューターアルゴリズムで何かを生成・構築するもの。ジェネレーティブアートであれば随分昔からあります。例えば Gerg Nees の Computergrafik は、コンピューターアルゴリズムによって作られたグラフィックアートを 1965 年に発表しています。最近だと Processing の
意外と難しいボタンのお話
ボタン？それともリンク？ 昨年からデザインシステムをテーマにしたセミナーやワークショップを何度か開催していますが、ワークショップに参加した方から「ボタンは難しい」という感想をいただくことがあります。ボタンの見た目を作ることも奥深いですが、もっと難しいのが、いつ、どこで、どのように使うかを共有すること。考え始めると「そもそもボタンとは何か？」といった疑問が浮かび上がります。 フォーム要素と一緒にあれば、ボタンだと断言しやすいです。HTML であればマークアップも <button> になりますし、アプリでも iOS であれば UIButton を使えば良いと判断できるはずです。 文章のあとに「今すぐ始める」というラベルが付いた要素があるとしたら、これはボタンと呼べるでしょうか。角丸のような装飾、注目されやすい色が使われているので、ボタンと見なすことができます。見た目はボタンっぽいですが、果たし
結局デザインシステムは何なのか
フロントエンドからの影響 昨年開催されたワークショップ「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法」をはじめ、記事やイベントを通して維持・管理ができるデザインついて情報発信しています。CMS が広く普及して以来、コンテンツ配信を長く続けるための仕組み作りが模索されているものの、デザインは発展途上です。早く作る、効率よく作るまで議論されるものの、デザインをどう維持するのか、どうすれば最低限の品質を担保できるかまで発展しないことがあります。 1977 年に建築家クリストファー・アレグザンダーの著書「 Pattern Language 」で、パターンが街作りに柔軟性と拡張性を持たせると説いています。彼に異論を唱える人もいますし、街に個性が失われるという意見にも一理あります。しかし、彼の考え方が今の情報設計（IA）に多大な影響を及ぼしていることは間違いありません。情報や装いに一貫性を
SVGでプロトタイプを作って学んだこと
会話のような勉強会 5月20日 SVG 勉強会 という小さな集まりに参加しました。株式会社まぼろしのデザイナーで、ポッドキャストにも出演していただいたこともある松田直樹さん（@readymadegogo）主催のイベント。勉強会という名だけあって、参加者全員が SVG のネタを持ち寄って、実装から可能性の模索まで様々な話題が挙がりました。 講師/生徒のような関係が生まれやすいセミナーのような場だと、どうしてもコミュニケーションが一方通行になりがちですし、参加側も受け身姿勢になってしまいます。 SVG に関する質問でもいいから、とにかく発表するという条件を設けることで、発表内容を聞きに行くという考えが薄れ、個々の積極性が増したと思います。発表者が話している最中もお構いなしに参加者が質問をするなど、会話をしているような発表時間はとても良いと思いました。 データを操作できる魅力を体感 勉強会では、
認知の理解で変わるプレゼンスライドのデザイン
見やすいだけでは足りないスライドデザイン プレゼンテーションのスライドは読みやすく、できれば見た目も良くしたいと考える方は少なくないと思います。私もデザイナーの端くれですから、見た目の良いスライドを作ろうとしますが、読みやすい・見やすいのと、伝わることが完全にイコールとは言えません。読みやすい・見やすいプレゼンは、そのときは良かったと思えるものでも、思い出してもらえない場合があります。 SlideShare や Speaker Deck でスライドの共有がしやすくなったことで、スライドを見たら分かるようにすること、共有しやすいコンテンツに仕上げることを意識する方が増えました。しかし、スライドを読めば分かるようにしてしまうと登壇者がわざわざ話す必要性がなくなりますし、来場した方にその場でしか味わえない価値が提供できない場合があります。時間とお金をつかって来場している方に何かを残せないままでは
UIガイドラインから学ぶライティングの基礎
言葉で決まるアプリの印象 2 年前に発表されて以来、細かな更新が続いている Material Design。最近、UI の動きに関するガイドが大幅に改変されたことで、感覚的なところも共有しやすくなってきました。Android アプリにおける UI デザインの基礎を固める上で、Material Design は非常に参考になりますが、このガイドラインは見た目のことばかり書かれているわけではありません。 Material Design の中には「Writing」と呼ばれる言葉遣いに関する項目があります。ボタンのような操作 UI のラベルはもちろん、エラーメッセージや、挨拶文など、アプリに表示されるテキストすべてに関してガイドラインが制定されています。言葉は大事なインターフェイスですから、きちんと項目をつくって紹介してあるのは素晴らしいことです。 以下、「Writing」項目で紹介されているガイ
おすすめデザイン入門書8選（洋書編）
予習として洋書はいかがですか？ 前回おすすめデザイン入門書を 10 冊紹介しました。どれも自信をもって紹介できる書籍ですが、選書しているときに訳本がない書籍を幾つか見つけました。私の場合、読んでいる本の半分以上は洋書なので、翻訳されていないものは渋々リストから外すことになりました。 そこで今回は、2016年2月現在、訳本が出版されていない洋書を 8 冊紹介します。前回と同様、Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍です。いずれ翻訳される可能性があるので、そのときに備えてメモ程度に見ていくと良いかもしれません。 UI is Communication UI デザインは利用者体験を考える上で、ほんの一部でしかありませんが、視覚的に表現されることから体験に大きな影響を及ぼします。UI デザインから利用者のこと、体験のことを掘り下げていく際、この
Webデザインシステムはじめの一歩
CSS フレームワーク活用のタイミング Bootstrap、Foundation をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex のように Flexbox を活用したグリッドシステムだけといった UI の特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。 プロトタイプ作成 Photoshop や Sketch のようなグラフィックツールで Web サイトをデザ
Mediumでコンテンツ配信して気づいたこと
遠くなりはじめた Web サイト 2015年11月から12月にかけて Medium のほうでコンテンツ配信をしていました。 Medium は昨年から日本へ本格進出をしていることから、注目している方も少なくないと思います。Medium の人気の秘密は、使いやすくコンテンツの邪魔をしないライティング環境を提供している部分だけではありません。Twitter の創業者のひとりであり、現 Medium の CEO である Evan Williams を中心としたスタートアップ & テック界隈から徐々に Medium の文化が広がったという背景も魅力。こうした機能やデザインだけでは表現できないところまで日本語化されているわけではないですし、日本では昔からあるブログプラットフォームをはじめ、書く環境が豊富に揃っています。 私の場合、情報発信ができる環境が既にあるので Medium に魅力を感じていなかっ
プロトタイプが閉じたデザインを切り開く : could
12月12日、名古屋にて WCAN 2015 Winter が開催されました。今年はスクリーンが 32:9 という超ワイドスクリーンがある会場でした。今までにないスライドデザインで困難なところが幾つかありましたが、良い経験をさせてもらいました。会場や観客に応じてスライドデザインは工夫していますが、その大切さを改めて痛感したイベントでした。 登壇内容も含め、イベント全体に関するレポートを参加した方々が公開しています。ぜひこちらも参考にしてください。一緒に登壇した佐藤歩さん（@ahomu）の「HTML6 でも CSS4 でもない Web 技術のゆくえ – WCAN 2015 Winter に登壇してきました」も必読です。 WCAN 2015 Winterに参加してきました – LOGzeudon WCAN 2015 Winterに参加しました – focusmark.jp WCAN 2015
今のデザインに必要とされるコントロール
本当にコントロールできないのか WD101シリーズの最初に、Webデザインは見た目のコントロールができないという話をしました。スクリーンの大きさが多種多様なだけでなく、利用者が見た目や操作性を自由に変えることができる Web。DTPのような感覚でサイトをデザインしても、誰かの Web アクセスの利便性を損なうと指摘しました。 デザイナーはある種、混沌とした状態から秩序を生み出す能力をもっていると思います。バラバラになった情報を整理して一貫性のあるメッセージを伝えたり、混雑した Web の世界に明確な道筋を示す仕事をしています。秩序を作り出すということは、ある程度のコントロールはなくてはならないわけです。 コントロールすることがデザイナーの仕事であるとすれば、『コントロールができない Web』との相性がよくないように見えますし、デザイナーにとって非常に仕事が難しい環境のようにみえます。しかし
シングルカラムから始める情報設計
横並びは複雑化の第一歩 Webサイトの設計をする際、必ずといっていいほど縦にコンテンツを並べて構成を考えるようにしています。どのような人が、何を求めて Web サイトに訪れているのかというシナリオを基に構成を考えていくわけです。詳細なレイアウトを考えるのではなく、情報の流れが適切であるかどうかを判断するための工程にしています。 パソコン向けの Web サイトデザインの悪い癖のひとつに、「同じくらい重要だったら、横に並べる」というのがあります。広いスペースがあったパソコンが主流の時代ならではのアプローチですが、今は状況が大きく異なります。配信者側にとっての『重要』を出すことは間違っていません。しかし、あれこれ重要だからという理由で隣り合わせにしてしまうと、様々なデメリットが生まれます。 訪問者に迷いが生じる 直接関係のないコンテンツが横に並ぶことで視点の動きが多くなる可能性があります。また、
カードUIとコンテンツのパッケージング
小さなパッケージとしてのカード 前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。
たにぐちまことさんと仕事の仕方について対談しました : could
ポッドキャスト仕事 たにぐちまことさんと仕事の仕方について対談しました Web だからこそ身軽に仕事が出来たり、場所も関係なく様々な人と柔軟に繋がりながら仕事をすることが可能です。私たちがもっている仕事の選択肢と、一緒に仕事をする人たちとのコミュニケーションについて H2O Space のたにぐちさんと話しました。 基本的にソロで話していますが、時々ゲスト呼んで話をしている Automagic。デザインからビジネス、エンターテイメントまで。Web に関わることであれば何でも話しているポッドキャストです。前回は谷拓樹さんとモバイルWebについて対談したわけですが、今回のテーマは「仕事」。 会社を作って社員を増やして大きくする、企業に入ってキャリアを積んでいく、それだけが Web 関連の仕事をする人の道ではありません。Web だからこそ身軽に仕事が出来たり、場所も関係なく様々な人と柔軟に繋がり
ジェスチャーUIの課題と対策
タブレットやスマートフォンで積極的に導入されているマルチタッチテクノロジー。デジタルなオブジェクトに触れているような感覚が味わえるタッチインターフェイスは、抽象的なマウス操作に比べて直感的だと言われています。スクリーンに触れるだけの動作は直感的で簡単そうですが、これにジェスチャーが加わることで突然ややこしくなる場合があります。感覚的・直感的というよりかは、操作を覚えなくてはならない負荷がかかる可能性もあります。 未来のインターフェイスを語る上でよく出て来るのが映画『マイノリティ・リポート』。この映画に登場するマルチタッチ UI の技術は一般化されつつあるといっても過言ではありませんが、大きく腕を振りかざし、長時間立ち続けなければならないのであれば、すぐに疲れてしまいそうです。トム・クルーズ並みの強靭な身体でないと使えない・・・なんてことになると困りますね。 例えば Mac OSX とその上
谷拓樹さんとモバイルWebとデザインについて対談しました : could
ポッドキャストモバイル 谷拓樹さんとモバイルWebとデザインについて対談しました デスクトップ Web と同等の情報量を一気に見せるというのは難しいですが、モバイルでも同等の情報にアクセスし、同じようにタスクを完了させることが出来なくてはいけません。モバイルを意識したデザインをするおもしろさ、そして難しさについて対談をしました。 震災後、諸都合で１ヶ月ほどお休みしておりましたが、その後順調に回を重ねているポッドキャスト「Automagic」。毎週、Web デザインを中心に私が思うことを手短に話している番組ですが、今回は inkdesign の谷拓樹さんをお呼びしてモバイルWebを中心に話をしました。昨年の 11 月に「HTML5＋CSS3で作る 魅せるiPhoneサイト」という書籍を刊行して以来、各地で講演をしている方。書籍はレシピ本という側面が強いわけですが、あれだけの書籍を書いたわけで
Webデザインにある駆け引きとコダワリ
Webは人とデータに開放された世界 電子書籍の登場で、再び DTP デザインと Web デザインが比較されることが増えてきた印象があります。もちろん以前から「DTP デザインの呪縛」のようなものが Web デザインの世界で長く受け継がれています。随分 Web に最適な手法が盛り込まれているものの Dreamweaver のような老舗アプリは「DTPデザイナーでも Web サイトが作れる」というコンセプトが今も残っています。Webデザイナーは表現の仕方の違いからフラストレーションをためている方もいると思いますし、発注者側も DTP と Web の違いを伝えてもらっていないことからコミュニケーションに困っている場合もあると思います。 紙には物理的な境界線があることから情報量に限界がありますが、完全に隔離された世界を作ることができます。その世界は紙という媒体によって完全に守られていて、デザイナー
文脈を理解したWebコミュニケーションデザイン
パッケージングの違いは文脈の違い 前回の記事「あなたも私もメディアカンパニー」で、コンテンツを制作するだけでなくメディアカンパニーのように配信の仕方にも工夫をしなければならないという話をしました。コンテンツを配信する際に考えておきたいポイントを記事で幾つか紹介していますが、制作者として注目しておきたい要素は「パッケージング」です。情報を利用者・顧客に届けるために、どのようなパッケージングをすると最適なのかを考えなければいけません。 パッケージングは、制作者であれば意識しなくても常に考えていることです。パソコン上で動作する Web ブラウザ上でどのように Web サイトの情報を表示させれば良いかを常に考えていると思います。最近だとスマートフォン向けの Web サイトをどう作るか考えている方も多いでしょう。パッケージングでまず最初に考えておきたいのが、どの情報をどのように見せるかです。 例えば
あなたも私もメディアカンパニー
メディアを配信することは権利に近い 以前 「ソーシャルメディアの語源から分かる課題」という記事で、ソーシャルメディアという言葉はコンテンツを共有するサイトが次第に SNS 的な機能を盛り込んできたところから生まれたと解説しました。ソーシャルという言葉が付いてくると、どうしても社会的関係性・人と人との繋がりにフォーカスされがちです。実際、ソーシャルメディアの活用といった話になると、特定の社会ネットワークに最適化されたコンテンツを配信するという話題になることがあります。活用するという結果という意味では確かにそうなのですが、ソーシャルメディアという言葉は「人と人とが繋がっているメディア」と捉えることが出来ると同時に「メディアの社会化・公共化」と捉えることが出来ます。 カタカナ英語で表現すると「ソーシャルなメディア」であると同時に「メディアがソーシャル」になったわけです。 メディアをもつということ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
