段階的に考えるデザインのアドバイス 時々「デザインのアドバイスもらえますか？」という依頼を受けることがあるわけですが、応えるのに困ることがあります。尋ねている側は「もっと良い見た目、さらに使いやすくするにはどうしたら良いか？」というニュアンスを含めて質問しているわけですが、初めて見る成果物に対して評価するのは極めて困難です。 成果物は突然生まれるものではありません。価値共有を行ったり、あえて省いた機能や、意図的に作られた表現もあります。こうした過程を経て Web サイトやアプリという成果物があるわけですから、それらを理解する前に評価するとなると、どうしても「好き」「嫌い」といったリアクションに近いものになりがちです。「これはどうですか？」と尋ねても、的外れなフィードバックが来る場合があるのはそのためです。 ムードボードを作るとき、自社ブランドを言語化・視覚化する際、「好き」「嫌い」という感

大企業だけのものではないデザイン原則は、ひとりのデザイナーがマニフェストとして明示することもありますが、最近は多くの企業がスタイルガイドと一緒に作られることが多くなりました。ここで言うデザイン原則とは、タイポグラフィや配置といったデザインするためのノウハウではなく、「我々が考える良いデザイン」が文章として表されたものを指します。つまり、自分たちのスタンス（立ち位置）を示したものです。 Material Design だと、以下の 3 つの原則があります : 実世界にも通じる空間と動きをメタファとして扱う力強く、視覚的であると同時に意図的動きを通して操作や表示の意味を伝えるまた、Facebook のデザイン原則だと、「ユニバーサル」「一貫性」「使いやすさ」など１単語でシンプルに表現されています。もちろんこれだけだと分かり難いので解説が添えられています。例えば「一貫性」であれば、再利用できるも

コラボレーションは難しい コラボレーションは今日のデザインプロセスにおいて必須です。様々な分野の専門家たちが集まるからこそ、より良い製品へと進化していきます。専門家だからこそ出せるインプットによって、最適な解決策が見つかる … はずなのですが、実際そうはいかないことがあります。立場が違えば、物事の捉え方も違います。それぞれが置かれている状況によって、意見が分かれることがあります。意見が一致すればコラボレーションとしての相乗効果が生まれますが、そうでないときは、不平や妥協する人が出てくるでしょうし、最悪の場合は製品の利用体験を損なうものを実装してしまうこともあります。 コラボレーションは響きの良い言葉ですが、一筋縄にはいきません。意見が合わないとき、私たちはよく自己防衛の姿勢になりがちです。「これは違う」と言われると、反射的に「そんなことはない」と言うことがありますが、こうしたやりとりがコラ

会話のような勉強会 5月20日 SVG 勉強会 という小さな集まりに参加しました。株式会社まぼろしのデザイナーで、ポッドキャストにも出演していただいたこともある松田直樹さん（@readymadegogo）主催のイベント。勉強会という名だけあって、参加者全員が SVG のネタを持ち寄って、実装から可能性の模索まで様々な話題が挙がりました。 講師/生徒のような関係が生まれやすいセミナーのような場だと、どうしてもコミュニケーションが一方通行になりがちですし、参加側も受け身姿勢になってしまいます。 SVG に関する質問でもいいから、とにかく発表するという条件を設けることで、発表内容を聞きに行くという考えが薄れ、個々の積極性が増したと思います。発表者が話している最中もお構いなしに参加者が質問をするなど、会話をしているような発表時間はとても良いと思いました。 データを操作できる魅力を体感 勉強会では、

4月23日、クリーク・アンド・リバー社主催で、と、コラボ特別編「アクセシビリティってなんなのさ」というイベントが開催されました。これは昨年開催された「UXってなんなのさ」い続く Q&A 中心で 3 時間話し切るというもの。今の仕事に直結するテクニックや知識を得たいという方には向いていませんが、参加者全員で課題共有をして考えたいという方には参加価値があったと思います。今回は私はモデレーターとして参加し、「デザイニングWebアクセシビリティ」の著者である太田良典さん（@bakera）、伊原力也さん（@magi1125）。「IA/UXプラクティス」の著者である坂本貴史さん（@bookslope）にアクセシビリティの過去・現在・未来についていろいろ質問しました。当日の模様の一部は Togetter でまとまっています。 以下、モデレーターの視点からイベントで感じたことを書き残しておきます。 信念だ

作り方ではなく進め方が知りたい スマートフォンをはじめとしたモバイル機器向けのアプリ設計・開発がはじまって数年。検索をすれば世界中の開発者、デザイナーの知見をたくさん見つけることができますが、「実際どうやって進めるの？」という部分が見えにくいことがあります。仕様書や Tips を読むだけでは分からない、プロセス特有の課題をどのように取り組めばいいのでしょうか。そんなとき、Twitter が公開している Mobile App Playbook: Lessons Learned が参考になります。 Twitter アプリはもちろん、Cannonball や Furni のような社内プロジェクトを通して学んだこと10 項目が紹介されています。開発で躓いたこと、課題に挙がったこと、解決につながったことが経験に基づいて書かれているので説得力があります。ステップバイステップのハウツー情報が欲しいという

SDKから学べること SDK（Software Development Kit – ソフトウェア開発キット）とは、ソフトウェアを開発するために必要な文書、関連ファイル、ツールが揃ったバンドルのようなものです。例えば Android SDK には、Android アプリを開発するために必要なライブラリだけでなく、プレビューをするためのエミューレータや、開発を効率良くおこなうためのユティリティが含まれています。 良い SDK には、以下の 4 つの特徴があります。 コアライブラリが安定していて、主張通りに動作していること。 ドキュメンテーションはもちろん Issue Tracking が維持・管理されていること。ソースを読んで学習せよでは十分ではない。 どのように書けば動作するのか分かる例が用意されていること 。コンポーネントの互換性など、ドキュメンテーションだけでは説明しきれないことが分かる

CSS フレームワーク活用のタイミング Bootstrap、Foundation をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex のように Flexbox を活用したグリッドシステムだけといった UI の特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。 プロトタイプ作成 Photoshop や Sketch のようなグラフィックツールで Web サイトをデザ

遠くなりはじめた Web サイト 2015年11月から12月にかけて Medium のほうでコンテンツ配信をしていました。 Medium は昨年から日本へ本格進出をしていることから、注目している方も少なくないと思います。Medium の人気の秘密は、使いやすくコンテンツの邪魔をしないライティング環境を提供している部分だけではありません。Twitter の創業者のひとりであり、現 Medium の CEO である Evan Williams を中心としたスタートアップ & テック界隈から徐々に Medium の文化が広がったという背景も魅力。こうした機能やデザインだけでは表現できないところまで日本語化されているわけではないですし、日本では昔からあるブログプラットフォームをはじめ、書く環境が豊富に揃っています。 私の場合、情報発信ができる環境が既にあるので Medium に魅力を感じていなかっ

理解という名のアクセシビリティ Web アクセシビリティの課題には大きく分けて 2 種類あります。ひとつは、色、形状、動きといった視覚に関わること。そしてもうひとつは、マークアップをはじめとしたマシンリーダブルに関わることです。マークアップが正しく記述されていて、視覚的にも分かりやすいことは Web アクセシビリティの確保において必須ですが、これらとは別に『第三の課題』のようなものがあると考えています。 それは利用者が理解できるコンテンツを制作・配信するという課題です。正しくマークアップされていたとしても、そのマークアップされたコンテンツが人にとって理解しにくいものであればどうなるでしょう。利用者はタスクを達成することができないでしょうし、情報を求めて彷徨うことになるかもしれません。 単に情報へアクセスできるだけでなく、意味のある情報へアクセスできるようにする必要があります。利用者の目的が

デザインの議論で以下のような対立を見かけることがあります。 アプリ/Web 文系/理系 テキスト/ビジュアル アート/デザイン アクセシビリティ/視覚表現 UI/UX 私たち人間は様々なことを分類することを好みます。一見相反するものは、明確に分類しようとしますし、それぞれの定義を明確にしようともします。片方を選ぶことで、もう片方は諦めなければいけないと考えている方もいると思います。それぞれの言葉の意味を理解しておくべきですが、どちらかを選ぶというものではないと考えています。 ふたつを合わせることで、私たちの仕事の可能性を広げることができるはずです。 自分の仕事をアプリか Web いずれかに絞ることはありません 文系だからといって数字が弱いということはありません テキストとビジュアルが合わさることでコンテンツが増幅します アートと呼べるような問題解決は存在します 視覚的な表現が豊かでもアクセ

先日、報道を VR で楽しむ NYT VR を試してみました。VR はゲームをはじめとしたエンターテイメント性の高い分野で注目されていましたが、 NYT VR はジャーナリズムからのアプローチだったので新鮮でした。これは仮想空間だと分かっていても、次第に世界に没頭してしまい、現実と仮想の境目が曖昧になる感覚は VR 体験ならではです。 スマートウォッチをはじめとしたウェアラブルや IoT の登場によって、従来のような GUI を前提としたインタラクションデザインではなく、No GUI のデザインが注目され始めています。すべてをボタンのような操作 UI で表現するのではなく、音声、触感、行動でインプット・アウトプットすることがありえます。しかし、VR を体験していると、No GUI とは別に、Everything UI という世界もありえると思い始めてきました。Everything UI は

10月25日、仙台で The NEXT WEB CONTENT 2015 が開催されました。主催である株式会社インフォアクシア設立11周年記念として、Web アクセシビリティを中心に、デザイン、ユーザビリティ、SEO など、Web に関わる様々な話題を扱ったイベントになりました。トピックは広く浅いわけですが、異業種の専門家が集まることで、新たな視点の発見や共通点を見つけることができました。 本イベントの様子は Togetter #tnwc2015 をご覧ください。 Web利用は『終わった』のではなく『変わった』 ここ１年「Web は終わった」というニュアンスが含まれた話題を国内外で耳にします。Mashable が「Web Design is Dead（Web デザインは死んだ）」という記事を公開して話題になりましたし、アプリの利用時間の急増から「The Web Is Dying; Apps

タッチは大前提 発表後、発売を待たずに売れ切れ状態になった Surface Book。ノートパソコン並みの大きさを誇る iPad Pro。それぞれコンセプトが異なる製品ですが、スクリーンサイズが従来のタブレットの域を超えたものが注目されているのは、デスクトップパソコン以外で本格的な作業をしたいというニーズが高まりつつあるからでしょう。 Adobe のコアアプリも Windows 向けにタッチフレンドリーに改良が加えられています。 Windows だけでなく、Linux 製の Gnome はバージョン 3 以来、ジェスチャー操作をサポートしています。GUI も大きめのアイコンや操作 UI が実装されているのも印象的です。 今年 Acer がリリースした DCシリーズ は、Chrome OS をベースにしたデスクトップパソコン。マウスとキーボードで操作はできますが、スクリーンに触れて操作もでき

10月18日、法政大学にて次世代 Web カンファレンスが開催されました。Web に関わる技術について徹底的に話し合うイベント。セッションすべてディスカッションで勉強会というより話を聞きに行くというニュアンスが近いかもしれません。8 月に UX をテーマに議論する会を開きましたが、今年はこうした『会話』を軸にしたイベントに興味を惹かれます。 今回は、「デザイニングWebアクセシビリティ」の著者である太田良典さん（@bakera）、RDFの専門家でありコントラバス演奏者である神崎正英さん（@_masaka）と Webアクセシビリティをテーマに 1 時間ほど話をしました。私は Web アクセシビティの専門家ではありませんが、株式会社インフォアクシアの 植木真さんとのポッドキャストがキッカケで呼んでいただきました。3 者異なる視点から、Web アクセシビリティの現在と未来について話し合いました。

デザイナーとツールは切っても切り離せない関係です。ときにはデザイナーのスキルはツールの熟練度や使い分けの仕方で決まることもあります。長く使い続けたいですが Web やアプリのデザインは、テクノロジーと密接に繋がる仕事であるが故に、いつの間にか新しいツールが主流になることがあります。 特にここ 10 年でデザインの仕事は大きく変わりました。今でも Web デザイン、アプリデザインにおいて Adobe 製品は多大な影響力をもっていますが、それがほぼ唯一の選択肢だった頃と今は違います。また、今まで以上にデザインにスピードと柔軟性が求められているので、Adobe 以外のツールも必要になってきています。 では実際、世界のデザイナーはどのようなツールを使っているのでしょうか。ニューヨークのデザイナー Khoi Vinh さんが、The Tools Designers Are Using Today で

始めたきっかけ今は瞬時にいろいろなものを手に入れることができる時代です。自分が欲しいと思ったタイミングで様々なコンテンツやツールへアクセスできるようになりました。そうした環境で日々暮らしていると、スキルや知識も瞬時に身につけることができると考えてしまいがちです。しかも周りを見渡せば「すぐにできる」「手軽で簡単」「知っておかなければ損」といったフレーズが飛び交うわけですから、早く手軽に済ませたいと思う気持ちが強まります。 しかし、身につくスキルを得るためには時間が必要なのが現実です。いきなり 1000 文字以上の記事は書けませんし、調査・研究を積み重ねた壮大なプランを立てても試行錯誤を繰り返さなければ成功に近づきません。スキルのある人とない人の違いは、時間を割いているかどうかと関係しています。 マルコム・グラッドウェルの著書「天才! 成功する人々の法則」で、『一万時間の法則』が紹介されてます

ダミー文字はリスク ユーザーは読まないと言われているものの、言葉はユーザーとコミュニケーションをするための基盤です。流し読みでも理解できるような設計がされているか。次のアクションへ結びつく動機が提供されているかは、言葉で決まることがあります。ビジュアルが注目されがちな UI デザインですら言葉が重要なデザイン要素になります。 デザインはコンテンツの価値を増幅したり、利用者の欲求を満たしたり目的達成の補助をするためにあります。もし、ダミー文字をつかってデザインすることは、ユーザーとのコミュニケーションを破棄した状態で彼等がもつ課題を解決しようとしているようにみえます。デザイナーはダミー文字をもっと敵視しても良いと思います。 ダミーの情報を入れるのは簡単です。Loren Ipsum のようなジェネレーターがありますし、日本語でも似たようなものはあります。今は文字だけでなく、ユーザーアイコンをは

このサイトに始めて訪れた方は、広告がないことに気付いたでしょうか？ 以前から読者である方のなかには、このサイトにはなぜ広告がないのか不思議に思っている方もいるかもしれません。現在の Web 広告には以下 5 つの問題を抱えていると考えており、掲載を控えています。 技術の問題 ユーザー体験の問題 デザインの問題 コンテンツの問題 モラルの問題 読者の足を引っ張る広告たち 何度か広告ネットワークから掲載オファーをいただいたことがあります。多くの場合、複数の JavaScript を埋め込む必要があり、パフォーマンスへの多大な影響がでることから掲載を断っています。うちのような小さなサイトであれば大きな変化はないかもしれません。しかし、ちょっとしたパフォーマンスへの負債が積み重なれば読者への影響も多大なものになります。 上記の数値は、ある有名な日本のブログメディアのトップページのファイルサイズとリ

先週末、パンダの会 その陸が開催されました。5月に @3panda さんと対談をしたことがキッカケで実現した今回のイベント。パンダの会は Web サイト制作をはじめてまだ 1, 2年くらいの方を主な対象としていますが、この日はおなじみの顔ぶれもチラホラあり、リラックスした雰囲気で行われました。今回のお題は『Webをつかって何をしたいか見つけ出そう』。先月開催された WebSig 1日学校では、多くの先生がキャリアについてお話されていましたが、私はパンダの会でキャリアについて話すことになりました。 2006年に流行していた言葉や技術を前面に押し出してアピールしている企業や個人はいるでしょうか。2011年のトレンドも同じようなことになるでしょう。 Webは動きが目まぐるしく、トレンドについていくのが精一杯になりやすいところから、数年先を見据えたプランが立てれないことがあります。誰もが予測は出来