UI/UX

【30億円を生み出したセルフオーダーレジ】マクドナルドの成功の裏側をUXデザインの観点から紐解く

|

マクドナルドは、セルフオーダーレジの導入により約30億円の追加利益を生み出した。 この増益は、主に顧客がセルフオーダーレジを使うことで平均客単価が上昇したためである。マクドナルドのCEOは、セルフオーダーシステムによって顧客が従来よりも多くの商品を注文する傾向があると述べている。（参照元） この記事では、セルフオーダーレジがどのようにして成功を生み出したのか、UXという観点からユーザー体験の向上と企業の利益の両面から探っていく。 セルフオーダーレジとは？ セルフオーダーレジとは、レストランやファストフード店で、顧客が自分で注文を行うためのタッチパネル式の端末である。これにより、顧客は従業員を介さずにメニューを確認し、選択、注文、決済をスムーズに行うことができる。また、通常のレジに比べて、列に並ぶ時間が短縮され、待ち時間を減らす利点がある。 実際にマクドナルドでは、2008年にヨーロッパで初めてセルフオーダーレジを導入した。それ以降、バーガーキングやKFCなどの競合他社も追随して導入し、今では多くのファストフードチェーンで一般的な存在となっている。 それでは、セルフオーダーレジによるユーザーの体験価値の向上について見ていこう。 ユーザーの利益(UX)の向上 マクドナルドがセルフオーダー体験を向上させるために取り組んだことは主に4つある。 ①シンプルさ なるべくシンプルなUIにすることでユーザーが迅速に注文できるように設計されている。 ファストフードを利用する多くのユーザーは、食べたい商品がすぐに見つかり、オーダーできることを求めているため、非常に重要な要素となっている。マクドナルドのセルフオーダーレジでは、ハンバーガーやサイドメニューなどがセクションごとにわかりやすく分かれており、それぞれのアイテムは画像中心のUIとなっているため、直感的にオーダーできるUIとなっている。 ②カスタマイズ性 ユーザーの好みやアレルギーに合わせて注文をカスタマイズできるようになっている。 具体的には、ハンバーガーのトッピングやソースなどの追加や削除など、ユーザーが簡単に調整ができるようになっているため、より多くのユーザーが食事を楽しめるような工夫がされている。また、注文ミスを減らすために、最後に確認が表示されるような導線となっており、ユーザーも安心してオーダーできる設計となっている。 ③楽しい操作感 タッチスクリーンを利用することで直感的に指で操作できるUIになっている。画面のデザインもカラフルでポップな動きをするUIになっているため、ユーザーが楽しみながらオーダー体験できるように設計されている。 ④多言語対応 マクドナルドのセルフオーダーレジでは、複数言語から言語を選べるようになっている。日本では、日本語と英語などから選ぶことができるようになっている。日本語でオーダーができないユーザーでも英語表記に切り替えてオーダーすることが可能になっている。 企業利益の向上 マクドナルドが自社の利益を向上させるために使ったテクニックは主に6つある。 ①ナッジング ナッジングとは、ユーザーに選択の自由を与えつつ、人間の認知バイアスや思考の癖を理解した上でさりげない誘導を行うこと。 セルフオーダーレジの支払い画面では、クレジットカード支払いを推奨するようなUIになっている。クレジットカードでの支払いの方がキャッシュよりも支払い額が増えると言われているため、このようなUIを採用していると考えられる。 また、なるべく多くのセルフオーダーレジを配置することで、待ち時間を減らし、離脱防止に繋げている。7人以上並んでいる時は最大で70％の人が列に並ぶのをやめてしまうという研究結果もあるため、なるべくレジ待ちの列を短くすることが列からの離脱を減らし、オーダーの最大化に繋げている。 ②アップセリング アップセリングとは、ユーザーが当初検討していた単価の低い商品から単価の高い商品の購入を促すこと。 セルフオーダーレジ内のハンバーガーセクションでは単価の高いハンバーガーから順に表示されており、高いハンバーガーが目線の位置にある状態である。元々安価なチーズバーガーを頼もうと思っていたとしても、少し高くて美味しそうなビッグマックを選んでしまう仕掛けになっている。アップセリングのために、ナッジングも利用されていると考えられる。 ③バンドル販売 バンドル販売は、単価で購入するよりもお得な価格でセット商品を提供すること。 セルフオーダーレジでハンバーガーを選んだ後に、ポテトフライや飲み物が含まれたお得なセット商品が表示されるようになっている。ハンバーガーの利益率はそこまで高くないため、ポテトや飲み物などの利益率の高いサイドメニューを一緒に頼んでもらうことが利益率拡大につながる。 ④クロスセリング ユーザーが購入検討している商品に追加の商品を提案することをクロスセリングという。 セルフオーダーレジでは、ハンバーガーを選択した後にセット商品だけでなく、セット商品以外のナゲットやマックフルーリーなどがレコメンドされるような画面設計になっている。また、直感的で楽しいオーダー体験ができるUIが、通常よりも多くの商品を注文しやすい環境を作り出している。 ⑤ダークパターン ダークパターンは企業の利益を優先した結果になるよう、ユーザーが意図しない行動を取らせることを指す。 言い換えると、ユーザーの利益よりも企業の利益を優先させるずるいデザインである。セルフオーダーレジの画面では、トータルの金額がスクリーンの下に小さく表示されており、立っている状態だと視野に入らないデザインとなっている。そのため、ユーザーは合計金額が増えていても気づきにくい。 ⑥A/Bテスト 異なるバージョンを比較して、どちらが効率的かを統計的に検証することをA/Bテストという。 セルフオーダーレジのスクリーン上で、ランダムにコンポーネントの色やサイズ、表示テキスト、商品の並び順やレコメンド商品の表示を変えたりしている。A/Bテストを通して、マクドナルドは利益を最大化できるUI/UXを追求している。 結論：UXデザイナーはユーザーの利益と企業の利益のバランスを考えた設計が重要 マクドナルドのセルフオーダーレジの成功は、ユーザビリティの向上と収益増加の両立を示す好例だ。もちろんナッジングやダークパターンに関しては、ユーザーの信頼を失う可能性や倫理的な問題につながる可能性があるため、ベストな活用事例かどうかは判断が難しい。 しかし、この事例からユーザーと企業の利益の両方を意識することが重要だということがわかるだろう。UXデザイナーの役割は、この両者のバランスを取りながら、長期的な価値を創造することである。 以上のことから、UXデザイナーがユーザーと企業の利益の両方を考慮する上で重要なポイントは以下の3点である。 ①ビジネス目標の理解 企業の戦略や収益モデルを深く理解し、UXがそれらにどう貢献できるかを常に考えることが求められる。ユーザーの問題解決と企業の収益向上を同時に実現できることがベストケースである。 ②長期的価値の創造 短期的な利益だけでなく、長期的なユーザーロイヤリティと企業の持続可能性を考慮する。短期的な利益を追求しすぎることで、ユーザーが離れていってしまうリスクもあるため、長期的な目線を持ちながらプロジェクトを進める。 ③クロスファンクショナルなコラボレーション マーケティング、開発など、他部門と密接に連携することで、様々な意見を取り入れることが可能になる。総合的な視野を持ってプロジェクトを進めることがユーザーや企業のどちらかの利益に偏ることを防ぐ。 これらのポイントを踏まえることで、UXデザイナーはユーザーと企業の利益の双方を向上させるサービスやプロダクトを生み出すことができるだろう。

【世界中のデザイン知識を集約】今聴くべきUI/UX海外ポッドキャスト５選！

|

UI/UXデザインの世界は常に進化しています。デザイナーにとって最新のトレンドを追い続け、インスピレーションを見つけることは重要です。 そのような中でポッドキャストは、業界の専門家から学び、新しいアイデアを発見し、モチベーションを保つことができ、素晴らしいツールです。 ここでご紹介するポッドキャストは、実践的なアドバイスからクリエイティブな洞察まで、デザイナーのニーズをカバーしています。UI/UXとデザインスキルを次のレベルに引き上げるための必聴ポッドキャストを5つご紹介します。 ①UI Narrative: UX, UI, IxD, Design and Research ホスト：Tolu Garcia 内容：UI Narrativeでは、ユーザーインターフェースデザインの世界に深く潜り込み、デザイナーとその作品の背後にあるストーリーを探ります。Tolu Garciaがデザイン業界のエキスパートにインタビューし、UX、UI、インタラクションデザイン（IxD）、そしてリサーチに関する彼らの経験と洞察を明らかにします。 どんな人におすすめか？：経験豊富なデザイナーのキャリア/ライフジャーニーと実践的なアドバイスから学びたい方 btrax US デザイナー Jaredのおすすめエピソード 「Top 10 Skills That Every Product (UX/UI) Designer Must Have」 Aminah CárdenasとTolu Garciaが、プロダクトデザイナーに不可欠なスキルとその獲得方法について議論し、デザイナー志望者や現役デザイナーが成長するためのアプローチの重要性を強調しているエピソードです。 ②UI Breakfast: UI/UX Design and Product Strategy ホスト：Jane Portman 内容：Jane PortmanのUI Breakfastは、UI/UXデザイナー、プロダクトマネージャー、起業家向けの実践的なアドバイスにフォーカスしています。このポッドキャストでは、業界のリーダーにインタビューし、成功するプロダクトを構築するための経験とヒントを共有しています。 どんな人におすすめか？：実践的な戦略やデザインのアドバイスを探している方。実際のプロジェクトに直接適用できるノウハウが豊富です。 btrax US デザイナー Jaredのおすすめエピソード 「Designing for Accessibility」 あらゆるユーザーに対応できるインクルーシブなデザインの作成方法を探っているエピソードです。 ③Self-Made Web Designer ホスト: Chris Misterek 内容: Self-Made Web Designerは、ウェブデザイナー志望者がキャリアを成功させる手助けを目的としたプログラムです。Chris Misterekは自身の経験を共有し、成功したウェブデザイナーや開発者とのインタビューを通じて、実践的なヒントとインスピレーションを提供します。 どんな人におすすめか？: ウェブデザイン業界に参入したい方や現在のスキルを向上させたい方。成功へのロードマップを案内しています。 btrax US デザイナー Jaredのおすすめエピソード “The One Thing You Need to Be a Successful Web Designer” ウェブデザインビジネスを始めるための戦略とヒントを紹介しているエピソードです。  ④Awkward Silences ホスト：Erin May と John Henry Forster 内容：Awkward Silencesは、ユーザーリサーチと、優れたデザインにつながる見落とされがちな会話に焦点を当てたプログラム。ErinとJohnは、UXリサーチャーや実務者にインタビューし、ユーザーインタビューとテストの微妙な点を探ります。 どんな方におすすめか？：ユーザーリサーチの理解を深め、インタビュースキルを向上させたい方 btrax US デザイナー Jaredのおすすめエピソード 「The Future of UX Research with Judd Antin, Dave Hora, and […]

ノーコードツール Framer にウェブサイトを移行－その理由とプロセスとは？

|

1.移行の背景 ウェブサイトの運用には思った以上に自由が制限されたりコストがかかることがある。 しかしノーコードツールの登場により、手間とコストを大幅に削減しながらウェブサイト運用をスムーズに行うことが可能になってきている。 当社への問い合わせでも、弊社にウェブ制作を依頼しつつも、運用は自社で自由に行いたいという要望や、運用コスト削減とスピードを求める声が増えている。 そんな中、弊社も、ノーコードツールを活用すれば、コスト削減はもちろん、エンジニアを介さずデザイナーがフレキシブルに直接ウェブサイトを更新したり、デザインから実装までの時間を短縮したりできる、ということから導入を決めた。 現在、当社のウェブサイトであるbtrax.comは現在は全てノーコードツールのFramerで制作・運用されてる。 今回はその導入による効果やプロセスの概要、そして直面した課題について共有していく。 2.Framerへの移行の効果 Framerへの移行を行なった結果、以下のようなメリットがあった。 ビジネス目線 実装から公開までの高速化 デザイナーやエンジニアに限らず、誰にでも更新が容易になった コミュニケーションコストが低減 運用コストの低下 デザイナー目線 実装が早くできるので、直接ウェブの動きでデザインの検証を行える インタラクションの細かい調整が手軽にできるようになった デザイン要素の管理をFramerのコンポーネント機能からできるようになった 画像の圧縮等はFramerがある程度やってくれるので、面倒な最適化作業がなくなった 何よりも大きい恩恵は、公開までのスピードが早くなったことで、改善や運用を高速に回せるようになり、かける人的コストが減り、他業務に割ける時間が増えたことである。 ウェブサイトは作るまでではなく、作った後にも常に何かしらの工数が取られるものなので、そこを抑えられたことはビジネス上重要である。 デザイナー目線では、Framerではコンポーネントや色、スタイル、カスタムコードをリストのUIで管理できるため、デザイン要素のマネジメントを簡単に整理できるようになった。 Framerではブレイクポイントにおけるフォントサイズを同じテキストスタイルでまとめられたり、ダークモードへの対応も柔軟にできるので要素が散漫になることを防げる。 3.どのようなプロセスで実行したか 今回の弊社のウェブの移行作業は以下の手順で行った。 1.  活用するノーコードツールの比較・検証 2.  デザインデータの整理 3.  デザインの移行 4.  SEO設定 5.  フォームなどの機能実装 6.  レビュー 7.  ドメイン移行・公開   1. 活用するノーコードツールの比較・検証 ウェブのノーコードツールを複数比較し、我々の状況に最も適したツールを選定した。 選定条件は下記のとおりである。 複数人で並行してデザインの編集が可能 コードを使わずに表現できるアニメーションの自由度が高いこと カスタムコードが実装できること 価格 参照できる文献の充実度 上記の判断軸から弊社ではFramerを活用することにした。 コンポーネント機能が充実している点や、複雑なアニメーションを比較的簡単な方法で実装できる点、弊社は英語を母国語とするメンバーも多いので英語文献が存在するということも重要であった。 また、デザイン編集ツールFigmaからデザインを移行するためのプラグイン(​​拡張機能)があり、それも決め手の１つとなった。 【Webflow Framer, STUDIO】実体験に基づく3つのノーコードツール比較と強み解説 プラグインの中には、Framerの標準機能では実装できない要素もあった。 しかし、Framerのコミュニティ内でそれを解決するコンポーネントが配布されているため機能的要件を満たすとわかり、採用を決断した。移行前のウェブサイトで実装していた比較的複雑を考えられるアニメーションも、事前にFramer上に実装してみて確認をとった。   2. デザインデータの整理 FigmaにはFigmaで制作したデザインをコピー＆ペーストでFramerに移行できるプラグインがある。デザインデータの整理にあたってはこれを利用した。 従来のウェブサイトでエンジニアにコードで実現してもらっていた実装と、Figmaで実現した場合のデザインとの差分の整理も行った。 また、これまで日米で別々だったデザイン要素について、同一コンポーネントとして管理できるものは同一コンポーネントとして定義した。 Framerのレイヤー構造は、Figmaのレイヤー構造と同じ状態で実装されるために、まずは、Framerで調整しやすいレイヤー構成を定義し、それに合わせ、Figmaのデザインデータのレイヤー構成の調整を行った。   3. デザインの移行 Figmaのプラグイン「Figma design to HTML for Framer」を活用し、Figam上のデザインを一気にFramerに移行した。移した後はレスポンシブ対応させるために細かい値の調整とアニメーションの設定、コンポーネント設定を行い既存のサイトの再現ができているかを細かく確認した。 CMS対応が必要なものはCMSと接続させ、デザイナー以外でもマネジメントができる環境を整えた。 4. SEO設定 各ページに対し、キーワード、OGP画像の設定を行った。弊社ではSpread Sheetで各SEO要素をまとめているので、それを反映した。   5. フォームなどの機能実装 弊社のウェブサイトには、コンタクトフォームやダウンロードフォームといった外部ツールとの連携が必要な機能がある。これらをFramerに実装されたデザインと連携させていった。 弊社ではFramer上のフォームで情報を収集しそれをメール管理ソフトに繋げる、というオペレーションで自動化を行っている。 どのようなツールが何と繋がっているかはFigJamで表にして、誰にでも見やすい状態でまとめている。   6. レビュー 最後に、デザイン、アニメーション、フォームの機能とオペレーションが正常に働いているかを細かくチェックし、問題がないことを確認し、ドメインの移行と公開を行った。 Btraxでは上記の全ての作業でコードの記述を行わないように工夫し、エンジニアのリソースを極力使わないようした。目的は工数の削減やエンジニアを手を煩わせないことなので、多少調査に時間がかかってもそこの目的からずれることのないようにしている。   4.Framerの課題、振り返り 冒頭にも述べたが、今回のこの移行により、ウェブサイトの改善スピードが格段に上がった。課題の仮説に対し、ごく少数のメンバーでデザインのアップデートを短時間で行えるようになった。 デザイナーとしても、アニメーションを短時間でコミュニケーションコストをかけずに表現できるため、理想とするアニメーションを精度良く表現できるようになった。 一方で、課題となったのは、Framer自身がまだ比較的新しい若いサービスのため、参考情報の収集に時間はかかったことである。 また、フォームのデザインなど、機能的なデザイン要素については柔軟に対応できないものがあった。 日本でFramerを使う場合、まだツールとして新しいため参考文献が少なく、日本でのローカライズすらされていないため、学習コストとハードルを高く感じるだろう。 また、コードを書かないことを前提としたツールなので、現在のウェブの流行でもあるWebGLと3Dを活用したインタラクティブな実装は難しかったり（できないわけではない）、制限はある。 ビジネスとデザインのインパクトを天秤にかけた時に必ずしもノーコードが良いというわけではないので、デザイナーはそこを適宜見分けビジネス的に最善な手段を考えられると良いだろう。 弊社ではさらに今後このツールをベースに新たな取り組みを行う予定だ。 新たな気づきや挑戦はまた記事にしていこうと思う。 ニュースレターに登録するとメールで新しいFreshtrax記事のお知らせが来るため、興味ある方はぜひ登録をおすすめしたい。

【アメリカ進出を目指す企業は必読】今更聞けないウェブアクセシビリティとは？

|

これまで何度かFreshtraxでも取り上げてきた ウェブアクセシビリティ。 日本でも障害者差別解消法の改正施行に伴い、2024年6月から一般企業にも「合理的配慮」が義務化されることになり注目されています。 パンデミックを経て、行政手続きやビジネス、個人間のコミュニケーションまであらゆる領域でのデジタル化が進んだ結果、ウェブアクセシビリティの重要性はますます高まってきていると言えるでしょう。 アクセシビリティとは？その基本とデザインのポイント 欧米圏では、ウェブアクセシビリティは人権の一部であるという考えが広く普及し、法的にも取り締まりが強化されています。 アメリカへビジネス進出を検討する際には、 ウェブアクセシビリティへの配慮は今や避けては通れない道です。 今回の記事では、海外進出を検討している企業様の参考となるよう、ウェブアクセシビリティを理解する上でキーとなるWCAGと最新のウェブアクセシビリティチェックツールをご紹介します。 アメリカ進出の際に ウェブアクセシビリティが重要なのはなぜ？ アメリカ進出において、ウェブアクセシビリティへの配慮がなぜ重要なのか？ ビジネス的な観点から一言でいえば、アクセシビリティが確保できていないウェブサイトを運営することはコンプライアンス違反とみなされるリスクがあるためです。 人権意識の高いアメリカにおいては、1990年に成立した「障害を持つアメリカ人法（Americans with Disabilities Act of 1990 :以下、ADA）」が企業のウェブサイトへも適用されると解釈されています。 アクセシビリティへの配慮がないウェブサイトを運営することはコンプライアンス違反と見做されるリスクがあり、日本企業も訴訟の対象となりえます。 近年、ADA関連の訴訟は増加傾向にあるため、十分な注意が必要です。 アクセシビリティとは、アクセス（access)できる＝製品やサービスなどが利用できること、また、利用できる状況の幅の広さを意味します。 ウェブアクセシビリティは、その名の通り、デジタル空間におけるウェブサイトの利用しやすさを表す概念です。 例えば、小さな文字ばかりが並び、視覚障害がある方や高齢者の方にとって読みづらいウェブサイトは、”アクセシビリティが低い”と形容されます。   アクセシビリティは、重度の障害を持った方など、限られた人のためのものなのでは？と思っている方もいるかも知れません。 しかし、老化による視力の低下や、年齢・世代による理解度のギャップなども含め、アクセシビリティは限定的というより、むしろ包括的な概念です。 デジタル庁が出しているウェブアクセシビリティ導入ガイドブックによれば、日本だけでもアクセシビリティの確保の恩恵を受ける人は428万人以上いると言われています。 どんな人でも、ある日思いがけず怪我をして片手が動かせなくなったり、歳を重ねるごとに耳が聞こえにくくなる可能性はあります。 アクセシビリティは他人事ではなく、いつかの自分や身近な人のためであるとも考えられます。 ウェブアクセシビリティについて理解する上で欠かせないWCAGとは何か？ ウェブサイトのアクセシビリティの確保の重要性がわかったところで、アメリカ基準でコンプライアンスを遵守したウェブサイトを作るためには具体的にどうすれば良いのでしょうか？ 実際のところADA自体には、ウェブサイトがADAに準拠しているかどうかを判断するための具体的なルールというのは定義されていません。 そこでウェブアクセシビティ確保のためのガイドラインとして普及しているのが”Web Content Accessibility Guidelines （通称 WCAG）”です。 このガイドラインは、ウェブに関わる技術の標準技術の開発と普及を行っている非営利団体であるワールド・ワイド・ウェブ・コンソーシアム（World Wide Web Consortium：W3C）によって作成されたもので、ADAに関わるウェブアクセシビリティに関する項目が網羅されています。 このガイドラインに従っている＝ADAに準拠したウェブサイトであると言えます。 WCAGの概要 WCAGは、デスクトップ、ラップトップ、タブレット、及びモバイルデバイス上のウェブコンテンツのアクセシビリティを扱っています。 このガイドラインに従うことで、ウェブサイト上のコンテンツが、視覚や聴覚、運動制限など、様々な障害のある人たちにとって、アクセス可能な状態となります。 これらは、一般のユーザーにとっての使いやすさと矛盾するものではないので、アクセシビリティを向上させることで、利用者全員にとってよりよいウェブサイトにすることができます。 ガイドラインの内容は、時代やテクノロジーの変化に応じてアップデートされており、2024年3月現在、最新版は2023年10月に公開された WCAG 2.2 です。 原文は英語ですが、ウェブアクセシビリティ基盤委員会（WAIC）の翻訳グループにより、日本語版のガイドラインも公開されています。 達成基準は３段階（A・AA・AAA）に分けられており、各レベルの定義は下記の通りです。　 レベルA：ウェブアクセシビリティを確保するために最低限達成するべき状態 レベルAA：ウェブアクセシビリティが十分確保されている状態。日本でも公的機関に対して求められるレベル レベルAAA：非常に高いウェブアクセシビリティが確保できている状態 全体は大きく分けると、知覚可能・操作可能・理解可能・堅牢の４パートで構成されています。 詳細については今回の記事では割愛しますが、WCAGガイドライン（日本語版 2.2)は無料で公開されていますので、興味のある方はぜひご一読ください。 アクセシビリティチェックに使える！無料のブラウザ拡張機能３選 アクセシビリティやWCAGについての概要をご紹介したところで、ここからは実践編として、ウェブサイトのアクセシビリティをチェックする際に無料で使えるブラウザ拡張機能３選をご紹介します。 なお注意事項として、アクセシビリティチェックツールはどれもサイトのアクセシビリティを100％保証するものではありません。 特にコンプライアンス遵守の観点からはマニュアルのチェックは必須ですし、場合によっては専門のベンダーによる監査が必要な場合もありますのでご留意ください。 ① はじめの一歩におすすめ！無料で使えるプラグイン：Google Lighhouse これまで全くアクセシビリティのことを考えたことがなかった！という方へ、はじめの一歩としておすすめしたいのが、Googleが提供しているウェブサイト診断ツールのLighthouseです。日本語にも対応しています。 サイトのパフォーマンスやSEOスコア、そしてアクセシビリティについて、自動でレポートを作成してくれます。 LighthouseはWCAGに特化しているわけではないのですが、基本的な事項は網羅されているので、アクセシビリティの観点からどんなところが問題になるのかの肌感を掴むには、データが見やすく気軽に使えるのでおすすめです。 ご自身の会社のサイトだけでなく、「このサイト、なんだか使いにくいな？」と思ったサイトを診断してみると、意外な発見があるかもしれません。 ② デベロッパーツール内で利用できる：axe Dev Tools ウェブサイトの開発フェーズで活用できるプラグインとしておすすめなのがaxe Dev Toolsです。デベロッパーツール内で使用するためのプラグインです。 チェックしたいページをスキャンすると、重症度ごとに問題を洗い出し、修正するための情報を表示してくれます。Tutorialの動画もわかりやすく、初心者にもわかりやすいです。 ウェブサイトの開発が進めば進むほど、問題が発覚した際に修正必要な箇所が増えるため、開発のなるべく早い段階からこの様なチェックツールを導入できると、アクセシビリティ関連の修正に必要な工数や費用を削減することができます。 拡張機能の設定で日本語も利用できます。 ③ 自動チェック機能に加え、マニュアルチェックリストあり！：Accessibility Insights  同じく開発フェーズでおすすめなのがAccessibility Insightsです。こちらは英語版のみの提供となっています。 ChromeのプラグインとWindowsのデスクトップアプリで利用可能です。 簡易チェック（FastPass）機能では瞬時にサイト内のアクセシビリティ関連の問題と修正方法などをまとめてリスト化してくれます。 また簡易チェックではカバーしきれない範囲は、マニュアルチェックができるように項目が自動でリスト化されます。細かくテスト方法や判断基準が示されるため、初めてチェックをする人にもわかりやすくなっています。 問題が解消されなかった際にはメモが残せる機能もついており便利です。 本記事ではウェブアクセシビリティのアメリカ進出へおける重要性、及び、関連ツールについてご紹介しました。 Btraxは、2004年設立以来、アメリカ進出を目指す日本企業の皆様へ、様々なサポートを提供して参りました。アメリカ進出へ向け、ウェブサイトのリデザインから、リスキリングワークショップ研修まで幅広く対応可能ですので、ぜひお気軽にお問い合わせください。

【UXリサーチの価値】法人向けサービスでUXリサーチを成功させるコツ3選

|

筆者はBtraxでUXリサーチャーを担当しているのですが、近年日本でもUXデザインというワードは認知されるようになったものの、UXリサーチについてはまだ十分に理解が広まっていないように感じています。 特に法人向け（BtoB）のサービスやプロダクトにおけるUXリサーチは、その重要性にもかかわらずしばしば見過ごされがちです。 UXリサーチって本当に必要なの？AIが発展した後もデザイナーやリサーチャーに依頼する価値はあるのか？ という疑問が沸々と湧いてきそうな今だからこそ、今回はUXリサーチとは何かという基本から始め特にリサーチが軽視されがちな法人向けサービスのUXリサーチに焦点を当て、その特徴や重要性についてご紹介していきたいと思います。 二本立ての記事の後編となる法人向けサービスのためのUXリサーチのメリット、及び、実践する上でのコツをご紹介していきます。 前編の記事をまだ読んでいないという方は、ぜひそちらも合わせてチェックしてみてください。 【UXリサーチとは？】法人向けサービス領域で軽視されがちな3つの理由 法人向けサービスのためにUXリサーチを行うメリットとは？ 前編の記事では、法人向けサービスにおけるUXリサーチは、ROIがわかりにくく、また、ビジネスソリューションに自信がある企業であればあるほどやらずともとりあえず前にはには進めるので、実行されずに前に進みがちであるという側面を取り上げました。 ではそんな法人向けサービスのためのUXリサーチを実施するメリットとは何か？主要な3つのポイントをまとめましたので、一緒に見ていきましょう！ ①法人向けのサービスこそ、”ユーザーへの共感”が競合に負けないサービスを生む 前述の通り、法人向けサービスの顧客は、消費者向けのサービスのように満足度や感情的な側面、個人の価値観を基に商品を選ぶわけではありません。 このため、個人としての体験や考えを掘り下げていく定性調査の必要性を疑問視する人がいることは当然かと思います。 しかし、ステークホルダーが複数存在し、購入時に綿密な検討が必要とされるような複雑性を抱えたサービスにこそ、定性調査は効果的です。 例えば、実際にサービスを使用するユーザーにとって重要なことが、意思決定を行う経営層には重要でないこともあります。 決裁権を持つマネジメント層に好まれるサービスを提供し、一時的には導入されたとしても、現場で実際にサービスを使うユーザーが不満を抱えていた場合、彼らが後に管理職に就いた際により現場に求められるソリューションへ乗り換えられてしまうようなケースは少なくありません。 デザイン思考における「共感」とは？ – デザイン思考を学ぶ Part 2 法人向けのUXリサーチでは、多様なステークホルダーと意思決定プロセスを整理・可視化し、多角的にサービスの妥当性やニーズを探っていきます。 また、導入時だけでなく、その後の継続利用に必要な要素を特定し、長期的な利用を見越したサービス改善のためのインサイトを抽出します。 サービスの導入から実際の日々の利用まで、様々な人が関わる法人向けサービスだからこそ関わる人々の生の声に耳を傾け、見過ごされがちな細かいニーズや不満から改善案を練ることは有効であると思います。 ②市場投入時のリスクを抑え、マーケットフィットを最大化する UXリサーチはサービス開発の様々な段階で実施が可能ですが、特に市場投入前の導入は効果的です。 開発初期段階でユーザーからの質の高いフィードバックを得ることは、市場投入後に起こりうる期待値やニーズのズレ、マーケットの特殊性を見過ごすリスクを低減します。 これは、新しいサービスだけでなく、既存のプロダクトを新たなマーケットに投入する場合にも有効です。 事前リサーチを行わずに過去の成功体験だけを頼りに参入すると、予期せぬ障害が発生し、競合に対して不利な状況になるリスクがあります。 ターゲットユーザーの深い理解と、マーケットおよび業界の特性を網羅的・構造的に把握することで、サービスのマーケットフィットを最大化できます。 北米の事例に見るファンマーケティング① ユーザーリサーチに学ぶ今後企業が取り組むべき「ファンづくり」の重要性 ③顧客満足度の向上は、インターナルのコスト削減にもつながる ユーザーのニーズを正確に理解し、ビジネスゴールと照らし合わせて優先順位を明確化することは、開発プロセスの効率化・最適化に繋がります。 また、見落とされがちですが、ユーザーの声をプロダクトに反映させることは、クレームや問い合わせの削減に大きく貢献します。 特に、サービスがスケールしカスタマサポートの部署が設けられると、当然ですが顧客対応には人件費が発生します。 ソリューションがビジネスニーズに合っていても、ユーザーがサービスの使い方や細かな機能を理解できなければ、それは直接的に問い合わせの増加に繋がります。そしてそれは内部コストとなります。 法人向けサービスは、内容や用途が複雑なので導入のための教育コストが大きく、ユーザーの期待値や緊急性が高いために利用開始後のクレームが発生しやすいです。 設計段階からこれらの要素を考慮することは、顧客満足度の向上とクレーム・問い合わせ対応の工数削減につながります。 「欲しい」の言葉を信じるな！行動でニーズを検証するプロトタイピング手法 難易度高めな法人向けサービスのUXリサーチを成功させるコツ3選 さて、ここまで法人向けサービスのUXリサーチが後回しにされがちな理由と、実施した場合のメリットについてご紹介してきました。 ここまで読んでいただいた方の中には、「やっぱりやったほうがいいのはわかったけれど、実施のハードルが高いのもやっぱり事実なんだな」とモヤっとしている方もいらっしゃるかもしれません。 一般消費者向けのサービスに比べ、複雑で難易度の高い法人向けサービスのためのリサーチ。成功させるためのコツはいくつかありますが、特に重要なことは以下の３点であると筆者は考えます。 ①”巻き込み力”と情報・データ収集 法人向けのサービスは、何度も言及しているように、サービスの構成要素が多く複雑で、ステークホルダーの数も多いです。 さらに、ソリューション自体がニッチな領域に特化している場合が多く、リサーチには幅広い知識と深い洞察の両方が必要です。 このような状況下で重要となるのは「人」です。 プロセスの仕組みや関連する専門知識などの情報を得るためには、インターネットや書籍よりも、可能な限りその業界に精通している人（各部署の担当者やベンダーを含む）に直接聞くことがより効果的です。 これは、ニッチな業界の情報は一般にインターネットや書籍で公開されていることが少ないためです。 例えば、ソリューションが化学分野の研究者向けのサービスであっても、その販売経路を理解するためには代理店の知識が必要になるなど、様々な角度からの情報収集が求められます。 ターゲットユーザーからのフィードバックや意見を聞くだけでなく、サービスに関わるできるだけ多くの「人」を巻き込み、直接情報を収集することが成功の鍵となります。 ②”単純化しすぎない”情報整理 法人向けサービスのリサーチでは、その複雑性ゆえに、情報の整理が肝になります。 そこで注意が必要なことは主に２つ。 たくさん集めた情報からインサイトを抽出する際に、情報を単純化しすぎないこと。 無闇に情報を組み合わせて”正解っぽく見える”結論をこじつけないこと。 ターゲットが誰であれ、現実の市場を相手に、生身の人間の声を集める上で避けられないこと、それは”矛盾”です。 ”コストが一番大事だ”と言っている割に目の前に最安値のオプションを提示しても買ってもらえず、顧客は一見割高に見えるサービスを使い続けている。 これは一般消費者向けのサービスだけではなく、法人向けのサービスでも起こります。 また、法人向けのサービスでは、現場ではAが大事だと言っていて、マネジメント層はBが大事だと思っていて、法務部の人はCは外せないと言っている。 全員同じ会社にいて同じゴールを目指しているはずなのに、言っていることがまるで違うというような事態が起こります。 このような矛盾に対峙したときに重要なのは、矛盾を矛盾しているまま”まるっと”受け入れることです。 「Bと言っている人もいるけど実際にはCだよね」と勝手に結論づけずに、各ステークフォルダーがある程度納得して進めるための公約数はどこかにないのか、、？全てはトレードオフの関係にあるのか？ といった問いからサービスの改善点を探っていくところにUXリサーチの価値があると思います。 ボトルネックだと思っていた問題が実は突破口を見つけるための鍵を握っているなんてこともあります。 先入観を捨てて、できるだけ生のデータを集め、複雑なものを複雑なものとして受け入れる。そこからのインサイト抽出が、真の顧客理解とマーケットフィットの最大化に繋がります。 ③デジタルツールの活用と再現性の高いシステム作り 法人向けサービスのユーザーリサーチが、一般消費者向けのサービスに比べて特に難しいポイントはリクルーティングです。 業界がニッチであればあるほど、ターゲットのイメージに近い人々にインタビューやサーベイへ参加してもらうハードルは上がります。 また前述の通り、集めるデータも多様で、データの下処理や分析にも時間がかかるため、できる限り全体のプロセスをシステム化・効率化することが重要です。 例えば、 リクルーティング方法の持ち札を増やし、Aがダメな場合はBとすぐに動けるようノウハウを体系化する。（法人向けリクルーティングに特化したサービスも存在するので、自社のサービスと相性の良いサイトを見つけておくと安心です） リクルーティングの際の募集文章を目的別にテンプレート化し、ストックしておく。 インタビューなどから得た音声やテキストのデータを、分析用に加工するためのデジタルツールの選定及びフローを確立しておく。 パンデミックによりオンラインでインタビューを実施する会社が増えた結果、リサーチを効率化するためのサイトやツールも増えてきています。 それらをうまく組み合わせ、またノウハウを体系的に蓄積することで、より時間をかけるべきタスクへ集中することができます。 本記事では、UXリサーチの役割と、法人向けのサービスにおけるUXリサーチの重要性及び成功のコツについてご紹介しました。

なんちゃってUXデザイナー見破る7つのポイント

|

UXデザイナーの重要性が高まるにつれて、多くのデザイナーが自分のことを “UXデザイナー” と呼ぶようになって来ている。 その一方で、その仕事内容があまりにもぼんやりしすぎてて、面接の際にどの人が本当にUXデザインスキルがあるのかがわかりにくい。という疑問を持つことがある。 そもそもUXデザイナーは本当にデザイナーなのか？という説もあるくらいだ。 UXデザイナーは本当にデザイナー？UXデザインの役割の拡大 ポートフォリオに騙されるな! 実際のところ、ポートフォリオに掲載されている作品の質だけで判断することは難しいし、そもそもほとんどのプロジェクトがチームで行うため、その人がどこまで関わっているのかを見極めるのも容易ではない。 また、freshtraxを日々読んでいれば、デザイナーとしての知識はかなり蓄積するが、残念ながら、それだけで優れたUXデザイナーになれるわけでもない。 【給与差1.4倍】グラフィックデザイナーからUXデザイナーになる方法 UXデザイナーの標準スキルが明確ではない そもそもUXデザイナーという肩書き自体が比較的新しいものであるため、その仕事内容とスキルセットが明確になっていないのも一つの原因だろう。 元々Webデザイナーをやっていた人が、ワイヤーフレームとフローチャートを作成した経験を元に「UXデザインできます！」と宣言しているのかもしれない。 CXデザインとは？UXデザインとの違いとそれぞれの役割 偽物デザイナーをあぶり出す では逆に “なんちゃって” のデザイナーを見極めることができれば、消去法で自ずと本物をあぶり出すことができる。これまで何十人も面接してきた経験を元に、偽物のUXデザイナーの見分け方を公開する。 志望者の多いUXデザイナー職を採用する際に、下記の5つのポイントに関する質問を行い、その答えの内容でその人が本物のUXデザイナーを見分けることができるだろう。 1. よく聞くと単なるUIデザイナー これが一番あるあるなパターン。UXデザイナーポジションに対しての応募者のかなりの割合が、実はUIデザイナーのスキルしか持ち合わせていない。 これまでの実績を見てみても、明らかにUIのデザインやビジュアルデザインの作り込みはしているが、ユーザーリサーチや体験の設計などのUXデザインに関するプロセスを実践した経験はない。 もしくは、UIデザインとUXデザインを混合してしまっているケースすらある。 まずは、UIデザイナーとUXデザイナーの役割の違いを理解するところから始めた方が良いだろう。 UXデザイナーとは？仕事内容、求められるスキル、活躍するデザイナーとは 2. UXデザインの経験がワイヤーフレーム作成のみ 元々WebデザインやアプリUIデザインを行っていたデザイナーが、手っ取り早くUXデザインができるふりをする方法がワイヤーフレームの実績をポートフォリオに掲載する事。なんとなくもっともらしく見える。 しかし、そもそもワイヤーフレームの役割や、作成に至るまでのプロセスが理解できていないと、UXデザイナーとは言えない。 ワイヤーフレーム自体はあくまで全体像を把握したり、ユーザーテストで利用し、データを収集するための際の手段でしかなく、目的にするべきではない。 そもそも、マルチデバイスが当たり前の現代においては、ワイヤーフレームの作成はコンテンツ作成と同時に進める必要があり、むしろ全体を通じたメッセージングの方が重要なので、ワイヤーフレーム自体の価値がかなり低くなっているのも事実。 UXデザイナーの仕事は、伝えるべきことに対して最も効果的な体験を構成することである、ワイヤーフレームの作成自体が目的になるべきではない。 UXデザインプロセスの基本的な6ステップ 3. UXデザインの基本的な構成要素が理解できていない これもUXデザインにおける基本的な内容だが、その構成要素が理解できていないパターン。 真のUXデザイナーであれば、タスクフローや情報アーキテクチャ、インタラクションデザインといった個々の要素はもちろんのこと、それらを体系的に統合することで、誰しもが直感的に利用できるシームレスなユーザー体験をデザインできるはず。 しかし、名ばかりのUXデザイナーにこの基本的な洞察が欠けているケースがしばしばある。単に綺麗な画面を作ることに注力し、ユーザーが目的を達成するまでの一連の流れを明確にデザインできていない。 本物のUXデザイナーを見極めるには、その人物がユーザー体験全体の森を見渡す目を持っているかどうかを確認することが不可欠になる。 【わかりやすく解説】UXデザインの基本と主要概念 4. UXデザインのプロセスを知らない UXデザインのプロセスには、調査、アイデア創出、プロトタイピング、テストといった一連の段階が存在する。 しかし、中にはUXデザイナーを名乗りながら、こうした基本的なプロセスすら理解していない人がいる。 彼らは単に画面のモックアップを作成することに注力し、その先のプロセスを考えようとしない。ユーザー調査なしに勝手な仮定のもとで設計を始めたり、納得のいくまでプロトタイプを繰り返し改善したりすることなく、最初のアイデアをそのまま提供したがる傾向がある。 本物のUXデザイナーは、この定石とでもいうべき一連のプロセスを熟知しており、それを適切に運用して最善の結果を導き出せる能力を備えているはず。プロセスを省略する姿勢は、プロのUXデザイナーの資質に欠けると言わざるを得ないだろう。 UXデザインプロセスの基本的な6ステップ 5. UXとユーザビリティーを混合している UXとユーザビリティは、ともにユーザー中心の設計を目指すものの、似て非なる概念である。 ユーザビリティは、主にタスクの遂行効率や使いやすさ、エラー率の低減など、システムの機能面での改善を扱いう。 一方UXは、ユーザーの感情面や価値観に訴えかける体験のデザインを重視する。楽しさ、魅力、満足感といった主観的な側面に注力するのが特徴。 したがって、この2つを混同している人は、UXデザインの本質を見誤っていると言えるだろう。システムの効率化にばかり気を取られ、感性面を置き去りにしがち。結果的に、使いやすいけど、なんかワクワクしないプロダクトになってしまう。 本物のUXデザイナーであれば、ユーザビリティとUXの違いを明確に理解し、両面の改善をバランス良く図ることができるはず。この視点が欠如している場合は、なんちゃってUXデザイナーじゃないかと疑って良いだろう。 6. ビジネスゴールとユーザーメリットのバランス取りが苦手 UXデザインにおいては、ビジネスの目的とユーザーのメリットを両立させることが大切になる。 たとえば、ECサイトの場合、単に商品を売りたいというビジネスゴールと、購入がしやすくなることをユーザーは求めており、その二つを上手に達成するのがUXデザイナーの役割になる。 本来のUXデザイナーであれば、こうしたニーズのバランスを取りながら、win-winなソリューションを生み出す洞察力があるはず。 しかし、中にはビジネス目線のみで設計を進めがちな人もいる。ユーザー体験をある程度犠牲にしてでもコンバージョン率や売上を最大化しようとしがち。特に営業ノルマを重視しすぎるが故にこのパターンにハマるケースがある。 逆に、ユーザー目線に傾き過ぎ、ビジネス上の制約を無視した純粋に使いやすいシステムを提案するデザイナーもいる。この場合は、デザイナーのエゴが強すぎて、企業の利益を置き去りにしてしまうのだ。 いずれにせよ、このバランス感覚が欠如しているのは、本物のUXデザイナーとは言えないだろう。 「良いデザイン」とは？GoogleのUX Lead Designerから学んだ5つのこと 7. ユーザーテストとフォーカスグループの違いがわからない ユーザーテストとフォーカスグループは、ともにUXデザインにおける重要な調査手法だが、その目的と方法は異なる。 ユーザーテストは、プロトタイプや実際の製品を個人に操作してもらい、タスク遂行できるかどうかを観察するテスト。使いにくさの発見が主眼となる。 一方、フォーカスグループは、数人のユーザーに意見を求めるグループディスカッション形式で、新機能への要望や概念に対する感想を聞き出すのが目的となる。 本物のUXデザイナーであれば、この2つの手法の違いと使い分けを理解しているはず。言い換えると、目的に応じて適切な調査手法を選択できる力量が求められる。 この基本的知識がない場合は、なんちゃってUXデザイナーである可能性が高い。 実践デザイン思考！量より質を極めるユーザーリサーチ基本のキ まとめ: 優れたUXデザイナーを見分けるのは難しい デジタル化が進んだ2010年代以降、UXデザイナーはトレンドの職種となり、自称UXデザイナーもも増えている。しかし実際には、本物のUXデザイン能力を備えている人物はまだ少数派なのが現状である。 今回の内容を参考に、優れたUXデザイナーを見極めるためのポイントを抑えたい。ただし、完璧なUXデザイナーは存在しないことも理解しておく必要はある。 大切なのは自身の専門性を磨き続け、ユーザー体験の向上に真摯に取り組む姿勢を持ち合わせているかどうか。 優秀なUXデザイナーの育成には、実践を積み重ねることが不可欠。ユーザーとビジネスの狭間で失敗を恐れず挑戦し続けることが、この分野で成功への近道と言えるだろう。 こいつできるな！と思わせるUXデザイナー 7つのソフトスキル

【btrax初書籍をチラ見せ】第6章 ブランディングのキホンからインクルーシブデザインに代表される最先端のデザイン手法まとめ

|

第1-5章の解説に続き、今回もbtraxの書籍『デザインの思考法図鑑』の各章の内容をご紹介していく。 第6章のテーマは『デザインを表現する・伝える』。デザインと切っても切り離せないブランディングにまつわる内容を基礎から効果測定方法までお伝えするだけでなく、デザインを考える上でインプットしておくと良い「UXライティング」「エシカルデザイン」など、幅広いトピックを取り扱う。 第6章の内容はこんな方におすすめ： 顧客体験（CX）に関して詳しく知りたい方 ブランディングの概念から、ブランディングの成功/効果測定方法まで知りたい方 デザインとブランディングの関係性を知りたい方 デザインにおいて考慮すべきポイントを学びたい方 第6章　デザインを表現する・伝える 目次 顧客体験（CX）の考え方 ブランディングの基本 ブランドの構成要素 ブランディングのプロセス リーンブランディング デザインとブランディング ブランド価値の測定 UXライティング エシカルデザイン アクセシビリティ ユニバーサルデザイン インクルーシブデザイン 顧客体験（CX）の考え方 UXと併せて語られることの多い「顧客体験（CX）」。顧客体験のデザインでは、顧客との最初の接点からリテンションまでの全てのやりとりが対象だ。今回は顧客体験の設計方法と、それをいかにUXデザインに連携するのかに関してご紹介する。 参考記事： CXデザインとは？UXデザインとの違いとそれぞれの役割 ブランディングの基本 ブランディングが大切とされているのは周知の事実。この項は全ての基本となる「ブランド」と「ブランディング」の何が異なるのか？そしてブランディングを行なって得られる効果とは？に関して解説します。 ブランドの構成要素 ブランドはいくつかの要素で成り立っています。この項では、成功するブランディングの構成要素を解説。この章を見れば、ブランディングを行う上で守るべき観点がわかるだろう。 参考記事： ブランドをビジネス価値に変換させる5つの構成要素【ブランディング入門#1】 ブランディングのプロセス 前2項に引き続き、ブランディングをトピックに扱う。今回はブランディングを実施するプロセスを明示し、各ステップでどのようなアクションや成果物が求められるのかを順を追って解説します。 リーンブランディング 「リーンブランディング」という言葉を聞いたことがある方はいらっしゃるだろうか。リーンブランディングとは、リーンスタートアップでいうところの「新しいビジネスモデル」の代わりに、「柔軟なブランド」の構築・開発を目指すものだ。 では、通常のブランディングではなくリーンブランディングの考え方を使用するメリットとは？ 参考記事： ブランド構築に役立つリーンブランディング その基本と3つの活用シーン デザインとブランディング ブランドとデザイン、両者は切っても切り離せない関係にある。それはブランドが「デザイン」の対象であるためだ。今回はデザインがブランディングにどんな価値を与えるのか、ブランディングに求められるデザイン的発想を3つ例に挙げてご紹介する。 参考記事： 意外と知らないデザインとブランディングの関係性 ブランド価値の測定 ブランディングに投資がされにくい理由の一つに、「結果が定量的に示しにくい」「効果測定がしづらい」ことが挙げられるだろう。そんな課題を解決するために、この項ではブランドマネージメントにおける、ブランド価値の算出におけるデータの活用方法をまとめていく。 参考記事： ブランド価値の効果測定方法 〜2つのデータ活用法〜 UXライティング 「UXライティング」とは、物事の価値を、的確かつストレスなくユーザーに伝えるための言葉を通じたユーザー体験設計の総称を指す。ユーザー体験はデザインのみならず、ライティングでも必要になってくる。今回はすぐに実践できるUXライティングの5つのポイントをご紹介する。 参考記事： デザイン視点で心を掴む UXライティングの基本5項目 エシカルデザイン エシカルデザインとは、倫理的観点からプロダクトやサービスと向き合い、デザインを見直そうとする姿勢のことだ。 人間の心理や感情に直接的に触れうるデザイナーは、ユーザーを知らず知らずのうちに過剰広告や扇動広告など、結果的に不幸にさせているケースもある しかし、エシカルな観点が実践できているかは自分では気づきにくいもの。この項ではエシカルデザインを実践する上で必要になる観点をチェックリストで明示していく。 参考記事： エシカルデザインとは – 時間と環境と生活に優しいデザイン アクセシビリティ アクセシビリティとは、元々はウェブデザインの用語として誕生した「アクセスしやすい」「利用しやすい」という意味の言葉だ（現在では、ウェブサイト以外の領域でも使用されている）。 では、「アクセシビリティが実現されている状態」とはどのようなものだろうか？今回はW3C (World Wide Web Consortium)が公開しているウェブサイトのアクセシビリティガイドラインから考えてみる。 参考記事： アクセシビリティとは？その基本とデザインのポイント ユニバーサルデザイン ユニバーサルデザインとは「年齢や能力、状況に関わらず、多くの人が使いやすいように製品や建物、環境をデザインする」ための考え方だ。この項では、ユニバーサルデザイン7原則の各項目をご紹介。ユニバーサルデザインを確認する指標となれば幸いだ。 参考記事： インクルーシブデザインとは？現代の多様性に寄り添う7つの実例 インクルーシブデザイン インクルーシブデザインは、これまでデザインのプロセスから無意識に排除されてきてしまった方々も含めてデザインを行うことを指す。 ユニバーサルデザインと似た概念だが、ユニバーサルデザインはデザイナー手動で目指すものであるのに対して、インクルーシブデザインはユーザーをデザインのプロセスに巻き込んで一つのサービスやプロダクトを作り出すことを目指すという違いがある。 この項では、インクルーシブデザインの定義とともに、インクルーシブデザインの実現のための3つのステップを解説する。 参考記事： インクルーシブデザインとは？現代の多様性に寄り添う7つの実例 まとめ 今回はbtraxの書籍『デザインの思考法図鑑』より第6章の内容のポイントをかいつまんでご紹介した。この記事を機に、多くの人に書店で手に取っていただけたら嬉しく思う。

【Webflow Framer, STUDIO】実体験に基づく3つのノーコードツール比較と強み解説

|

Web制作の現場において、ノーコードツールが頻繁に使われるようになった。 弊社でもここ2年ほどはノーコードツールをプロジェクトで活用し、デザイナーがデザインから実装までを一気通貫で行うケースもある。 2022年に注目のスタートアップトレンドとサービス ノーコードツールの使用は、Webの実装に詳しくない人でも運用を手軽に行えるという面で、チームで活用する際に効率が良い。 何よりノーコードツールは、自分たちでサーバーを管理する必要がなかったり、ドメインの設定も楽だったりと、公開に必要な煩雑な側面が削減できるため、非常に便利だと感じる。 弊社では、数あるWebサイトのノーコードツールの中でもWebflowをメインにこれまで使ってきた。しかし場合によってはSTUDIOを使い、最近はFramerも使い始めた。 この3つのツールは、それぞれ価格や使える機能、使いやすさなどに違いがあり、現在は実際に使いながらどのツールがどんなサイトに向いているのかを模索している。 本記事ではそこで分かった違いから、各サービスの比較・分析をしてみる。今後ノーコードでWebサイトを実装したいデザイナーや、すでにノーコードツールを活用している人の参考になれば幸いだ。 各ツールの紹介 まず詳細な比較に入る前に、Webflow、STUDIO、Framerについて簡単に概要を紹介する。 Webflow 2013年にサンフランシスコで創業されたサービスで、デザイナーをメインターゲットにしたノーコードツールである。 特徴としてはツール上で構築したウェブのHTML, CSS, Java Scriptを書き出せる機能があったり、UIもコードの記述の仕方をビジュアライズしたようなもので、実際にコードを書くときのやり方に忠実なノーコードツールである。 Framer 2015年にオランダで創業されたサービス。この企業はウェブのノーコードツールを提供する以外にも、開発者向けにFramer MotionというReactのアニメーションライブラリを提供している。もともとはコーディングができるデザイナーのためのプロトタイプツールとして始まり今のノーコードツールに至る。 共同編集が可能で、特にコンポーネント機能が充実している。他にもSEOやパフォーマンスを上げるために必要な機能が多く、Google Lighthouseでデフォルトで良いスコアを残せるとアピールしている。 STUDIO 2016年に創業された日本発のサービス。創業者にデザインバックグラウンドがあり、会社のビジュアルなど総合的にデザインが優れていると感じる。 デザインの共同編集ができたり、日本発のサービスであるため日本語対応したチュートリアルやコミュニティ上のリファレンスが多くあったりする。料金もサイト単位のため、チームでの開発をしていくとなると他の2社よりも価格が安い。 3サービスの比較・分析 ここの章では実際に3つのサービスを以下の項目で比較していく。 デザインの実装の仕方・使いやすさ 実装できるインタラクションの自由度 学びのハードル・リファレンスの多さ 価格 前提としてここで取り上げた3サービス全て、基本的なデザインの編集機能に加えて、CMS機能、ページ公開のためのホスティング機能、フォームの制作機能がついている（EC機能が標準でついているのはWebflowだけ）。 そのためそれ以外でデザイナーが実務で使う際に気になるポイントをまとめていく。 1. デザインの実装の仕方・使いやすさ まずはじめにデザインを実装していく際のやり方・使い勝手の良さについて比較してみる。 Webflowの場合 ツールの紹介でもお伝えしたが、デザインを組む時の考え方は実際にHTML・CSSを実装するやり方にとても似ている。 そのためそれらの基本的な知識が前提として必要だったり、知識があれば使い方をより早く学ぶことができる。 他の2つのサービスと比較すると初見ではUIの要素が多くやや複雑に感じる。 しかし、これまでHTML・CSSを使ったWebデザインの実装経験がある人なら早く使いこなしていけるようになっている点はメリットだろう。 一方でそれらの知識がない人にとってはやること・学ぶことが多く、複雑に感じてしまうため、慣れるまでのハードルが高いと感じる。 ただ、実装が複雑な分、複雑なアニメーションの実装やクラスごとにスタイルを統一したページの制作が可能だ。 ある程度のラーニングコストはかかるが、その分デフォルトの機能で自由にデザインを設計できるのがWebflowである。 Framerの場合 FramerのUIはFigmaに近い。そのため、一度でもFigmaを使ったことがある人であれば使い馴染みのあるデザインで慣れるのに時間はかからないだろう。 デザインを作るための必要なアクションも絞り込まれており、基本的にはフレームという要素を足して、そのフレームに並び順などを設定してレイアウトを作っていく。そしてその中にテキストや画像を配置して、スペースを指定する。 この使用感はFigmaでフレームを配置してAutoレイアウトを使い、スペースを調整していく感覚と似ている。 冒頭で説明したようなコンポーネントの作成やスタイルセットの登録と管理が簡単でわかりやすいことは大きなメリットだ。 著者としてはブランドガイドラインやスタイルガイドラインが定義されているデザインのページや、ページ数の多いデザインを作るのに最適だと感じている。 STUDIOの場合 STUDIOは、必要な要素を直接マウスで配置したり調整したり触りながらスペースや画像のサイズを調整しやすいUIになっていると感じる。そのため、とても直感的に編集ができる。 特にデフォルト画面では多くのUI要素を出さずに、編集したい要素をクリックしてUIが出現したり、必要に応じて縮小化されたウィンドウを出すようにしている。   2. 実装できるインタラクションの自由度 Webデザインを制作する上で、アニメーションも重要な要素の一つである。このセクションでは3つのサービスのデフォルトで実装できるアニメーションの自由度を比較する。なお、3つのサービスは全てカスタムコードが使えるため、コードを書けば実装できないアニメーションはないと言えるが、今回はデフォルトの機能でできる範囲を比較することとする。 デフォルトの機能を使って最も自由度高く実装できると感じているのがWebflow である。 Webflowは、ホバーやフェードインといった基本的なアニメーションの設定をはじめ、パララックス表現などの設定もできる。 アニメーションの開始のタイミングの調整も自由自在だ。ページのスクロールや、ページをロードしてからの経過時間などで詳細に設定できる。 操作は複雑で実装も手間がかかるが、その分派手なアニメーションをノーコードで実装できる。 Framerも、FigmaのSmart Animationのように変更前と後の状態を作ることでその差分を埋めてくれるアニメーションを作ってくれる。ただ、Webflowほどは細かく設定はできない。そこまで凝ったアニメーションを使わないのであればFramerでも十分だろう。 一方でSTUDIOは、簡易的なアニメーションの実装はデフォルトの機能でできるが、より複雑で派手なアニメーションの実装にはカスタムコードを使う必要が出てくる。もしくはLottieやSVGなどで事前に作ったモーションを入れ込む必要がある。 3. 学びのハードル・リファレンスの多さ 日本人にとっては、やはり日本語文献と日本語コミュニティがあるSTUDIOが最も学びのハードルが低いと感じる。 動画の解説をはじめ、STUDIOコミュニティも日本語で活発に動いているため、必要な情報を慣れ親しんだ言語で集められるのはSTUDIOへの学びのハードルを大きく下げていると感じる。 ある程度英語のチュートリアルに抵抗がないのであれば、STUDIOの次に学びやすいのはWebflowだろう。 WebflowはWebflow Universityというコミュニティがあり、チュートリアル動画などがとても豊富に用意されている。動画にジョークが入っていたりと、楽しみながらWebflowの使い方を学べるだろう。 英語ではあるがリファレンス自体も非常に多く、大体の困ったことは検索すれば解決できる印象だ。 一方、3つのサービスの中で最も学びのハードルが高いと感じるのが、Framerである。 基本的なチュートリアルはあるものの、サービス自体が比較的新しいため、リファレンスやFAQなども現在はまだ少ないためだ。今後ユーザーが増えていくにつれて、こういったサポートも増えていくだろう。 4. 価格 個人利用でカスタムドメイン（自分で購入したドメインを使う場合）を使わないのであれば、3サービスとも無料でWebサイトの公開までできる。 もしCMSやカスタムドメインを活用したり、複数名のチームで運用したりする場合を想定すると、最も高額なオプションはWebflowになり、次がFramer、最も安価なオプションがSTUDIOとなる。 また、FramerとWebflowはページの公開に必要な料金に加えて「ワークスペース」というものにもお金を支払う必要がある。これは、ページの運用代とは別でチームの参加人数単位でかかる金額だ。チームが大きくなれば1人あたりのワークスペースの価格が上がっていく。 CMSの追加できるコンテンツ量やフォーム機能の制限など細かい条件などで変わってくるが、おおよそ上記の価格差である。 まとめ 3サービスの比較でわかったのは、使うシーンや目的によって、各サービスを使い分けると良いということだ。 ここまでの話をまとめて、著者が思ったことは、 「シンプルなインタラクションで素早く安く実装して公開したい」ならSTUDIOが向いている ページ数が複数にまたがっている、同じ要素を繰り返し使う規模の大きなウェブサイト、ブランドスタイルを定義して、効率よく一貫性のあるウェブサイトを作りたいならFramerが向いている ページ数は多くないが、カスタムコードを使わずに派手なインタラクションまで実装したいのであればWebflowが向いている ノーコードでのWebサイト作成において、各社が何を重要視しているのかがそれとなくこの分析から見えてくるのではないだろうか。 また、各社ともにUIも大きく違うため、ぜひこれからノーコードツールを使おうと考えている方、コーディングに対しての知識があまりないが、ウェブサイトを作りたいと考えているデザイナーは、この記事を参考にツールの検討をしていただけたら幸いだ。 btraxは日米にオフィスを構えるデザイン会社として、世界中のクライアント対し、各国の市場をリサーチし、ターゲットに適切なデザインや体験を提供している。 Webサイトをはじめとするサービスデザインや、ブランディング、コミュニケーションデザインの領域でお困りごとがあれば、ぜひお気軽にお問い合わせください。

駆け出しデザイナーが日米のbtraxデザイナーに聞く、デザインプロセスとアイディア発想方法

|

著者はサンフランシスコにある大学でデザインを勉強しつつ、btraxでUI/UXデザイナーとしてインターンをしている。 学生のうちにインターンをすることのメリットの1つは、プロのデザイナーが身近にいるということ。普段は教授と生徒としか関わることができないため、これはとても貴重な経験だ。 今回はこのアドバンテージを活かして、著者が駆け出しデザイナーとして疑問に思う4つの質問を、btrax東京オフィス所属のHiroさんとYuriさん、btraxサンフランシスコオフィス所属のJaredとJCの合計4名に聞いてみた。 1. デザインで課題解決をする場面で、良いアイディアが思いつかない時はどうしていますか？ Hironori (以下Hiro): 散歩したり、お茶や食事を挟んだりします。パソコンから離れ、何も見ない状態を作ります。 アイディアが出ない時は、インプット過多だったり、頭の中で整理がついていなかったりする状態なので、一旦それを寝かす時間を作ります。 そのために、散歩したりお茶を飲みに行ったりしてリラックスします。家から歩いて15分くらいのところのカフェによく行っています。 Yuri: シャワーを浴びたり、仮眠をとったりします。もうアイディアが出ない場合、今考えていても出ないと思うので、一回考えることから離れるようにしています。 違うところに目を向けたり、コーヒーを飲んでみたり。それによって新しいアイディアが違うところから出てくることもありますね。 アイディアが出ない時にアイディエーションをそもそもやらないといったメリハリや思い切りも必要かなと思います。集中できる状況と時間を確保して、がっつりアイディア出しを行なって、あとは手を動かすだけにするなど、タスクを分けています。 Jared: デザイン思考のプロセスに沿って考えたり、Pinterestなどのウェブサイトからインスピレーションを探したりします。 それでも良いアイディアが浮かんでこない場合は、知り合いのデザイナーと話してアイディアや違う視点からの意見をもらいます。 あと、デザインリサーチをする前にまずやることは、デザインしているもののトピックに関連する言葉、感情など、ありとあらゆるものをブレインストーミングして自分の考えをカテゴライズすることです。 基本これで充分ですが、それでもどうしてもアイディアが出ない時は、休憩をとるか、タスクから一度離れて、リフレッシュをしてからタスクに戻るようにしています。 Jonathan(以下JC）: アイディアが思い浮かばない時は、デザインしているもののトピックに関連するものをリサーチして、違う視点をインプットしたりします。 デザイナーが行き詰まる状況としてよくあるのが、デザイナーがコンテンツを理解していないというもの。 業界、分野、またはトピックを十分に理解していないと解決するのは困難なので、基本的なリサーチはとても大事だと思います。 2. インスピレーションの源泉はなんですか？ Hiro: よく美術館へ行きます。人の作品を見て、「この作者はこういう意図で作ったのかな」と想像することが好きです。 自分は骨董が好きで、骨董やアート作品の面白いところは、作り方が変わっているもの、見たことのないような作り方をしているもの、割れていて不完全なものなどがあることです。 そこから作者に想いを馳せ、この作品を作ったのはこういう人だったのかな、と考えています。 あとは作り方を想像してインスピレーションの源泉にすることもあります。 作品の要素を頭の中で分解して、作り方を想像したときに新たな考えを得たり、インスピレーションを得たりできます。 Yuri: 自分にないものをインプットするという意味で、散歩に行ったり展覧会に行ったり人と話したりします。 散歩をすると見たことのない景色を見られたり、リフレッシュにもなります。また、意識的に知識を入れる必要もあると思うので、展覧会に行ったりもします。 デザインとアートは異なるけど切り離せないものだと考えています。色の使い方や空間演出は、見ている側の心理をどう捉えるかという部分では、見据えている所はある程度一緒かなと。そういうところから得るものが私はあったりします。 人と話していると、自分にはない価値観を持っている人が絶対いるので、そういう考え方もあるんだ、とか、同じものを使ってても全然違う捉え方をしていたりとか、逆に私が興味なかったサービスにそういう着眼点を持って見ているんだ、とか、そういった気づきが得られると思います。 Jared: Pinterest、Behance、Muzil、YouTubeからインスピレーションを得ています。作り方のわからないデザインテクニックを見た時はYouTubeでチュートリアルを探して勉強しています。 また、Pinterestではデザインの参考になるようなコラージュを作ったりしています。 JC: 本を読んだり他のデザイナーの作品を見たりしてインスピレーションを得ています。他のデザイナーがどのように課題を解決しているかするかを見て、そこからインスピレーションを得ています。 Muzilのクロームエクステンションだったり、We Are CollinsやPentagramといったデザインスタジオのウェブサイトから探します。ウェブデザインをしている時はGodlyというウェブサイトをチェックします。 JC: 私が大学生だった頃は詩の本もよく読みました。 詩は長いフレーズを言わずに何かを表現するなどといった物事の「抽象化・シンプル化」に長けていると感じていたので、参考にしていました。また、あらゆる種類のクリエイティブ・ライティングや哲学の本も読んでいます。 3. グローバルに通用するデザイナーに必要なスキルとはなんだと思いますか？ Hiro: 一番は違いを認められることだと思っています。 特に、僕がbtraxに来てサンフランシスコオフィスのデザイナーたちと話して思ったのは、僕が良いなと思ったデザインをシェアしても、彼らの見ている視点が自分とは全く違うことです。 例えば、アクセシビリティーの部分に突っ込んできたりとか、あとは「イケてる」と思う色の使い方が違ったりとか。 あとはユーザーによってアプリの使い方が意図していたものと全く違う場合もあります。 基本的にユーザーが日本人じゃない人とぶつかると絶対そういう想定外のことが起きるのですが、そこでしどろもどろになるのではなくて、それを楽しんで受け入れて、じゃあどうしようか、という話ができるスタンスは大事だと思います。 Yuri: コミュニケーション能力と、価値観の違いや想定外のことを受け入れられる柔軟性だと思います。 シンプルに言ったら共感性の高さというか、柔軟性の高さです。あまりにも保守的すぎると、異なる価値観に拒否反応が出てしまって辛いのかなと思っています。 これは国内でも同じだと思うのですが、ある程度ちゃんとコミュニケーションができていれば、周りと連携して仕事ができると思います。 ですので、仮に多少英語が拙かったり、スキルがやや足りなかったりする場合も、チームメンバーが一緒にやっていきたいと思える状態であれば協力を仰いで仕事を進めていける場合が多いと感じます。 スキルに関しては、しっかり基礎を固めてあればそのあとは結局もうやりながら学ぶしかないと思いますね。 Jared: 共感できること、コラボレーションが好きなこと、クリエイティブであること。 クリエイティブであることはデザイナーである以上必須だと思います。 あと、他人と一緒に働く上で、その人たちがどういった視点でどういう考え方から物事を見ているかをしっかり理解できる、共感できる力も大切だと思います。 それから、コラボレーションが好きではないと、もうそれは自分だけでデザインしているような状態だと思うので、より良いデザインのためにもコラボレーションが好きだということも1つの大事なスキルだと思います。 JC: 共感力です。 共感するためには違うオーディエンス、文化、考え方の違いをしっかり理解する必要があって、たくさんのデザイナーが苦労する部分だと思います。 自分の経験から身につけたバイアスだけで課題解決するのは難しいので、自分の視点から見た考え方や意見を他の人と交換して新しいメソッドや解決策を模索する、という意味でも共感する力は大事だと思います。 私がbtraxで日本のデザインチームと仕事を始めた時もかなり苦戦しました。 当時私は日本のデザインへの理解が薄く、西洋スタイルのデザインを言語だけ翻訳してそのまま使えば良いと思っていましたが、結局日本人のオーディエンスには合わないものになってしまった経験もあります。 4. UI/UXデザイナーの皆さんがモバイルアプリをデザインする時に重要視する点を教えてください。 Hiro: ユーザーニーズを満たすか、もしくはペインポイントを解決するか。 最低限のUIの規則を壊さないか。 実装可能なUIであるかどうか。 AppleとかGoogleはある程度デザインのガイドラインを設けています。それは、Apple側から「これくらいの文字サイズにしなきゃ読めないよ」など、システムの仕様を明確化しているものなのですが、それらを理解することがスタートラインではないかと考えています。 マインド的な部分で大事だと思うのは、ユーザーにどんなアクションをしてほしいかしっかりとを想定することだと思います。 ユーザーはそれぞれ自分の使い方をするので、我々の意図とユーザーの希望がずれてしまうことも。ずれることが悪いわけではなく、そこかさらに、ユーザーは何を欲しいのかを理解し、それを満たすものになるまで引っ張っていく力は重要だと思います。 あとは、それに気がつくだけの観察力も同様に必要です。一度課題を見つけてしまえば、それを解決する方法はたくさん出て気やすくなるのですが、そもそもの課題を見落としてることが結構あるのではないかと感じます。 Yuri: 情報が整理されているか アプリがユーザーの目的を達成できているか ゴールを達成するまでの優先順位の付け方は適切かどうか 情報設計がされてない状態は、アプリに限らず、見づらいし使いづらくなってしまいがちです。ですので、情報設計は絶対必要、というかむしろデザインのかなりの割合を占めると思っています。 そのためにはまずユーザーが求めていることを理解する必要があります。求めていることといっても、その中でいろいろな考えが出てくるので、優先順位をつけなければならないこともあります。 こうした思考をしっかり持っているかどうかででアウトプットの質は絶対に変わると思っています。 ビジュアルとして完成度が高いことはそれで一つの価値ですが、どちらかといえば私は情報設計をしっかりされてる方が大事かなと思います。 Jared: 5W (Who, What, When, Where, Why) + 1H (How)にしっかり答えること ユーザーの意見を集めてフィードバックを取り入れること 自分がデザインのタスクを行うときは、デザインブリーフやデザインプロジェクトに対してできるだけたくさん質問をし、しっかり理解してベースを固めてからタスクにかかります。 デザインをし終わったあとは、ユーザーの意見とフィードバックを理解してそれをデザインに落とし込みます。それをしないと「ユーザー」のためではなく「自分」のためのデザインになってしまうからです。 JC: デザインで一番大事なのはビジュアルだと考える人も多いかと思いますが、私はアプリのバージョンアップデートのことも見据えて明確なサイトマップ、ビジョン、ゴールを持つこととアプリ内のコンテンツが何よりも大事だと思っています。 コンテンツが足りていない状態、または限られたコンテンツの適切な見せ方を理解していない状態でアプリをデザインすると、必然的に空白を埋めるためにたくさんのプレースホルダーを使うことになります。しかしそのようなデザインは万人受けしにくいでものになりがちです。 また、明確なサイトマップを持つことでデザインそのものよりもっと広い視点でプロジェクトの全体図を見ることができると考えます。 まとめ 今回はbtraxのデザイナー4名に質問をした。著者はまだまだ課題にぶつかることが多いため、行き詰まってしまった時の対処法について聞けたのはとても良かった。 個人的に面白いと思ったのが、アイディアに行き詰まった際に、btrax […]

ユーザーが「使い続ける」サービスの特徴と事例4選

|

現在弊社はクライアントワークで、とあるアプリの開発に携わっている。 ヘルスケア系のサービスに興味や関心はあるけれど、日常の習慣の中に取り込めていない人にも利用してもらえるようなサービスを作ることを目的としている。 どうしたら、ユーザーにサービスを継続してもらえるか？という課題にフォーカスして、社内アイディエーションと、クライアントも含めたワークショップ形式で、アイディア出しを行った。 その際、ヘルスケア系に限らず、さまざまなジャンルのアプリをリサーチして参考にした。 この記事では、リサーチをもとに、継続のしやすさという観点で優れていると感じたサービスをご紹介する。 日々の記録や言語学習のような、「使い続けてもらうこと」に本質があるアプリを中心にピックアップし、それぞれのアプリが実践している継続しやすいポイントをまとめてみた。 Duolingo Nike Run Club Forest muute 新規サービスを検証する際に確認するべき15のチェックリスト 1.Duolingo まず最初に紹介するのが、言語学習アプリのDuolingo。テレビCMも放送しているので、存在を知っている人も多いはず。 アメリカ発の言語学習アプリで、約40か国の言語の中から、好きな言語を学ぶことができる。 弊社メンバーが長く使い続けていると聞いたため、筆者も実際にインストールしてみた。そして、少し使い続けてみて、いいなと思った点をまとめてみた。 Good point （１）毎回のレッスンが短いので、サクッと学べる 1レッスンあたりの問題数が少ないので、ちょっとした移動時間や待ち時間にも利用できる。 5分で終わると分かっているので、隙間時間に軽い気持ちでレッスンを受けられることがとても魅力的だと感じた。 （２）続けていくことでバッジがもらえる レッスンを進めていくことでバッジがもらえるため、過去の積み上げが可視化されることで達成感があり、着実にコースを進められているという指標になる。 （３）続けないと、もう一度コースを受けないといけなくなってしまう しばらくアプリを放置してしまうと、今までクリアしてきたコースをもう一度最初からやり直さなければならなくなる。 せっかくクリアしたところをもう一度最初から、というのは避けたいため、やらねば！という気持ちにさせてくれる。多少スパルタに感じるやり方も、習慣化のためには必要な要素なのかもしれない。 （４）適度にユニークな通知が来る アプリをしばらく開かないと、スマホに通知が入るのだが、その通知がちょっとおちゃめなのだ。（通知の頻度は個人で設定可能） Duolingoのメインキャラクターである緑の鳥のDuoくん含め、複数のキャラクターが交互に、「アプリに戻っておいで〜」と呼びかけてくれる。 ヒットサービスを生み出すための3つの秘訣とそれぞれの実例 2.Nike Run Club ご存じの方やお使いの方も多いであろうNikeから出ているランニングアプリ、Nike Run Club。走行スピード、距離、ルートなどの記録全般を行ってくれるアプリだ。 記録以外の機能は極力少なくし、大事な「記録」という機能に特化していることがユーザーに長く使われる理由かもしれない。 Good point （１）記録をシェアできる 自分のランニングの記録を他の人とシェアすることができ、お互いにスコアを見ることができる。 シェアすることで、お互いにモチベーションを高め合い、ランニングを継続しやすくする効果があると考えられる。 また、シェアできるだけでなく、コミュニティにも参加できる。 参加することで、チームで何かを達成するという楽しさが感じられるとともに、自分もより頑張りたいという気持ちにさせてくれそうだ。 （２）マイルストーンバッジやトロフィーを獲得できる 連続記録や、自己ベストを出すと、アプリがお祝いしてくれてマイルストーンやトロフィーを獲得できる。 （３）目標達成をサポートしてくれる 目標を設定し、目標達成までの達成率を可視化してくれるので、モチベーションをキープしやすい。 3.Forest Forestは、言うなればスマホ中毒を解決するためのアプリ。 どこへ行くにも何をするにもスマホが欠かせない現代だからこそ生まれたサービスだ。 仕組みはとてもシンプルで、スマホを開いていない時間に木が育つというもの。日本の有料仕事効率化アプリのランキングでは現在1位(2022年7月時点)で、世界でも157ヵ国に渡って利用されている。 Good point （１）究極にシンプルである 1つ目の特徴はなんといっても、スマホを触っていない時間に木が育つというシンプルさ。 新しいアプリを使う際に使い方が難しい、セットアップがややこしい、などの不便さが一切ない。 （２）育てることで愛着が湧く 自分のアクションによって何かが育つことで、愛着が湧いて継続したくなる効果がある。 このアプリの場合は、「スマホを開かない」ということがアクションになる。 （３）頑張りが可視化される 自分がどれだけスマホを触らずにいられたかという今までの頑張りの軌跡が、木というアバターで可視化される。そのため、どれだけ頑張ったかがわかりやすく、モチベーションを保ちやすい。 自分がスマホを開かなかった間にこんなに木が成長した、という達成感が得られそうだ。 サービスデザインで考慮すべき3つの「心理的ハードル」とは 4. muute muuteは、AIが思考と感情を分析してフィードバックをくれるジャーナリングアプリ。筆者も継続して利用していた。 ただ書くだけでなく、分析が定期的に入ることで振り返りができるのが楽しくて、継続のモチベーションに繋がった。 Good point （１）偉人の言葉をくれる 日記を書いたあとに毎回ひとことだけ、偉人の言葉がもらえる。 前向きな気持ちになれたり、ひとつ小さな知識が増えたという満足感を得られる。 （２）毎週と毎月のインサイトまとめが届く 自分が直近でよく考えていたことや感情を、それぞれ週単位と月単位とでアプリが自動で分析して、その結果を提示してくれる。 自分の思考や感情を客観的に振り返ることができ、変化を知ることができるのは、紙の日記にはない面白い特徴だ。 （３）テーマに沿って書ける もちろん自由に文章も書けるが、与えられたテーマをもとに日記を書くことも可能。 日記を書きたいけど毎日何を書けば良いかわからず結局放置してしまう、という継続を阻むありがちな課題を解決し、何かを書くきっかけになる。 コロナ疲れを克服！心身共にケアするウェルビーイング系サービス5選 まとめ サービスを継続して使えるよう施されている工夫として、共通している要素として挙げられるのが、まず、軌跡が可視化されるということだ。何らかの「カタチ」で今までの自分の成長を見て振り返ることができる。 Duolingoであれば、レッスンを進めることでバッジを獲得でき、今までの努力が可視化される。 Nike Run Clubも、記録に応じてバッジやトロフィーを獲得でき、走ったときの様々なデータを振り返りながら比較ができる。 また、Forestの場合、スマホを触っていない時間が木の成長で表現され、muuteは、日々の日記を、週ごと、月ごとのインサイトで客観的に振り返ることができる。 人間何かしらで記録をしていないとすぐに忘れてしまうし、記録があれば、ここまでやってきたから次もやろう、という次へのモチベーションに繋がりやすいのだと感じた。 ある種それまでにかけた時間やお金、努力を惜しむ気持ちから来る「コンコルド効果」のようなものに近いのかもしれないが、何かを習慣化させるという場合においては、上手に活用できれば効果的な手段かもしれない。 また、記録系サービスに限らず、どれだけハードルを感じさせず、楽しく使ってもらえるかが、ユーザーにとって大事な要素だと感じた。 難しそう、複雑そうと思わせない工夫や、ちょっとした隙間時間に使えるような気軽さが、継続して利用してもらうための必要な要素である。 サービスデザインの極意 機能を「シンプルにする」ことの難しさとは また、それと同時に、ポジティブになれる言葉をもらえたり、何かが育つ愛着があったりと、楽しいポイントもサービスに組み込まれていると使いたくなる人も増えるはずだ。 btraxでは、上記のような使い続けてもらえるためのサービスデザインのみならず、そのサービスデザインの基盤となるリサーチ、ブランドのビジョンを言語化をする段階からサポートさせていただいている。 btraxのサービスにご興味をお持ちの方は是非、弊社のサービスページをご覧ください

b-side of btrax #3 グローバルに羽ばたくサービスを創り出す、btraxのデザイナー＆エンジニアの素顔とは

|

btraxで働くメンバーをご紹介する「b-side of btrax」シリーズ。 シリーズ第3弾となる今回は、btrax JapanのUI/UXデザイナーとエンジニアをご紹介します。 btraxのUI/UXデザイナーとエンジニアは、大きく分けると自社内向けの業務とクライアントワークの2つの業務を担当しています。 ① btrax自社内向け業務 デザイナー、エンジニアともに、btraxのコーポレートサイトのデザインとその実装に取り組んでいます。デザイナーがビジュアルや挙動含めデザインしたサイトを、エンジニアが形にする、といったように連携して業務を行なっています。 また、デザイナーは、btraxから発行している会社概要PDF、E-bookなどのコンテンツや、プロモーションの際に必要となるバナーなどの制作も担当しています。 ②クライアントワーク クライアントワークでは、デザイナー、エンジニアともに、アメリカから日本市場、もしくは日本からアメリカ市場に参入を目指す企業やブランドのサービス/プロダクトのリデザインをサポートするプロジェクトに入ることが多くあります。 クライアントさまとコミュニケーションをとりつつ、プロジェクトの成功に欠かせないデザインアウトプットと、その実装に取り組んでいます。また、より良いサービス体験の実現に欠かせないユーザーインタビューを担当することもあります。 プロジェクトの開始から完了まで、クライアントさまの意図を汲み取り、より良いアウトプットを作り上げるべく、積極的に提案をしながら日々の業務に取り組んでいます。 今回はそんなUI/UX DesignerとEngineerのメンバーを1名ずつご紹介します。2人のバックグラウンドから、btraxへの入社理由、今後btraxで挑戦したいことまで、幅広くお届けします。 btraxではどんな人が働いているの？と気になっている方、ぜひ最後までお付き合いください！ Hironori Aihara (UI/UX Designer) バックグラウンドを教えてください ​僕は高専でデザインを幅広く学び、卒業後大学へ編入し、インダストリアルデザインを学びました。 デザインに興味を持つ以前は、どちらかというとロボットなどの機械が好きで、夏休みの自由研究で電子工作をしていたほどでした。その当時は、技術こそ全てだ！というような考えを持っていました。 しかし、iPhoneの登場によってその考えを改めることになりました。 なぜiPhoneが優れているのかを高専の見学会で先生に伺ったところ、「技術もだけどデザインも優れているよね」とおっしゃったことがきっかけで、デザインに興味を持ち始めました。 なぜbtraxに入社したのですか？ グローバルな場でデザインをしていきたいと思ったからです。 iPhoneがきっかけでデザインに興味を持ったというのは前述した通りですが、グローバルな場でデザインをしようと思ったきっかけとしては、高専の先生の影響が大きいです。 その先生は、サンフランシスコのデザイン会社で働いていた方で、デザインの奥深さや面白さを誰よりも熱く語られていたことをよく覚えています。 その先生の授業では、デザイン思考を主に扱っていたのですが、そこで話されていた「デザイナーではない人もデザインに加わる」というプロセスに魅力を感じました。 また、その授業では「多様なバックグラウンドの人同士のコラボレーションで生まれるデザイン」が繰り返し紹介されており、その魅力に惹かれ色々なバックグラウンドの人とデザインをしたいなと思うようになりました。 こういった一連の経験によって海外に目を向けるようになりました。 btraxでは具体的にどのような仕事をしていますか？ WebやUIなどのヴィジュアルデザインからサービスやUXといった上流のデザインまで全て行っています。 特にbtraxでは、日本のクライアントさまと共に、アメリカ市場やグローバル市場に向けたサービスの開発などを行うことが多いため、アプリも英語圏に向けたものが多くなります。 最近ではプロダクトマネージャー的な立ち回りや、エンジニアやリサーチャーと話し合いながら、アプリケーションのグロース戦略のためのロードマップ作成、UXのアップデートを行うような仕事も経験させてもらっています。 もともとプロダクトの存在意義を考えるのが好きなので、サービスの提案フェーズから参加できることがとても楽しいです。 btraxでの働きがいを教えてください。 前述したように、プロダクトの初期フェーズから関われることは働きがいの一つです。 また、いわゆる大企業のクライアントさまとお仕事をさせていただくことが多いので、既にある成熟されたプロダクトやリソースを活用しつつ、どうすればより付加価値を加えられるかを考えることが面白いと感じています。 また、btraxの仕事の特性上サンフランシスコへの出張もあり、そこで現地の方にチームで簡単なインタビューをするなどして、カルチャーの違いを感じながらデザインを行うことも、とても楽しいと感じます。 特に自分の価値観では理解できないような新しい価値観を持った方に会うとある意味ショックを受けたりもしますが、それも含めてワクワクします。 今後btraxでやっていきたいことはなんですか？ 弊社はサービスデザインの文脈において、最終的なアウトプットがデジタルプロダクトになることが多いのですが、フィジカルなものへも挑戦していきたいとひっそりと思っています。 また、良いサービスを提供するにはそのサービスの提供方法も重要だと考えています。そこでデジタルでいくべきか、フィジカルでもアプローチするべきかを状況次第で冷静に判断して選択し、デザインすることが今後は求められていくのかなと思っています。 今、興味・関心を持っていることを教えてください。 デザインとは関係ないものだと、タコスとブリトーにハマっています。サンフランシスコで食べたタコスとブリトーがとても美味しくて、3日に1回は食べていました。 あまり日本では見ないというのもありますし、添えてあるハラペーニョがとても美味しいんです。いつか自分でも作ってみたいと考えています。 また、デザインに近い分野で言えば、サンフランシスコに行った時に街の広告の写真を撮ることにはまっています。 以前僕がちょうどサンフランシスコにいた時は、Black Lives Matterの運動が加熱していた時だったので、差別を批判する広告をUberが出していたり、また別の場所ではAirbnbがコロナウイルスのワクチンの完成を祝う広告を出していたりしました。 これらのように、社会に対して、広告でメッセージを伝えるという行動がとても良いなと感じています。また、広告の意義について考えさせられる、とても興味深いものが多いと感じています。 Shuhei Yoshida (Software Engineer) バックグラウンドを教えてください。 日本生まれ、日本育ちです。子供の頃から物作りやロボットのような先端技術に興味があったので、大学では情報工学を専攻し、ロボット研究をしていました。 主にサッカーロボットやレスキューロボットを研究しており、国際的な競技大会にも参加し、国内外の人々と交流する貴重な機会を得ることができたと感じます。 大学時代のロボット研究を通じてソフトウェア開発の面白さを知り、また、自分で物を作る実感が欲しかったため、自社製品のあるソフトウェア開発会社に就職しました。 そしてそこでは、ソフトウェア開発者向けのツール開発に携わっていました。 なぜbtraxに入社したのですか？ 前述の通り、前職ではツール開発が主な業務でしたが、自社製品としてソフトウェア開発を行う中で、ユーザーに使いやすいもの、より良い体験を提供できないかということを考えるようになり、UI/UXデザインにも興味を持つようになりました。 また、海外で働くことに興味があったので、まずは英語をちゃんと習得しようと、退職しサンフランシスコに語学留学をしました。そして、その時に語学学校のプログラムとして、btraxでインターンをさせてもらう機会がありました。 btraxは日米それぞれにオフィスがあり、毎週、日米をまたいで交流するアクティビティの時間内で、様々なトピックに関して話し合ったり、ワークショップをしたりしています。 そのため、コロナ以前からオンライン会議を積極的に利用しており、コロナでZoomが話題になった際にも新しいテクノロジーの導入に積極的でした。 インターン中にこうしたbtraxのカルチャーに触れ、これまで日本で働いてきたものとは違う経験を得られると思い、btraxの一員とさせてもらうことにしました。 btraxでは具体的にどのような仕事をしていますか？ 主にWebサイトの開発などでソフトウェアエンジニアとして、デザインチームが作ったデザインを形にすることが多いです。 また、一部のデザインではそのプロダクトを実現する上で、システムの構成やソフトウェアの実現性といったエンジニアとしての観点から意見を出し、デザイナーをサポートすることもあります。 こういった形で、かなり密に日米双方のデザイナーと関わり、それぞれのデザインの違いを間近に見ることができています。 他の業務としては、社内の業務改善、作業効率向上のため業務アプリケーションツールの連携や、新しいツールの選定などにも関わることが多く、新しいテクノロジーを積極的に試すことができます。 btraxでの働きがいを教えてください。 日米で好まれるデザインの違いを間近で見られるのが面白いです。 Webサイトのデザインを例にすれば、一般的に日本ではプロダクトの詳細な説明文や多くの画像を載せ、ユーザーに十分な情報を提供することが好まれます。 btraxサンフランシスコで働くデザイナーが語る、デザインにまつわる3つの日米差 対してアメリカでは、イメージやストーリー、インタラクティブなUIで、プロダクトのブランドや雰囲気の体験などを通じてユーザーに訴えるものが多いと言えます。 ひとつ具体例をあげるとトヨタとテスラを挙げることができます。 それぞれ異なる戦略でデザインされており、全く異なる印象を受けます。 また、テスラは日米で同じようなデザインのホームページですが、メルカリやマクドナルドなどは日米でデザインのコンセプトが違います。 btrax内でこうした各社の戦略やデザインの違いが話題に上がることもあり、こうした日米デザインの考え方を知ることができます。 また私自身の体験として、ある日本のクライアントさまの新製品をアピールするWebサイト開発プロジェクトに参加した時のことが挙げられます。 当初アメリカ的な雰囲気重視のWebサイトのデザイン案でしたが、日本のユーザーに対する訴求力が足りないという議論が起き、製品を説明するコンテンツを増やすことになり、デザインを練り直すことになりました。 私もデザイナーではないものの、議論に参加させてもらいました。そして最終的に、日米の長所を兼ね備え、ちょうどよいバランスを保ったデザインになりました。 こうした日米カルチャーの要素を持ったデザインの作成過程に参加できるのは、なかなかできない体験だと感じます。 今後btraxでやっていきたいことはなんですか？ クライアントさまのためにアプリ開発をすることはありますが、btraxでの自社開発として、何かアプリ開発ができると面白いなと思います。 他には、ソフトウェアエンジニアとして国内のIT化/デジタル化の遅れている企業/地方自治体などにもっとテクノロジーの導入を促せないかと思うことが多々あります。 そこに、btraxならではのデザイン思考を組み込んだデジタル化のマインドセットを、企業・地方自治体に提供するような機会を持てないかと思案しています。 今興味、関心のあることはなんですか？ 個人的にDALL-E 2, GPT-3のようなAIテクノロジーの発展に注目しています。 簡単なテキストから様々な画像を生成できるDALL-E2などは、デザイナーの仕事を奪うのではと言われることもあります。 ですが、デザイナー、エンジニアがそういった新しいテクノロジーをどう活用できるのかという点はとても興味深いテーマだと考えています。 まとめ 今回はUI/UXデザイナー、エンジニアとして活躍する2名をご紹介しました！ btraxのメンバーのことを少しでも知っていただけたでしょうか？ 今後もbtraxは、日米双方のクライアントさまに対して、デザインの力で国や国を超えた橋渡しをし、新たなビジネスを生み出すお手伝いをさせていただきます。 btraxについて、より詳しく知りたい方は、新しくなった弊社のコーポレートサイトをご覧ください。 次回はbtraxでマネージャーを務めるお2名をご紹介します！どうぞお楽しみに！

btraxサンフランシスコで働くデザイナーが語る、デザインにまつわる3つの日米差

|

弊社では、コロナになって以降オンラインでイベントを行なってきたが、先日、サンフランシスコで2年ぶりに対面イベントを実施することができた。 イベントのテーマは“Designing for Japan: Different Perspectives”。 1時間半のイベントでは4つのセッションをオムニバス形式で実施した。 今回はイベントの前半部分のセッションのテーマであった「デザインにまつわる日米差」の内容を3つのトピックに分けてお届けする。 アメリカから日本の会社とビジネスを行う経営者としての視点、そして、日本のクライアントと共に働くアメリカのデザイナーの視点ならではのデザインにまつわる考察をご紹介する。 日米のデザインの捉えられ方の違い 日米のクライアントとデザイン会社の関わり方の違い 日米のデザインのアウトプットの違い 1. 日米のデザインの捉えられ方の違い シフトしつつあるデザインの考え方 「デザイン」とは元来、クライアントがデザイナーに依頼してデザイナーが依頼されたものの通りに作る作業のことを指していた。とても単純で明快だ。 しかしこの10年くらいで、デザインとはビジネス、テクノロジー等、あらゆる領域での「顧客の課題解決」の手段の一つとなった。 デザイナーは「依頼されたものを作る人」から「課題解決のための戦略を考える人」という、広義の言葉に変化した。 それに伴って、ユーザー視点でヒットする商品やサービスを作り出すための、「デザイン思考」と呼ばれる考え方が浸透した。 誰にでもわかるデザイン思考の基本とプロセス 変化しきったアメリカ、発展途上の日本 日本でももちろんデザイン思考は主流の考え方になりつつある。しかし、アメリカと比べると、日本はまだまだデザインの考え方が「依頼型」で止まってしまっているケースが多い。 それにはいくつもの要因が絡み合っているのだが、今回はその理由として、2つの要因を取り上げる。 日米のビジネスのスケールの方法の違い 日米のデザインに対する考え方が異なる理由の1つとして、ビジネスのスケール方法が挙げられる。 一言で言うと、アメリカは優れたユーザー体験やブランドストーリーで売り込むのが主流であるのに対して、日本は営業で売り込むのが主流だ。 なぜアメリカがユーザー体験やブランドストーリーにこだわるのかというと、アメリカは国土が広すぎて、足で稼ぐ営業の難易度が日本よりも極めて高いからである。 アメリカ国内でも時差があるアメリカ。「車で4時間」は、日本人にとっては長旅に感じられるだろうが、アメリカ人にとっては日常茶飯事。 しかし、だからといって長時間の移動を伴う営業活動ができるかというと、それは現実的ではない。 なぜ日本にはデザイナー出身の経営者が少ないのか では、どのようにして顧客やユーザーを集めれば良いのか？その答えが、プロダクトの使いごこち（ユーザー体験）の質、ブランドストーリー、マーケティングである。 ゆえに、営業で解決するのではなく、プロダクトを作る段階からユーザーのニーズに沿った、課題解決を目的としたデザインをし、ブランドストーリーを構築することがより重要視されるようになってきている。 人々の心を掴むブランドストーリー 5つのポイント これが、アメリカが日本よりも大きく「デザイン」の概念が変化を遂げている理由の一つである。 日米のデザイン会社とクライアントとの関わり方の違い 日米のデザインに対する考え方が異なる理由の2つ目として、日米のデザイン会社との関わり方が挙げられる。 アメリカのデザイン会社の場合、クライアント企業とデザイン会社はかなり密接に協業する。 上の図のように、クライアントとデザイン会社が直接やりとりをして課題解決に取り組み、プロジェクト単位でより多くの人手が必要になった時はフリーランスのデザイナーに依頼をする。 一方日本のデザイン会社の場合は、広告代理店がクライアント企業と関わりを持つ事例が多い。 ゆえに、デザイン会社はクライアントと直接ではなく、広告代理店が考えた戦略に対してデザインを制作することで形にし、クライアントの要望に応えるという構図になりがちだ。 すなわち、デザイン会社が広告代理店に「外注」されており、広告代理店に頼まれたものを「納品」している状態なのだ。 デザイナーが「依頼されたものを作る」状況そのものが変わらない限り、今のようなデザイナーが下請けをしている状況から抜け出せないのではないだろうか。 この構図を変えることが、日本でのデザイナーの地位を上げる一歩になると考える。 なぜ日本ではデザイナーの地位が上がらないのか？~海外デザイナーとの比較~ 2. アメリカのデザイン会社の視点で見る、日米の働き方の違い クライアントとの働き方の日米差 アメリカの企業は会議の場でネクストステップを決定する。 一方で日本のクライアントは、一度会議でこちらの提案内容を聞いたのち、社内に持ち帰って改めて内部で議論する傾向にある。 その背景として日本では、メンバー全員の意見を合意してから次に進む「合意形成」の文化が大変強い傾向にある。 下記のカルチャーマップをご覧いただいてもわかるように、「決定」の項目において日本がかなり合意を重んじていることが見て取れるだろう。 弊社のアメリカ人デザイナーであるJonathanとJaredによると、日本ではアメリカよりも調和が重んじられており、全員が賛成したアイディアに決定することが多いと感じているようだ。 そのため、日本のクライアントにデザインを提案するときは、クライアントが社内で議論しやすいように、そして非デザイナーでもデザインの良し悪しがわかりやすいように、よりデザインの意図を詳細に説明し、なぜAが選ばれてBが選ばれなかったのかを詳細に説明するようにしているそうだ。 クライアントが社内に持ち帰った際に、会議にいなかったメンバーにデザインの意図を聞かれた時に答えられるようにするためだ。 彼らが日本のクライアントと働く際は、それゆえ、クライアントと一緒にトライアンドエラーを繰り返しながらデザインを一緒に考えていくプロセスがアメリカのクライアントに比べて多いそうだ。 このように、文化背景の違いはデザイン制作のプロセスの違いにも関係すると言えるだろう。 3. 日米のデザインのアウトプットの違い – Holistic(全体論的)な日本、Analytical(分析的)なアメリカ ２）アメリカのデザイン会社の視点で見る、日米の働き方の違いでも言及したように、日本は全てのパターンを考え尽くして答えを出すHolistic（全体論的）な傾向がある。 対してアメリカでは、多くの情報をさまざまな観点でグルーピングして、少ない情報の中で早く結論を出して前に進めるAnalytical（分析的）な傾向がある。 それは働き方だけではなく、デザインのアウトプットにも表れている。下記の図をご覧いただきたい。Mercariのサイト（左：アメリカ、右：日本）を左右に並べているものだ。 見ていただくとお分かりいただけるように、色も異なれば、ロゴまでローカイライズされている。 特に言及すべきは、情報量だ。 最初に述べたように、右側の日本のサイトが情報を詳細に見せようとしていることに対して、アメリカのサイトは画像によって情報がグループ化されており、画面上にある文字情報が少なく感じられる。 Yahoo!の検索ページ（左：日本、右：アメリカ）も、日本ページは詳細に文字情報が詰め込まれているのに対して、アメリカのサイトはより画像が多く、画像一つにつき一つのニュースという見せ方で、情報がグループ化されていることがわかる。 上記を見ても、ページに表示される情報量が大きく異なっている。 働き方もデザインのアウトプットも全く異なる日本とアメリカ。 そのギャップを乗り越えるためには、作ったものに対して早めにフィードバックをいただき、「どうしたらより良くなるか」という視点で改善することもプロセスのうちだという。 初めから100%理想通りのものを目指そうとするのではなく、現時点でのベストなものを持って行って、クライアントと議論をしながらより理想に近づけていく、そのプロセスの中で、より良いアイディアやデザインが誕生するのだ。 最後に、JonathanとJaredが共感したという画像を共有しよう。 「プロダクトは世界中どこでも一緒に見えるものを作る必要はない。展開先の国に合わせて適応したデザインに落とし込んで、その地で『使われる』ことがより大切だ。」と書かれている。 その国でプロダクトを使う人が違和感なく使えるようにすることが大切で、どの国でも見た目を揃えることやトンマナを揃えることが、世界で通用するデザインではないということだ。 文化背景の違う国のプロダクトを作成するときはまさにこのマインドセットが重要だと2人は言う。 まとめ 今回は、アメリカのデザイン会社の視点から見たデザインにまつわる日米差というテーマで、デザインの捉えられ方の違い、クライアントとの働き方の違い、デザインのアウトプットの違いという3つの「違い」を取り上げた。 btraxは日米に拠点を置くデザイン会社だからこそ、今回お伝えしたようなギャップを理解するべく、日々尽力している。 btraxではプロダクト、サービスを最適化するためのマーケットリサーチからUXデザイン、ブランド体験の言語化と設計、顧客とのコミュニケーション方法の改善まで、一期通貫して支援している。気になる方は是非、弊社のサービス内容がまとまったPDFをご覧いただきたい。 今回のイベントのアーカイブ動画はこちら。イベントの内容が気になった方は、ぜひデザイナーたちの解説を聴きながら、記事の内容を振り返ってみてください。

UIやUXにパクリの概念はあるのか？

|

“優れた芸術家は模倣し、偉大な芸術家は盗む “という言葉を聞いたことがあるかもしれない。ピカソが言ったとか、スティーブ・ジョブスが引用したとかで、デザインの世界では一つの基準にもなっている。 模倣は良くないが、アイディアを盗むのはアリということか？ これに関して、以前にインスパイアとパクリの違いをまとめた。クリエイティブな世界では誰もが何らかの理由で誰かに影響を受けており、100%オリジナルはかなり稀であるという話。ざっくりと考えてみると下記の感じなのかなと思う。 パクリ: バレたら困る インスパイア: バレた時の言い訳として使う オマージュ: わかる人にだけにわかってもらいたい リスペクト: 他のクリエイターに気づいて欲しい パロディー: バレなきゃ困る どこからがアウト？インスパイアとパクリの境界線とは そして最近ふと思った。アートや音楽、ロゴやイラストのパクリはあるが、UIやUXにもパクリという概念は存在しているのだろうか？と。 UIトレースとパクリの違いは？ デザインを学ぶ際に最も効果的な “パクる”, いや “トレース” する手法がある。これは既存の人気サービスのUIやUXをベースにして、その上を文字通りなぞり、インタラクションも真似をしてみることで、ユーザーに喜ばれるサービスのデザイン要素を身につける事ができる。 これは、現に多くのデザインスクールやワークショップでも推奨されている手法である。トレースする経験を積み、それを消化し、自分のもにできれば、デザインスキルになる。 クリエイティブな事がそんなにも凄いのか 最近のUI/UXは似たり寄ったり おそらく皆様もご存じのように、世の中のアプリのその多くは似たり寄ったりなUI/UXを実装している。 丸みを帯びたサンセリフ書体の大きく太い見出し、ネガティブスペースを多用した最小限の白黒インターフェース、ほとんど色を使わないなど、一見してどのアプリか見分けがつかないことも多い。 そして人気のアプリになればなるほどUIは “透明” になっていき、UXも記憶に残らないくらいナチュラルだ。 例えば、最近のソーシャル系のサービスにおけるショート動画のUIはどれもかなり似ている。使っているうちに「あれ、これどのサービスだっけ？」と思うことも多々ある。 この例の様に、多くのアプリのUIが似ているのは、ユーザビリティーを追求したら同じものになったかもしれないし、アプリ全体に共通するユニバーサルなUIを追求した結果なのかもしれない。 コンテンツを見せることを最優先したり、ユーザーテスト、グロースハックなどの過程で、自然と似たユーザー体験にたどり着くのだろう。 どちらにせよ、ユーザー視点から考えるとより直感的に使えるサービスになっているのには変わりない。これは、「けもの道」が作り出されている状況に似ている。 UXデザインにおける「けもの道」現象を考える どんどん透明になっていくUI 実はユーザーが気づかないうちに、人気アプリのその多くのUIが “透明” になってきている。 初期の頃のデザインはかなり工夫され、ブランド色が強かったものも、バージョンアップを重ねていくにつれ、UIにおける装飾要素がどんどんなくなっていき、最終的にたのアプリとの違いがほとんどなくなっていっている。 それもそのはずで、UXという言葉を作ったことで知られるドン・ノーマンは、「インターフェイスの本当の問題は、それがインターフェイスであることだ」という名言を残している。「インターフェイスは邪魔になる。ユーザーはインターフェイスにエネルギーを集中させたくはない。理目的達成に集中したいのだ。」と。 実はユーザーから見るとUIや似ている方がありがたい 世の中のアプリのその多くが似通ったユーザー体験を提供しているのには意味がある。ユーザーにとってそのほうがありがたいのだ。 多くのユーザーが毎日複数のアプリを行き来することで、アプリ疲れが生まれ始めている。新しいアプリをダウンロードするたびに、異なるインターフェイスやユーザー体験を学び直すのに疲れてしまっている。 ということは、既存のUIやUXを踏襲した上で、新しい価値を提供してくれるサービスの方が自ずと使いやすくなる。当然だろう。ECサイトでショッピングカードのアイコンを右上に表示していない “ユニーク” なUIを喜ぶユーザーがどれだけいるだろうか？ UIデザインのスタンダードを逸脱するサービスを人間の脳は喜んでくれない。 実際。以前にSnapchatが機能をごちゃ混ぜにしたり、ナビゲーションのパターンを変えたりといった型破りなデザインをリリースしてみた結果、ユーザーのセンチメントをほぼ73％低下させ、アプリのユーザー数も株価も大きく下落させた。 この例からも分かる通り、斬新なデザインはリスクを伴う。逆に他のアプリと似ていたとしても、一貫したデザインはユーザーを動揺・混乱させる可能性を低くすることができる。 【注意!】以前にはUI/UXのパクリ疑惑訴訟も しかし、UI/UXのパクリ疑惑に関して意義を唱えたケースもあり、実際に2018年に訴訟が起こっている。マッチングアプリ大手のTinderが同種サービスのBumbleに対して”スワイプ機能” をパクったとして訴えた。正確にはデザインパテント侵害の疑い。 このスワイプ式UIは、通称Tinder UIとも言われ、アプリをデザインする際にはよく利用されるスタンダードな動きではある。 実は後発のBumbleのCEOが元々Tinderの社員で、社内で個人的なゴタゴタが発生。その後独立し類似サービスを開始した。そして、Tinderの親会社がBumbleに買収の打診をしたが断られた事実もある。なので、この訴訟の背景はかなりドロドロしてるっぽい。 Tinder側としては、BumbleのCEOおよび共同創業者がTinder在籍中に学んだ独特のUXを参考に、ライバルアプリを開発したとし、「Tinderを成功させるために、これまで多大な資源と創造的専門知識を投入してきた。これらの権利を侵害する同業他社に対しては、特許およびその他の知的財産権を行使する。」というのが彼らの主張。 一方で、ユーザー側からしてみるとこのUI/UXはマッチング系アプリの定番であり、Tinderが元祖だったにせよ、他のアプリが採用することに対しての違和感は無いように感じる。 ちなみにこの訴訟は2020年の6月に和解した模様。 あえて知的所有権を行使しないTwitter Tinder vs Bumbleとは逆の例がTwitterアプリである。現在では一般的になっている画面を下に引っ張ってコンテンツをリロードするUX (Pull to Refresh) を最初にデザインしたのがTwitter。 このユーザー体験は、Instagram, Gmail, Facebookなどなどに「盗用」され、ユーザーは無意識に利用できるほど一般的になっている。 元々はTwitter用のアプリ、Tweetieが最初に開発した。そして、Twitter社はこのパテントを所有している。しかし、他のアプリがそれを盗んだとしても、その権利を行使することはない。 そこには二つの理由があると考えられる。まず一つ目は、他のアプリがそれを採用することを阻止したところでTwitterにはメリットがない。そしてもっと重要なのが、そのUXがより一般的になればなるほど、多くのユーザーがTwitterアプリを使いやすく感じてくれるから。 従って、逆にパクってもらってもOK。というのがTwitterのUXデザインポリシーになっている。 パクリあいながら成長するiOSとAndroid 最も一般的な類似UI/UXはスマホだろう。 2007年の初代iPhoneの発表から少し遅れてGoogleがAndroidがを発表した時、多くの人々が「あ、iPhoneのパクリだ」と感じた。でも実は、その後のアップデートを重ねるにつれ、お互いがお互いのUIデザインやUXに “インスパイア” され、それぞれの精度を上げてきている。 例えば、アプリ内のコンテンツをホーム画面に表示できるウィジェットなど、iOS14 (2020年リリース) に初めて実装された機能のその多くは、すでにAndroidに実装されている。その中でも、ピクチャーインピクチャーは2017年にリリースされたAndroid 8の一部としてリリースされていた。 この例のように、iOSの機能の多くが、何らかの形でまずAndroidに実装されていることが多い。しかしAppleは、他のデバイスとの連動や、より洗練されたUXの作り込み、そして絶大なるブランド力を通じて差別化を図っている。 おそらく少なくともスマホOSにおいては、パクリ、パクられの流れは切磋琢磨になっているように感じる。そして、ユーザーからすると、それはかなりありがたい状態である。 サービスデザインで考慮すべき3種類の心理的ハードルとは スクラッチからデザインしない方が良い理由 誤解を恐れずにいうと、UIやUXの領域になってくると、無理にスクラッチからデザインしない方が良い。 まず、今までに存在していない利用体験をユーザーに提供すると、ユーザーがその利用方法を学ばなければならなくなり、使いにくくなる。 一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。ユーザーは慣れ親しんだプロダクトに対して抱いていた期待を、似たような製品にも持つという理論。 これはヤコブの法則とも言われている。詳しくは下記のポストを参考に。 UXデザイナーなら知っておきたいデザインに関する10の法則 これは日常生活にも適用される。例えばホテルに泊まった時、シャワーの使い方に悩んだことはないだろうか？無駄におしゃれにデザインされすぎてて、冷水を浴びた経験のある人も少なくない。 なので、デザイナーのエゴで “クリエイティブ” なUIをデザインするのは、必ずしもユーザーのメリットに直結しない。 ユーザーは、製品の使い方を覚えるのに、できるだけ労力をかけたくないと思ってる。ニールセンが「ユーザーが慣れ親しんでいるパターンでデザインしなさい」と提唱しているのはこれが理由。 現在の世の中で愛されているデザインパターンは、全て優れたデザイナーが長い年月を掛けて生み出されたものであり、それを利用しないのは勿体無い。 確立されたパターンは優れたユーザーエクスペリエンスの基本であり、それを活用することは現代のUXデザイナーの仕事として欠かせないものである。 問題に対する解決策がすでに存在するのであれば、それを利用すれば良い。パクリと言われても、ユーザーは気にしないし、ステークホルダーも気にしない。ただ、誰がみても安易な丸パクリはバレバレでダサいのでやめておこう。 なぜプロダクトから機能を削るのが難しいのか？ UIにおける一般的な要素 そもそも現代において、モバイルでもWebでも、UIデザインを行う際に全くのスクラッチから作ることはほぼ無い。作業の効率化とユーザビリティーを優先させるために、既存の素材の組み合わせで行うことがほとんど。 よっぽどユニークなサービスでない限り、全くのゼロからデザインする理由が見つからない。言い換えると、どこにも存在していないUIをデザインしてしまうと、ユーザーが混乱することも多い。これは、カレーの具がどこの家庭も大体同じなのと一緒な感じ。 一般的なUI要素例: ログインボタン ハンバーガーメニュー チェックボックス ドロップダウン カレンダー モーダル […]

デザイン視点で心を掴む UXライティングの基本5項目

|

マーケティングとデザインにはかなり親和性があると感じる。ベン図で表すと、ちょうど中心で重なる部分だとイメージしやすい。そしてそれはまさしく、UXという考え方だ。 もともとUX (User Experience, ユーザー体験)は、デザイン界隈の言葉だった。しかしこの発想自体は、マーケティング然り、あらゆる事柄に適用できる汎用性の高いものだ。 使い手となるユーザーやターゲットとしている顧客起点で発想すると考えれば、両者は似ているからだ。昨今のビジネスシーンでUXがこれほど重要視されていることも、ここに理由があるだろう。 今回は、デザインとマーケティングの交差点であるUXについて、UXライティングという観点で解説をしていく。 コンテンツを考えるマーケターの方、そしてそれをデザインに落とし込むデザイナーの方はもちろん、普段のコミュニケーションにも活かせることが多いため、あらゆるビジネスパーソンにとって知っておいて損のないスキルをご紹介できると思う。 UXライティングとは？ 最近では日本でも関連書籍が出版されており、注目度の高まりを感じるUXライティング。まずはその概念的な側面をご紹介しておきたい。 UXライティングは、ユーザーに物事の価値を、的確に、なおかつストレスなく伝えるためのライティング手法だ。「UX」の意味合いは、「ストレスなく」の部分に込められている。読みごこちがよく、内容もわかる文章を設計することだ。 UXライティングと検索すると、CTAボタンに添える「詳細はこちら」といった言葉や、エラー画面に表示される言葉をユーザーにストレスなく提示するための言い回しを考えるなど、アプリやWebサイト上などのUIデザイン上の言葉が前提になることが多い。 しかし、今回の記事はもっと広く捉えたい。本記事で取り上げるUXライティングは、言葉を通じてユーザー体験を設計することだ。言葉のデザインと表現することもできるだろう。 これは特別革新的なものではない。ただ、適用範囲が非常に広い。なぜなら、ユーザーや顧客とのあらゆる接点で必要となる文章は、すべてUXライティングの対象となるからだ。 明日から使えるUXライティング5つのポイント 短く、簡潔に、必要な時だけ 専門用語を避け、ユーザーが使う言葉を使う ほどほどな丁寧さ あくまでもポジティブに 翻訳されやすさも考慮 1. 短く、簡潔に、必要な時だけ これは、UXライティングの基本中の基本ともいえるルールだ。ユーザーが行動を起こすために認識しなければいけない情報は少ないほど、彼らの負担は減る。 そのため、短く、簡潔な文章を作ることを心がけることが文字を通じたユーザビリティの向上につながる。 また、「必要な時だけ」というポイントは意外と盲点なのではないかと思う。主にデジタルサービスに言えることだが、良かれと思ってガイドやメッセージをずっと画面に表示させるのは、おせっかいになりかねない。 ユーザーが困った時や特別な操作を要求する時にのみ、メッセージを表示させる設計にすることも念頭においておくと良いだろう。 2. 専門用語を避け、ユーザーが理解できる/使う言葉を使う ユーザーの中にある語彙と、サービス側が使う語彙のレベルを揃えることも非常に重要だ。もちろん、サービスの説明においては、専門用語を使わざるを得ないシーンもあるだろう。 その場合でも、ユーザーにとってあまり必要のないものであれば多用を避けたり、理解を助ける具体例を提示するようなコンテンツがあると良い。 難解なことをわかりやすく伝えることにこそ、ユーザーの心地よい体験を考慮するUXライティングの真髄があるように感じる。 エラーメッセージを表示する際に、エンジニアにしかわからないようなシステム側のメッセージが出てしまうことを避けるのも、この項目に当てはまる。 ユーザー心理を掴むUXデザイン手法: 3対1の法則 3. ほどほどな丁寧さ 丁寧な言葉が好印象を与えることは間違いない。しかし、丁寧すぎるとかえって読みにくさを感じたり、やりすぎ感を抱かせて、ユーザーとサービスの間に距離を生んでしまう可能性もある。 特に日本語の場合、敬語という独自のルールがある。これが文章を長く、複雑に見せる要因になりかねない。かしこまって丁寧語や尊敬語を多用しすぎると、結局何が言いたいの？と思わせてしまうかもしれない。 普段、比較的近い距離感で話す間柄の相手にも、メールになった途端に他人行儀のようになってしまうことは日本人のあるあるだろう。これは、UXライティングでは避けることをおすすめしたい。 サービスやプロダクトにも人格があることを意識し、ユーザーと自然な会話を交わすことをイメージしながら言葉を選ぶと、適度な丁寧さの言葉が生まれると考えている。 ブランドの個性を定める – ブランドパーソナリティー【ブランディング入門#5】 4. あくまでもポジティブに 使いやすさやわかりやすさといった機能面もさることながら、好感が持てる、使いたくなる、といった感情面への訴求も重要だ。 そしてこれをUXライティングを通じて実現するために、1つのポイントとして挙げられるのが、ポジティブな言葉を使うこと。エラーの指摘やトラブル、ローディングやサービス側の作業完了までの待ち時間など、ユーザーにとってネガティブに感じざるを得ないシーンは往々にしてある。 そこで、例えばネガティブをポジティブに変換したUXライティングのコツとして、現状を伝えるのではなく、次のアクションを提示する、というものが考えられる。 エラーが出ていることや、何かに時間がかかっていることなど、今自分が身をもって実感しているため、わざわざサービスから指摘されたくないと思うのがユーザー心理だろう。 そこで、次にこうしましょう、こういう改善方法があります、といった突破口の具体的な提示があると良い。 5. 翻訳されやすさも考慮 グローバルにユーザーを持ちうる場合や、海外向けにも展開していたり、将来的にそれを目指すサービスにおいては、そのコンテンツも、現地市場で使われている言葉への翻訳が簡単にできるものが望ましい。 これは、究極的な言い方をすると、100人が読んでも100人全員が同じ解釈を持てるコンテンツ、受け取る側によって内容が違ってしまうことがないコンテンツを作ることが求められているということでもある。 「1. 短く、簡潔に、必要な時に」にも関連するが、シンプルかつ文法的にも正しく書かれた文章ほど理解されやすく、それは翻訳のされやすさにもつながる。言語間のニュアンスの違いはあるにしろ、エッセンスの部分は適切に受け取られる可能性が高い。 日本語の場合特に、「〜が」といった順接と逆接どちらにも取れるものや、「〜のXX」など、所有や主格など複数用途に捉えられる助詞には要注意。 普段の会話の中では誤って使ってしまった場合でも気にならないことが多いだろうが、文字コンテンツにする時には正しく使えているかを確認する必要がある。 コンテンツづくりにもUXの発想を これまでご紹介してきた5つのポイントは非常に基礎的に聞こえたり、すでに実施している方も多いかもしれない。あるいは、小手先のスキルに感じる方も少なくないだろう。 それでも、記事のタイトルを魅力的なものに変えるだけでPV数がグッと上がったり、 CTAボタンの文言を修正したらCVRが改善したりすることがあるように、実際にユーザーと対峙しているコンテンツへの小さな工夫が大きな変化を生むかもしれない。 ビートラックスではクライアントさまのサービス開発をご支援する際には、UXライティングとして今回ご紹介したポイントを含め、サービス全体のUXデザインの設計を行っている。 ユーザーの心を掴むUXデザインに関して、ご相談がありましたらぜひお気軽にお聞かせください。

未来のUI – Space Xに見る全面タッチスクリーンの利点と弱点

|

昨今、宇宙関連のニュースを聞くことが増えてきた。イーロン・マスク氏率いるSpace X は宇宙船「クルー・ドラゴン」での有人宇宙飛行を成功させた。宇宙飛行士を宇宙ステーションまで送り届け、無事に帰還も果たした。 このフライトには日本人宇宙飛行士の野口 聡一氏も参加しており、無事宇宙から帰還を果たした聡一氏のニュースを見た方も多いだろう。 Amazonの創業者のジェフ・ベゾス氏は起業したBlue Originが7月20日に初宇宙旅行を行うことも話題になっている。この宇宙旅行にはベゾス氏自身も参加するという。 そんな中で宇宙船のデザインも変わってきている。特に注目されているのは前述のSpaceXのクルー・ドラゴンがコクピットにタッチスクリーンを採用し、主だった操作を全てタッチ操作で行うという点だ。 SpaceXのタッチスクリーン指向のUI クルー・ドラゴンの船内はSF映画に出てくるような未来的なデザインになっている。コクピットには、アポロ計画の宇宙船やスペースシャトルなど、これまでの宇宙船にあった大量のボタンやレバー、計器類などは無くなっている。 その代わりにあるのが大きなタッチスクリーン。いくつか物理ボタンはあるものの、主な操作は全てタッチスクリーンで行われる。またSpaceXの宇宙服もそのグローブがタッチスクリーン操作に対応したものになっている。 クルー・ドラゴンは自立型の宇宙船で、宇宙空間での航行や宇宙ステーションへのドッキングなどは全てソフトウェアが行う。操縦桿や多数のボタンは必要なく、操縦者はタッチスクリーン上で航行を確認し、タッチ操作で宇宙船の設定を行うことになる。 クルー・ドラゴンの船内 ゲーム感覚で操作できるシュミレーター もちろん緊急時などのために、手動での操作も可能だ。SpaceXはクルー・ドラゴンでの宇宙ステーションへのドッキングシミュレータを公開しており、手動でクルー・ドラゴンを操作する場合、どういった感じになるのか試すことができる。なかなか遊びがいのあるシミュレータになっているので、ぜひ一度試してみてほしい。 このシミュレータで注目すべきは、UIのデザインが昨今のスマホアプリやビデオゲームを彷彿とさせる作りになっていること。そうしたものに慣れ親しんだ人であれば、宇宙飛行士としてトレーニングを積んだ人でなくても直感的に操作できる。 Teslaとも共通するコンセプト イーロン・マスク氏が同じくCEOを務めるTeslaの車内インテリアも同じようなコンセプトを持っている。極力、人間の操作する部分を減らし、ソフトウェアによる制御による自動化を目指している。 テスラのユーザー体験。しばらく乗ってみてわかったその凄さ 例えば、新型のモデルSではシフトレバーはなくなり、自動車自身がギア操作の制御を行う。どうしても人間が操作したい場合にタッチスクリーンからドライブ/リバースの変更などを行う。 Here you go! https://t.co/yGBIFdbIB1 pic.twitter.com/1A9BBWwfkE — Sawyer Merritt 📈🚀 (@SawyerMerritt) June 11, 2021 他の宇宙船との違い このデザインはどのくらい斬新なのか？SpaceX以外で最近話題になっている他企業と比べてみよう。 クルー・ドラゴンのライバルとされているのがボーイング社の宇宙船「スターライナー」だ。現在開発中で、7月にもテストフライトが予定されている最新鋭機だ。こちらは伝統的な大量の計器、ボタン類が多く配置されたコクピットとなっている。 AmazonのCEO ジェフ・ベゾスが同じくCEOを務め、7月20日に初の宇宙旅行を計画しているBlue Originはどうだろうか。その参加チケットが2800万ドルで落札されたことが話題になったためこちらも少し触れておこう。 Blue Originの宇宙船「ニューシェパード」は、11分間という短時間でのほぼ完全自動運転の宇宙旅行を目的とした宇宙船だ。そのため、旅行客のためのスペースが大きく取られていて、クルー・ドラゴンのようなコクピットも存在しない。 これからはタッチパネルが標準的なUIに? 近い将来に、インターネット、スマートフォンなどに慣れ親しんでいるデジタルネイティブの世代が宇宙飛行士の中心世代になるだろう。その際にトレーニングコストを大きく下げることができることが期待されている。 また、タッチスクリーンのUIはChromiumやJavascriptといったWeb系のソフトウェア開発でよく使われる技術で作られており、現代的なWebアプリライクのUIを実現するのに活用されている。 タッチスクリーンは有用か SpaceXはなぜタッチスクリーンを採用したのか、宇宙船の操作に対してどんなメリットがあるのかを通じて、全面タッチスクリーンの可能性を考えてみよう。 タッチスクリーンによるUI/UXの評価 物理デバイスをタッチスクリーンにすることで、UIはソフトウェアで構成されたものになる。これにより、Webソフトウェアなどで用いられているUX/UIの指標と照らし合わせ、評価・検討することができる。 SpaceXのソフトウェアの全容は公開されていないが、画像や動画など公開された情報からクルー・ドラゴンのUIはWebソフトウェアでも重視されているUIデザインの鉄則を押さえていることが見て取れる。 タッチスクリーンの利点1: エラープルーフの面でも有利 こういった鉄則を踏襲することは、単純な使いやすさの向上だけでなく安全面でも重要になる。緊急事態が起きた際などに、焦りからのとっさの操作間違いが起きないようなUIデザインは、安全性が重視される宇宙船において重要なポイントだ。 タッチスクリーンの利点2: 慣れ親しんだユーザビリティーの実現 SpaceXは目新しさでタッチスクリーンを導入したのではなく理論に基づいてインタフェースがデザインされており、いくつかのUXの法則を実現することでユーザビリティの高いUIを実現している。その例をいくつか見てみよう。 フィッツの法則 画面上の対象間の移動に関する人間の動作をモデル化した法則。主にマウス操作で移動にかかる時間を計測する。近年ではタッチデバイスでの研究も盛んに行われている。 フィッツの法則はUIの普遍的な法則と言われており、クルー・ドラゴンのUIも多くの要素がこの法則を考慮しているようだ。例えば操作画面では主だったボタン等を画面の端に配置しており、これはフィッツの法則を踏襲していると言える。 またフィッツの法則と照らし合わせて、優れたインタフェースとしてパイ・メニューがある。SpaceXのシミュレータで確認できるが、宇宙船の飛行制御UIはこのパイ・メニューを元にしたインタフェースになっている。 ヤコブの法則 ユーザーの経験則に基づいたUIデザインの法則で、ユーザビリティに関する10の原則が提唱されている。経験則に基づいてユーザビリティを評価するヒューリスティック評価の指標とされることが多い。 クルー・ドラゴンのUIは、前述したように現在のアプリやゲームなどで一般的なUIに近いデザインになっている。それらに慣れ親しんだ人であれば、その経験から、ある程度直感的に扱えるデザインになっている。 複雑さの保存の法則 どんなシステムやプロセスにも、減らすことのできない複雑さが存在するという考え方で、その複雑さはシステムとユーザーのどちらかが引き受けなければならないとされている。 この法則にしたがって考えると、従来の宇宙船は、その複雑さをシステムだけでなく、操縦者側も大量のボタンや計器類などを使用することで負担していたと言える。 クルー・ドラゴンでは、シンプルに分かりやすくデザインされたUIの利用や宇宙飛行制御の自動化などにより、その複雑さをシステム側に移行して、操縦者の負担を減らすことができている。 UXデザイナーなら知っておきたいデザインに関する10の法則 タッチスクリーンの利点3: 製造コストの削減 SpaceXは、安価でのロケット打上げが大きなセールスポイントになっており、タッチスクリーンの導入も製造コスト削減に一役買っているだろう。 従来のコクピットに比べてタッチスクリーンは、ハードウェアの製造やメンテナンスが簡単に行える。また問題が起きた際のソフトウェアの修正はもちろん、タッチスクリーン自体の交換も簡単だ。 さらにソフトウェア更新により、機能の追加やインタフェースのデザイン変更といった改修も簡単なので、タッチスクリーン自体は長く使い続けることができるだろう。 タッチスクリーンの利点4: 船内の空間を確保できる タッチスクリーンであれば、物理的なボタンの設置に比べて省スペースで設置できる。事実、クルー・ドラゴンのタッチスクリーンは位置を変える時ができ、宇宙飛行士の乗り降りの際などに十分なスペースを確保できる。 また、ソフトウェア上のUIは自由にデザイン可能。つまり、そのシチュエーション毎に必要な情報のみを表示することができる。 画面表示を切り替えて複数の情報を管理できるため、物理的な計器類を大量に置く必要がない。こうしたデザインはTeslaのタッチスクリーンでも確認でき、画面の切り替えが分かりやすいようにデザインされている。 クルー・ドラゴンでは最長で5日間の民間向け宇宙旅行も計画されており、快適に過ごせる船内はこうした宇宙旅行でのユーザー体験向上にも貢献するだろう。 画面下のメニューで表示内容を切り替えられるTeslaのタッチスクリーン タッチスクリーンの利点5: トレーニングコストの削減 前述したように、タッチスクリーンに慣れ親しんだデジタルネイティブ世代は直感的に扱えるだろう。では、これまでの宇宙船に慣れ親しんだ宇宙飛行士はどう感じるのだろうか？ このUIの開発には、かつてのスペースシャトル搭乗ミッションもこなしたベテランの宇宙飛行士 Douglas Hurley氏、Robert Behnken氏が協力している。操作性の向上やミスタッチがなくなるよう改良に貢献したという。 彼らは、これまでと異なるデザインのUIを習得するトレーニングが必要だったと語っているが、最終的には問題なく技能習得を済ませている。 実際に、2人は2020年5月に行われたSpace X初の有人宇宙飛行ミッション「Demo-2」に参加し、クルー・ドラゴンで宇宙に行っている。このDemo-2ミッションではHurley氏は宇宙船の制御機能を確認するために、手動での飛行試験も行っており、タッチスクリーンでの操作を問題なくこなしている。 前述のシミュレータのように、ソフトウェアのUIであればPC上でも操作を確認することができる点も挙げられる。本格的な搭乗型のシミュレータがなくても、トレーニングを積むことができるのは大きなメリットだ。 タッチスクリーンのデメリット では、タッチスクリーンに問題はないのだろうか。タッチスクリーン導入の弊害になりそうな問題点を考えてみよう。 タッチスクリーンの弱点1: 常にスクリーンを見なければいけな 物理ボタンを用いたインタフェースとの最大の違いは、タッチスクリーンは画面を見ながら操作が必要な点だろう。物理ボタンのように、よそ見をしながら操作するのは難しい。 そのため、宇宙船の外の様子とタッチスクリーン上のインタフェースを同時に確認する必要がある。これはデザインの大きな制約である。これが自動車や航空機を完全タッチスクリーンにすることが難しい理由の一つだろう。 タッチスクリーンの弱点2: スクリーンの故障 = 宇宙船の故障 また、多くの人が心配するのは、電気系トラブル等でタッチスクリーンが表示できないと何も操作できないということだろう。 物理ボタンや計器がどれか一つ故障しただけであれば、他のボタン等は使い続けることができる。しかし、全面タッチスクリーンは故障すると宇宙船の機能がほとんど操作できなくなってしまう。こういった事態を考慮した運用を十分考える必要があるだろう。 タッチスクリーンの弱点3: 再トレーニングが必要 前述した内容と矛盾するようだが、今までの宇宙船のインタフェースに慣れていた宇宙飛行士にとっては慣れるまでのトレーニングが必要になるだろう。タッチスクリーン上の操作自体はそれほど難しくないだろうが、タッチスクリーンを使うこと自体に心理的に慣れる必要がある。 特に宇宙飛行士は、様々な緊急事態を想定する必要がある。緊急事態が発生した場合でも、タッチスクリーン上でスムーズに宇宙船を制御できるように十分なトレーニングが必要だろう。 デザイナーに必要なのはスキルアップではなくスキルチェンジ タッチスクリーンはデザインのあり方を変えるか？ 宇宙船という安全性を要求されるものにタッチスクリーンを導入することを不安視する声がある一方で、SpaceXの新しいデザインが宇宙船の概念を変えると評価する声もある。 これまでの宇宙船の大量の物理ボタンをタッチスクリーンに一新したのは、日本のガラケーやBrackberryやNokiaのようなキーボード型のUIを持っていたスマートフォンが、タッチスクリーンをメインとするiPhoneに取って代わられたことを思い起こさせる。 […]

ユーザーの感情に響くエモーショナルデザインとは？

|

最近のアプリはどれも非常に使いやすいのが当たり前になった。そのため、使いやすさ文脈でのUXデザインだけではユーザーのロイヤリティ獲得や他社との差別化が難しくなってきていると感じる。 差別化の要素としてブランディングを活用する手法もあるが、プロダクト自身の魅力を最大限発揮することで、ユーザーの心を掴み続ける方が持続性が高い。 80%のアプリは数日で使われなくなる 顧客から素早くフィードバックをもらうことで、本当に求められるサービスを作ることが重要となっていることはもう説明する必要はないだろう。 アプリのマーケットはすでに飽和状態に近づいており多数のアプリで溢れている。 ちょっと使いにくかったりデザインがイケていなかったりしてもユーザーが我慢してくれる時代はとっくに終わっており、インストールされても数日で使われないアプリは80%にも達する。 数日で忘れ去られないために。モバイルアプリの高速プロトタイプ開発法10選 使えるアプリは多いが、使い続けるものは少ない 例えば、近頃日本では、Uber Eatsや出前館などのフォードデリバリー系アプリが増えた。私は初めは複数のアプリをダウンロードしていた。しかし、最終的に残ったアプリはそのうちの1つである。 どれもUI的に十分使いやすく、サービス的にも大きな差はない。しかし、なぜかいつも使うアプリはその1つ。それを、とても気に入って使っている。 この気に入る原因の一つにエモーショナルデザインの影響があると気がついた。 ユーザーを夢中にさせるAmazonが採用する4つのUXデザイン要素 エモーショナルデザインとは？ UX/UIデザイナーが色やマイクロコピー、レイアウトなどのインターフェース要素やデザインアウトプットを用いて、ユーザーにポジティブな感情（幸福感、快適さ、喜びなど）を与えるために用いるデザインアプローチのことである。 中には、ユーザーから注目してもらうために、UIデザインにネガティブな感情（悲しみ、後悔、嘆きなど）を盛り込み、プロダクトの購買につなげるデザイナーもいる。 ネガティブな感情の影響 さまざまな代替品がある現代においてネガティブな要素をユーザーに与えてしまえば、そのユーザーは簡単に他のプロダクトに乗り移ってしまう。それだけでなくそのプロダクトを提供する企業の信頼やイメージを落とすことになってしまう。 ポジティブな感情をデザインに取り入れる 逆に、ポジティブな感情をユーザーに与えることができれば、機能によってユーザーのニーズに答えることができるだけなく、より良いUXを提供することができる。 このポジティブな体験によってユーザーはそのプロダクトを気に入り、何度も使い続けてくれるようになる。 このようにエモーショナルデザインの基本は、ユーザーの強い感情を引き出し、その感情を利用してロイヤルティを高めたり、ユーザーに行動を起こしてもらうことができるという手法である。 ユーザー心理を掴むUXデザイン手法: 3対1の法則 感情を知る 単にネガティブ、ポジティブと言ってもさまざまな種類がある。そこで感情に関する研究を行なっている Robert Plutchik は人の感情の主な種類を基礎感情として8つに分類した。 怒り / 嫌悪感 / 恐怖 / 悲しみ / 予測 / 喜び / 驚き / 信頼 それぞれ対になるのは 悲しみ <> 喜び 予測 <> 驚き 怒り <> 恐怖 嫌悪感 <> 信頼 これらの基礎感情を組み合わせることもできる。 予測 + 喜び = 楽観 喜び + 信頼 = 愛 信頼 + 心配 = 従順 恐れ + 驚き = 畏敬 驚き + 悲しみ = 失望 悲しみ + 嫌悪感 = 自負の念 嫌悪感 + 怒り = 軽蔑 怒り + 予測 = 好戦 事例: Uber Eatsはどのようにエモーショナルデザインを活用しているのか？ Uber Eatsでは、他のデリバリーアプリに比べ、愛着を持てるように「楽しい」や「信頼感」を得られるようなデザイン的な工夫がされている。 例えば、アプリを開いて大量に出てくる料理の写真自体に統一性を持たせている。 こういったアプリのサムネイル画像は見る人の注意を引くために、過度な装飾やユーザーを煽る文言を載せてるものをよく目にするが、Uber Eatsにはそういったストレスを感じる画像はほぼない。 それだけでなく、使われているバナーやイラストは彩度が低めのポップな雰囲気でまとまっている。全体的に清潔感があり、遊び心を感じるUIは若い人を中心に支持を集める要素の一つになった。 他にも注文をした後には料理を作っているイラストが動いていたり、配達中には予想到着時刻に加え配達員の場所も認識できるため、透明性が高く、ネガティブ要素である不安を取り除いている。 これらの工夫によって他のデリバリーアプリに比べて、気に入って使っている人が多いと考えられる。 食の多様性を支えるフードテック・スタートアップ3選 […]

UXデザイン向上につながるUI評価の10項目

|

UIデザイナーにとって、そのUIがなぜ優れているのかを説明できる力は重要である。またそのためには今あるUIデザインがなぜ優れているのかを分析する力が重要になる。 その際に、すでにある法則を利用することで主観的な視点や経験による個人差をなくし、なおかつスピーディーに分析できるようになる。 今からご紹介する法則は90年代初頭に、Webのユーザビリティ研究者の第一人者であるJakob Nielsenと、dialogdesignというユーザビリティコンサル会社の創設者のRolf Molichによって作られた法則であり、UXを考慮したUIデザインの10つの評価軸である。ぜひUIを分析する際や評価する際の基準として役立てていただきたい。 Visibility of system status (システムステータスの可視性) Match between system and the real world (システムと現実世界の一致） User control and freedom (ユーザーが自由にコントロールできること） Consistency and standards (一貫性と標準） Error prevention (エラー防止） Recognition rather than recall（覚えさせるより、認識） Flexibility and efficiency of use (柔軟性と効率性） Aesthetic and minimalist design (美しくミニマルなデザイン） Help users recognize, diagnose, and recover from errors (ユーザーがエラーを認識し原因を理解・解決できる） Help and documentation (ヘルプのドキュメント） 1. Visibility of system status (システムステータスの可視性) ユーザーにシステム側でどんなことが起こっているかや現状を伝える必要があるというルールである。人は先を予測できない状況に立たされるとストレスを感じやすくなる傾向にあるため、現状の状態をわかりやすくユーザーに教えることは重要である。 Adobeでは、アプリのアップデートの進行状況や、どのアプリをアップデートしているのかが表示されている。こういった気遣いはさまざまな場面で使われている。 2. Match between system and the real world (システムと現実の一致） これは、人は現実世界の動作に慣れているため、それをメタファーとしてUIに持ってくることでユーザーも理解しやすく使いやすいUIになるということだ。特にユーザーにまだ馴染みのない機能や操作をさせようとする際に効果がある。 例えば、WindowsやiOSではゴミ箱のメタファーが使用されている。これによって初めてパソコンを触った人にもここに不必要なファイルを入れれば良いということはすぐに理解することができる。 macOSに関してはゴミ箱にゴミが入っているのかどうかでもUIが変わるため、空っぽであるかそうで無いかが一眼でわかる。 3. User control and freedom (ユーザーが自由にコントロールできること） ユーザーは何かしらのミスや誤操作を行う前提でUIをデザインを作ろうというもの。間違えて消してしまったことを戻すことができるようにするなど、元に戻せる逃げ道が必要である。 1つ戻るショートカット機能やファイルを捨てると一時的にゴミ箱に溜まるのもこれにあたる。もしこれがないと一回削除を押しただけそのデータが戻らぬものとなってしまう…怖い話である。 例えばGmailは、メールを送信した際に送信自体を元に戻す機能がある。 4. Consistency and standards (一貫性と標準） これは、UIデザインや押した後の反応など操作方法は一般的に知れ渡った方法を使おうというもの。今ではデジタルサービスなどが浸透したことで、ユーザーがなんとなく理解しているデザインがある。 例えばハンバーガーメニューやインターネットタブの左上にある「戻る」などがこれに当たる。このデザインに沿わせることで認知的負荷（新たに学習させる必要性）を減らすことができる。 サービスデザインで考慮すべき3種類の心理的ハードルとは 5. Error prevention (エラー防止） ユーザーはタイプミスのような無意識な間違えや、そもそもその間違った正解を覚えたことによる意識的なエラーをしてしまう。そこで何が間違っているのかを指摘し、ここにどんな情報を入れるべきか事前に教えたりすることはとても重要である。 例えば、AppleのOSでは間違った入力をすると自動で正しい情報を教えてくれたり、自動で変換してくれたりする。 6. Recognition rather than recall (覚えさせるより、認識) これは、ユーザーがなるべく情報を覚えなくとも済むように、UI上で情報を表示しそこで思い出したり、選択させたりとユーザーの負担を減らすことだ。人にとってヒントも何もないところから思い出すことはハードルが高い。 7. Flexibility […]

最近のアイコンが似通ってきている問題

|

最近のスタートアップにおけるロゴトレンドでは、そのスタイルに多くの類似性があることがわかった。その中でも、特にスマホ向けのアプリの影響でアイコンの存在がそのブランドを強く印象づける役割を果たしている。
最近のロゴが似通ってきている問題 – 第2弾

多くのアイコンがどんどんカラフルに
限られたスペースに複数のアイコンが並ぶスマホのホーム画面で存在感を出すためなのか、最近のアイコンはどんどんカラフルになってきている。これは、画面の解像度が上がってきている恩恵でもあるが、どんどん没個性にもつ…

UXデザイナーとは？その役割と仕事内容, 求められるスキル

|

UXの定義・UXデザイナーの役割をおさらい UXデザイナーは何をもって「優秀」とされるか？ UXデザイナーに求められるスキルセット 今日からできるUXデザイナーとして活躍するためにできる5つの行動 ビジネスにおけるデザインの重要性が高まるにつれ、様々なデザイナーの役割と職種名が生まれ始めている。 その中でも、ここ数年でもっとも注目されているのがUXデザイナーだろう。DXへの流れも加速したことで、その需要の大きさから多くのデザイナーがUXデザイナーになるべくスキルアップを進めている。 その一方で、UXデザイナーの仕事の内容だったり、組織での役割だったり、求められるスキルセットに関しては共通認識がまだまだはっきりしていないことも多い。 デザイナーに必要なのはスキルアップではなくスキルチェンジ UXデザインとは？ では、そもそもUXデザインとは何なのか？ UXとは、User Experience (ユーザー体験) の略で、一言で言ってしまえばサービス利用者の体験そのものを示す。 サービス提供者はプロダクトやシステムの品質・機能等を提供し、それらを受け取ったユーザーはその経験を振り返ることで初めてサービス価値を認識する。ここの機能と価値をつなぐ役割こそがUXデザイン。 注意したいのが、ここでのデザインとは見た目や雰囲気だけではなく、製品やサービスそのものを設計することが最も重要だということ。 そしてその利用体験を企画段階から戦略的に設計するのがUXデザイナーの仕事となる。“デザイナー”のキーワードが入っているが、その内容はユーザー調査から始まり、仮設立案、プロトタイプ作成、実験、検証、改善、など多岐にわたる。 ビートラックスのデザインチームも、このUXデザイナーを中心に編成されているが、それぞれのスタッフのバックグラウンドとスキルセットには結構幅がある。 UXデザインプロセス入門 – 基本的な6ステップ 優秀なUXデザイナーとは？ 実際のデザインやプロダクト造りの現場で優秀だと思われるUXデザイナーには共通しているポイントがある。まずは、グラフィックデザイン、ソフトウェア開発、デザインリサーチなど、異なるフィールドへの深い理解があること。 そして、プロダクトの体験のクオリティーを高めるために、UXとUIの両方の分野においての技術も求められる。もちろん機能的な部分も網羅することになるので、エンジニアチームとのやりとりも多い。 言い換えると右脳と左脳のバランスが取れている。 また、UXデザインの最終的ゴールが、ユーザーとビジネスゴールの両方を達成であることから、物づくりに対してビジネス的視点を持つことも必要になってくる。 それらを踏まえると、UXデザイナーは、デザイン的観点、エンジニア的観点、ビジネス的観点の3つの領域をしっかりと理解していることが必要だろう。 優れたUXデザイナーが持つ資質・マインドセットとは？【インタビュー】ホワイトハウスも注目のUXデザイナーJanice Fraser氏（後編） UXデザイナーの主な役割 ではUXデザイナーの具体的な役割を紹介してみよう。 カスタマージャーニーマップ作成 ペルソナ作成 A/Bテストの実施、分析 ユーザーリサーチ実施 ワイヤーフレーム作成 プロトタイプ作成 ユーザビリティーリサーチ実施 プロダクト改善ポイントの抽出 UXデザイナーに求められるスキルセット これだけ幅広い役割のUXデザイナーだが、実際に活躍するにはどのようなスキルが求められるのだろうか？ コミュニケーション能力 データ分析能力 マーケティングに関しての基本知識 ブランディングに関しての経験 ユーザーに対する共感力 コーディングやプログラミングに関しての知識 ロジックと感覚の両立 気配り上手 【これからのスキル】デザイナーとエンジニアの境界線がどんどん無くなる UXデザイナーになるためにできること すでに何かしらのデザイン関係の仕事をしている人や、これからUXデザイナーとして活躍するための5つの方法を紹介する。 1. 個人作業からチームプレーヤーへ フリーランスを中心に、これまでのデザインの仕事は1人で職人的な作業をすることが多い。 しかしこれがUXデザイナーになると、1人で作業をする時間がほとんどないと言って良い。ユーザーとの対話、経営層からのヒアリング、プロダクトチームとのディスカッション、エンジニアとのプロトタイプ作り、マーケティングチームとの顧客獲得における体験設計など、仕事中は必ず誰かと一緒に仕事をしていると考えて良い。 それを考えると全て1人で完結する必要がない。逆に、メンバーそれぞれのスキルと強みを活用して結果を生み出すことが求められる。 この辺は1人で戦っていた初代ドラクエと、その後のパーティー編成での戦い方の違いにも通じるところがある。 一般的なプロジェクトチーム例: プロジェクトマネージャー クリエイティブディレクター ビジュアルデザイナー UXデザイナー エンジニア コピーライター マーケター ピクサーのデザインチームが重要視する4つのプロセス 2. 完璧主義を捨て去る グラフィックやビジュアルのデザイナーの仕事は、できるだけ“完璧な”作りこみをするである。ピクセルやミリ単位のずれを無くし、素材や発色にもとことんこだわる。まさに職人的仕事になる。 それに対し、UXデザイナーはデザインスプリントに代表されるように、速いスピードでの仮説立案とモックアップやプロトタイプ作成が求められる。 そこで作り出されるものは、“ラフでも良いからユーザー検証可能なデザイン”であり、完成とはほぼ遠い不完全なデザインであることも少なくない。 体験をデザインするためには、ユーザーとの対話が最優先。UXデザイナーの仕事としても、ざっくりとした大枠を決め、検証し、そこから導き出された枠組みをビジュアルデザイナーに手渡しし、“清書”してもらう。 その点で元々グラフィックやUIのデザインを行なって来たデザイナーはそのスキルを一度”切り離す”必要が出てくる。 一般的に新しいことを学ぶ“Learn”よりも、すでに身についていることを忘れる“Unlearn”の方がよっぽど難しく、かなり苦しいところであるが、理解しなければならない。 デザインスプリント入門 – 話題の高速サービス開発法とは 3. デザインを「目的」から「手段」に UXデザインの最終的なゴールはビジネス的目的とユーザー的目的の両方を達成することであり、デザインすること自体はあくまでその手段の1つでしかない。 その点において、UXデザインにおけるデザインの役割は、最適なユーザー体験を通じビジネスゴールを達成するための手段であり、デザインがある意味“黒子”の役割になる。 そこにはデザイナーとしての自己主張よりも、あくまで主役はユーザー。それも見えないルールでユーザーを無意識のうちに導いてあげる設計を作り出す事が求められる。 雰囲気だけでクールなアイコンや可愛いイラストを使うのではなく、ユーザーの求めるゴールをもっともストレスなく達成したり、1%でも送信率の高いWebフォームを設計する事がUXデザイナーの仕事となる。 ユーザーとビジネスのゴールが合致するかどうかを見極め、アイコンやイラストを採用するかしないかを冷静に判断する必要性が出てくる。 そのために“誰が” “いつ” “何を” “何を目的で” ”どのように” 使うかを包括的に考えなければならない。そのためにブランディング面も考慮した上で、場合によって“デザイン性”を犠牲にする冷静な判断が求められる。 ユーザーを夢中にさせるAmazonが採用する4つのUXデザイン要素 4. 組織内での存在感・影響力をアップさせる プロダクトの成功と会社の成長、この2つを鍵を握るのがUXデザイナーの仕事だとしたら、企業内での重要性はかなり高いはず。 その一方で、これまで組織内におけるデザイナーの役割としては、全ての企画、仕様、場合によっては試作品が完了してから、“イケてるルックスにしておいて” 的なノリで仕事を振られるケースが多かった。 だとしたら、これからUXデザイナーになる人は、社内で異なる役職や部署の人たちを巻き込んで、包括的な仕事の仕方をする必要があるだろう。 そのためには出世も1つの手段であるが、意外と盲点なのが“影響力の高さ”である。どこの会社や組織でも、特に高い役職に就いているわけではないのに、妙に周りの人を巻き込むのが上手い人がいる。UXデザイナーは多くの人を巻き込む必要があるため、この影響力は不可欠である。 そのためには人間的魅力をアップさせ、多くの人の心を掴む必要が出てくる。 これまでは誰もいない部屋で1人でヘッドフォンをしながら黙々とデザインをしていたデザイナーも、UXデザイナーになりたいのであれば、自ら多くの人と触れ合い、異なる考え方を理解し、組織内でのキーパーソンにならなければならない。 デザイナーとは職種ではなくマインドセットである 5. Looks goodからWorks great! へ これまで1mmや1pxをストイッックなまでに追求して来た人たちは、ついついそれに没頭するがゆえに“どう見えるか”のクオリティーにとらわれ、“どのように動くか”を忘れがちである。 しかし、異なる複数のデバイスやタッチポイントにおいて、全てがインタラクティブになって来ている今の時代、“静止画”の見た目が良いだけで完結するケースが壊滅的に減って来ている。 より良い動きをデザインするためには、見た目以上にコンテンツやインタラクティブ要素、異なるタッチッポイントでの“感覚的要素”の設計が重要になってくる。そのためにはラフでも良いのでプロトタイプ作成のスキルが求められる。 […]

Withコロナの体験デザイン。世界の企業がとったアクションとは？

|

Withコロナ時代に対応するため、米国企業から新たな体験デザインが提供されている ①コミュニティとして支え合い、共存を目指すスモールビジネス応援募金系デザイン（MealPal、ClassPass ②StayHomeのためにできることを優先する、家にいようと啓発系デザイン（Netflix、Uber/UberEats） ③家にいてもひとりじゃない、コミュニティビルディング系デザイン（Instagram、Coffee Meets Bagel） ④インフォデミックを防止する情報共有系デザイン （Medium、Note、Google、Facebook など） Withコロナにおいて、企業がどういうスタンスをとり、人々の価値観に対してどう体験デザインを提供していくか、考え抜き、実行する必要がある   全く未知のウイルスの登場により、経済が停滞、数年先どころか、数ヶ月、数週間先の状況まで全く予測することができず、まさに世界中の人々が足踏み状態である。このことから、欧米では現在の状況を「Great Pause（大いなる停止）」と呼ぶようになってきた。 前例のない状況に困惑し、今後の仕事や生活に不安を抱える人の方が多いことだろう。一方で、環境問題の改善や交通渋滞や事故の減少が顕著に見られるなど、人々が経済活動を一時休止したことによるポジティブな側面も注目されている。それはまさに、この停止期間を我々がどう考え乗り越えていくかによって、この後の世界が大きく変わっていくことを示唆しているようだ。 そして、世界を新しく形作っていく上で大きな力を持つのが「企業」である。今、企業はどのようなアクションを取り、メッセージを社会に発信していくべきなのか。世界中が立ち止まっているこの状況こそ、社会に新たな価値や考え方を提案することができるチャンスと捉え、真剣に向き合っていくべきではないだろうか。 すでに米国では、各企業が自分たちが社会に提供できることを考え、迅速な動きを見せている。消費者を巻き込んだそれらの動きは、体験デザインの視点から見ても、非常に参考になるものが多い。この記事では、コロナ危機発生直後の状況に対応する米国企業の体験デザインを考察しながら、この歴史的な転換期に、企業としてどのような行動をしていくべきなのかを考えていく。 コロナ危機に対する企業の迅速な対応が活発に アメリカではこの世界的危機に対し、企業としてどのように貢献できるかを考えて、即時に行動する流れがとても顕著である。これらの動きは英語で『COVID-19 Corporate Responses』と呼ばれている。 その中でも目立っているのは、資金や物資の支援だ。例えば、Mastercardや、Wellcome、Bill&Mellida Foundationは、3月10日という大変早い段階でCOVID-19事態収束のためのスタートアップを支援するアクセラレーターを共同設立。 CocaColaはフェイスシールドを作る非営利団体の支援のためにリソースとロジスティクスを提供した。各国のマスクの不足に対しては、AlibabaやTrip.comのような企業が日本、アメリカ、ヨーロッパ等に大量寄贈したニュースを目にした読者も多いのではないだろうか。 また、PepsicoやChipotleをはじめとする食品企業やレストラン業が、ウイルスと最前線で戦う医療従事者や経済的に困窮する層に対して、無料で食事を提供する動きもアメリカでは目立った。 ZoomやWorkplaceなどのオフィスツールを提供する企業も、急な自宅勤務が導入された企業をサポートするために、期間限定でサービスの無料提供を行っている。 消費者を巻き込む企業のコロナ対応デザイン 上記のように、直接的に企業の資金や物資を無料提供するような企業活動が目立つ一方で、別の形でコロナ危機に対する企業活動を実践している企業が存在している。 彼らは、この前代未聞の危機の中で私たち消費者側が、お互い助け合い、賢く判断して生活できるようなデザインを提供している。 パンデミックの世の中で新たな社会生活の在り方の創造が求められる中、これらの企業は、他者と自分とのつながりの中で社会が存在することを消費者に再認識させ、新しい社会での行動の仕方をポジティブに提案してくれている。 1. スモールビジネス応援募金系（MealPal、ClassPass） コロナウイルスの感染拡大防止の自宅退避令により、多くの都市で必要最低限のビジネスが禁止される措置が取られている。サンフランシスコでも、レストランやカフェは宅配とお持ち帰りのみが許され、イートインスペースは閉鎖されてしまっている。 スポーツジムやヨガスタジオといった施設も未だ全て閉鎖されている状況だ（5/1現在）。2ヶ月以上もこのような状況が続くため、多くが従業員の解雇や廃業にまで追い込まれている。 このような状況に対して、MealPalやClassPassは、消費者たちが支援を必要とするスモールビジネスをサポートできるような仕組みを提供し始めた。 MealPal MealPalは街中のレストランと提携し、オフィス街で働く人向けに格安でランチを提供するサブスクリプションサービスだ。ユーザーはアプリから翌日のランチとピックアップ時間を選択し、その時間になったらレストランまでランチを受け取りに行く。 参加するレストラン側のメリットはMealPalプラットフォームに参加することでレストランを周知してもらえる点だ。また、MealPal用のランチメニューは数種類に限定することができるのと、事前にオーダー数がわかるのでロスも少なく効率的であるというのもメリットだ。ユーザーは通常より安価にランチを手に入れられるほか、お店で待たずに受け取れるのが嬉しい。     しかし、コロナウイルスの感染拡大が懸念される今、ほぼ全てのオフィスワーカーが自宅勤務になった。ここサンフランシスコでも、MealPalを利用できるユーザーが激減してしまった。またレストラン自体が一時休業というケースも少なくない。 自分たちの経営すらも危ういであろうこの状況の中、MealPalが始めたのは、加盟店への募金のシステムだ。 今現在、ユーザーがアプリを起動すると、いまだにランチ提供を続けるお店にランチを予約するだけでなく、今日ランチを注文する代わりにその金額を提携レストランへの募金に回すというオプションも存在する。 また、このような状況の中、多くのユーザーがサービス利用の一時停止を考えるだろうが、お金に余裕のあるユーザーに向けて、1ヶ月分のサブスクリプション費用を全額募金に回すという選択肢も提案している。 関連記事：【UX分析】ランチの格安サブスクサービス MealPal ClassPass MealPalと似たビジネスモデルを持つClassPassは、MealPalのジム版とでも言うことができる。ClassPassのサブスクリプション（回数券）を使うと、ダンスやヨガ、ボクササイズなど、複数の異なるエクササイズジムを横断的に使うことができる。 ユーザーはオンデマンドで様々なクラスを予約、ドロップイン参加できるのだ。ユーザーは特定のジムに会費を払う必要はなく、様々なジムで異なったエクササイズを気軽に楽しめるのが魅力だ。 ClassPassのコロナウイルス対応は、とてもスピーディーだった。サンフランシスコでは自宅退避令が3月14日に発令されたが、ClassPassはその翌日15日には、該当地域に居住するユーザーのサブスクリプションを全て自動で一時停止した。現在ClassPassは、加盟するジムのオンラインストリーミングクラスをプラットフォーム上で提供している。 また、各エクササイズジムのClassPassプロフィールページには「サポート機能」を追加している。この機能を通じて、ユーザーはお気に入りのジムに対して、$5-$500の範囲で金額を設定して簡単に献金することができる。 さらに、エクササイズジムで働く人々に補助金を出すことを求めるオンライン署名活動を促す特設ページも一時期設けていた。   寄付文化が日本より浸透するアメリカであっても、先行きの不透明なこの状況で誰かに募金をしてサポートするというのは決して誰もができることではないはずだ。 しかし、いつも使うアプリからの募金の呼びかけは、普段ランチを手渡してくれる飲食店従業員や、エクササイズをサポートしてくれるジムのスタッフの笑顔がユーザーの頭をよぎらせるだろう。 そうしてユーザーは、コロナウイルスの影響で窮地に追いやられているコミュニティが、実は自分の属すコミュニティであることを実感し、募金という行動を選ぶ。そんな体験のデザインが、MealPalとClassPassの「サポート機能」には隠されているように筆者は考える。 このようにして、この2社は、自分の生活すらも不安な今、スモールビジネスを応援する意味を人々に考えさせ、コミュニティとして支え合い、共存してくという価値観を社会に醸成しているのである。 2. 家にいようと啓発系（Netflix、 Uber/UberEats） 次に紹介するのは、コロナウイルス感染のピークを抑え医療崩壊を防ごうとする「Stay Home」の動きを啓発する形で社会に貢献しようとする企業だ。 Netflix 動画配信サービスを提供するNetflixはもう日本でもお馴染み。彼らは街頭に、今一番人気のあるリアリティショーのネタバレ広告を出した。外出する消費者に「家に帰ってNetflixを観たい」という気持ちにさせることで、コロナウイルス感染拡大防止に貢献させるという秀逸な対応である。 このリアリティショーのファンであるbtraxスタッフも「ネタバレし過ぎない程度の絶妙なネタバレ具合で普段から視聴している人にとっては続きが気になって仕方ない」と絶賛していた。 ちなみにNetflixはサブスクリプションベースなので、新規ユーザー獲得でなく、既存ユーザー1人あたりの視聴時間が増えたからといって単純に利益が増えるわけではない。 Uber また、配車マッチングプラットフォームのUberは「A company that moves people is asking you not to move（人々の移動を生業にする会社が、動かないでとお願いしています）」と広告を出した。 現在、Uberをオーダーしようとアプリを開くと「それは本当に必要な外出ですか？」と確認メッセージが表示され、不要不急の外出を避けるように促される。 また、ドライバーたちにも社内のクリーニングキットを提供してたり、万が一ウイルスに感染してしまった場合には14日間の休業支援金を支払ったりしているようだ。 Thank you for not ridingというメッセージも動画広告で発信されている UberEats さらに、レストランのデリバリーに対応するUberEatsでは、現在デリバリー手数料を無料化し、金銭的な面で普段より利用ハードルを下げることで「Stay Home」を後押ししている。 ソーシャルディスタンスの実践をサポートするために、受け取り方法にも「Leave at the door（ドアの外に置く）」というオプションを素早く導入して対応した。 これらの企業は、自社のサービスがどのようにコロナの渦中にある社会で位置付けられるのか、その中で自分たちが取るべき行動はなんなのか考えて即座に行動している。 たとえその動きが自分たちの利益に直接繋がらなかったり、むしろ利益を下げてしまう場合であったとしても、潔く社会のためにその活動を決断している点に注目したい。 3. 家にいてもひとりじゃないーコミュニティビルディング系（Instagram、Coffee Meets Bagel） ソーシャルディスタンスの実施により、自宅退避を強いられ、多くの人々が友人知人と直接顔を合わることがほぼなくなってしまった。そのことから、強い孤独やストレスを感じている人も多いだろう。 そんな中、自宅にいながらも、人と人との繋がりや新たなコミュニケーションのきっかけをデザインしてくれている企業も存在する。 Instagram 日本を含め世界中にユーザーがいるInstagramもその1つだと筆者は考える。彼らは「Stay Home（おうち時間）」スタンプを作ることで、コロナ時代の孤独になりがちな「おうち時間」をサポートしている。 「Stayhome（おうち時間）」スタンプは、日本語、英語のみならず、ドイツ語やスペイン語など世界中の言葉に対応されているようだ。Instagramは、このスタンプを作ることで、ユーザーそれぞれが自宅での過ごし方を共有しあうことを促した。 自宅でも有意義な時間の使い方が可能であることを互いに共有しあったり、逆に「家で寂しい思いをしているのは自分だけじゃない」という同胞感を感じさせる体験デザインしているように見える。   この状況で実は大きな打撃を受けている業界は数えきれないが、オンラインデーティング業界も実はそのうちの1つだ。「オンラインデート」とは言うものの、ユーザーの多くがオンラインで「マッチ」した後に直接顔を合わせることを前提にサービスを利用している。 自宅退避令により、実際に顔を合わせるのがいつになるかわからないため、一旦活動を停止してしまうユーザーも多いようだ。 CoffeeMeetsBagel この状況に対し、Coffee Meets Bagel（以下CMB）は自宅退避令中も（バーチャルで）人々の出会いを支援するデザインを行っている。まずCMBの特徴の1つと言えばマッチした人とのメッセージ機能が7日間でクローズすること（それによって、実際に顔をあわせることを促す仕組み）だが、彼らはその機能を真っ先に「無制限」にした。 […]

寿司職人から学ぶ究極のUXデザイン6つの極意とは

|

ユーザー体験のデザイン、いわゆるUXデザインのフィールドは、どうしても欧米が進んでいると思われがちである。しかし、実は、日本的なおもてなし精神こそが、最も優れたUXデザインに直結しているのではないかという説がある。まあ、その説は自分自身が提唱しているのであるが。
こちらアメリカ西海岸では、寿司レストランがかなり定着しており、食事自体だけではなく、最近ではそこで得られる体験に注目が集まっている。特にカウンターに座り、板さんとのやりとりをしながらゆっくりディナーを楽しむ仕組みは、アメリカでもかなり評価さ…

多様なキャリアを持つUXデザイナーが語る「ユーザー中心デザインの重要性」【btrax voice #11 KJ Kim】

|

btrax社員の生の声をお届けする「btrax voice」シリーズ。
今回のインタビューは、UX DesignerのKJ Kim 。今回KJには、『ユーザー視点のデザインの重要性』というテーマで、ユニークなキャリアパスを歩んできたKJがどうしてUXデザイナーになったのか、また様々な環境でキャリアを積んできたからこそ気づいたユーザー視点の重要性について伺いました。
Who is KJ?

K.J. Kim (金匡宰)
btrax, Inc. UX Designer
Pratt Institute (…

生き残りをかけた小売の挑戦〜メイシーズ、ダンキン、ウォルマート〜

|

インターネットやモバイルの普及、高速回線の登場などにより、消費者の購買行動は大きく変化してきたが、その変化の速度自体も早くなってきている。 例えば読者の皆さんは5年前、どのようにブランドを知り、購入まで至っただろうか。おそらく今のようにインスタグラムでブランドを知り、ショッパブルボタンから購入をしたという人はほぼいないだろう（そもそもショッパブル機能自体が2016年にリリースされたものだ）。 また、オンラインでの買い物が企業やユーザーにとってどれだけ標準になったかを考えることからもその変化を実感することができるのではないだろうか。 AmazonやeBayなどEコマースを中心としたサービスが台頭してくると、老舗の大手小売企業もビジネスをEコマースへと広げてきた。その結果、かつて実店舗を利用していた客がEコマースへ流れていくと、多くの実店舗が閉店へと追い込まれるようになった。 実際に、実店舗の閉店計画は以下の通り発表されている。 大手ラグジュアリーデパートのNeiman Marcusは2017年、アウトレットラインのthe Last Call38店舗のうち10店舗を閉店した。2018年時点で50億ドルの負債を抱えている。 創業100年以上の大手小売Searsは2019年に全国80の店舗を閉めることを発表している。2018年には経営破綻。2013年から2018年までの間に店舗数は2,000から700へ激減。 2017年経営破綻を発表した子供服Gymboreeは2019年に最高900となる店舗の閉鎖を計画している。 大手デパートのメイシーズも2019年に8店舗閉める計画がある。 この一方で、残った実店舗の買い物体験をよりよくするための新しい積極的な取り組みが見られるのも事実だ。特に大手小売企業は実店舗というチャネルの最適化のため試行錯誤を繰り返している。 そのチャレンジぶりはアマゾンやeBayといったデジタルネイティブ企業の勢いに追いつくためではなく、追い越そうという、どこか「スタートアップ」的な動きをしているようにも見える。 そこで今回は、店舗数を最小限にした大手小売企業が行っている、ユーザー志向の新しい購買体験を提供するための取り組みを紹介する。 関連記事：ミレニアルにはブランドネームではなく体験を売れ！ー 炭酸飲料大手企業の挑戦 小売大手の新しい取り組み 1. メイシーズ： 社員をインフルエンサーにするプログラム 1858年から続く大手デパートのメイシーズも先に述べた通り、実店舗を中心とした経営に苦しんでいる小売企業の1つだ。 そんなメイシーズは昨今主流となってきたインフルエンサーを活用したマーケティングを独自の方法で取り入れるため、社内インフルエンサープログラムを開始した。 Style Crewと呼ばれるこのプログラムはレジ担当から幹部まで誰でも申し込むことができる。申し込みをしたインフルエンサーたちは、事前に受け取った制作費用予算から写真や動画などのコンテンツ作りを行う。 作成したコンテンツはインフルエンサーのSNS及びメイシーズStyle Crewの専用ページに投稿され、これらの活動が売上に繋がるとインセンティブが入るという仕組みだという。 （それぞれの従業員兼インフルエンサーのフォロワー数は1万〜千くらいで、いわゆるマイクロインフルエンサーが多い。インフルエンサーのひとりであるMichelle Kunzのインスラグラムより転載） インフルエンサー達はメイシーズで販売している商品を取り扱ったビデオコンテンツや写真コンテンツを作成し、インスタグラムやYouTubeに投稿している（下記ビデオリンク参照）。もちろんメイシーズのソーシャルアカウントやウェブサイトにも掲載されている。 もちろん投稿から商品情報を確認したり、メイシーズの販売ページへの導線も確保されている。インフルエンサーはデジタルでコンテンツを配信することで、ユーザーとのエンゲージメントやより親近感のあるコンテンツによるアピールにより、ファン拡大やEコマースへの流入も狙っていると考えられる。 さらに、デジタルだけでなく、実店舗への来店促進にも役立っているようだ。 インフルエンサーの中には店舗でスタイリストをしている人もいたり、働いている店舗を写していたりする人もいるので、本人に実際に会うことができたり、写っている商品を確実にお店で試すことができたりと、オンラインとオフライン融合の可能性が広がっている。 （インフルエンサープログラムのメンバーはメイシーズで買える商品を自分の興味や知識を活かして紹介する。公式サイトより転載） さらに企業としては、ソーシャルで活躍したい従業員（インフルエンサー）をサポートし、ブランドをさらに理解してもらうことで企業対従業員の良い関係作りにもなると前向きだ。 またそのコンテンツを通して、メイシーズはファッションとトレンドを押さえた小売であるという認知向上を狙っている。 このプログラムに参加しているインフルエンサーの数は、開始時2018年に約20人規模で始まってから、現在では400名ほどに増えている。 現在はアパレル商品や化粧品を中心に取り上げているが、2019年は家具や日用品など、メイシーズが扱う全てのカテゴリーに拡大する計画をしている。幅広いジャンルのインフルエンサーを育てる狙いだ。 関連記事：小売業界の敵はAmazonではない? これからの小売が知っておくべき課題 2. ダンキンドーナツ：リブランドと未来型店舗によるUX改善計画 ドーナツで有名なファストフード小売チェーンのダンキンドーナツ、改めダンキンは未来型店舗に向けた計画を2018年に発表した。名前の変更も今回のコンセプトにあったリブランディングの一部なのである。 ダンキンはこれらのコンセプトを店頭で試す前に、イノベーションラボでそのテクノロジーと体験を再現している。イノベーションラボでテストされている取り組みの一例は以下の通り。 従来のお店の窓に貼られた広告の代わりとして、ホログラムにより投影された広告。広告を掲載するのに壁、紙媒体はいらなくなる。 自動コーヒーマシンも試しているが、ラテアートを楽しめるコーヒーマシンの開発もしている（彼らはセルフィーニトロコーヒーと呼んでいる）。 他にも注文したものを受け取れる無人ロッカーや性別、年齢、気分を分析してそれに基づいたオススメメニューを提案してくれるAIシステムなどを開発している。 イノベーションラボを訪問した記事によるとまた精度が高くなかったり具体的な活用事例がまだなかったりするようだ。しかしながら、ダンキンのイノベーションラボには、昨今の競争の激しい小売業界で生き残るためにもとりあえず試してみて失敗からも学ぶといった姿勢があるのではないだろうか。 3. ウォルマート：小売最大手の最新テクノロジーを使った取り組み ウォルマートは日本の西友を子会社にもつ、売上額で世界最大の小売企業だ。そんなウォルマートも1位の座にあぐらをかくことなく、挑戦をし続けている。 彼らが2018年に発表した取り組みに、Flippy（フリッピー）というAIを搭載した揚げ物調理ロボットがある。このロボットは受けた注文数と揚げ時間を考慮して、最適なタイミングで出来立ての揚げ物を作ることができる。 フリッピーは揚げ物全ての調理をするわけではなく、人と手分けしながら作業の効率化やサービスの向上を目指す、協働ロボットだ。フリッピー自身が油に溜まったカスを掃除するのも可愛らしい。 （フリッピーを開発しているはMiso Roboticsというスタートアップ） また、ウォルマートもWalmart Labsと呼ばれるラボチームを持っており、ここでも様々な実験を行なっている。 例えば店舗を徘徊して管理する棚ロボット。店内を歩き回り、店内の不具合（ラベル・値札の間違いや陳列場所違いなど）や在庫をチェックしている。認識したデータを従業員に共有し、のちに従業員が直すことができるようになることを目指しているという。 現在はまだ開発段階で、まだフル活用には至っていない。今後、ウォルマートが開発しているツールとの連携ができれば、繰り返しのマニュアル作業をロボットが行い、人は顧客の対応に集中できるようになるというのが狙いという。 関連記事：Amazon Go型の無人レジ店舗の普及を目指す2つのスタートアップ企業 まとめ ここサンフランシスコも、都市部とはいえ、実店舗が閉店しているところを見かけるし、デパートなどは閑散としていることも多々ある。実際の数字もお見せした通り、決して好調とは言えない状態だ。しかしながら、実店舗を”絞り”ながら、新しい体験の創出に注力している。そして店舗に新しい役割を持たせようとしている。 今回紹介した大手小売企業も逆境の中、もしかしたら失敗かもしれないけどやってみている姿が感じられるではないだろうか。やはりアジャイル的に試していくのが成功に導く道なのかもしれない。 ただ焦って立ち止まるのではなく、最高の体験イノベーションを創り出すために試行錯誤する小売業界はこれからも注目だ。そしてぜひ、彼らのようにできることからやり始めてみるのはどうだろうか。 参考： ・E-commerce share of total retail sales in United States from 2013 to 2021 ・Will There Be A Physical Retail Store In 10-20 Years? ・Inside Macy’s 300-employee influencer program ・How Macy’s is using its store employees and stylists as Instagram influencers to drive sales ・See […]

イノベーション＝技術革新はもう古い！新たな価値を創造した9事例

|

会社の生き残りをかけてイノベーション担当部署があらゆる企業で創設されている。イノベーションの必要性が自社内でも議論し始められ、そもそもイノベーションとは？と改めて問い直している読者も多いかもしれない。
iPodやAirbnb、Facebookがイノベーションの事例として挙げられることも多いが、それらに匹敵するようなアイデアが生まれるとは思えないという声もクライアント企業からよく聞く。
関連記事：「馬鹿げた」アイデアから生まれた3つの世界的なサービス
しかし、これらのような社会のあり方を大きく変えるよ…

ユーザーフローから学ぶミスコミニュケーションの発生原因と対処方法

|

UXデザインのプロセスの一つとして「ユーザーフロー作成」というものがある。これは、特定の目的を果たすために、ターゲットとなるユーザーがどのようなプロセスを経るのかを明確にすることで、そこにたどり着くまでの「流れ」を設計するもの。
例えばアプリのデザインをする際には、下記のようなユーザーフローが設計される。

このプロセスの中では、それぞれのタスクごとにフローを作成し、よりユーザーにとって使いやすく、加えて、サービス提供側のゴールをスムーズに達成できる「流れ」に対しての導線をデザインする。

しかし、…

ディズニーランドから学ぶ究極のUXデザインとは

|

ユーザーに優れた体験を提供し、提供側の利益も生み出す。これがUXデザインにおける一つの究極のゴールである。この2つのゴールを達成している最高の例の一つがディズニーランドであろう。実際に行ったことのある人であれば、その体験の素晴らしさと、躊躇なくお金をどんどん使ってしまうその雰囲気は、まさにマジックとも言える。実は、そのマジックの裏には、UXデザイン的観点で見ても卓越した設計が施されている。
UXデザインの価値を図る際には「UXハニカム」や「UXピラミッド」が使われることが多いが、おそらくディズニーラ…

ピクサーのデザインチームが重要視する4つのプロセス

|

トイストーリ、ファインディング・ニモ、カーズなど、次々とヒット作品を生み出すピクサー。サンフランシスコ近郊にあるこのスタジオでは非ハリウッド的な手法を用いてオリジナル作品を生み出している。それも、3Dアニメという新しいジャンルを確立させ、その世界観をどんどん広げている。

そしてピクサーは、クリエイティブの質とビジネス結果の両立を実現させた稀有な存在の会社でもある。ワクワクを生み出すための独特なカルチャーや、それをしっかりとしたビジネスとして成り立たせるためのプロセスには学ぶべき部分が非常に多い…

Amazonを成功に導いたユーザーを夢中にさせる4つのUXデザイン要素

|

世界を制覇し始めているGAFAの一角であるAmazonの凄さは下記の数字を見ただけでも伝わってくる。

44% – アメリカのeコマース市場におけるAmazonのシェア
1億人 – Amazon Primeのメンバー数
3人に1人 – アメリカの成人でAmazon Primeに加入している割合
95% – Primeメンバーシップを更新したいと思う率

この成功の要因は何であろうか？確かに安さはあるだろう。しかし、見落としがちなのが、デザイン的要因である。

実は私、デザイ…

Amazonを成功に導いたユーザーを夢中にさせる4つのUXデザイン要素

|

世界を制覇し始めているGAFAの一角であるAmazonの凄さは下記の数字を見ただけでも伝わってくる。

44% – アメリカのeコマース市場におけるAmazonのシェア
1億人 – Amazon Primeのメンバー数
3人に1人 – アメリカの成人でAmazon Primeに加入している割合
95% – Primeメンバーシップを更新したいと思う率

この成功の要因は何であろうか？確かに安さはあるだろう。しかし、見落としがちなのが、デザイン的要因である。

実は私、デザイ…