UIデザイナーにとって、そのUIがなぜ優れているのかを説明できる力は重要である。またそのためには今あるUIデザインがなぜ優れているのかを分析する力が重要になる。 その際に、すでにある法則を利用することで主観的な視点や経験による個人差をなくし、なおかつスピーディーに分析できるようになる。 今からご紹介する法則は90年代初頭に、Webのユーザビリティ研究者の第一人者であるJakob Nielsenと、dialogdesignというユーザビリティコンサル会社の創設者のRolf Molichによって作られた法則であり、UXを考慮したUIデザインの10つの評価軸である。ぜひUIを分析する際や評価する際の基準として役立てていただきたい。 Visibility of system status (システムステータスの可視性)Match between system and the real world

→ English 対象読者 ワイヤーフレームだけが渡されて、それを元にコーディングしなければいけないようなケースで役立つ知識を紹介します。 また、デザイン経験は無いけど、個人開発で何かプロダクトを作ってみたい方にも参考にしていただけるかと思います。 デザインといっても、無からクリエイティブを生み出すような部分ではなく、あくまでワイヤーフレームレベルのものをプロダクトとして最低限機能するレベルに引き上げるまでの範囲について言及します。 概要 最近のWebデザインはシンプルなので、既存のWebサイトに新しいパーツを実装するような場合に、ワイヤーフレームだけが与えられ、デザインデータが用意されないことがあるかもしれません。 そのような場合、エンジニアにデザイン領域への多少の裁量が生じ、実装者によって仕上がりに差が出ます。 この記事では、ワイヤーフレームを元にエンジニアが実装した「ちょっと悪いデ

中長期のための大きなデザインも大事だけど、そのために日々の改修が犠牲になってはならない（その逆は言語道断）。そんなわけで、しばらくの間は、1〜2日で終わる小さな改修を、コンスタントにnoteチームに提案したいなぁと考えている。 もちろん、「リソースが許せば」だけれども。なぜならpiece of cakeにはまだデザイナーが1人しかいないことだ。そんなわけで、中長期でどういうチームを作るべきかウンウン唸っている。 並行して走るスロットが3-4つ欲しい理想を言えば、デザイン/開発リソースを3つのグループにわけたい。「大局リソース」、「開発リソース」、「カイゼンリソース」の3つだ。これらはそれぞれ独立しているのが望ましい。複数のレイヤーを1人のスタッフが兼任していると、どれかが忙しくなると、他の全てがストップしてしまうからだ。 大局リソース ガイドライン、コンポーネントなど、会社全体にストックさ

Writing is a form of art. Words can make us laugh, move us to tears, or inspire us to do great things. But I’d say there’s also a science to writing. Data can inform writing choices and help us think more objectively about what we write. What’s right and what’s wrong?As UX writers at Dropbox, our goal is to make sure every word we write makes sense. One wrong word can break a user’s experience. A

バタバタとしていて、投稿が遅れました。 去年の話ですが、、 毎年娘の誕生日には何か作ったものをあげるようにしています。 1歳 - キッズハウス 2歳 - ままごとキッチン 3歳 - ままごとキッチンの冷蔵庫（間に合わずクリスマスに...） 4歳 - バーコードレジアプリ そして2016年の11月、5歳の誕生日にあげたものは、 じゃーん。 後ろ側はこうです。 こりゃなんだって感じですね。。 では動画で。 ボタンを押すと今の時間が出たり、天気予報が出たりっていうやつです。 オーダー これを作ったのは、実は娘からのオーダーです。 仕事の関係で手元にあったスイッチを娘に見せたら 「これでなんか作ってよ」と言われたんです。 で、「じゃ、スイッチ押したらどうなるのが欲しい？」って言ったら、 「時間が出たり、天気がでたり」と 娘は、スイッチの表面に時間が浮かび上がるみたいな事言ってましたが、それは有機E

by Nick Babichアプリは今やコンテンツやサービスを届ける主流の確実なやり方です。しかし、飽和状態のマーケットでユーザーの関心を上手に得て彼らを新規に取り込むには、どれだけ価値のあるアプリを作らなければならないのでしょう？ 以下にご紹介するのは、素晴らしいモバイルのユーザー体験を作り上げるカギだと私が考えるUXデザインの7つのtipsについてです。 １.ひとつのスクリーンにタスクはひとつだけにするユーザーが何かをする時に手間がかからないようにしましょう。 あなたがデザインするアプリのどのスクリーンについても、使う人にとって本当に意味のある行動が何かをしっかりと吟味して1つに絞り、それをサポートするものにしなければなりません。それぞれのスクリーンはたったひとつのタスクのためだけにデザインします。CTAは1回で済ますようにしましょう。これは使い馴れるのが簡単で、必要に応じて楽に機能を

検索事業部のデザイナー倉光です。 今回は、開発現場でアイデア発散フェーズにやっていることの一例を紹介したいと思います。UIデザインの手法として比較的知名度は高く、デザイナー以外でも学びたいという要望も多い「ペーパープロトタイピング」についてです。 前提として プロトタイピングにはフェーズと目的に応じて 様々な手法がありますが、今回は「小規模チームでアイデアをぽんぽん出し、伝え合うためのプロトタイピング」の話です。ユーザーに実際に評価してもらうためのプロトタイプの作り方についてはこの記事では割愛させていただきます。 また非デザイナーの方は「いやいや、デザイナーじゃないと画面なんてうまく書けないよ…」と躊躇してしまうかもしれませんが、本記事では社内のディレクター/エンジニア/インターン生が書いた成果物も掲載していますので、そちらも参考になると思います。 目次 目次 1.ペーパープロトタイピング

Prott User Meetup vol.11 Google Playベストアプリ特集 で話したことです。 補足などをここに書きました。 http://tech.pepabo.com/2016/02/05/talked-about-ui-design/

ウェブサイトやアプリケーション制作の現場で、非デザイナーが度々デザイナーからフィードバックをもらう内容をアバウトに4原則にまとめました。デザインは理論だそうで、以下に挙げるようなポイントさえ抑えれば非デザイナーでも「ハズさない」デザインをつくることができます(デザイナー談)。 追記[09/23/2015]：参考文献について 本記事は以下に掲載しております参考文献「ノンデザイナーズ・デザインブック(Robin Williams)」の前半部分における要所を引用して作成しています。デザイナーの方が非デザイナーにアドバイスする際に非常に有用な本らしく、私自身受けたフィードバックもこの本の内容に基づくものでした。予想していた数百倍の反響があり心底ビビっていますが、これをきっかけにデザインに興味をもち更に自分で勉強していくきっかけとなれれば本望です。わかりやすくデザインのポイントをまとめてくれた参考文

コードを書かずに、本物のようなアプリを再現できる 簡単３ステップで、動くプロトタイプをすぐに作成できます。Web・iOS・Androidはもちろん、カスタムサイズでもお作りいただけます。 プロトタイプ作成機能 ワイヤーフレーム機能

こんにちは、ユーザーファースト推進室 デザイナーの吉井です。 クックパッドでは去る7月23日（木）、フリマアプリ「フリル」を運営するFablicさんと合同でデザイナー向けにイベントを行いました。 イベントのタイトルにもある通り、"ユーザーファースト"をテーマに掲げ、開発現場での実践事例を交えながら両社の文化やデザイナーの働き方についてご紹介しました。 お集まりいただいた70名の皆さまの熱量も高く、イベントスタート時からパネルディスカッション、懇親会に至るまで、とても充実した時間を過ごさせていただきました。 ご来場いただいた皆さま、本当にありがとうございました。 また今回は多数応募をいただいたため残念ながら抽選に漏れてしまった皆さま、たいへん申し訳ありません。 こういったイベントは今後も開催していきたいと思いますので、またのご参加を心よりお待ちしております！ 最後に、各発表者の当日のスライド

「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」で発表したスライドです。 http://connpass.com/event/16187/

日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/

今年にはいってから、[自分のブログ](http://memo.sanographix.net/)でA/Bテスト実施してる。のでその方法を書きます。 ## A/Bテストとは A/Bテストとは、異なる2パターンのWebページを用意し、実際にユーザーに利用させて効果を比較するテストのこと（[引用](https://kotobank.jp/word/A%2FB%E3%83%86%E3%82%B9%E3%83%88-13664)）。要するに、パターンAとパターンBというページがあったとして、どっちがクリックされやすいんかな、みたいなことを、訪問してきた閲覧者に対して実験する。 A/Bテストを実施するためのツールはいくつかあるんだけど、[Optimizely](https://www.optimizely.jp/)を使ってみた。Optimizely、[料金ページ](https://www.optimi

クックパッド ダイエット事業室の田中です。昨年５月からスタートした「クックパッド ダイエット」にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、「ダイエットといえば『クックパッド ダイエット』」と言われるような世界を目指して、日々、運用・改善に取り組んでいます。 今回紹介するのは、クックパッドダイエットのUIをデザインする時の「UIの言葉選び」の具体的なチェックリストです。 最高のレイアウトでも言葉がイマイチだと台無しに みなさんは、UIの中の「文言（言葉）」をどのようなプロセスで決定していますか？ UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。 UIで王道のレイア

これまではどちらかと言うとDBやWeb APIみたいな開発作業が多かったけど、最近はHTML/CSSを触るようないわゆるWebデザイン的な作業をする機運が高まってきた。あんまりちゃんとやったことが無いために年始から色々と考えてて、まあその結実としてキャプチャ撮ると捗るという体験があったので書き残しておく。ちなみにキャプチャは無い。あとでデザイン変えたやつ公開したら過程を整理して紹介できると良いと思う。 過程を残すと意見をもらいやすい 『藤村龍至 プロトタイピング-模型とつぶやき』という本の中に、プロトタイプとして建築模型をつくっていく過程の話がある。与えられた条件を元にまず最もシンプルな状態から始め、課題を見つけながら少しずつ改善を加えていく様子が実例とともに紹介されている。この作業を反復しながら適用していくことで、模型の状態を都度更新していく。この方法には、設計者以外の人でも設計過程を見