ホーム自己紹介ブログ
NO.131
DATE2024. 11. 24

はじめてのUXデザイン図鑑を読みました

本屋で目に留まった「はじめてのUXデザイン図鑑」というタイトルに惹かれ、思わず手に取って購入しました。 読み進める中で、自分が関わるサービスではどのようにデザインを活かせるだろう?と想像しながら考える時間がとても充実していました。 特に「読んで良かった!」と思えるポイントがいくつかあったので、今回ご紹介したいと思います。

UXデザイン

UXとは「User eXperience」、直訳すると「ユーザー体験」を意味します。 本書では、UXを「ユーザーの体験を設計すること」として紹介しています。 どのようなデザインパターンがあるのか、本書の目次を抜粋してみると以下のような分類が挙げられています。 最近話題のBeRealのようなサービスから、お見合いといった古くからの文化に至るまで、多岐にわたる視点が含まれています。

  • 居心地系
    • 言い訳の提供
      • BeReal, 社長のおごり自動販売機, ツイキャス, CHIMNEY TOWN GIFT
    • 所属感アシスト
      • Neighbors, Fanicon, oVice
    • ハードル下げ
      • nana, スプラトゥーン
    • 罪悪感の転嫁
      • ラクサス, スナックミー
    • 見え“ない”化
      • スマートバスマット, LINEギフト
  • 後押し系
    • 心のサンクコスト
      • RIZAP, MESON, デアゴスティーニ
    • 自分で決めない
      • dozo, airCloset, お見合い, Yohana
    • 失敗OK
      • あと値決め, Snapchat, レゴブロック, はがせるマーカー
    • 難問
      • Google の採用広告, ギネス世界記録
    • トライアル2.0
      • オーマイグラス, 丸善ジュンク堂書店, レンティオ
    • 使う分だけ
      • PillPack, Kit Oisix
  • 納得系
    • 理由の説明
      • Facebook 広告の表示説明, 訳アリ商品, セサミクレジット
    • プロセス参加
      • リビングラボ, 人事評価
    • 使い道の明示
      • ベルマーク, Lemonade, EVERLANE
    • 診断
      • スピークバディ, 大塚家具, MEDULLA
  • 参加系
    • 応援のリッチ化
      • 少年ジャンプ+, フリータンク, BTSファン
    • 無名からの育成
      • テニミュ, 宝塚歌劇団のファンクラブ
    • 差からの連帯
      • ビアボール, Everytable, ダイアログ・イン・ザ・ダーク
    • 脱顧客
      • ネスカフェアンバサダー, 京都のお茶屋, スクラム採用
    • 貢献の余白
      • ADDress, NewsPicks, OriHime
    • ナラティブ
      • ハッシュタグ, Ninja DAO
    • マイルド参加
      • ライブゲーム, イマーシブシアター

この中から、特に気になった項目について、いくつかピックアップして感想を述べたいと思います。

気になった項目

言い訳の提供

「言い訳の提供」は、私の好きな体験の1つです。 時間制限や文字制限など、あえて体験に制約を設けることで、ユーザーに「~したかったけど、仕方がないよね」と言い訳できる余地が生まれます。 これは不思議な安心感を与えるだけでなく、心地よさをもたらしてくれるものです。

さらに、制約があるからこそ、その範囲内で表現や工夫を模索する楽しさが生まれます。たとえば、

  • 「時間がないからこそ、XXをしてみよう」
  • 「入力できる文字数が短いからこそ、YYをしてみよう」

制限が生み出す創意工夫な発想が、より楽しい体験を見つけれるかもしれません。

失敗OK

何かを体験したあとに「もう一度やり直したい!」と思ったことはありませんか? また、体験を始める前に「もし失敗したらどうしよう」という不安を抱いたことはないでしょうか。 そんなとき、「やり直せる」という設計があると、とても安心できますよね。

例えば、ECサイトの返品・返金ポリシーや、ゲームのセーブポイントなどは失敗OKの1つかなと思います。 また、レゴブロックのように、そもそも正解や不正解が存在しない体験もあります。

こうしたデザインは、ユーザーに安心感を与え、一歩を踏み出す勇気をもたらします。 ただし、何でも「やり直せる」としてしまうと、サービスの成立が難しくなったり、他のユーザー体験を損なったりする可能性もあります。 そのため、バランスを取ることが非常に重要です。

自分で決めない

何かを「自分で決める」という行為は、意外と大変なものです。 決断するためには情報を調べたり、選択肢を比較したりと多くの時間と労力が必要です。 そして、一度決断すれば、その結果に責任を持たなければなりません。

そんな負担を軽減する仕組みのひとつが、カタログギフトのサービスです。 プレゼントを贈りたいけれど相手の好みがわからない場合、最終的な選択を相手に委ねることで、贈る側も受け取る側も満足できるWin-Winの形が生まれます。

毎日の献立を考えたり、着る服を決めたりと、私たちは日々、何度も「決める」ことに追われています。 このように、「決める」ことが大変だと感じる場面は、意外と多く存在しているのかもしれません。

所属感アシスト

リモートワークが普及した際、oViceを使ったことがあります。 バーチャルオフィスを通じて、会社の人たちと「一緒に働いている感覚」を共有することで、まるでリアルオフィスで働いているような体験が得られました。

一人で働いていると、ふと不安を感じることもありますよね。 でも、誰かと繋がっている実感が得られると、安心感や一体感が生まれます。その結果、孤独感が薄れ、チームからの離脱も減るのではないかと感じました。

トライアル2.0

洋服屋さんでは試着ができたり、家具屋さんでは展示品を試しに使ってみたりと、体験型のサービスは身近にありますよね。 そこからさらに一歩踏み込んだ「トライアル2.0」とも言える新しいお試し体験が登場しています。

たとえば、オーマイグラスではメガネを自宅で試着できたり、ニトリではARを使って自宅に家具を試し置きできるサービスがあります。 こうした工夫により、実際に使用する場面を具体的にイメージしやすくなり、購入前の不安が軽減されるのが魅力的です。

理由の説明

ある広告がなぜ自分に表示されているのか、その理由を説明する機能がFacebookにはありました。 同様に、ECサイトで「Xを閲覧した人は、以下の商品を購入しています」といった形でレコメンドの理由が説明されると、不思議と納得感が得られますよね。

勝手に何かを押し付けられるよりも、「なぜそうしたのか」を丁寧に教えてもらえると、親切に感じられ、ユーザーとしても安心できるものです。

最後に

日常生活で、どのようなUXが隠されているか探してみると良い気づきになるかもしれません。 そこから、真似できるエッセンスを見つけだしたいなと思います。

書籍レビュー
フロントエンド

-

読者になる

|

シェアする

|

silverbirders

silverbirder

Webソフトウェアエンジニア

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

※ ログイン不要で投稿できます。

※ 同じブラウザから投稿を削除できます。

0

読み込み中...

次の記事へ前の記事へ

関連する記事

タグ「書籍レビュー」の記事

『CSS 優良デザイン×アイデア事典 プロがシェアする現場の即戦力テクニック』を読みました。

以下の書籍を読みました。 感想について書こうと思います。 https://books.mdn.co.jp/books/3225303033/ 概要 本書では、数年以内に流行った比較的新しいCSSテクニックについて紹介されていました。 例えば

2026年03月15日

書籍レビュー
『CSS 優良デザイン×アイデア事典 プロがシェアする現場の即戦力テクニック』を買いました。

Googleレコメンドで、以下のCSSに関する書籍が流れてきました。 CSS 優良デザイン×アイデア事典 プロがシェアする現場の即戦力テクニック|株式会社エムディエヌコーポレーション - books.mdn.co.jp なんとなくレコメンド

2026年03月10日

書籍レビュー
『トンマナ の基本 一貫性と時短のデザインルール』を読みました。

以下の書籍を読みました。 書籍の感想を書こうと思います。 https://note.com/ingectared/n/n7883798f12ce トンマナ TONEは雰囲気や印象の調子。 MANNERはそれを形づくり形式やルール。 この2つ

2026年03月07日

書籍レビュー

タグ「フロントエンド」の記事

Webフロントエンドのコードレビューメモ

Webフロントエンドのコードレビューをしているときに考えていることについて書きます。 毎日1記事投稿、1記事30分という制約を課していますので、本記事は完璧ではありません。(言い訳) また希望的な考えもあるので、実践していないものもあります

2026年03月12日

フロントエンド
AIの書いたコードの手直しを減らすお作法

AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht

2026年02月25日

AI
フロントエンド
iframeの難しさ

最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ

2026年02月18日

フロントエンド
ブラウザ
← ブログ一覧へ