デザインシステムに関わるいろいろなプロセスを図にしてみた
今までも何度か デザインシステム に関する記事を書いてきましたが、手段や考え方が中心でした。今回はプロセスに注目して、代表的な課題を図にしてみました。すべてのケースに当てはまるわけではないですが、参考にしてください。 大まかな進め方 「デザインシステムを作りました！」とドカンと発表したほうがインパクトがあるように見えますが、苦労したわりには誰も使わないものになる可能性が高いです。実際はデザインシステムの中にあるものを小さく切り出して少しずつ変えていくことになります。 正攻法であればデザイン原則から始めたほうが良いと思っていますが、組織としてどうあるべきかといった根本的なところが明文化されていないのであれば、そこからスタートしたほうが良いでしょう。デザイン原則があったほうがデザインの議論がしやすくなるので早期にもっておきたいですが、1 日でも早く成果を出したいのであれば、まず色からはじめてみ
ジェネレーティブUIデザインが作り方を変える
デザインツールのもうひとつの未来 「次世代デザインツールはどこへ向かうのか（後編）」で、デザインプロセスはよりチームスポーツのようになると書きました。デザインツールはより開発との連携がしやすくなり、より実装を考慮したデザインがしやすくなるのでは？と仮説しました。しかし、デザインと実装の溝がなくなることだけがデザインツールの未来の姿ではないと思います。 デザインツールにあるもうひとつの可能性が、ジェネレーティブデザイン（generative design）です。 ここでいう『ジェネレーティブ』とは、コンピューターアルゴリズムで何かを生成・構築するもの。ジェネレーティブアートであれば随分昔からあります。例えば Gerg Nees の Computergrafik は、コンピューターアルゴリズムによって作られたグラフィックアートを 1965 年に発表しています。最近だと Processing の
職種を超えたコミュニケーションデザインを考える
2018年9月8日 builderscon tokyo 2018 （#builderscon）に登壇しました。様々なタイプのエンジニアが集まる大イベント。エンジニア寄りの話ばかりの中でデザインの話をしてきました。とはいっても、直球のデザインの話をしても面白くないと思ったので「デザイナーとうまく協働する方法」というコミュニケーションについて今やっているコトと今後の課題について話しました。 職種を超えた言語共有の難しさ ニュアンスだけでなく言葉ですら捉え方は様々です。デザイナーの間でさえ「デザイン」という言葉から思い浮かべる職域や働き方が微妙に異なります。「プロダクトのあるべき姿」であればなおさらです。人によって「良い」の定義が異なれば、優先順位も微妙に変わります。 こうした課題を解決すべく、言語化・視覚化があちこちで行われています。ペルソナを作るのもひとつですし、プロトタイプも方向性を共有す
データに踊らされないようにするためのデザインアプローチ
11月28日に MTDDC Meetup Tokyo 2015 が開催されました。Movable Type に関わるセッションだけでなく、特定の CMS に囚われないディレクションやサイト設計・運用の話もありました。昨年もそうでしたが、WordPress や Drupal といった他 CMS のコミュニティメンバーを交えた座談会もあるのも MTDDC の魅力です。 今回は「データと上手に付き合ってデザインする方法」と題して、クリエイティブとデータを繋げるための考え方や手法を紹介しました。 数字が嘘をつくこともある 近年、すべてを数値化して測定・評価しましょうという動きがあります。本サイトでもデータの重要性を伝え続けていますが、行き過ぎたアプリーチになることもあります。様々な利用者情報を低コストで取得できるようになり、データ分析がより身近になったことは素晴らしいことです。しかし、デザインの決
コードが教えてくれるデザイン思考
今プログラミングを教育に取り組もうという声が高まっています。CODE.orgのようなサイトも立ち上がっていますし、Scratch のような子供から楽しめるビジュアルプログラミングもあります。 デザイナーの中でもプログラミングを始めたい方もいると思います。WWDC 2014 で発表された Swift は、スクリプト言語のような感覚でコードが書けるので、始めるには良い機会なのかもしれません。 ただ、デザイナーの立場からみると、プログラミングは遠い存在に見えることがあります。しかし、「問題解決のため」という視点からみると、デザインとプログラミングには共通点がたくさんあります。人間中心デザインに基づいた発想にも、実装可能なところまで落とし込んで模索しないと、夢心地なアイデアになることがあります（もちろん自由な発想が必要なときもありますが）。コードを書くひとの考え方を取り入れることで、アイデアを洗練
CMS導入前にしておきたい質問
今注目されている 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
言葉はグラフィックより大事なインターフェイス
2013年3月16日にAndroid Bazaar Conference 2013 Spring が開催されました。昨年に引き続き今年も登壇。前回はゲームをテーマにして話をしましたが、今回は「コンテンツで改善する UI デザインの極意」と題してコンテンツと UI をテーマに話をしました。 見た目が綺麗だから良い UI というわけではない UI のインスピレーションとして Dribblbe や Android Patterns のようなギャラリーサイトを見ている方は多いと思いますし、「素晴らしい UI のまとめ」と名付けた記事も、だいたいはこうしたギャラリーサイトを参照していることが多いです。 実装まで携わった経験がある方ならなんとなく分かると思いますが、Dribble で紹介されている UI アイデアの多くは現実味がない想像図が多く掲載されています。実装しようとするならばパフォーマンスや操
アクセシビリティから変わるビジュアルデザイン
W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。 アクセシビリティの 4 原則は以下のとおりです（翻訳サイトより抜粋）。 知覚可能 情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。 操作可能 ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。 理解可能 情報およびユーザーインターフェースの操作は理解可能でなければなら
利用者の意図から探るサイトデザインの最適化
以前から文脈によってコンテンツ配信が活かされるという話はしてきました。テクノロジーを活かすことで、適確な文脈を読み取ってコンテンツ配信が可能になるのではないかという提案をしてきたわけですが、デザインプロセスとしてコンテキストを考えることが重要になることもあります。今回は企業の製品ページに注目して、文脈とコンテンツ配信がどう結びついているのかを検証していきます。 このように製品ページに HTML版と Flash版と 2つ用意されていることがあります。 同じ AQUOS PHONE の紹介ページですが、ソーシャルメディアで共有されている数から予測すると、アクセス数は HTML ページのほうがはるかに高いと思います。また、購入・お問い合わせまでの導線も明確なので、コンバージョンにも違いがあると予測されます。製品についてもっと知りたいというニーズに応えるのであれば、自己アピールの要素が強いプロモー
ミニマリズムUIの課題と対策
実世界のオブジェクトのような質感を UI に加えることで、使いやすさを向上させるアプローチは 親しみやすさを生み出すことから、インターフェイスデザインによく採用されるようになりました。これとは別にアプリの UI デザインでよく見かけるのが、モダニズムを彷彿させたミニマムなデザイン。装飾を最小限に抑え、グリッドで整理された見せ方になります。 代表的なのが Flipboard や Pulse のようなニュースリーダーアプリ。Textdeux や Sparrow といった仕事に使えるアプリでもミニマムなアプローチをよく見かけます。Instapaper や Read it Later は、すべての Web サイトをミニマリズムに再現できるアプリで、これらも高い支持を得ています。 もちろん、アプリデザインだけではありません。Windows Phone 7、Windows 8 で採用されている Met
流動し続ける時代におけるWebとの付き合い方
2012年2月18日、CSS Nite in FUKUIが開催されました。今回は「予測不可能な世界でWebデザインをしよう」と題して、今後のWebに必要とされる価値と制作のためのアプローチについて話をしました。2年前は聞いたことなかったようなサービスやデバイスが、あっという間に大企業に成長したり、広く普及する時代。先がどうなるか分からない中、私たちは今何ができるのでしょうか。 テクノロジーで変化する人の価値観 価値観は、どのようなテクノロジーと共に暮らしているかで決まる部分があります。「本を読む」にしても、紙媒体の書籍だけ想像する人もいれば、ケータイや電子書籍を想像する人もいます。「TVを見る」にしても、HDDレコーダーをつかって観覧している人と Apple TV を使っている人では番組を見る行為が異なります。 テクノロジーが物事の捉え方に大きな影響を与えているわけですが、近年テクノロジー
レスポンシブにデザインするために克服すること : could
画像の課題は解決されつつある 先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。 現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが
UXの奥にあるもうひとつのレイヤー
9月23日に第6回 .NET中心会議が開催されました。エンタープライズ向け、B2B 向けのシステムを開発している方が多く参加されるイベントで、今回のテーマは「UX」でした。製品発表会やサービス紹介に必ずといっていいほど耳にするようになった「体験」というフレーズ。デザイナーだけでなく、エンジニアや経営者など幅広い方々から重要性が認知され初めているのが分かります。しかし、「UX」という言葉は人によって定義や強調するところがまちまちですし、範囲が広過ぎて結局よく分からないイメージが未だにあります。 昨年開催されたリクリのセミナー＆ワークショップで、分かり難い UX を具体化するためのアプローチを紹介しましたが、まだ課題は多いのが現状です。Web では深い議論が出来ないところから、「UX = 素敵なインターフェイスとインタション」という表層的な部分が先行しているところもあります。今後、多様化が進む
Google のデザインガイドライン10項目
以前 Google の UX プロセスというエントリーで、Google が考えるユーザー体験を向上するための対策を紹介しました。Google のような数多くのサービスを運営している大企業でなかったとしても、参考になる項目が幾つかありましたが、先日 Google Operating System で Google’s Design Guidelines という記事が掲載されました。Google アプリケーションのユーザー体験を担当する Jon Wiley 氏が WritersUS Conference で語った Google のデザインガイドライン10項目がリストされています。 使える: 人々の生活、仕事、夢にフォーカスする 早い: ミリ秒でも早くする シンプル: 簡略化することの重要性 魅力的: 初心者にも上級者も引きつける何かをつくる 先進的: 新しいものを生み出すことに意欲的になる ユ
谷拓樹さんとモバイルWebとデザインについて対談しました : could
ポッドキャストモバイル 谷拓樹さんとモバイルWebとデザインについて対談しました デスクトップ Web と同等の情報量を一気に見せるというのは難しいですが、モバイルでも同等の情報にアクセスし、同じようにタスクを完了させることが出来なくてはいけません。モバイルを意識したデザインをするおもしろさ、そして難しさについて対談をしました。 震災後、諸都合で１ヶ月ほどお休みしておりましたが、その後順調に回を重ねているポッドキャスト「Automagic」。毎週、Web デザインを中心に私が思うことを手短に話している番組ですが、今回は inkdesign の谷拓樹さんをお呼びしてモバイルWebを中心に話をしました。昨年の 11 月に「HTML5＋CSS3で作る 魅せるiPhoneサイト」という書籍を刊行して以来、各地で講演をしている方。書籍はレシピ本という側面が強いわけですが、あれだけの書籍を書いたわけで
Webコンテンツをもう一度考える
MdNが刊行していた雑誌「Web Strategy」第一号に掲載されていた記事を若干調整したものです。2005年の記事ですが、2011年現在にも通じる部分があるので掲載することにしました。 文字数が多いので ePub 版と PDF 版を別途用意してあります。あとでじっくり読みたい方はそちらをご利用ください。 ePub (504k)PDF (655k) 変わったもの変わらないもの インターネットが一般ユーザーにも利用されるようになってはや10年以上になる。10年の間にデータ転送速度は動画を気軽にダウンロードできるほどのスピードになり、有線のパソコンだけでなく携帯電話をはじめとした様々なネットデバイスからワイヤレスでアクセスすることも容易になった。こうしたユーザー側のネットとのつながり方の変化だけでなく、企業側（コンテンツプロバイダー側）のネットの関わり方も変化してきている。ひと昔は名刺に U
Webデザインにある駆け引きとコダワリ
Webは人とデータに開放された世界 電子書籍の登場で、再び DTP デザインと Web デザインが比較されることが増えてきた印象があります。もちろん以前から「DTP デザインの呪縛」のようなものが Web デザインの世界で長く受け継がれています。随分 Web に最適な手法が盛り込まれているものの Dreamweaver のような老舗アプリは「DTPデザイナーでも Web サイトが作れる」というコンセプトが今も残っています。Webデザイナーは表現の仕方の違いからフラストレーションをためている方もいると思いますし、発注者側も DTP と Web の違いを伝えてもらっていないことからコミュニケーションに困っている場合もあると思います。 紙には物理的な境界線があることから情報量に限界がありますが、完全に隔離された世界を作ることができます。その世界は紙という媒体によって完全に守られていて、デザイナー
モバイル開発に欠かせないテストツール14選
Adobe Device Central CS5 Adobe CS5 をパッケージ購入すると一緒についてくるモバイルデバイスのテスト環境。様々なエミュレーターが存在しますが、オールインワンで素早くテストがしたい場合はこちらがオススメです。特に Flash を活用したモバイルサイトをテストするのであれば欠かせない存在です。 Android SDK Javaで開発されているので、Mac, Windows, Linux で動作する公式のエミュレーター。2011年1月現在、Android OS 1.1 〜 2.3 までのテストが可能。エミュレーターは実際のスマートフォンと同じ動作をするので、ディフォルトのブラウザだけでなく、Opera Mini や Firefox など他のブラウザをインストールしてテストすることができます。 iOS SDK XCode も含め諸々ダウンロードしなければいけませんし
使いやすいさと認知負荷のバランス感覚
私たちが「使いやすい、直感的」だといっている機器やソフトウェアでも、脳や身体は何かしらの処理を行っています。自分が使いやすいと思っていることも、人にとってはそうではない場合があります。これはリテラシーの高い／低いということで片付けることが出来ることでしょうか。デザインを考えるにおいて「簡単に（気軽に）使ってもらう」ということはひとつの課題であると同時に目標です。 インストラクショナルデザインは、人がいかに学習するのかを研究しデザインする分野です。Wikipedia では「より良い学習の環境を総合的にデザイン」と書かれているので、教育分野のデザインと考える方も少なくありません。20世紀後半から今世紀になると人の学習の仕方だけでなく、脳がどのように情報を処理するのかにも注目が集まりはじめます。こうした背景から認知負荷理論 (Cognitive Load Theory) が登場します。 人の認知
Google Font API で手軽に始めるフォント遊び
昨日開催された WDE ex -vol9 (Twitter TL) の懇親会で「Google がフォントのホスティングやれば良いじゃないか」という話題が出ていたのですが、朝起きたら Google Font API として現実的なものとなっていました。Web Font をホスティングしているサービスは海外で既に幾つかありますが、ほとんどが JavaScript のコードを貼付ける方法が採用されており、中には body 内に記述しなければならないものもあり、エレガントな方法とはいえませんでした。 今回公開された Google の API は JavaScript を使うのではなく、CSS をリンクするだけ。使いたいフォントをディレクトリから選び、リンクした CSS ファイルに変数としてフォント名を記述するだけになります。シンプルかつ簡単です。 <link rel="stylesheet" ty
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
