多くのデザイナーが日々、使いやすいデザインについて模索しています。 WebページやスマホアプリのUIデザインにおいて、使いやすいデザインへの一つの答えとなる記事を紹介します。 すっきりデザインされたUIよりも、はっきりと分かるようにデザインされたUIの方が使いやすい最高のUI！ The Obvious UI is Often the Best UI by Susanna Zaraysky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 下部のナビゲーションバー = 使用率の増加 下部のナビゲーションバーとアクセシビリティ 「明白な」アイコンが「一般的な」アイコンとは限らない 他のUIをコピーしても、明白なデザインは保証されません 明白なものを見つけるには、問題点を見つけること はじめに フランスの哲学者ヴォルテールの言

「デザイン思考」という言葉が一般的になって久しい。あらゆる領域で、もはや基礎教養のような位置付けになっているように感じる。しかしながら、「結局デザイン思考て何なん？」状態の人は多いのではないか？ 筆者が初めてデザイン思考という言葉を聞いた時は、「なんだか、つかみどころがない…」という感想だった。その感想は本や記事を2、3冊、読んでも正直変わらなかった。 1番の理由は、今まであらゆる業界がやってきたこと、いや、何なら自分が普段心がけていることと何ら変わりがないように思えたからだ。「ユーザー中心」、「素早くイテレーションする」、「プロセスを意識する」など、どこの業界もやっていることだし、正直、何の新鮮味も無いように感じた。 デザイン思考を紹介する本や記事は、デザイン思考とはそもそも何か、どのような原則があるのか、なぜ広まっているのか、をポイントに書いているものが多い。つまり、デザイン思考そのも

はじめまして。HR業界でアプリマーケティングをしている宮﨑といいます。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで毎日投稿しています。 https://twitter.com/yositune12345 noteでは10月の1ヵ月間で100本のノックをする中で感じた「〇〇できたら、ユーザー体験が良くできそう！」というトピックスを投稿します。 どうやってるのか？①Playストアの設定で自動更新をOFFに ②アップデート待ちのアプリが溜まる あとは一通りスクショを残してからアップデートし、UIの変更がないかを見比べていきます。 それではいってみましょう！ ①確認画面で離脱させない確認画面で何か不安になった時、画面を往復させられると面倒な気持ちに。あらかじめ不安になりそうな要素を揃えておいて離脱させな

いよいよiPhone Xの発売日が迫ってきてウキウキしているアドバンストテクノロジー部の近藤です。 先日のWWDC 2017でiPhone Xが発表されました。 破壊的アップデートがなされることが発表されて、世界中のアプリエンジニアの皆さんは今から胃の痛い思いをしているかと思います。 iPhone Xにアプリを対応する上で主に画面の変更による注意点を、発売前にわかっている情報を元にまとめていきます。 iPhone X はこうなる iPhone Xはパッと見てもわかるようにディスプレイの形がかなり変わっています。 センサーハウジング（ディスプレイ上部の出っ張り） Face ID用のセンサーやフロントカメラなどが収まっているエリアです。この部分が画面の内側までせり出しています。 その両側が従来のステータスバーとなり時計やバッテリー残量などが表示されます。 ホームボタンの代わりにホームインジケー

前述したように、本体機能とはゲーム機本体に最初から内蔵されているソフトウェアのこと。任天堂の家庭用ゲーム機で初めて実装されたのは、2001年に発売された ニンテンドー ゲームキューブで、当時はセーブデータ管理などだった。以降、ニンテンドーDS、Wii、ニンテンドー3DS、WII Uとハードが進化するにつれ、さまざまなシステムやサービスが追加されていった。こうした多機能化に加え、任天堂のゲーム機以外でも多機能でゲームを遊べるデバイスがつぎつぎに出現。そうした状況の中、ニンテンドースイッチも同じ多機能化を目指すことの是非から考え直したそうだ。その結果、たどり着いた答えが“ゲーム機なので、ゲームで遊ぶに特化しよう”と、原点回帰したじつにシンプルなもの。「これがニンテンドースイッチに込められた思いです」と小野氏。つくるものを厳選し魅力を凝縮するとともに、ストレスを感じさせないことを目指した。その実

なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです

SiFi-TZK @SiFi_TZK ここがダメだよ！ゲームのUI。その１、同じ機能なのに使うボタンが違う。「そんなわけねーじゃん！」とお思いでしょう？でも例えば、「マップを拡大するボタン」と、「ギャラリーでモデルを拡大するボタン」が平気で違ってたりする。 2016-11-11 01:41:12 SiFi-TZK @SiFi_TZK ここがダメだよ！ゲームのUI。その２、同じものが違う場所に表示される。「そんなわけ(ry」あるモードでは「名前、ステータス、技」の順番なのに、別のモードで開くと「名前、技、ステータス」の順になってたりとか。 2016-11-11 01:45:17

グーグルが「Google Optimize」の無償版を発表したことでA/Bテストへの注目が集まっていますが、実際にA/Bテストを実施した企業の9割が失敗しているとの衝撃のデータがあります。その原因とは？ 近代広告の父として知られるデイヴィッド・オグルヴィは「試行を止めてはいけない、そうすれば広告は進化し続ける」と言いました。2008年、ビル・ゲイツは「私たちはこれまでよりも、もっとA/Bテストをするべきだ」と主張しました。 今から50年前、デイヴィッド・オグルヴィは、全身ツイード地の細身のスーツを身にまとい、オックスフォード出身者の教養を漂わせ、絶え間なくタバコを吸いながら、有名な「試行を止めてはいけない、そうすれば広告は進化し続ける」と自信に満ちた表情で語ったのです 最近のWebの世界では、さまざまな使いやすいツールのおかげで、A/Bテストやコンバージョンの最適化はより身近で、手を出しや

最近のAIツールの発展は目覚ましいものがある。 特に今までデザイナーが数時間かけて行っていた作業がものの数分でできてしまう。それも人力よりも優れた精度で。 特に物事の変化スピードが強烈に速いこちらサンフランシスコでは、既にグラフィック・デザイナーやWebデザイナーといった役職が絶滅の危機に瀕していると切に感じる。 「デザイナー」消滅の危機？専門職の概念がなくなる時代 コアの部分を社内、それ以外を外注かAIでテクノロジーの進化とビジネスにおけるデザインの重要性の高まりに合わせ、見た目を良くする”だけ”の限定的なスキルのデザイナーはよりコストの低い他の地域に外注したり、クラウドソーシングを利用したり。AIツールを活用する事でまかなっているケースが増えてきている。 初期プロダクトの表側の見た目や、ちょっとした広告のデザインなどは海外に住んでいるフリーランサーに発注しているケースも少なくは無い。

インタビューUX MILK編集部、編集スタッフの藤井です。 UXデザインの現場に突撃取材するUX MILKのインタビューコーナー、今回は株式会社クックパッドの倉光さんにお話を聞いてきました！　クックパッドではどんなUXデザインを実践しているのかお伺いしたところ、そもそもクックパッドのサービス開発現場では「UX」という用語はあまり聞こえてこないとのこと…！　その理由とは…!? 学生の方にもわかりやすくお仕事内容を説明いただいたので、ぜひ初心者の方にも読んでいただきたい内容となっています。それでは、早速インタビューをどうぞ。 倉光　美和（くらみつ　みわ） 福岡県生まれ・デザイナー。家庭用ゲーム業界でゲームのUIデザインを経て、2015年にクックパッドへ入社。現在は主に iOS/Android アプリの開発・改善を手がけるほか、グループ会社のサービスデザイン組織のサポートなども。人間中心設計推進

デザイン会社Basecamp⛺️の代表。dely株式会社のCXO。東京で活動する事業作りを仕事にしているデザイナー / プロダクトマネージャーです。 仕事の依頼はDMで受け付けております。

UIにおけるアニメーションの役割には、「なんとなく楽しいから」「気持ちがいいから」という側面も大いにあると思います。 ただ、最も重要な役割は、「コンテクストの強化」ではないでしょうか。 コンテクストの強化って？コンテクストとは、文章などの前後の脈絡。文脈。という意味で通常つかわれる単語です。 例えば、「ママ、おかわりちょうだい」というセリフがあったとします。 “家”での会話なら、子供が母親にご飯をもう一杯催促していることになりますが、もし家ではなく“スナック”だったとしたらどうでしょう。男性が女店主にお酒をもう一杯催促していることになってしまいます。 コンテクストの強化とは、「背景や状況が分かる情報を増やす」ことで、正しい意味で情報を受け取ることができるようにすることを指します。 UIにおけるコンテクストの強化とは？「追加した」「削除した」「移動した」など、ユーザーアクションが発生したとき

最近、デザインシンキングが語られるようになってきました。 ただ、必ずしも全てのケースで有効ではないため、今回は、自分のためにも有効でない場合の整理をしてみました。 先日、この記事が話題でしたが、デザインシンキングについては、記事で言及されている通り『 デザイン思考は、技術的に実現可能なものやビジネス戦略を顧客価値や市場機会へと転換可能なものと、人々の要求とを一致させるために、デザイナの感覚と手法を利用する方法 』と定義されています。 同僚に差をつけよう！今流行っている「デザイン思考」の全体像まとめ http://www.kokoro-no-compass7.com/entry/2016/05/06/213258 これをみてみると、日本人のイメージする色や形の付与という「デザイン」の概念を超えて、デザイン思考における「デザイン」は問題解決やそのためのサービス開発を指すということです。

はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想

よいエラーメッセージとは、礼儀正しく、正確で、建設的なものであることは、すでに広く知られている。ウェブでは、これに加えて若干の新しいガイドラインが必要となる。すなわち、エラーメッセージをはっきり見やすくしておくこと、問題の解決に必要な手間を減らすこと、さらに、その過程でユーザを教育すること。 by Jakob Nielsen on June 24, 2001 効果的なエラーメッセージのガイドラインは、ここ20年間まったく変わっていない。よいエラーメッセージとは、以下のような条件を満たすものだ。 はっきりと異常の発生を表示すること。最悪のエラーメッセージとは、エラーメッセージの不在である。ユーザがミスをしても、フィードバックがなければ路頭に迷うだけだ。例えば、電子メールには、はっきりした表示を出した方が有益と思われる状況がいくつかある。メッセージを送信したのに、システムに吸い込まれてしまって

フォーム利用時にユーザーに大きなストレスを与え、時には離脱に導いてしまう可能性も高い、入力エラー。 できるだけエラーを出さないために工夫をすることが重要ですが、人間はどうしても間違うもの。完全に入力エラーをゼロにすることは難しいでしょう。 そこで、できるだけストレスを与えないエラーメッセージの表示方法、デザイン、タイミング等について、このブログでは下記の記事などで何度か考察してきました。 フォーム最大の関門＜エラー表示＞のストレスを軽減する基本施策 https://f-tra.jp/blog/column/1058 海外EFO情報：すぐ使える！エラーメッセージを効果的に表示する6つのポイント https://f-tra.jp/blog/overseas/4454 今回は、そのなかでも特にメッセージの内容について重点的に考えてみたいと思います。 よくある不親切なエラーメッセージ 日頃多くのフ

この記事は専門用語がいくつか出てくるためわかりにくい場合もあると思います。そんな方のために一般的な用語に限ったバージョンも書きましたので、よろしければお読みください。 モノづくりの4つのゴールひと目見れば誰でもわかることですが、サイクルであるということは、「循環」していることと「等価」であることを示しています。 そして、まったく当たり前のことですが、4つのゴールの考え方としては、「ユーザーの行動」を生み出すものは、「ユーザーの体験」です。 （僕自身は必ずしもこの「ユーザーの体験」がいわゆる「UX」と同じものであるかどうかは判断していません。） それを前提として考えを深めた結果、僕はまず予期的UXにフォーカスするという考え方に至ったので、その理由としての経緯を書き留めておこうと思います。 ユーザー体験の時間区分そのいわゆるUXには、「Time spans of user USERexperi

『初めに、BeskyAirとはなんだったのか？、ターゲット層の選び方、サービスのローンチの仕方、スイッチングコスト、投資家の選び方、これから』 『初めに』 さて、約１年ぶりのブログ更新。今日はとんでもなく悲しく、頭にきて、そして学んだことがあったので日本語だけで（this is only in japanese)ブログを書きたいと思う。 今日、2年間ずっと開発して、考えて、ユーザーテストして、UI/UXのABテストして、web作って、ブートストラップで完璧なレスポンシブにしてローンチしたサービスが1日で無くなった。 作るにあたって膨大な時間、お金、そして投資家さんたちの夢をかけてやっただけにめちゃくちゃショックなので、誰かが同じような過ちをしないよう、ここに書き留めておこうと思う。 『BeskyAirとはなんだったのか？』 そもそも、どんなサービスをローンチしたのかの前に、キャビンアテンダ

アプリエンジニア。株式会社マイナースタジオ所属。主に扱っているプログラミング言語はSwift、Ruby、PHP、Python。イカが好き。 ユーザーにストレスなくより良いユーザー体験を提供するためには、細部のUIデザインにも気をつけなければいけません。 今回はこれだけは押さえておきたいUIデザインを紹介します。 1. エラー時は問題の解決方法も載せる たとえば、ネットワークエラー時などには「ネットワークに接続できませんでした」と表示するだけでなく、「ネットワークに接続できませんでした。Wi-fiの設定を確認のうえ、もう一度お試しください」というようにエラーの解決につながる方法を明示した方がより親切です。 2. 画面をスワイプで戻れるようにする iPhone6, iPhone6 Plusがリリースされ、最近では大画面のデバイスが増えてきました。片手操作の場合、画面上部にあるボタンに届かないと