改善の意味を合わせる Web サイトやアプリの運用・改善は欠かすことができないプロセス。一発で正解を出すのが難しいのはもちろん、市場やユーザーの動きも常に変わるので、それに合わせた対応が必要になります。改善をすることに異論を唱える人はいないと思いますが、何に対して改善したいと言っているのか異なる場合があります。 例えば web サイトやアプリの制作者（デザイナーや開発者）であれば、UI や使い勝手を改善したいと考えるはずです。しかしマーケターであれば流入チャンネルを改善したいと考えるかもしれないですし、経営幹部であれば収益を上げるための施策を改善と呼ぶかもしれません。 それぞれが考える改善をしていても最大の効果は得られませんし、ひとつに集中しなければ効果が見えてこない場合があります。 また、ビジネスインパクト（利益になるかどうか）を考えたとき、私たちがやりたい UI 改善による効果が極めて

次世代デザインツールはどこへ向かうのか　前編 次世代デザインツールはどこへ向かうのか　中編 デザインをスケールさせていく デザインツールの現在と未来を考えたとき、デザインシステムの存在は無視できません。今のデザインツールはデザインシステムの作成・運用に最適化するための機能実装がされています。 一貫性のあるデザインの作りやすさ コンポーネント（部品）として捉えた UI の管理 複数人のデザイナーによるプロダクトデザインの運用 コードへの書き出しなどエンジニアとの連携 ひとりのデザイナーに頼るのではなく、組織でデザインを運用していくためにデザインシステムのニーズが高まってきています。欧米ではここ数年でデザイナーとエンジニアの比率が小さくなってきている状況をみても、デザインが個人プレーからチームプレーになってきているのが分かります。 大企業でデザイナーの雇用（又はデザイン会社の買収）が増えていた

プロトタイプツールからデザインツールへ 私は前線で制作していませんが、Sketch 講座 をはじめデザインツールについて話すことがあります。Sketch を長く使っているのものの、Adobe XD、Figma 、 inVision Studio など他のツールも検証しながら、合いそうな現場にツールを提案するようにしています。 なぜ今デザインツールなのでしょうか。数年前からある プロトタイプツールと何が違うのでしょうか。閉じていたデザインプロセスを開くという意味では当時も今も変わりないと思います。ただ、Sketch、Figma などを代表するデザインツールはスコープが少し広いのが大きな違いです。 Proto.io に代表される 2013 年前後のプロトタイプツールは、インタラクティブな紙芝居に近いものでした。大まかな画面遷移と操作感を実機で体験できるものの、それ以上でもそれ以下でもないような

デザインが理解されない、という問題点と、デザイナーの存在価値を認めてもらえない、という不満を混在させると厄介なのかな、と感じているのですが、それら二つはやっぱりイコールでつながるものでしょうか。 匿名 同じ言葉 != 同じ意味 「デザインはビジネスに貢献する重要なポジションになってきている」 デザイナーとそれ以外の方でこの言葉の受け取り方が異なります。私たちデザイナーであれば、重要な存在になることで本来すべき理想的な工程と成果物が作れるようになると考えるでしょう。しかし、その考え方はデザイナー視点であって、他の役職の方が同じように捉えているわけではありません。デザインというものを『導入』すれば儲かるから重要なポジションだと捉えている人もいます。 同じ言葉でもまったく違う捉え方ができるわけですから、誤解も生じます。「デザインは重要」と言われているからといって、デザイナーが想像する重要な存在に

上図は、Facebook, Instagram, Snapchat をはじめとしたサービスが提供している「ストーリー」でよく見かける動きです。ストーリーはここ 1, 2 年で一気に広まりましたし、毎日観覧している人もいると思います。 UIデザインも成熟期に入ってきて、ベストプラクティスと呼ばれるものが出揃ってきました。タイムラインのUI、ナビゲーションのUI、ギャラリーのUI など、様々なコンポーネントがどのアプリを見ても大して変わらなくなりましたし、そこから大きく外れたものは「使いにくい」と言われる場合もあります。 ストーリー式 UI も他のコンポーネントと同様、似たり寄ったりになってきていますが今までの UI になかった特徴的なところがあります。 操作のための UI が極めて少ない: 従来であればスキップしたり次の動画を見るための操作 UI があったところが、ストーリー式 UI にはそ

今月から Adobe Creative Station 編集部とのコラボレーション企画を進めています。Adobe Creative Station は、Adobe が公式で運用しているメディアで、製品の最新情報や使い方を紹介しています。そこでの寄稿、Creative Cloud 道場のゲスト出演、ソーシャルメディアでのコンテンツ配信をやっていきます。週に 2 回以上は Adobe Creative Station 向けのコンテンツをどこかで見ることができるはずです。 今風Adobeツールとの付き合い方は？ 長く Adobe 製品を利用していますが、Adobe のビジネスモデルに疑問を投げかけたり、使えないところはハッキリ言うこともあります。こうした言動に対して「アンチ Adobe ですね」と言われたこともありますが、足りていないところを口にしない（目をつぶる）のがファンなのかという疑問もあ

情報収集方法についておしえてください。見ている情報源、使っているツール、コツなど。 匿名さん よく聞かれる質問のひとつです。 Twitter で、平日毎日情報発信しているので不思議に思われる方もいるかもしれませんが、特別な手法で情報収集をしているというより、時間の費やし方が違うかもしれません。 80%英語です 知人のブログ、又はソーシャルメディアから流れてきた興味深い情報以外は英語中心です。自分の仕事に関わる情報収集は、日本語のを見てもだいたいが英語圏の情報の焼き回しだったり、表層的なところで終わっているところもあるのでほとんど見ていません。学生時代からずっとそうやって情報収集しているので単なる習慣なのかもしれませんが …。 以下がよく見ているサイトの一部です。 Designer News ココを押さえておけば、日本のデザイン系まとめサイトを見なくて済むようになると思います。ここ 1, 2

「ブラウンとアップル」という記事で、デザイナー Dieter Rams（ディーター・ラムス）が提案した良いデザインの10の原則を紹介しました。1970年代に提案されたものですが、現在にも通じる普遍性のあるメッセージです。これのアップデート版のようなものを、Co.DesignのSuzanne LaBarre さんが提案しています。特にアプリや web サイトをはじめとしたデジタルプロダクトを意識した内容になっています。 良いデザインは様々な影響を考慮している 良いデザインは『スロー』である 良いデザインは正直である 良いデザインは政治的である 良いデザインはシステムを意識している 良いデザインは良いライティングである 良いデザインは多面的である 良いデザインは人とマシンのためにある この中で特に気になった「良いデザインは『スロー』である」から、今後のデザイナーの仕事についてぼんやり考えてみま

ツールは表現から連携の時代へ 制作プロセスは、設計→デザイン→実装という真っ直ぐな線になっているように思われがちですが、あちこちに『溝』があります。関わる人が増えたり、心理的・身体的距離があれば、それだけ溝を埋めるための作業が増えていきます。 決裁者の意図・ビジネスの目的を読み取って具体的な要件にするための溝 要件を伝え、画面設計に落とし込むときの溝 画面設計から適切だと考えられるビジュアル言語を作るときの溝 ビジュアルデザインから人々が見て、触れるような状態にするための溝 デザインツールはデザイナーの都合で選べば良いわけではなく、ツールによってはプロセスの溝を深いものにしてしまう場合があります。 Photoshop や Illustrator のような従来のデザインツールと、過去 5 年くらいに登場したデザインツールの大きな違いは、デザインプロセスにおいて解決したい課題が違うところです。

公開しても終わらない コンテンツマーケティングの文脈でコンテンツの運用という言葉を耳にすると思います。いつ、誰に、何を、どのように配信するかを決めて、複数人で実践していくには運用が欠かせません。新しいコンテンツを作り続けなければいけませんし、現存コンテンツの維持・管理も必要になります。 コンテンツの運用で「公開したらあとは待つのみ」「納品したら終わり」という考えはありません。放置するとたちまち埋もれてしまい、存在していないのと同じになります。また、利用者の趣向・動向に合わせてチューニングをしていかなければ、ますます遠い存在になります。 公開したらデザインの仕事が終わるわけではないという意味でコンテンツの運用と似ていますが、デザインの運用は以下の点を解決することを目的とします。 コンテンツの量に依存した『固い』デザインにしない 基本的なことであれば短時間で実装ができる 誰が触っても最低限の品

身近にいるかもしれないモンスター達 「モンスターペアレント」なんて言葉が流行した時期がありましたが、そのデザイナー版もありそうです。一見、平穏そうな装いをしたデザイナーの中に潜む恐ろしいモンスター達。彼らがデザインの行程を台無しにしたり、品質を落としてしまう場合があります。 今回紹介するモンスター達は web やアプリのようなデジタルプロダクトをデザインしている人たち向け。特にデザイナーとしてキャリアを始めた頃に陥りやすいモンスターたちです。 俺一番モンスター 問題解決することがデザイナーの仕事ですが、自分が考えた解決案が絶対正しいとは限りません。誰でも自分が考えたアイデアを大事にしたいですが、過保護になるとかえって視野が狭くなります。デザインに関わる様々な手法がありますが、それが解決を導き出す唯一の方法ではありません。課題解決ができるのはデザイナーだけではないわけですから、「自分が絶対正

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

崩れない色名にする 前回「デザインシステムに採用する色を決める5つのルール」を通して、色の名前の付け方や整理の仕方を紹介しました。これを受けてウェブデザイナーの深沢幸治郎さん（@witch_doktor）が「ウェブサイトに使われる色に固有の名前をつけてみる」という記事を書いてくれました。色の命名にまつわる苦労や工夫について読むことができるので、ぜひ参考にしてください。 前回の補足として、デザインシステムにおける色名の付け方の工夫を 3 つ紹介。色の整理をするときの参考にしてください。 色名＝変数 色の名前を付けるのに困っている方は、Kromatic がオススメ。カラーパネルのスライダーを動かすか HEX 値を入力するだけで、色名を提示してれます。他にも color-names という 10,000 以上の色名が収録されたライブラリもありますし、Wikipedia にも色名は幾つかあります。

始めの一歩としての色共有 ひとりのデザイナーに頼らず、チームで運用できる体制を作るためにも デザインシステム は有用なツールです。しかし、様々な UI コンポーネントと決まりごとが揃ったものを作るのは骨が折れる作業です。デザイナー（もしくはエンジニア）が独自で作って「さぁ使いましょう」と公開しても、使ってもらえるとは限りません。また、デザインシステムをどこで共有して、どのように使われるのかも考慮しなければならず、他社の真似事では済まないこともあります。 作る前から課題が山積みでなかなか手が出せないかもしれませんが、何か始めなければゴールに辿り着くことはありません。そんな現場でデザインシステムを作る場合、色から始めることをオススメしています。 色なんて単純なところは出来ていると思う方は多いと思います。デザイナーであればパレットにしてまとめているでしょうし、エンジニアであれば色は変数にして整理

イケア効果という認知バイアス 自分で作ったものだからこそ、特別な感情を抱いてしまいます。だからこそ成果物が否定されると、自分自身が否定されたかのように聞こえてしまうことがあります。自分は自分。成果物は成果物と切り分けて聞き入れるべきですし、話し手も成果物の課題に対してきちんとフィードバックをしたほうが良いでしょう。しかし、実際はそう簡単にはいきませんし、たとえ話し手が上手なフィードバックをしていたとしても、上手に受け入れられない場合があります。 人は自分で作ったものに対して特別は感情を抱いてしまうのは、デザイナーだけではありません。自分で作ったものに本来以上の価値を与えてしまう認知バイアスで、誰でも持っているものです。こうした状態を「IKEA effect（イケア効果）」と呼ぶことがあります。 IKEA の家具は組み立て前の状態で販売されており、組み立てるのは購入者です。コスト削減のための

ルールを守ればスライドは改善する 日本各地で登壇の機会をいただいていますが、内容そのものの感想ではなくスライドのデザインについて聞かれることがあります。デザイナーの端くれとしてスライドのデザインには気を使っているので、「どう作っているの？」と聞かれるのは光栄です。スライドのデザインは昔から Keynote で行なっています。貼り付けた動画を使って演出していることもありますが、ほとんど Keynote にある機能を使っています。 デザイナーでなかったとしても、以下のルールに従うことで、一貫性のあるビジュアルとストーリーを構築することができます。 カラーパレットを作る ひとつひとつ好きなように作るのはなく、全体を意識しながらひとつのスライドを作るようにします。スライドごとに色が違うと、統一感が失われるのでひとつのプレゼンとしてのインパクトも小さくなります。そこで、カラーパレットを用意して、その

本当に脅威だけなのか 既に来ている機械化の波とデザイナーができることで、私たちが使っているデザインツールにも AI が使われていることを紹介しました。2017 年版の Photoshop には人工知能を活用した機能が実装される噂もあります。デザイナーが人工知能と一緒に働くことは、遠い未来ではなく、今起こっていることと言えるでしょう。 AI や機械学習は、仕事を奪う脅威と言われています。これから 20 年間でおよそ半分の仕事が AI によって入れ替わるという話もありますし、クリエイティブの仕事だから絶対安全とは言えません。特にただ作るだけという製造業に近いデザインワークは減少することになるでしょう。コーディングもそうで、pix2code のようにスクリーンショットからコードを生成する技術もでてきています。 「作る」という行為をデザイナーの仕事と定義してしまうと、先は明るくないかもしれません。

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

ボタン？それともリンク？ 昨年からデザインシステムをテーマにしたセミナーやワークショップを何度か開催していますが、ワークショップに参加した方から「ボタンは難しい」という感想をいただくことがあります。ボタンの見た目を作ることも奥深いですが、もっと難しいのが、いつ、どこで、どのように使うかを共有すること。考え始めると「そもそもボタンとは何か？」といった疑問が浮かび上がります。 フォーム要素と一緒にあれば、ボタンだと断言しやすいです。HTML であればマークアップも <button> になりますし、アプリでも　iOS であれば UIButton を使えば良いと判断できるはずです。 文章のあとに「今すぐ始める」というラベルが付いた要素があるとしたら、これはボタンと呼べるでしょうか。角丸のような装飾、注目されやすい色が使われているので、ボタンと見なすことができます。見た目はボタンっぽいですが、果たし

どれも重要という現場で 「ビジネスにデザインが不可欠」「差別化になるのがデザイン」といった表現をつかってデザインの重要性を示す場合があります。デザイナーからすれば嬉しい言葉でもあり、責任の重大さを感じます。しかし、ビジネスにおいて不可欠なものはデザイン以外にもたくさんあります。開発はもちろん、マーケティングや営業も不可欠な存在。そもそも、あってもなくても良い部分を探すほうが難しいわけです。 ここ数年でデザイナーが創設した企業が幾つか買収されていますし、資金調達に成功したスタートアップのなかにデザイナーが共同創設者のところも少なくありません。また、Airbnb のようにデザイナーが組織の責任者になって、デザインの文化を広げているところもあります。こうした状況をみると「ビジネスにデザインが不可欠」と考えるのも当然かもしれません。 ただ、だからといってデザイナーが「不可欠」という表現に酔いしれて