クリエイティブは機械化できる？デザイナーは作ることがすべてではないですし、代わりに作ってくれるツールも年々増えてきます。感性が必要なデザインですから機械化が難しいように見えますが、そんなことはありません。デザインには科学的に説明できるところが少なくありませんし、機械化が進めばよりバラエティに富んだデザインを瞬時に作り上げることができるようになるはずです。 デザインの自動化・機械化という文脈で象徴的な出来事といえば、Adobe Sensei の発表です。Sensei は、人工知能（AI）と機械学習を活用して、写真補正、3Dモデリング、アニメーションなどデザイン作業の効率を劇的に変える技術です。 デザイナーにとってプラスになる技術であることは間違いないですが、デザインツールの中に留まることではないと思います。エンタープライズ向けソリューション Experience Cloud との連携で、CM

フロントエンドからの影響 昨年開催されたワークショップ「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法」をはじめ、記事やイベントを通して維持・管理ができるデザインついて情報発信しています。CMS が広く普及して以来、コンテンツ配信を長く続けるための仕組み作りが模索されているものの、デザインは発展途上です。早く作る、効率よく作るまで議論されるものの、デザインをどう維持するのか、どうすれば最低限の品質を担保できるかまで発展しないことがあります。 1977 年に建築家クリストファー・アレグザンダーの著書「 Pattern Language 」で、パターンが街作りに柔軟性と拡張性を持たせると説いています。彼に異論を唱える人もいますし、街に個性が失われるという意見にも一理あります。しかし、彼の考え方が今の情報設計（IA）に多大な影響を及ぼしていることは間違いありません。情報や装いに一貫性を

パフォーマンスはすべてに関わる課題 パフォーマンスは利用者体験を向上するだけでなく、ビジネスにもプラスになります。コンテンツと同様、パフォーマンスはデザイン、エンジニアリング、ビジネスすべてに関わる重要な課題です。それを裏付ける事例をたくさん見つけることができます。 表示に 3 秒待たせることで 40% の利用者が離脱してしまう（Gomez） 表示速度を 68% 改善したことで、コンバージョン率が 7% 向上した（Ancestory.com） 4 秒遅くなったことでページビューが 11% 低下。20秒遅くなると 44% 低下した（Telegraph） サイトパフォーマンスを向上することで、ユーザープロフィールのインプレッションとスクロール率が上がった（Instagram） ショッピングサイトではパフォーマンスが 2 秒改善することで、離脱率が半分にまで減った（Radware） SEO にも

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

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

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

意外と忘れがちな運用向けツール Web サイトは作ってからが本番と言われて久しいですが、運用は簡単なことではありません。 CMS を実装することでコンテンツ入力の敷居は下がりますが、誰かがコンテンツを作らない限り何も始まりません。また、コンテンツ設計・制作・配信・分析の各ステージで必要になるツールが異なることがあります。例えば設計時であれば、ペルソナや運用ガイドラインが必要ですが、配信時であればエディトリアルカレンダーやソーシャルメディアガイドラインが求められます。 デザインもイラストも文章もひとりで作って出せる場合があります。しかし、こうした個に頼る運用では成長が難しくなります。コンテンツが作れたとしても、何か基準がなければ「我が社として適切なコンテンツを出している」と言い切れないですし、配信を躊躇することもあるでしょう。チームで役割分担した場合でも課題はあります。デザインチームがグラフ

UIを考える前に本質を探る 人と情報の関係が会話（チャット）のようになることに伴い、コンテンツだけでなく UI デザインも、会話の中でどのように表示すると適切なのか考える必要があります。会話型になる UI デザインについて2年前に記事にしましたが、今は状況が大きく異なります。 Facebook Messenger はボットの開発やコンテンツの最適化ができるプラットフォームを発表していますし、Slack Bots は開発者にとって馴染みの深いものになっています。 また、友人のように振る舞うことができる Xiaoice（微软小冰）も多くの方に利用されるようになりました。Xiaoice は、昨年 WeChat でリリースされて以来、数百万のフォロワーがいる人気ボット。同じ技術が採用されているりんなは、 LINE で楽しむことができます。ボットが友達と呼べる日は遠い未来の話ではありません。 チャッ

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

あなたの見ている世界はあなたの世界 今は検索をすることなく、膨大な情報を自動的に手にいれることができます。仕事柄、Web・アプリデザインをしている方とソーシャルメディアで繋がっていることから、Facebook や Twitter を開くだけで、自分好みの情報が日々流れてきます。何をしなくても情報が入ってくるという日々は、フィードリーダー（RSSリーダー）に気になるブログを登録して、定期的に管理をしていたときとは大きな違いです。 ますます増えるコンテンツの中から、自分にとって必要な情報を選ぶのは簡単なことではありません。そこで「友達」「知り合い」「信用できる人」というフィルターによって厳選されるソーシャルメディアは情報収集に役立ちますが、自分にとって都合の良い情報だけが集まったフィルターバブルに陥りやすくなります。 ソーシャルメディアは、ニュースフィードと呼ばれる新着情報を最初に表示させて、

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

今なぜデザインシステムなのか 4月16日 Webridge Kagawa 主催で「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法（#wmsp20）」というワークショップを開催しました。昨年はコンテンツ戦略やペルソナなど企画・設計寄りのワークショップを実施していましたが、パターンラボは少し実装に寄り添ったカリキュラムにしました。ポッドキャストでも話したことがありますが、「考える」と「作る」の間にはちょっとした溝があると思います。ペルソナやカスタマージャーニーマップで利用者像や彼らのもつ課題を視覚化すれば、現実的な実装ができるというわけではありません。実装へ近づけるためには、考える人と作る人が一緒に課題共有するための場が必要と考えています。 例えば Web デザインでは数年前から、パソコンではなくスマートフォンやタブレットをはじめとしたモバイル機器での使いやすさを優先するモバイルファ

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

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

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

予習として洋書はいかがですか？ 前回おすすめデザイン入門書を 10 冊紹介しました。どれも自信をもって紹介できる書籍ですが、選書しているときに訳本がない書籍を幾つか見つけました。私の場合、読んでいる本の半分以上は洋書なので、翻訳されていないものは渋々リストから外すことになりました。 そこで今回は、2016年2月現在、訳本が出版されていない洋書を 8 冊紹介します。前回と同様、Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍です。いずれ翻訳される可能性があるので、そのときに備えてメモ程度に見ていくと良いかもしれません。 UI is Communication UI デザインは利用者体験を考える上で、ほんの一部でしかありませんが、視覚的に表現されることから体験に大きな影響を及ぼします。UI デザインから利用者のこと、体験のことを掘り下げていく際、この

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

Peach🍑を紹介する記事で、絵文字が世界的な共通言語になりつつあると紹介しました。日本でも Twitter が紅白歌合戦用の特別ハッシュタグ＋絵文字を実装するなど、絵文字がコミュニケーションにおいて重要な位置付けになりつつあります。 しかし、アクセシビリティはどうなのでしょう。 目では絵として表示されていますが、中身はコードです。実際、どのように読み上げられるのでしょうか？そもそも読み上げられているのでしょうか？ サポートが広がる絵文字読み上げ 年々音声読み上げの精度は上がってきており、絵文字サポートもそれに合わせて増えてきているようです。例えば Google Voice は、2014 年に絵文字読み上げをサポートしましたし、NDVA でも有志の方が絵文字読み上げのための辞書を無料で配布しています（英語のみ）。 iOS の VoiceOver は、特別なアプリをインストールしなくてもす

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 に魅力を感じていなかっ