デザインシステムの最初の一歩として原則を作る理由 : could
メンタルモデルから始めるデザインする上でユーザーのメンタルモデルの理解は欠かせません。 UI やコンテンツに出くわしたとき、それをどう解釈・判断し行動するかを決めるのがメンタルモデル。 Web サイトであれば青色の文字に下線が入っていればリンクであると判断するのも、過去の経験や知識を基にメンタルモデルが築かれているからです。私たちが「使いやすい」「直感的」と感じるのもメンタルモデルとインタラクションが一致しているからと言えます。 同じデザインでも評価は変わるデザインをチームで評価するとき、メンタルモデルが共有されていないために議論が思わぬ方向へ進む場合があります。Web サイトのリンクのように広く使われているものであれば共通のメンタルモデルが築かれていますが、多くの場合そうでははありません。オンボーディング、アイコンの見た目、通知のコピーなど、UI に関わるあらゆる部分で意見の相違が発生し
良いUIでも悪い体験は作れる
下図は、デジタルカードゲーム「Magic: The Gathering Arena（MTG: Arena）」の画面。現在、βテスト中なので一般公開時には大きく変わる可能性がありますが、良い UI が良いデザインになるとは限らないという例で紹介しています。 カードパックを購入するには、Gems という通貨が必要になります。ゲーム用の通貨を購入してアイテム課金するゲームは他にもたくさんあります。押しやすいボタン。分かりやすいラベル。魅力的なグラフィック。ちょっとしたアニメーションを加えた演出を見ると MTG: Arena は優れた UI デザインと捉えることができます。デジタルカードゲームを楽しみたいユーザーの気持ちを高めるデザインと言えるはずです。 魅力的な表面とは裏腹に、たくさん Gem を購入してもらうための仕掛けが隠されています。例えば 6 パック分のカード（1,200 Gems）を手
次世代デザインツールはどこへ向かうのか 前編
プロトタイプツールからデザインツールへ 私は前線で制作していませんが、Sketch 講座 をはじめデザインツールについて話すことがあります。Sketch を長く使っているのものの、Adobe XD、Figma 、 inVision Studio など他のツールも検証しながら、合いそうな現場にツールを提案するようにしています。 なぜ今デザインツールなのでしょうか。数年前からある プロトタイプツールと何が違うのでしょうか。閉じていたデザインプロセスを開くという意味では当時も今も変わりないと思います。ただ、Sketch、Figma などを代表するデザインツールはスコープが少し広いのが大きな違いです。 Proto.io に代表される 2013 年前後のプロトタイプツールは、インタラクティブな紙芝居に近いものでした。大まかな画面遷移と操作感を実機で体験できるものの、それ以上でもそれ以下でもないような
結局デザインシステムは何なのか
フロントエンドからの影響 昨年開催されたワークショップ「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法」をはじめ、記事やイベントを通して維持・管理ができるデザインついて情報発信しています。CMS が広く普及して以来、コンテンツ配信を長く続けるための仕組み作りが模索されているものの、デザインは発展途上です。早く作る、効率よく作るまで議論されるものの、デザインをどう維持するのか、どうすれば最低限の品質を担保できるかまで発展しないことがあります。 1977 年に建築家クリストファー・アレグザンダーの著書「 Pattern Language 」で、パターンが街作りに柔軟性と拡張性を持たせると説いています。彼に異論を唱える人もいますし、街に個性が失われるという意見にも一理あります。しかし、彼の考え方が今の情報設計（IA）に多大な影響を及ぼしていることは間違いありません。情報や装いに一貫性を
透明かつ自動化するUIデザイン
上図は、Facebook, Instagram, Snapchat をはじめとしたサービスが提供している「ストーリー」でよく見かける動きです。ストーリーはここ 1, 2 年で一気に広まりましたし、毎日観覧している人もいると思います。 UIデザインも成熟期に入ってきて、ベストプラクティスと呼ばれるものが出揃ってきました。タイムラインのUI、ナビゲーションのUI、ギャラリーのUI など、様々なコンポーネントがどのアプリを見ても大して変わらなくなりましたし、そこから大きく外れたものは「使いにくい」と言われる場合もあります。 ストーリー式 UI も他のコンポーネントと同様、似たり寄ったりになってきていますが今までの UI になかった特徴的なところがあります。 操作のための UI が極めて少ない: 従来であればスキップしたり次の動画を見るための操作 UI があったところが、ストーリー式 UI にはそ
Adobeとコラボレーションを始めました
今月から Adobe Creative Station 編集部とのコラボレーション企画を進めています。Adobe Creative Station は、Adobe が公式で運用しているメディアで、製品の最新情報や使い方を紹介しています。そこでの寄稿、Creative Cloud 道場のゲスト出演、ソーシャルメディアでのコンテンツ配信をやっていきます。週に 2 回以上は Adobe Creative Station 向けのコンテンツをどこかで見ることができるはずです。 今風Adobeツールとの付き合い方は？ 長く Adobe 製品を利用していますが、Adobe のビジネスモデルに疑問を投げかけたり、使えないところはハッキリ言うこともあります。こうした言動に対して「アンチ Adobe ですね」と言われたこともありますが、足りていないところを口にしない（目をつぶる）のがファンなのかという疑問もあ
野放しは危険！デザイナーに潜む4つのモンスター
身近にいるかもしれないモンスター達 「モンスターペアレント」なんて言葉が流行した時期がありましたが、そのデザイナー版もありそうです。一見、平穏そうな装いをしたデザイナーの中に潜む恐ろしいモンスター達。彼らがデザインの行程を台無しにしたり、品質を落としてしまう場合があります。 今回紹介するモンスター達は web やアプリのようなデジタルプロダクトをデザインしている人たち向け。特にデザイナーとしてキャリアを始めた頃に陥りやすいモンスターたちです。 俺一番モンスター 問題解決することがデザイナーの仕事ですが、自分が考えた解決案が絶対正しいとは限りません。誰でも自分が考えたアイデアを大事にしたいですが、過保護になるとかえって視野が狭くなります。デザインに関わる様々な手法がありますが、それが解決を導き出す唯一の方法ではありません。課題解決ができるのはデザイナーだけではないわけですから、「自分が絶対正
Q&A 文章のトーン＆マナーや文章構造で気をつけていること
文体のトンマナづくりについて実践されていること、意識されていることがあれば教えてください。 @mjmjsachi ライターを雇うのが理想的ですが、予算の都合上それが難しい場合があります。ライターを雇わなかったとしても、複数人でコンテンツを作ることもあるので、それぞれトーン＆マナーがバラバラになることがあります。私はライターと呼べるほどのスキルも経験もないですが、以下のようなことを気をつけています。 構造が意味を生み出す 大学時代ジャーナリズムを受講した際に「逆ピラミッド」というメタファーを学びました。どのような優先順位をつけて構造化するべきかを考える際に逆ピラミッドの考え方が役立ちます。逆ピラミッドは以下のような情報構造を持っています。 最も価値のある情報 その情報に関する詳細 その他、知っておきたい情報 重要な情報を最優先に掲載することで、使いやすさも向上するとヤコブ・ニールセン博士も提
日本の新聞サイトから学ぶパフォーマンスの現在
パフォーマンスはすべてに関わる課題 パフォーマンスは利用者体験を向上するだけでなく、ビジネスにもプラスになります。コンテンツと同様、パフォーマンスはデザイン、エンジニアリング、ビジネスすべてに関わる重要な課題です。それを裏付ける事例をたくさん見つけることができます。 表示に 3 秒待たせることで 40% の利用者が離脱してしまう（Gomez） 表示速度を 68% 改善したことで、コンバージョン率が 7% 向上した（Ancestory.com） 4 秒遅くなったことでページビューが 11% 低下。20秒遅くなると 44% 低下した（Telegraph） サイトパフォーマンスを向上することで、ユーザープロフィールのインプレッションとスクロール率が上がった（Instagram） ショッピングサイトではパフォーマンスが 2 秒改善することで、離脱率が半分にまで減った（Radware） SEO にも
的確なデザインアドバイスをするための確認事項
段階的に考えるデザインのアドバイス 時々「デザインのアドバイスもらえますか？」という依頼を受けることがあるわけですが、応えるのに困ることがあります。尋ねている側は「もっと良い見た目、さらに使いやすくするにはどうしたら良いか？」というニュアンスを含めて質問しているわけですが、初めて見る成果物に対して評価するのは極めて困難です。 成果物は突然生まれるものではありません。価値共有を行ったり、あえて省いた機能や、意図的に作られた表現もあります。こうした過程を経て Web サイトやアプリという成果物があるわけですから、それらを理解する前に評価するとなると、どうしても「好き」「嫌い」といったリアクションに近いものになりがちです。「これはどうですか？」と尋ねても、的外れなフィードバックが来る場合があるのはそのためです。 ムードボードを作るとき、自社ブランドを言語化・視覚化する際、「好き」「嫌い」という感
デザイン原則がどの現場でも必要な理由
大企業だけのものではないデザイン原則は、ひとりのデザイナーがマニフェストとして明示することもありますが、最近は多くの企業がスタイルガイドと一緒に作られることが多くなりました。ここで言うデザイン原則とは、タイポグラフィや配置といったデザインするためのノウハウではなく、「我々が考える良いデザイン」が文章として表されたものを指します。つまり、自分たちのスタンス（立ち位置）を示したものです。 Material Design だと、以下の 3 つの原則があります : 実世界にも通じる空間と動きをメタファとして扱う力強く、視覚的であると同時に意図的動きを通して操作や表示の意味を伝えるまた、Facebook のデザイン原則だと、「ユニバーサル」「一貫性」「使いやすさ」など１単語でシンプルに表現されています。もちろんこれだけだと分かり難いので解説が添えられています。例えば「一貫性」であれば、再利用できるも
物理的な近さと心理的な近さから考えるプロセス
人の特徴を活かしてサイト特有のゴールを達成させるためのアイデアを練るというのが今回のワークショップの目的ででした。ワークショップでは14もの人の特徴を紹介しましたが、その中のひとつに Proximity (近さ) というのがありました。 上の図を見てください。色が違いますが、直感的に隣り合っている円が同じグループに属しているように見えると思います。色にはまったく共通点がありませんが、近さが同じグループであると思わせています。ＡとＩ、ＦとＨはそれぞれ同じ形と色です。しかし、それぞれに何か関連性があるとは考え難いです。たとえ同じ情報でも近くなければ関連性が見えてこない一例です。上の図は極端な例ですが、情報を設計する上で「近さ」をつかって感覚的に関連情報であることを伝えることが出来ます。 こうした情報の距離感ではなく、別の近さに注目したのが crema さんのアイデアです。上記に挙げた近さは物理
HTML5に関するW3Cのスライドをリデザイン
先日、Twitter経由で「Web標準化 (W3C) とHTML5の状況 (PDF形式)」というスライドが総務省のWebサイトで公開されているのを知りました。早い時期から国に働きかけているのだなと関心しましたし、どのような内容を紹介しているのだろうと興味があったので早速ダウンロードしてみました。HTML5 の概要をコンパクトにまとめている点は良かったのですが、プレゼンのスライドとしての質はあまり高いものではない内容でした（一番最後のページに「ありがとうございました」と書いてあるのでスライドの可能性大）。 W3Cに携わる教授という視点だと考えられなくはない内容なのですが、国の方（もしくは IT プロフェッショナルではない方）に向ける内容ではない気がしました。せっかくHTML5を多くの方に知ってもらうという素晴らしい機会があってもこれではどうかなと私は思いました。以下が私が気付いた課題点です。
ワイヤーフレーム制作の５つのアプローチ
ワイヤーフレームを作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。 ワイヤーフレーム制作は、主に５つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。 コンテンツブロック型 内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早
Yasuhisa Hasegawa
デザイナー。プロセスや仕組化に力を入れています。アプリや web サービスに携わるデザイナーが力を発揮するための環境作りが主な仕事です。
プレゼンワークショップを開催しました : could
プレゼンワークショップ プレゼンワークショップを開催しました あまりイベントを企画するということをしない私ですが、先日 bookslooe の坂本さんとの共催で「プレゼンテーション」をテーマにワークショップを開催しました。話す側と聞く側に分かれているセミナーではなく、ワークショップ形式で何かしたいよねという坂本さんの発案からスタートした今回の企画。何か有益な情報を得たか得てないかという表層的なものではなく、アイデアを共有したときに何がおこるのかという雰囲気やエネルギーに興味があったのでワークショップは以前からやってみたかったです。ミツエーリンクスさんのご協力も得て、設備も揃ったセミナールームで広々とワークショップを行うことが出来ました。 ワークショップは来ている方も能動的なアクションを必要とするのと、プレゼンの経験がないとなかなか発表し難いだろうということで、今回は告知をほとんどしない招待
リンクタイプの構成案 : could
可能な限りフィードバックを得れるような状態にしながら、徐々に方向性を固めて組み立てれるように複数のサイクルで構成されたプロセスを提案しました。今回はその第一弾である「リンク」タイプのデザインに取りかかろうと思います。リンクは「クラフトっぽいアート作品いろいろ」のようにゆるいテーマがあるかもしれないですが、リンクが羅列しているようなエントリーのことを指します。 このタイプのエントリーはあまりブックマークもされることもなく、どちらかというと検索からくる方のほうが多いです。サイトへのロイアリティもあまり高くないので、最近のエントリーやタグリストなどといった全体像が分かるものを省いて、読者が必要しているものをはっきり見せることが必要とされるタイプになります。リンクタイプはイントロダクションのような文章もない単純なリスト（<dl> で記述）なので、文体も統一されています。マークアップ面では完全にパタ
PowerPoint を使ったプロトタイピング
プロトタイプを作るソフトウェアは Visio のような高度な機能があるものを含めて複数あります。一番最初の段階であれば紙でも良いと思いますが、Webサイト上でのインタラクションを可能な限りリアルに再現して検証するにはパソコン上で行うのが最も適しています。どのツールが良いか迷っている方もいると思いますが、どうやら Microsoft では PowerPoint 2007 がワイヤーフレームを作るツールとして使っているそうです。 2007年、韓国で開催されたカンファレンスで PowerPoint 2007 を使ったワイヤーフレームに関するセミナーがありました (Silverlight ムービー)。Microsoft には Visio があるのになぜ PowerPoint を使うのかというと、PowerPoint のほうが使える人が圧倒的に多いだけでなく共有もしやすいからだそうです。例えば Ex
無料で使えるワイヤーフレームツールのまとめ : could
ソフトウェアワイヤーフレーム 無料で使えるワイヤーフレームツールのまとめ Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenO
怠っているのは私です : could
デザイン考え方 怠っているのは私です 昨日は坂本さんとの久々に会食。坂本さんとは「変革期のウェブ」で対談したとき以来だったので、随分ご無沙汰していましたが、３時間という長い会話もあっという間に過ぎました。本当はポッドキャストの収録をかねてだったのですが、予約したところが個室にも関わらず想像以上にオープンスペースだったことと、席が向かい合っているけど離れすぎているということで断念。次回は必ず収録致します、はい。（渋谷周辺で対談に向いてそうな場所ってないですかねぇ。多少音があっても良いのですが） 坂本さんは某大手企業に所属している、日本ではまだ数少ない IA (Information Architecture) の専門家です。デザイナーやマークアップエンジニア、そしてディレクターのポジションにいる方も IA は頭の片隅に置いて制作に携わっていると思いますが、それを専門的な視点で吟味したりアイデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
