デザインフィードバックを始めやすくするためのシートを作りました
デザイン批評や伝え方のセミナーやワークショップはもちろん、関連記事も幾つか書いています。しかし、だからといって完璧なデザインの会話ができているわけではありません。デザインという言葉の捉え方を合わせるのに苦労することもあれば、いつの間にか話が脱線してしまうことも少なくありません。 書籍などで知識を得ることはできますが、知識があれば必ずうまく実践できるとは限りません。たとえ自分自身に高いスキルがあったとしても、周りを巻き込まなければコミュニケーションは成立しません。セミナーやワークショップを受講された方から「私は理解できたが、周りにどう言えば良いか分からない」という感想をいただくことがあります。デザインについて語るのに難儀している状態だと、建設的な会話を促すのは至難の業です。 記事やプレゼン資料を社内共有するのもひとつですが、スルーされてしまう場合もありますし、いざ会議の場になると忘れてしまう
ジェネレーティブUIデザインが作り方を変える
デザインツールのもうひとつの未来 「次世代デザインツールはどこへ向かうのか（後編）」で、デザインプロセスはよりチームスポーツのようになると書きました。デザインツールはより開発との連携がしやすくなり、より実装を考慮したデザインがしやすくなるのでは？と仮説しました。しかし、デザインと実装の溝がなくなることだけがデザインツールの未来の姿ではないと思います。 デザインツールにあるもうひとつの可能性が、ジェネレーティブデザイン（generative design）です。 ここでいう『ジェネレーティブ』とは、コンピューターアルゴリズムで何かを生成・構築するもの。ジェネレーティブアートであれば随分昔からあります。例えば Gerg Nees の Computergrafik は、コンピューターアルゴリズムによって作られたグラフィックアートを 1965 年に発表しています。最近だと Processing の
オトナがwebを殺さないために : could
「分からない」が将来を潰す 「インターネットってどうせ流行りでしょ？」 「FAXのほうが良いじゃないですか」 「今までのやり方で上手くいっているから必要ない」 小さな頃から web を当たり前のように使っていた人には信じられないですが、昔はそんなことを言っていた人がいました。企画提案をするにしても、過ぎ去っていく流行ではないことを説得するところからスタートすることもありました。 若い頃は昔の価値観にしがみついている人たちにどう伝えれば良いか分からなくて苦労しましたし、自分が『オジサン世代』になったら絶対こうなりたくないと思っていました。自分には分からないから、周りにはさせないみたいな態度が成長を遅れせてしまうのではないでしょうか。 『オジサン世代』になってしまった今でもそう考えながら仕事していますが、周りが次第に閉鎖的になっているのを見ると「ヤバいな」と感じることがあります。 「TikTo
次世代デザインツールはどこへ向かうのか 中編
実装を考えながら作れなかった従来のツール 6年前になりますが、 web のデザインは枠のない世界であると説明したことがあります。様々なスクリーンサイズのことを考慮して作らなければならないと頭で分かっていても、デザインツールでそれを実現するのが困難でした。10年以上大きな変化がなかったデザインツールに対して、実装側はどんどん進化し続けていました。Web だとフロントエンド技術とワークフローに大きな進展がありましたし、ネイティブアプリも 1 年おきに OS と周りの開発環境がアップグレードしています。 開発は目まぐるしいスピードで変化しているのに対して、デザイン環境は大きく変わっていなかったことが、今私たちが抱えているデザインと開発の溝の根源ではないかと考えています。2010年代はデザインツールの革命期と呼んでも良いくらい様々なデザインツールが出てきていますが、今まで遅れていた分を取り戻そうと
ユーザーデータの先にあるデザインの闇
ようこそ、ブラックミラーへ ユーザーデータは今のデザインに欠かせない存在です。レコメンデーションや操作の省略など、ユーザー体験の向上に役立っています。また、デザインを提案するときもデータがあるとないとでは説得力が違います。 「ユーザーのため」と耳障りの良い言葉を添えてユーザーデータを集めた先には何があるのでしょうか。それは本当にユーザーのためになっているのでしょうか。Google 社員向けに作られた「The Selfish Ledger」というビデオがユーザーデータを集めた先の世界を描いています。 2016年に作られたこのビデオは Google のプロダクトビジョンを描いたものではなく、Google のデザイナーの教育向けに作られたそうです。このビデオで描かれている世界を目指すべきなのか、それとも別の道や考え方を模索すべきなのか。見る人によって様々な意見が生まれそうです。 ビデオでは全人類
次世代デザインツールはどこへ向かうのか 前編
プロトタイプツールからデザインツールへ 私は前線で制作していませんが、Sketch 講座 をはじめデザインツールについて話すことがあります。Sketch を長く使っているのものの、Adobe XD、Figma 、 inVision Studio など他のツールも検証しながら、合いそうな現場にツールを提案するようにしています。 なぜ今デザインツールなのでしょうか。数年前からある プロトタイプツールと何が違うのでしょうか。閉じていたデザインプロセスを開くという意味では当時も今も変わりないと思います。ただ、Sketch、Figma などを代表するデザインツールはスコープが少し広いのが大きな違いです。 Proto.io に代表される 2013 年前後のプロトタイプツールは、インタラクティブな紙芝居に近いものでした。大まかな画面遷移と操作感を実機で体験できるものの、それ以上でもそれ以下でもないような
Sketchから学ぶコンポーネントデザイン : could
部品から設計することに慣れる デザインツールとして Sketch や Figma を推している理由のひとつにシンボルがあります。Adobe CC ライブラリのアセット管理とは異なり、デザインした部品（コンポーネント）を拡張したり組み合わせることができるのが魅力。様々なスクリーンサイズに耐えられるように作るのはもちろん、デザインを運用していくには、部品からしっかりデザインできるのはこれからのツールでは必須です。 コードが書ける人、コードを書く思考が分かる人であれば、部品から作ってレゴブロックのように積み上げるという Atomic Design 的な考え方は当然と思えるでしょう。なので、デザインシステムを作りましょうという考えに至りますが、画面の全体像から徐々にディテールを作るやり方でデザインしていた人には難しかったりします。いきなり部品から作ることに慣れていないですし、マクロ（画面全体）とミ
デザインの運用って何ですか？
公開しても終わらない コンテンツマーケティングの文脈でコンテンツの運用という言葉を耳にすると思います。いつ、誰に、何を、どのように配信するかを決めて、複数人で実践していくには運用が欠かせません。新しいコンテンツを作り続けなければいけませんし、現存コンテンツの維持・管理も必要になります。 コンテンツの運用で「公開したらあとは待つのみ」「納品したら終わり」という考えはありません。放置するとたちまち埋もれてしまい、存在していないのと同じになります。また、利用者の趣向・動向に合わせてチューニングをしていかなければ、ますます遠い存在になります。 公開したらデザインの仕事が終わるわけではないという意味でコンテンツの運用と似ていますが、デザインの運用は以下の点を解決することを目的とします。 コンテンツの量に依存した『固い』デザインにしない 基本的なことであれば短時間で実装ができる 誰が触っても最低限の品
デザインシステムに採用する色を決める5つのルール : could
始めの一歩としての色共有 ひとりのデザイナーに頼らず、チームで運用できる体制を作るためにも デザインシステム は有用なツールです。しかし、様々な UI コンポーネントと決まりごとが揃ったものを作るのは骨が折れる作業です。デザイナー（もしくはエンジニア）が独自で作って「さぁ使いましょう」と公開しても、使ってもらえるとは限りません。また、デザインシステムをどこで共有して、どのように使われるのかも考慮しなければならず、他社の真似事では済まないこともあります。 作る前から課題が山積みでなかなか手が出せないかもしれませんが、何か始めなければゴールに辿り着くことはありません。そんな現場でデザインシステムを作る場合、色から始めることをオススメしています。 色なんて単純なところは出来ていると思う方は多いと思います。デザイナーであればパレットにしてまとめているでしょうし、エンジニアであれば色は変数にして整理
デザイナーにもある詐欺師症候群とその対処法
新人、ベテラン関係なく起こりうる実績を積んでいたとしても自信がつかない、むしろ自分はペテン師ではないかと疑ってしまう「詐欺師症候群（インポスター症候群）」という症状があります。2 年ほど前に女優のエマ・ワトソンが同症状に悩まされていると告白して話題になりました。彼女ほど成功していなかったとしても誰にでも起こりうる症状です。 私自身も詐欺師症候群に悩まされることがあります。Web やアプリのデザインは誰もが同意するような正しい手法はありませんし、むしろ走りながら覚えることが多かったりします。絶対正しいと言えるものが極めて少ないですし、何を信じて実践すれば良いのか分からないこともあります。常に悩んでいるわけではないですが、時に酷く落ち込んだり、外へ発信するのが怖くなることがあります。 UXに関する質問を受けたときも、同じような症状があるかもしれないという印象を参加者からも受けました。大企業でな
ピクサーから学ぶクリエイティビティの秘密
Early on, all of our movies suck. 我々の映画は最初はすべてヒドイものである。 これは「 ピクサー流 創造するちから（原書 Creativity Inc.）からの一節。ピクサーといえば、最初の長編映画「トイ・ストーリー」以来、ずっとヒットを飛ばし続けている映像製作会社。CGのクオリティもさることながら、彼らが作り出すユニークな物語が人気の秘密だと思います。そんなピクサーが「最初はすべてヒドイ」と本中では断言していますし、「ヒドイ状態からヒドくない状態にすることが仕事」とまで言い切っています。映画を見ている立場からすると信じられない言葉ですが、デザインを含めたクリエイティブな仕事に共通していると思います。 Webデザインにおけるデザインカンプが良い例ですが、最初からほぼ完璧なものを求められることがあります。これはクリエイティビティとは雷が頭に落ちてきたかのよう
カードUIとコンテンツのパッケージング
小さなパッケージとしてのカード 前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。
必要なコンテンツを見つけるシナリオつくり
すべてのコンテンツが重要ではない 「コンテンツは既にある」「当然コンテンツは重要だから、きちんと見せる」という考えは珍しくありません。しかし、すべてのコンテンツが重要とは限りません。 リニューアル案件だと、コンテンツが既に揃っているかのように見えますが、実は削除すべきコンテンツが幾つか隠れています。きちんと作ってあるかのように見えるコンテンツも、調べてみると、利用者にもクライアントにも望まれていないコンテンツがそのまま残っていることがあります。コンテンツを一望することができる、コンテンツ インベントリー をつかえば、古いコンテンツ、重複しているコンテンツ、誰もアクセスしていないコンテンツが見つけやすくなります。また、現行のブランド戦略や伝えたいメッセージと合わないコンテンツも削除か、編集・結合の対象になります。 Web は無限にコンテンツを保管しておくことができるので、何でも『とりあえず』
コンテンツ提案を生み出す対話のポイント
今のコンテンツの状態を書き出す「Content Inventory (コンテンツ・インベントリー)」は、Webサイトだけでなく、アプリ開発の際にも役立つステップです。ひとつひとつの画面を見ているだけでは気付かなかったことも、表にしてまとめると、重複していたり、古かったり、間違った情報が表記されているところが見つかりやすくなります。 コンテンツ講座でもインベントリーの重要性と始め方を解説したものの、難しいのは数百ページ分のコンテンツを表にまとめて調べるところではありません。本当に難しいのはそのあとどうするのか？という部分です。例えば、重複コンテンツや Web には適さないライティングが増えないようにするための処置はできます。 ワークフローの見直し: CMSの機能を使うだけでなく、組織の誰がどのようなタスクをするのかを確認する ライティングガイドラインの制定: 文章の構成から、Web に適した
UIだけでもデザインできる理由
UI（ユーザーインターフェイス）は、いつの頃からか魅力的な視覚要素が含まれた GUI として語られるほうが多くなりました。これはある種、デザインを装飾としてのみ捕われてしまう状況と似ているところがあります。 では、ユーザーインターフェイスとは一体何なのか。スケッチしてみました。 昔からあるデスクトップでも、Google Glass のような未知のデバイスでも、人とコンピュータの関わりは必ずといっていいほど発生します。 人が何かをインプットすることで、コンピュータは処理したデータをアウトプットして人に伝えます。ユーザーインタフェイスとは、人のインプットを助長したり、コンピュータが処理したデータを人が理解できるようにアウトプットする役割を果たします。つまり、人が操作するコンピュータとの関わりを円滑なものにするのがユーザーインターフェイスの基礎と捉えることができます。UI を HCI (Huma
言葉はグラフィックより大事なインターフェイス
2013年3月16日にAndroid Bazaar Conference 2013 Spring が開催されました。昨年に引き続き今年も登壇。前回はゲームをテーマにして話をしましたが、今回は「コンテンツで改善する UI デザインの極意」と題してコンテンツと UI をテーマに話をしました。 見た目が綺麗だから良い UI というわけではない UI のインスピレーションとして Dribblbe や Android Patterns のようなギャラリーサイトを見ている方は多いと思いますし、「素晴らしい UI のまとめ」と名付けた記事も、だいたいはこうしたギャラリーサイトを参照していることが多いです。 実装まで携わった経験がある方ならなんとなく分かると思いますが、Dribble で紹介されている UI アイデアの多くは現実味がない想像図が多く掲載されています。実装しようとするならばパフォーマンスや操
アイデアを引き出すゲームストーミングと学びのゲーム化
ゲームの要素を盛り込むことで、難しい問題の解決に繋げたり教育に活用することを「シリアスゲーム」と呼んでいます。最近あまり取り上げていませんが、シリアスゲームに関しては 3,4年前に高い頻度で記事として紹介していました。ダルフール紛争の難民問題どう解決するかをゲーム化した Darfur is Dying。2004年スペインでおこった列車爆破事故を基にした Madrid などなど。Kuma/War というサイトには世界中の紛争・戦争をモチーフにしたゲームがたくさん紹介されているだけでなく、実際遊ぶこともできます。ただ銃を撃ちまくったり点数を稼ぐというゲームではなく、与えられた状況化でいかに最適なソリューションを提供するのかという考え方をゲームを通して学ぶことができます。 シリアスゲームというジャンルは元々アメリカで始まったらしく、Serious Game Initiative という機関があり
UIデザインガイドラインのまとめ : could
UIUXガイドライン UIデザインガイドラインのまとめ デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日本語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction G
Microformatsとモバイルの関係
様々なアプリケーションを立ち上げるパワーもなければ、並べて眺めるだけの十分なスペースもないモバイル環境。それゆえデータの連携は使いやすさを向上させるひとつの鍵といえますし、ウェブサイト間で出来るのであれば、モバイルブラウザひとつ立ち上げておくだけですべて完結するかもしれません。 iPhone では vCard や iCalフォーマット (ics) をブラウザからダウンロード出来ないようになっています。つまり、カレンダーに書き留めておきたい情報がウェブ上にあったとしても、一旦カレンダーに切り替えて自分で書き込まなくてはならないというアナログチックな作業が必要ということになります。そこで Microformats を摘出して、自分が利用している Web サービス へ情報を自動入力するという形であれば iPhone だけでなく他のモバイル機器でも考えられるソリューションだと思います。 Bookm
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
