UXライターをする上で身についた視点から、色んなプロダクトのUXをご紹介！


## はじめに
こんにちは！
株式会社ZEALSでチャットボットのUXライターをしているテンテン（あだ名）と言います。
今回の記事では『チャットボットのUX』を考えるにあたって、身に付いた視点から
**素敵だなと思ったプロダクトのUX**をいくつかご紹介します！

## プロダクト別でUXを紹介しています！

### おいでよどうぶつの森
<font color="SeaGreen">入力フォームの確認画面が「戻る」ではなく、「考え直す」になっていること。
<img width="400" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/c965afe6-546a-041e-0fe2-690e8c65ea9d.png">

UI上の操作を示す「戻る」ではなく、ユーザーが求めている戻った行為を通して、
成し遂げたい**「考え直す」**が表示されていることから、ユーザーの体験に寄り添った言葉が選ばれているなと感じました。


### Hotpepper beauty
<font color="SeaGreen">表示切り替えを行う意味を提示している。</font>
<img width="300" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/99ed61e7-d140-92e3-3781-7156b0bdf500.png">
レディースとメンズを切り替えることで、ヘアカタログや特集、検索結果がカスタマイズされることが表示されている。
些細な、気遣いかもしれないけれど、ユーザーからしたら、「レディースとメンズを切り替える意味」がわかるので、良いUXだと思いました。
また、レディースの方が多く使用するアプリだと思われるので、レディースが左に表示されているのも良いなと思いました。



### Slack
<font color="SeaGreen">リリースノートの文言が温かい。</font>
<img width="300" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/cd77e210-0c5b-650c-cf14-05359f4429db.png">
Slackでは、共感・理由・人格で、リリースノートが作られていると<a href="https://note.com/miyaccchi/n/na205303a2e6b">『SlackのUXライティングが名文だったので写経した』</a>を読んで、感じました。最後の文章の「ご迷惑をおかけしました！」などは、SlackがUXライティングによるプロダクトの人格形成にこだわり、ユーザーとの関係を構築しているからこそ添えられるコピーだと思いました。

このSlackの文章は、まさに、チャットボットのUXライターにも通じるなと思いました。
チャットボットの場合は顧客と1on1で向かい合うことができ、より深い関係性を構築することができるので、
**ユーザー1人ひとりに、パーソナライズされたライティングをすることで様々な体験をユーザーに届けられる**と感じました。

### LINE漫画
<font color="SeaGreen">黄色の枠で囲った箇所が「無料チャージ」から「無料レンタル」に変わっている。</font>
<img width="300" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/09f38926-cd33-0e37-16ce-03ee37862d1e.jpeg">

言葉を変えるだけで「無料で読める」よりも「（有料だったものが）無料で"借りれる"」ってユーザーに感じてもらうことができるので、UXが考えられているテキストだと思いました。


### LUSH 
<font color="SeaGreen">多様性に配慮し商品名を変更してる。</font>
<img width="380" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/58dc9244-6b51-94bf-be41-210630f5ac08.png">
>性別や人種、年齢、多様なライフスタイルなどへの配慮が十分にされているか、という視点に重点を置き、全てのお客様により楽しんで心地よく商品をご使用いただくために全ての商品名のレビューを行いました。 
 - LUSH <a href="https://jn.lush.com/article/product-name-optimize">ダイバーシティ＆インクルージョンの観点から商品名の変更</a>

世界的に有名なイギリス発祥の化粧品メーカーであるLUSH（ラッシュ）がLGBT支援宣言を掲げたり、難民支援のグローバルキャンペーンを行うなど、多様性を認め、積極的に歓迎していることが素敵だなと思いました。
このような、取り組みを行うことで、LUSHの社内だけではなく、社会全体に「多様性を受け入れる」文化が育つと思ったので、良い取り組みだなと感じました。



### MOODA（モーダ）
<font color="SeaGreen">「今日、どうだった」というテキストが添えられているだけで、日記を書きたくなるコピー。</font>
<img width="300" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/ccb5b6b9-7428-f473-0513-b040a06dcc32.png">
かわいくメンタル管理できるアプリ「MOODA」では、アプリ全体が「ゆるっとしているデザインであり、一言だけの日記も書きやすいので、毎日更新できるUXが設計されているなと感じました。
また、共有機能などもついているので、友達などにもシェアしやすいこともポイントです。
リンク→ <a href="https://apps.apple.com/jp/app/mooda/id1476256748">MOODA</a>

### MTG ONLINESHOP
<font color="SeaGreen">商品注文後の確認メールの文言がユーザーへのオモテナシで溢れていた。</font>
<img width="430" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/9010bcfd-dcbf-f4ba-20d5-ecc046e0b9c8.jpeg">
購入してくれたことのお礼 + 直接会うことはできないが、真心を込めている
この2文があるだけで、商品に対する信頼度が上がり、「買ってよかったな〜〜〜」って気分になると思うので、
購入後の確認メールだけれどもこれも良いユーザーのUXに繋がってるなと感じました。


リンク→ <a href="https://www.mtgec.jp/shop/default.aspx">MTG ONLINESHOP</a>



### note
<font color="SeaGreen">noteのシステム障害画面、Twitterのタイムラインが埋め込まれている。</font>
<img width="430" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/c003cd7e-df69-68c2-4454-e63c273072f3.png">
Twitterのタイムラインを埋め込むことによって、お知らせの窓口を少なくすることができ、
尚且つ最新の復興状況をTwitterを見れば確認できるのでユーザーファーストな思想が詰め込まれていると思いました。
また、制作側の負荷もかからないため良いアイデアだと思いました。


### OPPO
<font color="SeaGreen">携帯を変更するときの面倒なデータ移行がQRコードを読み取るだけで、スマホのデータを簡単に移行できる！</font>
<img width="500" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/c87d6bb3-cf84-4d26-5139-7b4ab57d1262.png">
データの移行状況をリアルタイムで把握することができ、スマホからスマホへ1対1の安全転送なので、データのセキュリティ対策も万全です。
今まで手間だった、携帯を変えたときのデータの移動がスムーズになったことと、その不安をピンポイントに応えているところが素敵だなと思いました。

リンク→ <a href="https://www.oppojapan.com/clonephone/clonephone.html">oppo</a>



### pairs&ゼクシィ縁結び
<font color="SeaGreen">「Facebookには一切投稿されません」のコピーを添えることで、ユーザーの不安にピンポイントで答えている。</font>
<img width="500" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/b5f68903-fd07-4483-f0dc-a2b36f517711.png">

<img width="500" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/0400608a-e325-de18-32cc-b2518a3f162e.png">

マッチングアプリも含めたプライベートと密接に関わるプロダクトのソーシャルログインでは「自動投稿をしないことを約束すること」のコピーを添えることにより、ユーザーに安心してもらえるため良いUXライティングだと思いました。

リンク→ <a href="https://www.pairs.lv/">pairs</a>&<a href="https://zexy-enmusubi.net/">ゼクシィ縁結び</a>


### Tumblr
<font color="SeaGreen">「これはあとで変えることができます」とコピーを添えることで、いま決断できないユーザーに手を差し伸べている一言。</font>
<img width="500" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/0ab57306-7779-5ad8-c745-fee63b141616.png">
アカウントが作成された時に「変なユーザー名で固定されるのはいやだな、、、」と思うユーザーのために、「後で変えることができれば」気持ちよく登録ボタンを押すことができると思いました。

リンク→ <a href="https://www.tumblr.com/">Tumblr</a>


### Twitter
<font color="SeaGreen">ツイート画面を「いまなにしてる？」から「いまどうしてる？」に変更。</font>


変更前
<img width="400" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/b1c27475-fcec-2c9a-9e1a-bc2e366e54f3.png">

変更後
<img width="400" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/59b39170-0843-a88a-c315-f11c12d9052b.png">
「いま**なにしてる？**」は、ユーザーの個人的な行動をやりとりする質問だけれども、
「いま**どうしてる？**」とたった6文字文言を変えることで、ユーザーの個人的な思いだけでなく、ユーザーの周りで起きている出来事やユーザーの内面（感情）についても問うことができ、より幅広い情報がTwitterで共有されることになり、ユーザーの新しい発見へとつながっています。

このような些細な変化は、ユーザーにとってはすごく小さな変化かもしれないけれど、小さな部分にもこだわっていることが結果としてたくさんのユーザーに愛されているプロダクトになっている秘訣なのかなと感じました。





## UXの意図によって、プロダクトのUXをまとめています！


### プロフィールを充実させることによる、メリットを提示している。

#### youtrust & workship & wantedly 
youtrust
<img width="500" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/9ad9581c-f21f-ee3b-3e5f-72a12e71d4dc.png">
workship
<img width="400" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/8c3d98c9-0477-eab7-521d-a5d8d437ab48.png">
wantedly
<img width="400" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/acd3a574-ea6f-12bd-5736-876938eb3dc4.png">

プロフィールを充実させることのメリットが記入されているので、プロフィールを記入する気持ちが高まる。
リンク→ <a href="https://youtrust.jp/">youtrust</a> & <a href="https://goworkship.com/">workship</a> & <a href="https://www.wantedly.com/">wantedly</a>


### ブランド色を出せている404ページ
※「404エラーページ」とは、Webサーバーの中に指定されたURLに対応するデータが無い場合に、ページデータの代わりに「404 Not Found」というメッセージを返すWebページのことを指します。
#### Amazon
<font color="SeaGreen">米国Amazonの404ページでは、ワンチャンがランダムで表示されるので癒される。</font>
<img width="600" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/4e06bc7a-5365-aad1-0c33-07bd86e7edfa.png">
本来なら、エラーページなので少し落ち込みそうですが、「SORRY」という文字とともにワンチャンが表示されるので、癒し効果もあるので目的のWebページが表示されなくてもなんだか心地よい気分になれますね。
リンク→ <a href="https://www.amazon.com/404">Amazon（米国）</a>


#### 江崎グリコ
<font color="SeaGreen">一目でグリコとわかるろごマークがあり、404の文字がポッキーで作られていてブランド色が反映されている。</font>
![スクリーンショット 2020-12-08 1.15.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/258ed5f8-18bd-10ca-93c5-0794a23caba9.png)
大阪の道頓堀にあるお馴染みの「グリコサイン」とグリコを代表する「ポッキー」が404ページに反映されていて、一目でグリコのページだとわかるデザインとなっていて、グリコ好きの方からしたら「このページを見て嬉しくなる工夫」がされているなと感じました。
リンク→ <a href="https://www.glico.com/jp/404/">グリコ</a>


#### 日本郵便
<font color="SeaGreen">さりげなくブランド色を伝えている404ページ</a>
<img width="600" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/affc4840-ca4e-d19e-8564-e67f63aab434.png">
ハガキの特徴である印がページに押されており、工夫が感じられるページだと感じました。
リンク → <a href="https://www.post.japanpost.jp/404">日本郵便</a>



#### ドン・キホーテー
<font color="SeaGreen">ブランドキャラクターが寝ている</a>

<img width="800" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/a94c12e4-c826-b62e-10d0-a5123469b706.png">
404ページから、「日本語版トップページ」「英語版トップページ」を選択できることは、ユーザーのことが考えられてると感じました。

リンク→ <a href="https://www.donki.com/">ドン・キホーテ</a>

#### ヤマト運輸
<font color="SeaGreen">ブランドキャラクターである「クロネコ・シロネコ」キャラクターを探すゲームが始まり、遊び心を感じれる。</a>
<img width="800" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/8645bf84-2ac5-4935-b57a-92ed9af2fa1d.png">

<img width="800" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/3172df17-c4e0-e35b-b605-19da3c516aec.png">
404ページに遷移されると、【30秒以内にクロネコを探すゲーム】が開始される。
箱の中に、クロネコがいない場合でも、風船が箱から出てくるので、ハズレてもマイナスな気持ちにならないように設計されていて、良いなと感じました。

リンク→ <a href="https://www.kuronekoyamato.co.jp/">ヤマト運輸</a>





## LINEのチャットボット別でUXをまとめています！

### クロネコヤマト
<font color="SeaGreen">あらかじめ、荷物のお届け予定の通知がLINEに届く。</font>
<img width="290" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/0fe0cf45-778e-6d88-02f0-d9a608d016e8.png">
<img width="290" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/63c1435a-46fb-edaa-c5a5-752249a57de8.png">
また、可視化しにくかった、荷物のお届け予定日を知らせてくれたり、再配達は送り状番号を入力して、
集荷を依頼したい時は「集荷して」と話しかければ届けにきてくれるので、良いユーザー体験だなと思いました。


LINE連携URL：https://line.me/ti/p/%40yamato_transport


### ドミノピザ
<font color="SeaGreen">おなかすいた～と話しかければピザが届く</font>
<img width="290" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/fae0a6ce-32df-79c2-8d66-747919a8e884.png">
「ちょっとピザ食べたいな、、」という時に、「おなかすいた」と入力するだけで、クーポンとピザのメニューが届きます。
CVRがどれくらいなのか気になりました🧐

LINE連携URL：https://line.me/ti/p/%40dominos_jp

### リバーシBot(強)
<font color="SeaGreen">トーク画面でリバーシが遊べる、ちょっと変わったコンセプトのボットアカウント。</font>

<img width="290" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/cd0ffab3-dbf5-de0e-0c6f-dc6ea3f4ecfc.png">
<img width="290" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/0433dc1d-bd28-d07c-ec88-f36e390e5521.png">
トーク画面で、「リバーシ出すのか！」という気持ちになりました。
制作した人は、どのような意図を持って作ったのか気になります。
インパクトが大きく、遊び心もあるので、色んなbotとの差別化ポイントにもなるんじゃないかなと思いました。

LINE連携URL：https://line.me/ti/p/%40wvi8743y



## さいごに

私自身、日常生活で触れる様々な出来事にUXを感じるようになりました。
毎日、何気なく触れていたアプリや日常の風景から一歩下がって新しい視点で見てみることで、
まるで世界の歴史を学ぶことでその国の文化が分かるように、グッとsが添えられると思いました。

日々の生活で「このUX良いな」と思ったら、そのプロダクトや制作物に対してのストーリーも考えながら、
いろんな物に触れていきたいです。

チャットボットのUXライターは、ユーザー1人1人にとってパーソナライズされた情報を届けることができます。
ぜひ、気になっている方はZealsに応募してみてください！

また、チャットボットには「どんなUXがあるのか？」については@morimi0430と
マーケター目線でのチャットコマースの面白さは @micchiiiii が書いてくれているので、興味があれば一読してみてください！

<a href="https://qiita.com/morimi0430/items/0fcf6e75cbca61e5103d">LINEのチャットボットでできるUXデザイン</a>
<a href="https://qiita.com/micchiiiii/items/fdc77e328cda93f7ba53">チャットボット運用者が紹介するチャットコマースの面白さ</a>

### 参考記事（書籍）

<a href="https://note.com/miyaccchi/n/nbec5cd60d45e">『あつまれ どうぶつの森』の世界観をつくるUXライティング</a>
<a href="https://jn.lush.com/article/product-name-optimize">ダイバーシティ＆インクルージョンの観点から商品名の変更</a>
<a href="https://www.leadplus.net/blog/404-error-pages.html">参考にしたいデザインが秀逸な404エラーページ11選！</a>
<a href="https://jp.techcrunch.com/2009/11/20/20091119twitter-now-asks-whats-happening/?guccounter=1&guce_referrer=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS8&guce_referrer_sig=AQAAAJZv9Dkb-33XTiom5fe70pnC0K2V5JaeeK-0kgAzu-X1ZXQz6acMcPO3m8gOcDyqoEVl4jOPnJykepyHo1tNcLLkxinGA7lkK-76yu8d4LfltGDYKTpTenfhk1Ga_3heKR15KeDB1t2h-WWnPRlnGQngp3PtDpS7vxUdoU34d_GM">Twitter、「いまなにしてる？」から「いまどうしてる？」へ</a>
<a href="https://note.com/miyaccchi/n/n165fb934963">人のぬくもりが伝わる「顔が見えるプロダクト」</a>
<a href="https://www.amazon.co.jp/Web%E3%82%B3%E3%83%94%E3%83%BC%E3%83%A9%E3%82%A4%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E6%96%B0%E5%B8%B8%E8%AD%98-%E3%82%B6%E3%83%BB%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B3%E3%83%94%E3%83%BC-%E5%B1%B1%E6%9C%AC-%E7%90%A2%E7%A3%A8/dp/4798049247">Webコピーライティングの新常識 ザ・マイクロコピー</a>

### 補足

アプリのUIを動画で見れるギャラリーサイト<a href="https://ux-mov.com/">「UX. mov」</a>は、色んなアプリのUI/UXをみることができるので、個人開発してる人などはぜひ活用してみてください！!
<img width="1000" alt="aa" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311533/5b4cded3-e031-821c-0cf5-9d3f7e33b2b1.png">