リョウタ

人間中心設計スペシャリスト。IT UI・UXデザイナー←KONAMIゲームUIデザイナー←複数の会社でWebデザイナーという経歴。現在はUIに心理学や行動経済学を活用することで人の感情を動かせるデザインを学ぶことにはまっています。

リョウタ

人間中心設計スペシャリスト。IT UI・UXデザイナー←KONAMIゲームUIデザイナー←複数の会社でWebデザイナーという経歴。現在はUIに心理学や行動経済学を活用することで人の感情を動かせるデザインを学ぶことにはまっています。

わかりやすい表現をデザイン原則(10ヒューリスティックス)から学ぶ　2番目の原則

前回の記事ではユーザビリティに関するデザイン原則として特に有名な「10ヒューリスティックス」の1番目の原則について書きました。 デザイン原則というと少しとっつきづらい印象ですが、身の回りの事例を通して理解すると案外難しいものではなかったかと思います。 そして今回は2番目のヒューリスティック原則である「システムと実世界の調和（Match between system and the real world）」について学んでいきたいと思っています。 前回以上に対象範囲が広く実

リョウタ

    • わかりやすい表現をデザイン原則(10ヒューリスティックス)から学ぶ　1番目の原則

      UIやUXに関わるデザイナーがインターフェースデザインについて深く知る上で、知っておくべき原則はいくつかありますが、今回はヤコブ・ニールセンとロルフ・モリッヒによって提唱された10ヒューリスティックスを通して「ユーザーにとってわかりやすい表現」とは何かを学んでいきたいと思います。 10ヒューリスティックスはユーザビリティの専門家がUI上の問題点を発見する際によく使用されるガイドラインです。 どのようにデザインすれば良いかを判断する上でとても重要な指標なので、ぜひ最後まで読

      リョウタ

      • 見た目でなく効果をデザインする

        Webサイトやアプリなどのデザインを依頼する側は、見た目に対しての希望をデザイナーに伝えますが、実は見た目よりも結果を重視しています。 これは当たり前のことですが、ついついデザイナーが忘れがちな点でもあります。 そして求められている結果とは、以下のような行動や感情の変化を指します。 ・商品を売りたい ・問い合わせを増やしたい ・面白いと感じてもらいたい ・好きになってもらいたい 期待されている効果を確認する例えば社内のコールセンタースタッフに対する評価システムをデザイ

        リョウタ

        • 目の仕組みを理解してダメなUIから脱却する方法(後編)

          前回の記事では、人がはっきりと見えている範囲はたったの1〜2cm程度であり、エラーメッセージのように重要なものは、ユーザーが見ているすぐ側に表示する必要があると書きました。 ですが、そのような狭い範囲に全てのコンテンツをレイアウトするのは現実的ではありません。 今回の記事では、視線をどのようにして中心視野の外側に誘導すれば良いかについて書きます。 周辺視野が認識しやすいもの視力にして0.1程度しかない周辺視野は、細かいディティールやテキストの意味を理解することはできませ

          リョウタ

        • わかりやすい表現をデザイン原則(10ヒューリスティックス)から学ぶ　2番目の原則

          リョウタ

        • わかりやすい表現をデザイン原則(10ヒューリスティックス)から学ぶ　1番目の原則

          リョウタ

        • 見た目でなく効果をデザインする

          リョウタ

        • 目の仕組みを理解してダメなUIから脱却する方法(後編)

          リョウタ

          目の仕組みを理解してダメなUIから脱却する方法(前編)

          中心窩(ちゅうしんか)を知っていますか？ 中心窩とは目の一部であり、網膜の黄斑部の中心に位置する「最も物がよく見える」部位です。 中心窩は網膜全体のうちたった1%未満の面積しかありませんが、視覚を司る視神経は中心窩由来の神経が50%を占め、最も視力に影響がある部位です。 ではなぜこのような体の仕組みが、私たちUIデザイナーの知識として必要なのか。 それは私たちが見ている映像のうち、中心窩で見ている範囲が全体のごく一部だからです。 少し長くなりますが、UIデザイナーに

          リョウタ

          目の仕組みを理解してダメなUIから脱却する方法(前編)

          リョウタ

          知覚フレームを無視したダメなUIデザインの実例

          人が物事を判断する際、必ず認知バイアスが影響します。 認知バイアスは簡単に説明すると、経験などから来る思い込みと言い換えることができます。 例えば分かりやすいUIデザインに大きく影響のあるバイアスとして知覚フレーム(あるいはパターン)が存在します。 知覚フレームというのは経験や知識などを元に作られた自分の中にある枠組みを指します。 例えば初めて訪れた友人宅で、トイレを借りるとします。その時トイレはきっと玄関近くにあるだろうと予想しませんか。 そしてトイレは洋式で、ト

          リョウタ

          知覚フレームを無視したダメなUIデザインの実例

          リョウタ

          ローソンPB商品のデザインはタスク完了の効率が悪い

          ローソンのPB商品についてはかなり前から話題になっていましたが、ローソンの社長がPB商品について「ご不便をおかけしてしまった。真摯に反省します。」とコメントし、一部商品についてデザイン修正を行うという事で一旦節目を迎えたのかなと思いずっと感じていた事をnoteに書きます。 デザインとは何かローソンのPB商品について評価をする場合、最も忘れてはいけないのがデザインとは何かです。 デザインは日本語では図案や意匠と訳されるため、見た目を良くするものと勘違いされがちですが、本来は

          リョウタ

          ローソンPB商品のデザインはタスク完了の効率が悪い

          リョウタ

          LINE Pay の本人認証から見るテキストの重要性

          つい最近、自粛の影響もあり趣味で絵を始めようと、iPad ProとApple Pencilを購入しようと思った時の話です。 現金から支払いをしたかった為、LINE Payを使用しようと考えました。 ところがその代金をチャージするタイミングでアクシデントが発生したのです。 参照：LINE 犯罪防止の観点からだと思いますが、一度に10万円以上のチャージが出来ない仕様のようです。 2回に分けてチャージ「一度に入金できるのは10万円まで」と書かれていたため、面倒ですが10万

          リョウタ

          LINE Pay の本人認証から見るテキストの重要性

          リョウタ

          参考にしてはいけないAppleのデザイン vol.2

          同じプロダクトやサービス内で使用するアイコンに一貫性はありますか？ 同じアイコンにも関わらず、画面によって機能や挙動が異なるとユーザーを混乱させます。 そして各画面ごとに違う挙動を記憶する必要があるため、使い慣れるまでにかかる時間も長くなります。 デザインにおける一貫性は最初だけでなく後々まで尾を引く要素なのです。 どのように開くか これはiPhoneの設定画面です。この右向きの＞はWebでもよく使われるアイコンでもあるため、タップするとそのラベルの詳細に画面遷移す

          リョウタ

          参考にしてはいけないAppleのデザイン vol.2

          リョウタ

          参考にしてはいけないAppleのデザイン vol.1

          UIデザイナーは様々な製品やサービスに触れ、より良いデザインを見つけてはいつでも取り出せるよう頭の引き出しに閉まっています。 そしてAppleはその中でも特に信頼できるブランドの1つであるため、他の開発者を説得する仕事でもあるUIデザイナーは 「Appleがこう言ってます」「Appleではこうなってます」と権威性バイアスをフル活用しているデザイナーも多いはずですし、私もその1人です。 ですがAppleだからといって全てが完璧なわけではありません。 どういった意図で行われ

          リョウタ

          参考にしてはいけないAppleのデザイン vol.1

          リョウタ

          UIをリデザインしてみた vol.1

          最近は新型コロナウイルスの影響もあり様々な情報を調べたり探す必要がありますが、その内容があまりに分かりづらいなと感じる事が多いため、UIデザインを修正してその方法を今回はnoteでご紹介したいと思います。 新宿区の情報ページを修正 左は新宿区の新型コロナウイルス感染症対策ページで、右がそれを元に修正したものです。 さほど時間をかけずに修正したため、実際の業務であれば更に良いレイアウトはないか検討するべきですが一旦これを完成形とします。 それではどのような意図をもってリ

          リョウタ

          UIをリデザインしてみた vol.1

          リョウタ

          本を読むのが苦手なら無料でオーディオブックを使おう！

          UIデザイナーは専門性の高い職種のためWEBサイトや書籍から得られる知識はとても貴重です。 ですがWEBサイトではテキストを出来るだけ簡潔にした方が良いように、人はテキストを読む事があまり好きではありません。 さらに人の脳にとって「読む」という行為は「話す」事とは大きく異なり、ピアノを弾けるようになる、スキーを滑られるようになるといったように練習をして学ぶ行為にあたるため小さい頃にどれだけ本を読むといった訓練をしているかどうかでリテラシーに差が生まれます。 かく言う私も

          リョウタ

          本を読むのが苦手なら無料でオーディオブックを使おう！

          リョウタ

          デザインの感想はプロに、アドバイスは素人に聞いてはいけない

          デザイナーはUIなどのデザインを行った際に周りの開発メンバーや他のチームの人に意見を求めることがあると思います。 ユーザビリティテストやヒューリスティック評価をしっかり行うと時間やお金といったコストがかかるため、こうした気軽に周りの意見を聞いてすぐに反映させる手法は私もよく行います。 では実際にその意見をどこまで鵜呑みにして良いのか考えたことはありますか？ 経験が浅いと全ての意見に耳を傾けがちですし、逆にプロ意識が高すぎると自分に都合の悪い意見は無視してしまうのが人間の

          リョウタ

          デザインの感想はプロに、アドバイスは素人に聞いてはいけない

          リョウタ

          コロナの影響によるロゴの変化

          コロナウィルスのパンデミックのため、マクドナルド、コカコーラ、Kappaはロゴを使って人々に距離を取っろうという呼びかけを行いました。 また車のブランドであるアウディとフォルクスワーゲンでも修正されたロゴを導入しています。 そしてその他の企業もそれぞれ様々なメッセージを発信しています。 このように人々の心が憂鬱になっているタイミングで、デザインの力を使って乗り越えるためのメッセージと共にくすっと笑わせてくるのは素晴らしいですね。

          リョウタ

          コロナの影響によるロゴの変化

          リョウタ

          ダイアログとモーダルの違い

          ダイアログとモーダルが同じなのか違うのかが明確に分からないUIデザイナーはいますか？もしそうであれば今ここで違いを確認しておきましょう。 そもそもダイアログとモーダルは並列の関係ではありません。中央に出てくるものはダイアログ、画面下から出てくるものはモーダルと言った見た目や、表示方法、内容の緊急度による違いではないのです。 ダイアログとはダイアログという言葉は「対話」という意味の言葉です。 Webサイトやアプリでは殆どの場合はシステムとユーザーとの対話を指し、ユーザーに

          リョウタ

          ダイアログとモーダルの違い

          リョウタ

          UIデザインは第一印象がすべて

          ユーザがWebサイトを訪れてからスクロールせずに離脱する割合は平均で70%、ランディングページにおいては90%とも言われており、すべてのユーザーのうち半数以上は3秒以内に離脱します。 第一印象とWebサイト全体の価値が必ずしも一致するわけではありませんが、ユーザーは第一印象ですべてを評価します。 そして驚くことに離脱せずにしばらく閲覧した後においても、「視覚的な魅力度・興味の度合い・わかりやすさ」は第一印象と大きく相関します。 このように第一印象が確証バイアスとなり、そ

          リョウタ

          UIデザインは第一印象がすべて

          リョウタ