11月28日に MTDDC Meetup Tokyo 2015 が開催されました。Movable Type に関わるセッションだけでなく、特定の CMS に囚われないディレクションやサイト設計・運用の話もありました。昨年もそうでしたが、WordPress や Drupal といった他 CMS のコミュニティメンバーを交えた座談会もあるのも MTDDC の魅力です。 今回は「データと上手に付き合ってデザインする方法」と題して、クリエイティブとデータを繋げるための考え方や手法を紹介しました。 数字が嘘をつくこともある 近年、すべてを数値化して測定・評価しましょうという動きがあります。本サイトでもデータの重要性を伝え続けていますが、行き過ぎたアプリーチになることもあります。様々な利用者情報を低コストで取得できるようになり、データ分析がより身近になったことは素晴らしいことです。しかし、デザインの決

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

エンジニアの視点を学ぶデザイナーとエンジニアは仕事の仕方も考え方も異なります。しかし、良い製品をつくるためにはお互いの協力が欠かせません。考え方が違うからといってそのままにしておくと、品質の低下に繋がることがあります。 「デザイナーはユーザー（人）の声や行動に耳を傾けるべき」「彼らのニーズに合わせた提案や設計をすべき」といった論調を見かけることがありますが、これはユーザーだけでなく、一緒に仕事するエンジニアにも適応できます。すぐ側にいるエンジニアを考慮した提案ができないのであれば、ユーザー相手はもっと難しいと思います。 今でも仕事でビジュアルデザインを担当することがありますが、エンジニアと仕事をする際に以下の 6 点に気をつけています。 1. どういうタイプのエンジニアか知るすべてのエンジニアがデザインに興味があるとは限りません。中には仕様を指示してもらえればそれで良いといった方もいます。

良いって何ですか？ デザインの話をするのは、たとえ本業をしている方にとっても難しいことがあります。それが他分野の方ということになると、なおさらです。目的に沿って議論することで、デザインがより洗練されるわけですが、別の部署、他の役職の方との会話になると、なかなかうまくいかないことがあります。 その理由は、彼等がデザインのことを理解していないからというより、お互いが考える「正しい」を理解していないからということがあります。 Webサイトやアプリを設計・開発されている方全員「良いものを作りたい」と考えています。ただし、その「良い」のニュアンスは立場によって少し異なることがあります。「良い＝売れる」と解釈する人もいれば「良い＝使いやすい」と捉える方もいます。それぞれがもつ「良い」という価値観が、その人の意見や考え方に大きな影響を及ぼしています。 言葉だけでは理解ができない デザイン案を見せると、以

先月は東京、そして今月は大阪 で、クリーク・アンド・リバー社が主催する Web ディレクター向けのセミナーで登壇しました。私自身、Web ディレクターと名乗っていないので、依頼を受けたときは半信半疑でした。しかし、Web ディレクターをはじめとした「作り出す人」にある共通の話題があると考え、登壇を決めました。 点をどのように線にするか ツールの使い方。マークアップの仕方。コードの管理方法。ペルソナの作り方。コンセプトを固めるためのワークショップの仕方 … などなど。こうした行程の中にある『点（作業）』は、書籍や Web でたくさん見つけることができます。どれも重要ですが、行程全体からみたとき、その手法がどのような意味を持っていて、それを基にどうゴールに向かって走れば良いのか見えないことがあります。 点は理解できたけど、それをどう線にしたら良いか分からないわけです。 例えば社内ワークショップ

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

9月23日に第6回 .NET中心会議が開催されました。エンタープライズ向け、B2B 向けのシステムを開発している方が多く参加されるイベントで、今回のテーマは「UX」でした。製品発表会やサービス紹介に必ずといっていいほど耳にするようになった「体験」というフレーズ。デザイナーだけでなく、エンジニアや経営者など幅広い方々から重要性が認知され初めているのが分かります。しかし、「UX」という言葉は人によって定義や強調するところがまちまちですし、範囲が広過ぎて結局よく分からないイメージが未だにあります。 昨年開催されたリクリのセミナー＆ワークショップで、分かり難い UX を具体化するためのアプローチを紹介しましたが、まだ課題は多いのが現状です。Web では深い議論が出来ないところから、「UX = 素敵なインターフェイスとインタション」という表層的な部分が先行しているところもあります。今後、多様化が進む

UI デザインとひとことで言ってもたくさんのことを考慮しなければいけません。単一機能のシンプルなアプリの設計だったとしても、UI の課題は山のようにあります。私自身、どこから始めたら良いのか分からなくなることがありますが、UI デザインを考える始めるために、ふたつの疑問を自分自身に問いかけるようにしています。 利用者が期待に応えられるようなインターフェイスはなにか？ 利用者が目的に辿り着く為の明確な道筋はなにか？

昨年暮れから今年のはじめにかけて デジタルハリウッド大学院 秋葉原校にて「未来のインターフェイス」講座の講師をしていました。全 8 回のこのコースは、予測不可能な社会でデザインをしていく上で、少しでも早くアイデアを形にして伝えるためのノウハウと実践に近い演習を行いました。未来的（SF的）なインターフェイスを考えるというよりかは、今あるデザインの課題へのアイデアをプロトタイプし、未来へ繋げていくためのプロセスを学ぶ講座になりました。 昨年の 5 月から、青森、名古屋、金沢でプロトタイプに関するセミナーやワークショップを行いましたが、デジハリ大学院での講座のための実験でもありました。そこでの経験でうまくいったこと、上手くいかなかったことを参考にしてカリキュラムを構築。1 回 1時間半の講座が 8 回あるコースは長いなと最初は思っていましたが、盛りだくさんの内容になりました。 Web サイト構築

従来のやり方は通用しない 上図は Economist Intelligence Unit が 2012 年 11 月に発表した Outside looking in: The CMO struggles to get in sync with the C-suite（PDF）から抜粋したものです。CMO が現状、投資に力を入れている分野と、3 年後重要になると考えている分野の割合を比較しています。あくまで CMO の希望ではありますが、今後のマーケティングの青写真といえると思います。 ソーシャルメディアやモバイルといった新しい分野が伸びをみせていて、ブランド広告が大きく落ちているのが分かります。また、CRMという顧客のデータを管理をする時代から、それらのデータをつかってどのような傾向や対策が見出せるのかという視点に変化しているようにも見えます。このデータから仮説する今後のマーケティングの姿

このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webのデザインは枠のない世界である Webデザインであるもの、そうでないもの Windows中心設計は5年前の話 すべてのデバイスやソフトウェアで同じように Web サイトをデザインするのは不可能といっても過言ではありませんし、むしろ違いを受け入れ、利用者の環境やニーズを尊重するのが Web デザインの本来あるべき姿です。柔軟性・拡張性をもつ Web ですが、Web デザインはページの概念を強く意識したビジュアルデザインが最優先された時期がありました。 パソコンが Web アクセスの中心だった頃は、利

Big IA 広義としての IA 。映画監督やオーケストラの指揮者のような存在で、製品やサービスのビジョンを形にする役割。 Small IA 狭義としてのIA。プロジェクトに関わる人々が理解できるようにビジョンの詳細を設計し、具体化していく役割。 Peter Morville 氏が 2000年に寄稿した記事 で、Big IA と Small IA に明確なラインを引かず、情報システムの構造化という IA の核心を軸にしてコラボレーションをすれば良いと説いています。実際、多くの IA プロフェッショナルは Big / Small といった分類を過剰に意識することなく、いずれの設計に携わることもありますし、UXデザイナーと呼ばれる方とコラボレーションをしている場合もあります。 こうした現状を理解しているわけですが、IA で語られる話題が Big （ビジョンの設計）に偏り過ぎていないかと感じるこ

2月9日に東京で開催された World IA Day 2013 に参加してきました。前回の記事 で書いた今後の IA の課題のヒントになるようなメッセージを、イベントを通して幾つか見つけることができました。 今回は吸収した内容を自分なりにインフォグラフィックにしてみました。 イベントを通して『情報』にはデータベースに蓄積できるようなものと、掴み所がないものと二種類あると考えました。言い換えれば右脳的な情報と左脳的な情報があるといったところでしょうか。まったく違う存在のようにみえる二種類ではありますが、4つの段階を踏んでアーキテクチャ（構造）を作り出しているようにみえました。 Deconstruct （分解） Sort（分類） Compose（構成） Adjust（調整） つまり、感情やニュアンスといった掴み所のない情報だったとしても、ビッグデータを活用した情報の解析だったとしても、進むべき

最近 UX と UI を混同して表記されているのを見かけるようになりました。私もウケやすいということで、混同させたことがあります。しかし実際のところ UX と UI は同義語ではありません。良い UI デザインをすれば、UX が向上する可能性はありますが、必ずしもそうではありません。逆もしかりです。最近も UX と UIの違いを分かりやすく表現しようと、シリアルとボールの写真を使った例が登場しましたが、「そうでもない」という意見も多数ありました。 それでは、なぜ混同されやすいのかというと、今のスマートフォン向けのデザインを見るとヒントが隠されています。例えば Twitter クライアントの中で人気のある Tweetbot を見てみましょう。このアプリの中で装飾と呼べるデザインはどれだけあるでしょうか。ほぼ皆無だと思います。 スマートフォンという小さなスクリーンには、UI しか存在しません。

2012年2月18日、CSS Nite in FUKUIが開催されました。今回は「予測不可能な世界でWebデザインをしよう」と題して、今後のWebに必要とされる価値と制作のためのアプローチについて話をしました。2年前は聞いたことなかったようなサービスやデバイスが、あっという間に大企業に成長したり、広く普及する時代。先がどうなるか分からない中、私たちは今何ができるのでしょうか。 テクノロジーで変化する人の価値観 価値観は、どのようなテクノロジーと共に暮らしているかで決まる部分があります。「本を読む」にしても、紙媒体の書籍だけ想像する人もいれば、ケータイや電子書籍を想像する人もいます。「TVを見る」にしても、HDDレコーダーをつかって観覧している人と Apple TV を使っている人では番組を見る行為が異なります。 テクノロジーが物事の捉え方に大きな影響を与えているわけですが、近年テクノロジー

学べるところが多い楽天ページWebデザインに関わる様々な情報やノウハウが世界中で共有されているとはいえ、お国柄は存在します。Yahoo!でも、世界共通にみえる UI コンポーネントがありますが、アメリカと日本と中国ではアプローチが異なります。情報にメリハリをきかせているアメリカ。今の話題を中央にたくさん詰め込めるように工夫してある日本。クリックをしなくても膨大な情報を消化することができる中国。ポータルサイトをひとことで言ってもやり方がいろいろあることが分かります。 各国の Yahoo! を見て「欧米はシンプルなのに、日本や中国はなんかごちゃごちゃしている」と感じた方はいるかもしれません。なぜそんな小さなところに情報を詰め込むのか、なぜページを整理しなのか、メッセージを絞ってメリハリをつけないのか、といった悩みを抱えるデザイナーもいるかもしれません。 日本らしい忙しいデザインの代表例としてよ

2011年 UI/UX トレンドという記事で、モバイルWebデザインのノウハウがデスクトップにも影響し始めているという指摘をしました。Mac OSX Lion や Windows 8 のような OS だけでなく、Web サイトにも変化が見られています。スクリーンの大きさを活用してモバイル環境では再現が難しいダイナミックで動きが多いレイアウトも出て来ている一方、モバイルアプリの血を受け継いだかのような目的にフォーカスしやすく、目的までのステップと選択肢が少ない Web サイト / アプリケーションも次々と出て来ています。 今後デスクトップOS がモバイルOSのようになり、利用者がシンプルな操作と体験を求めやすい環境になれば、Web サイトも次第にシンプルになる可能性がありますし、そうしなければならない状況も出てくるでしょう。デバイスが変わっても同じような体験を作ることが必要になれば、デスクト

以前から、人の「楽しむ」という感情を理解し、その感情を助長することができるゲーム的な要素をアプリやサイトに取り入れることは有効な手段であると解説しています。しかし、ゲームの要素は foursquare がバッジシステムを取り上げる前から様々な場所にありましたし、Web の世界だけでなく、私たちの仕事にしてもゲーム的な要素はあります。社内外であるコンペやチームになって仕事を完成させるというプロセスはゲームそのものといっても良いでしょう。 今後私たちの仕事スタイルはよりゲーム的になっていくのでしょうか。 例えばタスクに応じてポイント制にするとどうなるでしょう。今まで時給制といった時間で報酬金額を換算する方法から、ポイントから金額を換算するという考え方が出来るようになります。バッジのようなシステムを取り入れることで、その人が何に対して信用度が高いのかというのも視覚化され、コラボレーションの促進に

Webをはじめとしたテクノロジーを利用したものには、馴染みのない機能や象徴的で捉え難いアイデアがあります。それらをスクリーンショットで見せたり、分かりやすい解説があったとしても伝わらない場合が多いです。そこで、他にある似たようなものと関連付けさせて理解しやすくします。これを私たちは「メタファー」と呼びます。 メタファーはパソコンの中にたくさん見ることが出来ます。アイコンデザインがその代表格です。絵としてフォルダを表現することで、頭の中で「幾つかの書類をまとめることが出来る」という本物のフォルダと関連付けがしやすくなり、操作を促すことが出来ます。フロッピーディスクアイコン (保存)のようにメタファーからシンボルへと進化した例外もありますが、機能やインタラクションを説明せずに利用者に伝えることが出来るメタファーは、アプリケーションデザインやWebデザインでよく使われます。 メタファーが作り出す