美しいものだけに囲まれている不安 Instagram をはじめとした写真共有サービスでアップロードされる見栄えの良い写真を「インスタ映え」と呼ぶことがあります。ハッシュタグで繋がる様々な写真を見て楽しむことができる Instagram ですが、そこで映し出されている世界がすべてだと勘違いしている人も少なくないと思います。自分の生活と比べて「なぜ皆はこんなに楽しそうなんだろう」と悲観的になる人もいるかもしれません。 Instagram に限った話ではありませんが、ソーシャルメディアで共有されているものは、投稿者の生活がダイジェスト配信されているようなものです。言い換えるならば、「ベスト・オブ・◯◯さん」を見ているようなものでしょう。ソーシャルメディアを使う人たち全員が、自分の PRエージェントになって活動しているようなものかもしれません。 私は「インスタ映え」と似たような現象は、デザイナー、

先進的から最適化へ 3年前、Facebook が今までのニュースフィードを完全に変えた「Paper」というアプリをリリースしました。ネイティブコンポーネントが使われていないオリジナルの UI とインタラクション。今までありそうでなかった新しい操作方法を提案していました。Paper をはじめ、様々な実験的なアプリを Creative Labs としてリリースを続けていましたが、2015 年にラボは閉鎖され、その半年後には Paper も配信停止されました。 今でも Things 3 for iOS のように新鮮な UI とインタラクションが生まれる場があるものの、あまり見かけなくなりました。今のアプリ UI デザインは、目新しいものを作るより、今まで培われたノウハウを基に使いやすさ、見やすさを磨き上げるフェイズに来ています。斬新なアニメーションと目新しい形状のメニューを作るより、ガイドライン

結果だけでなく過程も 途中経過を見せることはデザインへの誤解が生じると考える人はいるかもしれません。また、途中経過は『企業秘密』だから見せるべきではないと考える人もいるでしょう。そもそも恥ずかしいから見せたくない人も少なくありません。自分も最初は恥ずかしかったですし、そもそも途中経過は見せる必要ないと思っていたほうでした。 しかし、今は途中経過を見せなければ良いデザインが生まれないと考えるようになりました。手描きのものから、インタラクションがあるものまで様々な形状を作っては見せています。仕事現場だけでなく、Twitter や Instagram のような場でも見せることもありますし、このブログにしてもデザインにおける途中経過を文章として表していることが多いです。 完成されたモノをどう作るかというノウハウも重要ですが、デザインという『よく分からないもの』が生まれるまでのプロセスを見せるほうに

素材に正直であれ Webサイトの品質には、高い技術と表現を盛り込むという『上を目指す品質』と、どのような状況でも必要最低限の見た目と操作性を保証する『地を固める品質』の 2 つがあると説明しました。しかし、これだけではなくデザインにおける普遍的な考え方も品質に大きく関わっています。 ドイツのインダストリアルデザイナー Dieter Rams（ディーター・ラムス） が提案する良いデザインの十ヶ条の中には、良いデザインは正直であるという項目があります。製品を必要以上に大げさに見せるのではなく、ありのままを伝えること。素材や形状を生かし、機能を明確に伝えることをラムス氏は『正直』と捉えています。 Web デザインに限ったことではありませんが、素材に正直であることは良いデザインには欠かせないことです。これは、素材をありのままに使ってシンプルでミニマリストな表現をするという意味ではなく、素材の特徴を

制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイトと、米国サイトは良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーション

広がるデザインツールの役割 2016年はデザインツールのあり方が大きく変わった年でした。スマートフォンが主流になってから、平面な画面をひとつひとつ設計するのではなく、利用者の遷移や UI フィードバックを塾考するようになりました。多彩なデザインツールが出てきているのは、デザイナーの作り方だけでなく、役割も少し変わってきているからでしょう。ひとりの職人が閉じ籠って完成品に近いものを作るのではなく、デザインプロセスを共有しながら少しずつ作るというやり方に変わりつつあります。デザインのブラックボックス化を避けるための手段は今も増え続けています。 従来のデザインツールは、ひとりのデザイナーがデザインに集中するための道具であって、途中経過を共有したり、協力して作ることを得意としていませんでした。現在のデザインツールは複数のデザイナーがひとつのプロジェクトに取り組めるような仕組みが用意されていたり、デ

作るだけだと失うバランス スキルが多ければ就職のチャンスが増えるでしょうし、デザインとコードの間を取り持つためのコミュニケーションの手間も省けます。新しい技術を取り入れたデザインが考えられることで、表現の幅も広がるはずです。柔軟性、拡張性のあるデザインを作るときにコード脳が役立ちますが、デザイナー自らがコードを書く必要性はないと考えています。 小さな組織、フリーランスであればコードを書かざるを得ない状況があるので、それは仕方ありません。『書けるべき』という強い表現が、どのような状況にも当てはまるように聞こえてしまうことに疑問を感じます。また、制作スキルばかりに力を入れても、デザイナーとしてのスキルの伸びに限界がある考えています。 デザインは人によって様々な定義が出てくるややこしい言葉ですが、私の中で「作る」ことと「考える」ことの 2 つに分けています。作ることは、何か目に見えるもの、触れる

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

2016年9月3日HTML5 Conference 2016が開催されました。1,200 人を超える参加者。6トラック同時進行という巨大イベント。どちらかと言えばエンジニア向けのセッションが多いイベントですが、そういう場だからこそ「ぜひ話したい」と思えたところがあります。 今回「協働のためのデザイン思考の再構築」という題名で話しました。以前からエンジニアとデザイナーとの間をどう繋げるかという課題について話したいという欲求がありました。ただ、こういうトピックはデザイナーばかりの場で話すのは意味ないですし、逆もしかりです。HTML5 Conference 2016 は、デザイントラックもあったことから、両方へリーチするには好都合。幸いエンジニアの方も私のセッションに参加していただいたみたいで、非常に嬉しかったです。 デザインシステムの課題 私は HTML, CSS, JavaScript は書

人間中心設計だけでは見えないこと 今では見なくなりましたが、ひと昔の MacBook Pro や Power Mac の本体側面にあるスリープインジケーターや電源ボタンは、スリープ時に点滅をしていました。これがただの点滅ではなく、まるで人が眠っているときの呼吸のような動きをしていました。Apple はこの点滅のデザインの実現のためにコストをかけ、特許も取っています。 Apple 製品は小型化・薄型化が進んでいるので、こうした『演出』が少なくなっていますが、今振り返るとスゴいなと思うわけです。誰も気にしないディテールに拘るという点はもちろんですが、製品に実装してしまっていること自体がスゴいなと。 最近は「利用者のニーズを引き出して、実装しましょう」「そのデザインに効果があったか数値化しましょう」という文脈の中でデザインが語られることが多いわけです。たぶん、そうした中で「電源ボタンを人間の呼吸

2010年代は『革命』 2000年代であれば、デザインツールは Adobe 以外の選択肢を考えることができませんでした。小さなツールは幾つか出ていましたが、仕事で使おうと思えるデザインツールはほぼ皆無。しかし、2010年に Sketch が登場して以来、状況が大きく変わり始めてきています。他に使おうと思えるものがなかった 2000 年代に対し、2010 年代は次から次と魅力的なツールが登場しています。今では「また出た」とウンザリしている方もいるかもしれませんが、2000 年代の静けさと比べると革命といって良いほどデザインツールが増えています。 こうした変化のなか、Adobe も Experience Designer という Creative Cloud には今までなかった種類のアプリを 2016 年にリリースしました。今までデザインツールを独占していた Adobe でさえ、2010年代に

好き !＝ 良い・正しい デザイン批評は、数年前から扱っているトピックし、講演経験も何度かしています。デザイン学校へ行った方であれば批評の経験はしていると思いますが、なかなか機会がないのが現実。ビジネスとの関わりが密接になればなるほど、デザインについてデザイナー以外と話す機会が増えていきます。様々なデザインの手法を学んだとしても、デザインについて会話するスキルがなければ意図・目的を伝えることができません。 調査に基づいて論理的に対話ができれば理想的ですが、そう簡単にいかないのが批評の難しいところ。私たちは論理的に考えようとしますが、感情的に物事を捉える生き物です。どうしても「好き」「つまらない」といったリアクションを即座にしてしまいがちですが、「好き ＝ 良い・正しい」とは言い切れません。つまり、自分の好みではないものでも、プロジェクトの目的を達成には正しい判断といえる場合があります。 こ

言葉で決まるアプリの印象 2 年前に発表されて以来、細かな更新が続いている Material Design。最近、UI の動きに関するガイドが大幅に改変されたことで、感覚的なところも共有しやすくなってきました。Android アプリにおける UI デザインの基礎を固める上で、Material Design は非常に参考になりますが、このガイドラインは見た目のことばかり書かれているわけではありません。 Material Design の中には「Writing」と呼ばれる言葉遣いに関する項目があります。ボタンのような操作 UI のラベルはもちろん、エラーメッセージや、挨拶文など、アプリに表示されるテキストすべてに関してガイドラインが制定されています。言葉は大事なインターフェイスですから、きちんと項目をつくって紹介してあるのは素晴らしいことです。 以下、「Writing」項目で紹介されているガイ

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

職種を超えたデザイナーの集まり 3月20日、浜松市にて　DORP INSPIRATION 2016 が開催されました。様々な分野で活躍するデザイナーを対象にしたイベントだけあって、Web デザイナーの来場者数は半分以下。グラフィックデザイナーはもちろん、建築家やインテリアデザイナーの方も参加していました。デザインという限定されたテーマではありますが、様々な分野のデザイナーが集まるイベントは珍しいと思います。 参加者だけでなく、登壇者も多彩な顔ぶれ。オイシイワークスの佐藤実紗さん。書籍「なるほどデザイン」の著者で株式会社コンセントのアートディレクター筒井美希さん、関口 裕さんが登壇しました。デザインという共通項はあるものの、仕事の仕方も、アウトプットするモノも様々。自分の仕事に直結した情報を手に入れることが難しい分、「これは自分の仕事に置き換えると何が言えるのか」といった意識が強くなり、終始

完成品になれない溝をどう埋める あたかも完成品に見えてしまうデザインカンプには、様々な暗黙の了解が存在します。グラフィックツールで Web ブラウザ上での見た目を再現しようとしても、実際 HTML / CSS で組まれたデザインの見た目と同じになることはありません。どこまで静止画を作り込んでも、実際の完成品には成り得ない大きな溝が存在します。この溝が大きな誤解に繋がることがあります。 例えばレスポンシブ Web デザインの場合、幾つかの大きさで静止画のデザインを用意したとしても、その間（可変状態）でどうなるか想像するのが難しい場合があります。また、レスポンシブ Web サイトにおける表現は多彩になってきています。要素の順番を Flexbox で変えることもできますし、画像の配置の仕方もより柔軟で表現豊かになってきています。知識や経験がある方であれば静止画では表現されていない「実はこうなる」

作れることは重要ですが デザインを「作る」を軸にして話すと、デザインの本質が失われることがあります。もちろんデザイナーは何か形にすることが仕事であるわけですが、作る話の多くは答えありきで語られることがあります。「◯◯の作り方」「△△を効果的に見せる方法」など、作ることが目的であったり、課題への答えが既に出た上でデザインが解説されていることは少なくありません。 何かを作り出すためのスキルを磨く上で、作り方を知る必要があります。しかし、答えがあらかじめ提示された状態で作るというやり方ではデザインをする仕事として必要な根本的なスキルを得ることが難しくなります。 UI の実装には、デザインの学習と成長における課題をたくさん見つけることができます。 今でも多くのサイトが採用しているカルーセル（carousel）は良い例です。「クライアントに言われたから」「作るという仕様になっているから」「競合サイト

カンプ2.0になっていないか プロトタイプを作ることが今日のデザインプロセスにおいて、不可欠になりつつあります。3年前ではなかなか響かなかった話題でしたが、ますます複雑になるアプリ / Web サイトデザインにおいて、いきなり完成品に近いものを作り込むという手法が通用し難くなりつつあります。また、高機能ツールも手軽に使えるようになったことで、とりあえず作って見せるという行為がしやすくなりました。 実機で画面遷移を確認するだけでなく、アニメーションもコードの知識なしで作れるようになった現在。ツールはますますパワフルになっていきますが、プロトタイプツールの目的は実装のための青写真を作るためにあるわけではありません。 ビジュアルデザイン（インタラクションデザインも含）と実装には以前から大きな溝が存在します。デザインカンプと呼ばれる、あたかも完成図のように見える成果物をもとにコーディング（実装）し

たまには本もいかがですか？ セミナーやワークショップのあとに質問を受けることがありますが、「おすすめの書籍はありますか？」と聞かれることがあります。 Web には膨大な情報がありますし、英語まで手を広げると研究者による文献にもアクセスすることができます。しかし、ある特定のトピックを要所を落とさず学びたいときは書籍が便利です。 目まぐるしく状況が変わるだけでなく、デザイナーとして知っておくべき領域も広い今日のデザイン。ソフトウェアの使い方を覚えることも重要ですが、作るための考え方や伝えた方を学ぶことに多くの時間を費やしたほうが良いでしょう。自分のデザインの意図が説明できて、ようやく同僚やクライアントにデザインを理解してもらえるからです。 今回は、デザイナーとして読んでおきたいオススメの入門書を紹介。Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍を

いろいろ学びがあるPeach Peach というアプリ、ご存知ですか？ Vine の創始者として知られている Dom Hofmann の新作。ひとことで言い表すとメッセージアプリですが、チャットと言うより、ステータスアップデートをメッセージ形式で更新できるアプリ。小さな情報を気軽にやりとりするという Vine、そして同じチームが開発している Byte と重なるコンセプトです。 今年の CES は 1 月 6 日から 9 日まで開催されましたが、イベント期間中に合わせてリリースしたというタイミングも絶妙。リアルイベントとソーシャルメディア両方で広がった印象があります。知り合いの『今』を知るためのアプリなので、 CES のように多くの方が一箇所に集まるイベントとの相性が良かったのかもしれません。 もちろんデザインについて Peach から学べることは幾つかあります。 コンテンツのメッセージ化