ホーム自己紹介ブログ
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が隠されているか探してみると良い気づきになるかもしれません。 そこから、真似できるエッセンスを見つけだしたいなと思います。

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

-

シェアする

フォローする

購読する

次のページ

2024年の振り返り。マイペースな一年

前のページ

Every Layoutを読みました

関連する記事

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

『Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ』を読みました。

たまたま、Googleレコメンドに "Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ" の本へのリンクが流れてきました。 Webフォントの記事って、あまり見かけなかったのでAmazonでポチりまし

2026年02月12日

書籍レビュー
久々に本を読んでよかったこと

今日、4ヶ月以上放置していた本を読み始めています。 読み始めて、本ってやっぱ良いものだなと思うことがありました。 そのことについて、簡単に書こうかなと思います。 今読んでいる本 "Webフォント実践ガイド Google Fontsではじめる

2026年02月11日

書籍レビュー
『ザ・ダークパターン ユーザーの心や行動をあざむくデザイン』書籍レビュー

今回、以下の書籍を読みました。『ザ・ダークパターン ユーザーの心や行動をあざむくデザイン』せっかくなので、感じたことや気づきをまとめてみます。

2025年07月02日

書籍レビュー

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

iframeの難しさ

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

2026年02月18日

フロントエンド
ブラウザ
SVGを書くと数学の知識が必要だった

紙を積んだイラストをSVGで書こうとしていました。 (当たり前ですが)図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま

2026年02月17日

フロントエンド
CSSを、Vitestでテストしてみる

以下の記事で書いた CSSをテストする方法について、試してみました。 https://zenn.dev/silverbirder/articles/df6752b230f04c ソースコードは、以下に置いています。 https://gith

2026年02月10日

フロントエンド
テスト
← ブログ一覧へ