{ the redtie design }

元記事を見る→Build better sites by telling stories | Webdesigner Depot

「ペルソナ」や「シナリオ」という言葉は聞いたことがありますよね？ これらがいかにデザインプロセスに役に立つかというお話をしたいと思います。

ペルソナはあなたのサイトのターゲットの中の典型的な存在を指し、ユーザビリティやUXデザインを考えるときに基礎的なツールになるものです。 架空のユーザー代表像といえますが、データに基づく、できる限り実在するユーザーの性質をとらえたものでなければなりません。

シナリオは、ユーザーがあなたのサイトやアプリをさわっている間に「何を経験し／どこに行き／どうアクションするか」を仮定した「ストーリー」です。サイトの中でユーザーが従うべきプロセス、リテラシーの度合い、サイトに関わる理由、動機、達成すべきゴールを説明するものであり、またどのようにあなたのサイト／アプリがペルソナの暮らしに溶けこむか、さわる動機、利用方法、継続性といった毎日のシチュエーションをも仮定します。

ペルソナとシナリオはお互いに連関しながら、誰かがあなたのサイトを使うときの様々な文脈を説明し、取り組むべき課題や機会をスッキリさせてくれることでしょう。

ペルソナとシナリオで何がよくなる？

ペルソナとシナリオの活用は、プロジェクトの場面ごとにデザイナー・開発者とターゲット層を結びつけ「私たちはユーザーのためにモノづくりをしている」ことを強く意識させてくれます。

例えばあなたがカラーピックアップのためのアプリを作っているなら、ペルソナは「こんなアプリが使いたい！」というニーズを持ってる人だ、それはきっとデザイナーとか部屋の模様替えを考えている人に違いない、と考えるかもしれませんね。これこそが文脈を意識することであり、そこに意味があるのです。ランダムな配色ジェネレーターより色のペアを提案するようなカラーピックアップアプリの方が当たる！ というような判断をするときにペルソナとシナリオはとても便利です。

あなたが考えを巡らせることで、ユーザーが本当に求めこだわっている機能や仕様が見えてきます。プロジェクトの最初から終わりまでユーザーのことを見据えていれば、スキのない工程・効率的で効果的なプロジェクト進行が実現するのです。

ペルソナとシナリオがもたらす利益

デザイナーはペルソナのメンタルモデルを通して、わたしたちのデザイン上の決断に対して、ユーザーがどう反応するかをハッキリと推し量ることができます。「この問題をどう解決するか」という問いは「フリーランスデザイナーのアンジーくんにぴったりの解決策はなにか」という問いに変わります。ペルソナとシナリオの設定、このシンプルで本質的な作業をすることで、私たちは「このプロジェクトは私たちのためでなく、ユーザーのためにある」ということをいつでも思い出すことができるのです。そう、これこそがペルソナとシナリオの最大の効果といえましょう。

より具体的な話をしましょう。ペルソナはあなたのサイト／アプリにユーザーのための個性をもたらします（いい話でしょ？）。

あなたはサマンサというペルソナを設定しました。彼女はお気楽なヒッピーのようなグラフィックデザインを学ぶ学生です。高い技術を持っていますが、いささか優柔不断なところがあります。あなたのカラーピックアップアプリは彼女の優柔不断さにぴったりですね。

ユーザーが特定のゴールへと旅する間、彼らの個性や価値観とシナリオは対話を続けています。彼女が友達にこのアプリをどのように勧められていかに最初の体験をするか、それは便利に思ってもらえるのか、それとも混乱させてしまうのか。シナリオを用いることで、あなたはこれらをよくよく見通すことができるのです。

また、関係者から振りかかるディレクション上の変更に関しても、ユーザーへの視点を共有していればこれを食い止めることができるでしょう。その関係者は心の中にいる特定の個人のことを考え、プロジェクトに対して人と接すような気持ちを持ち、その方針を変更するということがいかに大きな影響を及ぼすのかということを想像できるようになるからです。以上、これがペルソナの効果です。絵空事の落書きのような簡単な人物設定がこれだけの力を持ってるんですよ！

また、決定の度に実在のユーザーにインタビューする手間とお金のことを考えると、とても安価な施策であることも付け加えておきましょう。

「物語る」ということは本質的に強い力を持っているものです。それは人を惹きつけ、そこには楽しみと知恵が潜んでいます。シナリオの中を生きるペルソナが、あなたのチームとユーザー層を強くつなげます。彼らに直接語りかけることはできずともペルソナたちは活き活きと動き出し、ユーザーが抱えている問題・将来の課題をどのように自己解決していくかのヒントをあなたのチームに与えてくれることでしょう。ターゲット層の目線から見える問題について考えるときにも有用です。

多くのペルソナたちがあなたのデザインの基礎を固めてくれます。自分自身の考えやプロジェクトそのものに縛られてしまいがちだからこそ、私たちは主役は自分でなくユーザーなのだときちんと意識する必要があります。壁にかけられたたくさんペルソナ（訳者註：仮面の意）こそユーザーを忘れないようにするための大切な存在です。私たちはプロジェクトにのめり込むほど、自分の仕事に追われて客観的に考えることができなくなってしまい、それが作品の質に悪影響を与えます。ユーザーが喜びもしないものをデザインするような愚を犯さないように気をつけてください。

適切なペルソナとシナリオを設定する

大切なのは適切なペルソナとシナリオを作ることです。まず第一に、あなたが的外れなユーザー像に振り回されないように、設定するペルソナは実際のユーザー調査に基づくものである必要があります。データがはじき出せたら、実際にペルソナを仮定し、その個性やスキル、動機などを適切に与えてください。彼らがあなたをうまく導いてくれることでしょう。

シナリオも同様です。しっかりとペルソナを作り込んでいるなら、シナリオもしっかりとしたものになり、ユーザーが直面するであろう隠れた問題を指し示してくれることでしょう。もう一つ、優れたペルソナとシナリオを作り出すのは、あなたのプロジェクトへの日頃の努力です。

むすびに

ペルソナとシナリオを設定することはUXデザインの中核のひとつです。プロジェクトにこれを欠かせることはその質を著しく低下させます。UXデザインとはユーザーの経験の最大化への努力であるからです。制作時にこれを忘れると、ユーザー体験はその予想と期待を裏切るものとなってしまいます。逆にこれらのツールを使えば、ユーザー体験の著しい向上をもたらせること間違いなし、というわけです。

 筆者：Paula Borowska

訳：深沢 幸治郎（水交デザインオフィス）

元記事を見る→http://will-grounds.roon.io/dude-i-redesigned-facebook

わたしはこれまで、Webサイトの「迷惑な」リデザインにあまり興味はありませんでした。

あなたも知っているようにポートフォリオを埋めるためだけに、もしくは小規模代理店のセルフプロモーションにしかなってないからです。もちろん、全てが悪いわけではありませんが、あまり目を見張るほどのものを見たことがありません。

良いケース

根本的な変更(またはその提案)をちゃんと示すページを用意している。 ユーザーが納得して使うために、プロダクトの新しいビジョンを提示することは、健全な議論とインスピレーションを与えてくれます。

それを見たさまざまなデザイナーたちは制約に捉われず、新しアイデアを肉付けしてくれます。

彼らは斬新なアイデアでも考え抜かれ可視化されていれば、例え実装するのは不可能であろう場合でも許してくれます。

クライアントの空気感から離れて自分のスキルを開発したり、実験をする自由を提供してる。

ただ、客観的に見て改悪のときでも以下のように良い結果がでるかもしれません。

彼らが議論をしはじめた

よりよいデザインを求めるようになった

新しいものを試みる(または回避する)発想を彼ら自身が考えるようになる

あまり良くないケース

リデザインの目的が、プロジェクトへの疑問を改善することではなく、デザイナーや会社の才能やアイデアのショーケスになっていることがしばしば。

ユーザーになにがしたいか、なにが必要かをほとんど尋ねておらず、大規模なサイトの複雑な政治問題も考慮されていない。

大規模なリデザインが必要なケースではユーザービリティーテストとユーザー検証が必要なのにそれがされてないことが多い。

デザインするときに予算や時間、実際に実装するのにどのくらい難しいかをあまり考えない。

これまでの過程や、なぜこのようなインターフェイスになったかという経緯をあまり考えない。

大規模サイトは大抵多言語サイトであることを理解せず、母国語のみしか対応しないものを作ってしまう。

リデザインする上でのアドバイス

多くの人が使ってるからといって、必ずしも既存のメジャーサービスに取り組むは必要はありません。たとえばこんな風に 自分たちの仕事に実際に起きている問題を見つけ、デザイン思考が実際の価値になりえるかを提案しましょう。

怖がらずにワイヤーフレームやラフスケッチを見せること。この段階での決定はデコレーションされたものより価値があります。

なぜリデザインが必要なのかを明確にしましょう。そのサービスはリデザインが必要ないものなのか、何がメリットになるのかなどを意識することでリデザインの目的を見失わなくなります。

実際のデータに基づいてデザインしましょう。ストックフォトやサンプルテキストを投げ捨ててください。実際のサイトでそれを使うことはありません。ドンマイ！ネッド！

もし時間があれば、動くプロトタイプを作りましょう。PSDを作ることよりもブラウザでどんな動作をするかが分かるものをです。細部に注力することも大切です。小さな変化がサービスやプロダクトの品質を大幅に改善するのです。

セルフプロモーションになりすぎないように注意しましょう。とくにアイデアや意見に関してです。最近のリデザインブームの影響で誤解されたことによってデザイナーの評価が下がってしまいました。

最終的に、プロとしての正義を貫くことを忘れないでください。価値のあるデザインを作ることは魅力的ですが時間がかかります。ですが、あなた自身、そして他のデザイナーの誇りになります。

これでおわりです。さっそく何かをリデザインしましょう！

訳：イシジマミキ

元記事を見る→Generate multi-resolution images for srcset with Grunt

最近SmashingMagにてマット・マーキスが書いたように、srcset属性は開発者がユーザー使っているデバイスのpixel密度によって表示する画像を指定することができます。

srcsetを使用する方法は以下になります。ターゲットとする解像度によってサイズの異なる3つの画像を設定できます。

<img alt="My photo" src="photo.jpg" srcset="photo-HD.jpg 2x, photo-phone.jpg 100w, photo-phone-HD.jpg 100w 2x">

上記のコードを実装するために、正しい解像度のイメージを用意することに不思議に思うかもしれません。

grunt-responsive-images はアンディ・スミス氏の便利なGrunt タスクです。元の画像をsrcsetで利用できるあらかじめ指定していおいたそれぞれの解像度に生成してくれます。正しい画像を生成します。

PictureFill (※翻訳時点でリンク追加) や Imager.js もあればそれに合わせて画像を生成してくれます。

はじめに

10分もかからないインストールとタスクの設定をします。Grunt 0.4 (以上) をインストール指定いる場合と過程しロジェクト root から右のコードを入力 npm install grunt-responsive-images --save

Gruntファイルにタスクを追加します。 grunt.loadNpmTasks('grunt-responsive-images');

次に、ImageMagick(画像の変換/書き出しをしてくれます)が必要ですのでインストールします。Macにてbrew install ImageMagick自作PCや他のプラットフォームで使っている場合はそれぞれのbinary releasesページの指示に従ってください。注意：わたしの場合はbrew install --force jpegとbrew install --force imagemagickを別々にしなければ動きませんでした。

これであなたのやりたいコトに合わせてタスクを作ることができるはずです。

設定

何も設定していなければ、初期設定はこのようになります。

grunt.initConfig({ responsive_images: { dev: { files: [{ expand: true, src: ['app/img/**/*.{jpg,gif,png}'], cwd: 'src/', dest: 'dist/' }] } }, })`

このタスクは以下のように画像を生成します

photo-small.jpg

photo-medium.jpg

photo-large.jpg

さらに、細かく設定したい場合、以下のようなオプションが用意されています。

sizes - 各サイズタイプの配列を表わします

sizes[].width - 画像の横幅

sizes[].height - 画像の高さ

sizes[].name - 画像のサイズ名

sizes[].suffix - retina画像につける接尾辞を設定

sizes[].quality - jpgの書き出しクオリティ設定

separator - ファイル名につける接続文字

例：

sizes: [{ name: 'small', width: 320, height: 240 },{ name: 'medium', width: 640 },{ name: "large", width: 1024, separator: "-" suffix: "_x2", quality: 0.6 }]

横と縦を指定して画像を切り抜きたい場合、アンディのタスクを見てみます。

ここに大画面用のretina用イメージというふたつの画像サイズの設定サンプルがあります。これをコピーして'responsive'画像と書き直します。

grunt.initConfig({ responsive_images: { dev: { options: {}, sizes: [{ width: 320, height: 240 },{ name: 'large', width: 640 },{ name: "large", width: 1024, suffix: "_x2", quality: 0.6 }], files: [{ expand: true, src: ['app/img/**/*.{jpg,gif,png}'], cwd: 'src/', dest: 'dist/' }] } }, copy: { dev: { files: [{ expand: true, src: ['**/*', '!app/img/**/*.*'], cwd: 'src/', dest: 'dist/' }] } } }); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-responsive-images'); grunt.registerTask('default', ['copy','responsive_images']);

Image.jsを使ったタスク

前述したように、Image.jsを使うこともできます。Imagerで新しいインスタンスを作成したり、欲しいエンドポイントを利用するなどして、幅を取得し生成します。

grunt.initConfig({ responsive_images: { dev: { options: {}, sizes: [{ width: 320, height: 240 },{ name: 'large', width: 640 },{ name: "large", width: 1024, suffix: "_x2", quality: 0.6 }], files: [{ expand: true, src: ['app/img/**/*.{jpg,gif,png}'], cwd: 'src/', dest: 'dist/' }] } }, copy: { dev: { files: [{ expand: true, src: ['**/*', '!app/img/**/*.*'], cwd: 'src/', dest: 'dist/' }] } } }); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-responsive-images'); grunt.registerTask('default', ['copy','responsive_images']);

images/320.jpgではなくimages/320を参照する必要があります。regaxオプションを使ってImagerで正規表現も使えます。

デモ

それについて、アンディのタスクはデモにまとまっています。srcset/PictureFillでの使い方も見ておくと良いでしょう。git cloneするときのソースはここです。

注釈

開発者はときに、シンプルにsrcsetの値を利用してイメージを作成する方がいいかもしれません。それがベストですが、それができるようになるまではアンディのタスクを利用した方がいいかもしれません。

srcset用のpolyfillはマルチサイズの画像(や適切なサイズ)をダウンロードすることもありますので、srcsetをサポートしたブラウザと一緒に使用すると良いでしょう。もちろん、まだ先の話なのでImager.jsなどのレスポンシブ用画像差し替え対策も併用したりしましょう。

元記事を見る→http://elliotnash.me/why-designers-are-talking-about-the-wrong-thing

デザイナーの仕事が終わったことはどこで説明できるんだろう？ 納品されたPSDファイルやデザインそのもの？ もしくは本番環境に息づく驚くようなユーザーエクスペリエンス？？

その答えは明らかです。

デザイナーはこんな愚痴を言います。（わたしもデザイナーですが）

「わたしたちはプロジェクト全体のUXをコントロールしたい」

ユーザーの高いエンゲージメントを確保するためにはどんな小さな部品もデザインしたいと言います。出来上がったものに対して難癖をつけますが、ほとんどのデザイナーはコードを実装をしません。それなのに自分の作ったデザインに対して文句を言う人たちにグチを言いたがり、自分たちに非はないと主張します。

それこそが問題なのです。

ツイッターやいろんな記事を見ていると、新しいデザインツールの出現や古いアプリの開発終了で発狂している人がたくさんいます。（Fireworksとかね。）冗談ではないことは分かりますよね。すべて廃止されたのです。それはなぜでしょう。

我々はWebサイトを作るのに画像を使わないからです。わたしたちはコードで構築します。もちろんモックアップを作るのに馬鹿げたツールを使うことができますが、もし新しいアプリの使い方を覚えるのに時間をかけているならそれは本当に時間の無駄です。

画家になろうとして、いきなりブランドものの筆を吟味しだすのに似ています。さまざまな筆の使い方を知ってひとつに決めたとしましょう。どうなると思います？ それでもモックアップの完成には成り得ないのです。まだ古くさいモックアップのままです。レンガとモルタルのまま。HTML,CSS,JSがアナタのモックアップに命を吹き込むのです。

そんなモックアップが作れる夢のようなデザインツール。誰かが用意してくれると思ってますか？

わたしはPhotoshopを使い続けて14年以上です。ガンガンアップデートして新しい機能をチェックします。だけど本当は可能なかぎりPhotoshopを使う時間を減らしたいのです。

リアルタイムにデザインを検証して、ユーザーが使ったときに本当に使いやすいか。何度も繰り返して作られたデザインは最高のものです。

もしあなたのデザインが崩れていても、わたしは文句をいったりしません。なぜだか知っていますか？微妙なニュアンスの違いを知っているのはアナタだけだからです。アナタのデザインを完璧に実装できる人はアナタだけなのです。

余談ですが、アナタがもし自分のデザインをコーディングする方法を知っていれば、チームでのアナタの評価100倍以上になります。

Making choices from responsive sweeps of color, rather than painpots

元記事を見る→http://demosthenes.info/blog/733/Minimalist-Color-Tools-For-Web-Designers

フラットデザインが流行ってますね。ビビットな色づかいをするデザイナーが減ってきています。ただ残念なことに、ほとんどのソフトは小さなカラーピッカーやスライダー、そしてホイールばかりでこのトレンドにマッチしていません。

多くのデザインオピニオンリーダーたちは、もっと操作をシンプルに、もっと大きくレスポンシブなサイズでカンタンに色を比べたりしたいと思っているでしょう。

ありがたいことに、いくつかのWebサービスはそれを実現しようと頑張っています。

Color, by Hailpixel, はたぶんこういったサービスで一番ミニマムなサービスでしょう。

1色につき1画面。キレイで直感的なUI。URL共有も。そしてRGBとHSLをサポートしています。

ColorCo.de も似たようなインターフェイスですが、カラースキームなどから選べたりと少しリッチな操作ができ、書き出し機能により選択した色をPNGやLESSに書き出せます。

Piknik も Colorと同じアイデアですが、スクロールホイールを利用して明度を変更することができます。自分のホイールマウスだと認識されませんでしたが…。決定した色は下部の値をクリックすることでコピーされます。

GistBox is the best interface to GitHub Gists. Organize your snippets with labels. Edit your code. Search by description. All in one speedy app.

Githubのメモ帳みたいなGist (断片的なコードを公開して共有したり、書き捨てのメモなどを保管しておくところ)の管理をしやすくするGoogle Chrome Extension

Iphone 6 Wrap Around Concept screen PSD