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

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

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

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

デザインってなんだっけ？ デザインはこれから重要になる。 デザイナーの端くれである私ですが、そんなこと言っている状態ではないのでは？と思うことがあります。 2016 年はデザインの重要性を伝える前に、デザインへの信用を取り戻すためのアクションが必要ではないかと考えています。ここ数年、海外（特に欧米）ではデザインの役割が大きく進化してきていますが、それを真に受けて日本で同じように実践しても意味がないと思います。なぜなら、デザインという言葉や、デザイナーの仕事における考え方の『前提』が大きく異なるからです。 デザインの価値を商業的なものだけにせず、人々や社会に良い影響を及ぼすためのデザインをしようという意向を示すデザインマニフェストが1964年に発表されています。見た目だけでなく、問題解決のためのデザインを考えていこうという動きが 50 年前からあります。また、アメリカのデザイナー協会 AIG

批評は聞くことから始まる デザインをはじめとしたクリエイティブプロセスにおいて意見交換は欠かせません。いちど自分の手から離すことで発見できることはたくさんあります。しかし「これはどうですか？」と見せるだけでは求めるフィードバックを得ることは難しいです。誰もが最初からデザインについて会話ができるわけではないので、デザインの批評（critique）の進め方に注意を払わなければいけません。 わざわざガイドラインまで作ってしまうと、かえって窮屈になってしまいます。構えて会話するより、平等にあれこれ話せるのが理想的です。そうした雰囲気をつくるために、デザインをみせるデザイナーだけが努力すれば良いというわけではありません。批評に参加するすべての方がちょっとした気遣いをすることで良し悪しを決める場から、ゴールに向かうための改善の場になります。 批評する側が気をつけること すぐリアクションしない。どのよう

マーケティングとデザインの共通点 2015年6月27日大阪 Re:Creator’s Kansai 主催のイベント「基礎からきちんとマーケティング」に登壇しました。デザイナーとして働いているのでマーケティングは畑違いのように見えますが、以前からマーケティングを扱った記事をたくさん書いています。カスタマージャーニーマップのようなマーケティングの手法がデザインプロセスの一部として採用されていたり、デザイン思考がマーケティングに取り込まれているなど、共通するところが幾つかあります。 例えば UX を学んでいるうちに行動経済学に興味を持つ方もいるでしょう。行動経済学はデザインにも取り込める興味深い学問ですが、マーケッティングを深く知る上でも役立ちます。デザインとマーケティング両方に興味をもつことは、デザイナーとしてごく自然のことではないでしょうか。人のこと、市場のこと、社会のことを知らないとデザイ

良いものは理解される … わけではない 良いデザインは語らなくても、相手に伝わるという言葉を耳にしたことがあります。そういった瞬間に出くわすこともありますが、少し見るだけでも伝わるデザインばかりではありません。一見シンプルなものでも、デザイナーがどのような経緯でそこへ辿り着いたかを理解するのは困難です。 良いものを作れば理解してもらえる場はあります。しかし、デザインへの理解を共有していない人が相手だと、見せただけでは伝わりません。そもそもデザインを専門分野にしていないからこそ、デザイナーにデザインを頼んでいるわけですから、当然だと思います。デザイナーは、良いデザインを生み出すことは当然ですが、それと同じくらい自分のデザインを営業する能力も必要です。 「デザインを理解してくれない」と嘆くのはナンセンス。デザインを理解してもらうのはデザイナーの仕事ですし、それを相手が理解できる言葉で伝える工夫

コンテンツをスマートにするには、ページの概念を取り払ったコンテンツの細分化と管理が欠かせませんが、利用者へ届けるための技術も無視できません。数年前であれば、ネイティブアプリでしかできなかったことも、Web 技術で可能になりつつあります。 マークアップの仕方がここ数年で変化したように、Web 技術も激変してきています。従来のような全ユーザーに同じコンテンツを表示するのではなく、利用者の環境・文脈に応じてきめ細かな配慮が可能になりつつあります。 Web やアプリのデザインは、技術のことを知っているか知っていないかで大きく変わります。今この瞬間のデザイン（トレンド）だけでなく、これからどうなるのかを考えながらデザインするという観点が今の Web デザインに欠けていると感じることがあります。今 Web でできることは数年前と大きく変化していて、それが新しいデザイン提案に繋がるものもあります。Aja

それって本当にオリジナル？ レスポンシブ？フラット？ビデオをつかった背景？CSSアニメーション？ゴーストボタン？いろいろな『トレンド』を見て勉強している間に、すべて導入されている 14ドルのテンプレートをすぐに手に入れることができます。 CMS を活用して情報が更新しやすいレストランサイトを構築したい？専用の WordPress テーマを使えばすぐに完成します。英語だからダメと思うかもしれませんが、UI のローカライズが簡単できるように工夫されているので、使うことを諦めることはありません。 制作者の視点で語られる『オリジナルのデザイン』には、ひとつの矛盾があると思います。最新のデザイン動向を追いかけ、それを実践することが良いデザインに繋がると考えることがありますが、トレンドになる表現はすぐにコモディティ化されていきます。オリジナルを求めているつもりが、誰でも使えるものをゼロから手作りにして

Early on, all of our movies suck. 我々の映画は最初はすべてヒドイものである。 これは「 ピクサー流　創造するちから（原書 Creativity Inc.）からの一節。ピクサーといえば、最初の長編映画「トイ・ストーリー」以来、ずっとヒットを飛ばし続けている映像製作会社。CGのクオリティもさることながら、彼らが作り出すユニークな物語が人気の秘密だと思います。そんなピクサーが「最初はすべてヒドイ」と本中では断言していますし、「ヒドイ状態からヒドくない状態にすることが仕事」とまで言い切っています。映画を見ている立場からすると信じられない言葉ですが、デザインを含めたクリエイティブな仕事に共通していると思います。 Webデザインにおけるデザインカンプが良い例ですが、最初からほぼ完璧なものを求められることがあります。これはクリエイティビティとは雷が頭に落ちてきたかのよう

内輪受けは止めにしようではないか LSD LAB で公開されている UIデザイナー不要説は、テクノロジーと付き合うデザイナーであれば一読しておきたい記事のひとつです。私が記事を読んで感じた課題は、 UI デザインが重要視されているかどうかということではなく、果たしてデザイナーは デザインを営業できているかどうかというところです。 たとえビジネスゴールが共有されていたとしても、デザイナーが考える UI デザインの価値と、それ以外の方が考える UI デザインの価値が異なることがあります。特にデザイナーが考える価値は、内輪受けになりやすいことが多々あるように思えます。デザイナーが「すごく良いよね」「イケてるね」というものは、ほとんどの場合デザイナー以外には理解されません。内輪で分かりやすい言葉や感覚で語りかけても、聞き手は「？」（価値を感じない）になってしまいます。 今でもデザイナーのなかでは「

米国の金融大手キャピタル・ワンが UX コンサル会社である Adaptive Path を買収しました。その２ヶ月前にはモジュール式スマートフォン「Ara」を手がけた Daniel Makoski 氏が同銀行へ移籍しています。金融機関という巨大な組織でいかにデザイン思考が広がり、形になるのか今から楽しみです。ひとつの案件としてではなく、組織の一員として内側から変えていくという Adaptive Path のアプローチは、最近の私の仕事の仕方と重なるところがあります。 デジタル化は進んでいるものの、改善余地が数多く残されている大手金融機関。一般企業とは比べものにならないほど、安全性、プライバシー、危機管理の整備と実装を考慮しなければならないわけですから一筋縄にはいかないと思います。米国では銀行は顧客ロイアリティが低いビジネスとされている理由も、私たちの生活の合ったサービスが提供されていないか

コンテンツ管理というと、真っ先に CMS （コンテンツ管理システム）を連想する方はいると思います。どのシステムを導入するかを考える前に、そもそも Web におけるコンテンツ管理とは何かを理解しておく必要があります。理解を深めることで、クライアントが抱えている課題と解決のための模索がしやすくなります。 コンテンツを管理するということは、システムの中にデータを保管し、様々な形式に書き出すことだけに留まりせん。多くの場合、システム導入だけでは解決しない課題にぶつかります。CMS を導入しただけでは、Web コンテンツ配信における課題の一部を解決したに過ぎません。 コンテンツ管理で解決しなければならないことは、主に以下の7点です。 コンテンツの保管 テキストだけでなく画像や PDF など様々な種類のコンテンツを保管できるような仕組み。検索性が求められるだけでなく、誰がどのコンテンツにアクセスできる

横並びは複雑化の第一歩 Webサイトの設計をする際、必ずといっていいほど縦にコンテンツを並べて構成を考えるようにしています。どのような人が、何を求めて Web サイトに訪れているのかというシナリオを基に構成を考えていくわけです。詳細なレイアウトを考えるのではなく、情報の流れが適切であるかどうかを判断するための工程にしています。 パソコン向けの Web サイトデザインの悪い癖のひとつに、「同じくらい重要だったら、横に並べる」というのがあります。広いスペースがあったパソコンが主流の時代ならではのアプローチですが、今は状況が大きく異なります。配信者側にとっての『重要』を出すことは間違っていません。しかし、あれこれ重要だからという理由で隣り合わせにしてしまうと、様々なデメリットが生まれます。 訪問者に迷いが生じる 直接関係のないコンテンツが横に並ぶことで視点の動きが多くなる可能性があります。また、

PVが人気を証明しているとはいえない ページビュー（PV）は、とても気持ちいい数値です。自分が作ったコンテンツの反応を分かりやすい数値で示してくれます。また、多くの広告モデルが PV を基に価格が設定されているので、ビジネスに直結している数値といえると思います。しかし、PV が高いから、訪問者が満足しているとは限らないですし、顧客ロイアリティに繋がっていないかもしれません。そこで、ソーシャルメディア … という意見もありますが、そこの評価指標も RT 数、Like 数といった PV と似たような数字に留まっている場合があります。 特にブログのようなメディア配信をしていると、PV 至上主義になりがちです。PV を稼ぐために釣りタイトルを付けたり、手軽なお菓子コンテンツで、人を集めようとしてしまいます。もちろん、それをひとつの『戦略』といってしまえば、そうかもしれません。しかし、それで欲しい読

小さなパッケージとしてのカード 前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。

今年のはじめ「Quantifying the User Experience」という書籍を読みました。利用者体験をいかに数値化するのかという課題を、統計学と掛け合わせて解説しています。利用者の行動の観察やアンケートといった、ユーザー調査の結果を数値化して UX に活かそうという内容です。所々、数式が出てくるなど、他の UX 関連の書籍とはひと味違う難解な書籍でした。 実は、この書籍がオススメだから記事を書いているわけではありません。これは UX 実践者（もしくは UX デザイナーと呼ばれる人たち）が陥る問題に繋がるのではと思い、この書籍を紹介しました。UX も他の分野と一緒で、深く掘り下げないと理解できないところがたくさんあります。利用者の体験を考え始めると、必然的に社会学や心理学に目が向いてしまうのもそのためでしょう。また、方法論も確立されはじめたこともあり、海外からたくさんの情報が流れ

撮影: 田中舘 一久 10月19日、CSS Nite in SENDAI, Vol.7 が仙台で開催されました。今までありそうでなかった こもり まさあきさんと一緒に講演できました。私と彼の切り口も話し方も異なりますが、共通のメッセージが含まれているなと、勝手に親近感を抱いております。 無言語の言語化 今回は、Webサイトの核をデザインするための最初の一歩 と題して、ニュアンスがなんとなく伝わっているだけのコンセプトを、共有できるように言語化してデザインに繋げていこうという話をしました。最近コンテンツ設計の話が多かったですが、今回はその前にやらなければならないことを中心に掘り下げて解説しました。 誰もが企業・団体の良さを引き出した Web サイトを作りたいと思っています。しかし、「企業・団体の良さ」や「良い Web サイト」の定義があやふやのまま、制作フェイズに入っている場面を見かけること

今注目されている Micro CMS 従来は Joomla, WordPress, Drupal, Movable Type 辺りから制作者の肌に合うツールを選ぶ場合がありました。これらは今でも十分に使える高機能 CMS ですが、機能が多過ぎることから、メンテナンス、運営、ワークフローをしっかり設計していないと、複雑で扱い難いものになることがあります。無料から使える小中規模 CMS は出そろった感がありますが、ここ 1, 2 年ほど新しい CMS を幾つか見かけるようになりました。 Pico : 静的ファイルを管理する CMS Dunked : ポートフォリオに特化した CMS Koken : こちらもクリエイティブ向け CMS Leeflets : 1ページサイトを手軽につくる CMS Ghost : Markdown で書けるブログツール Dropplets : こちらも Markdo