Hironori Aihara

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

Hironori Aihara | 2024年4月2日

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記事のお知らせが来るため、興味ある方はぜひ登録をおすすめしたい。

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

Hironori Aihara | 2023年10月13日

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サイトをはじめとするサービスデザインや、ブランディング、コミュニケーションデザインの領域でお困りごとがあれば、ぜひお気軽にお問い合わせください。

今さら聞けないデザインシステム入門

Hironori Aihara | 2023年4月28日

最近SNSなどでデザインシステムに対する注目度が増していると感じる。昨年、日本のデジタル庁がデザインシステムを公開し、ニューヨークとパリに拠点を置くデザインエージェンシーのAREA 17によってOpenAIのデザインシステムが公開された。デザインを専門職としていない方でも、「デザインシステム」という単語を見かけたり、さまざまな企業のデザインシステムを見る機会が増えたと感じているかもしれない。本記事では、デザインシステムが生まれた経緯や存在理由をはじめ、デザインシステムの基礎をご紹介したい。デザインシステムとは何か？デザインシステムとは、デザインに関わる複数の要素（色やフォントなどさまざまなもの）をひとつに管理したものである。デザインシステムの存在意義は主に次の2点と考えられる。一つは、デザインチームの生産性向上のため、もう一つは、デザインの品質向上のためである。デザインシステムを導入することで、一貫性のあるデザインをチームでも実現することができ、ブランドイメージの統一やユーザー体験の向上などの効果が期待できる。デジタルプロダクト上で高品質なUIや体験を提供するためのコンポーネント(CTAボタンといった要素)の集まりもデザインシステムの一部である。デザインの組織的なアセットとして、デザインシステムの他に「ヴィジュアルアイデンティティ（VI）」や「ブランドガイドライン」といったものがある。これらの違いは、企業の上位概念の共通認識をとるために作られているか、より現場レベルでの運用方法を明示するために作られているかのレベルの違いである。ヴィジュアルアイデンティティをはじめとした企業の方向性を示すアセットは、いわば上位概念に位置し、デザインシステムやブランドガイドラインはより現場に近い概念である。名前にもついているシステム（System）には「制度」「方法」「順序」といった意味があるため、「現場の運用のための制度や方法」という概念は感覚的にわかりやすいのではないかと思う。デザインシステムの基本の3要素では、デザインシステムとはどんな内容で構成されているのだろうか。ここからは、デザインシステムを構成する3つの主な要素をご紹介する。その前に、そもそもデザインシステムは、デザインシステムを作る対象となるプロダクトやサービスによって、含まれるべき要素が変わってくるものだ。デザイナーやマネージャーはシステム化する対象によって、デザインシステムの内容をアレンジする必要があることをここでお伝えしておきたい。その上で、ここでは、最も基本かついずれのデザインシステムにも含まれるべき要素としてご紹介する。 1.デザイン原則これは、企業がプロダクトを作る上で重視するデザインの考えや思想を可視化させたものだ。デザインシステムは、基本的に複数人で運用される上に、時にはプロダクトの成長に合わせてコンポーネントリスト（詳細は後ほどご紹介する）を更新することが出てくる。そんな時に、デザイン原則として、重視しているデザインの考えが明文化されていると、状況に変化が起きても、デザインの根本を見失わず、共通認識を持つことができる。参考：Spotifyのデザイン原則に関する記事 2.スタイルガイドスタイルガイドは、カラーパレットやフォントをはじめ主にビジュアルデザインに関する要素を集めたものになる。ブランドイメージをビジュアルとして可視化するための規則であり、デザイナーはスタイルガイドに沿って色やフォントを選ぶことで、どんなデザインでも同じブランドから出ている統一感を出すことができる。 3.コンポーネントリストスタイルガイドを基に作成された「繰り返し使えるデザイン要素」を集めたものである。例えばWebやアプリ上のボタンを初めとしたテキストボックス、ナビゲーションバー、タグなどである。目的に対し、その達成のための要素という1:1のコンポーネントを作っていくことで、デザイナーが複数人いる現場でも一貫性のあるユーザービリティと体験を提供でき、開発側もUIの管理がしやすくなる。デザインシステムを作る場合にはこの1から3にかけて要素を組み立てていくのが一般的な流れとなる。デザインシステムの運用方法デザインシステムは作って終わりではなく、運用していくことが重要である。デザインシステムの運用において一般的に重要とされていることを紹介する。 1.ドキュメンテーションの整備デザインシステムに関するドキュメンテーションを整備して、関係者の誰からも見やすようにする。デザインシステムは、デザインシステムの制作者以外が使うことがほとんどだ。時にはデザイナーではない人も使うものだ。そのためデザイナー以外にも分かりやすく、すぐに内容を確認できる状態が望ましい。例えばSmart HRではデザインシステムをWebページ上に公開している。他にもよくあるのはFigmaで制作しておき、それを公開しておく方法だろう。 2.コミュニケーションの確立デザインシステムの利用に関する情報共有や問題解決のためのSlackなど、コミュニケーションチャネルを確立すると関係者同士の連携が円滑になる。デザインシステムは運用していく中で必ず課題は出てくるものだ。それをいち早く報告し改善できる仕組みとして、コミュニケーション方法の確立は重要である。 3.バージョン管理の実施デザインシステムは日々改善されていく。そのためバージョン管理を実施することで、新しい要素や変更が加わった場合に、関係者がそれを追跡でき、問題が発生した場合にも簡単に元々のバージョンまで戻ることができる。 4.ユーザーフィードバックの取得デザインシステムの利用者からのフィードバックを積極的に回収し、その情報をもとに改善することも重要である。多くの企業が自社のデザインシステムを公開している理由の1つだ。イギリス政府のように国営のサイトの体験に関するフィードバックを民間から発信できるコミュニティを持ち、その中で上がった意見を元に改善が進められるケースもある（参照）。まとめ本記事ではデザインシステムの基礎となる存在理由や要素、運用方法をご紹介した。デザインシステムは企業におけるデザインチームの生産性向上、デザイン運用ための品質担保という目的があるが、それを運用するのはデザイナーだけに限らない。エンジニアやプロジェクトマネージャーも、このデザインシステムを参考にしながらプロダクトを作っていく。そのため、デザインシステム自体は企業の重要なアセットである。特にデザインという属人的な領域において、デザインを「システム」として管理することは、どんなデザイナーでも一定の成果を挙げやすくなるため、デザインの質の向上に寄与するだろう。この記事を読んで、デザインシステムを認知する人が増えたら幸いである。

btraxのデザイナーが考えるクライアントコミュニケーションの5つのコツ

Hironori Aihara | 2022年7月6日

デザイナーの仕事は、実は「デザインをしていない時」こそが重要であると筆者は考えている。というのも、もちろん成果物も重要であるが、その手前で、どんな手順を踏んでそのアウトプットまで辿り着いたかも重要であり、むしろそういった過程こそが、最終的なアウトプットのクオリティに大きく影響を与えると感じている。特にデザイナーがクライアントワークに入った場合、成果物の完成度は、技術的なデザインのクオリティの高さだけでなく、クライアントからの期待にどれだけ応えられたか、という側面にも大きく左右されるのだ。筆者もデザイナーとして、クライアントワークでデザイン業務をすることが多い。しかしこの記事では、クライアントワークの過程で気がついた、デザイン業務以外でデザイナーが気をつけるべき点を紹介していく。プロジェクトゴールの見直しデザインプロセスの設計と説明言葉の認識確認と辞書作りレビュー会の適切な運営社内での咀嚼の時間１.プロジェクトゴールの見直しクライアントへの提案時はもちろん、提案後、実際にプロジェクト化し、プロジェクトが始まる際といった早期のタイミングでもゴールの見直し、再確認は行うべきだ。具体的には定義されている課題やゴールは適切かを確認する必要がある。クライアントが設定してきた課題やゴールが適切かを改めて自分達で問うことで、課題の背景に興味を持つことができる。クライアントにも確認をとりながら課題の背景を知っていくことで、クライアントから受け取った資料の文字情報や会議の会話では見えてこなかった部分が見えてくる。場合によっては課題のリフレーミング（再定義）を行うことで、より最終的な成果物が効果的なものになると考える。リフレーミングとは？ – ヒットの秘訣は問題へのアプローチの仕方にある気をつけなくてはいけないのが、これはあくまでも「見直し」であり、場合によっては他の方法を提案しようというものであり、必ずしもクライアントの意見を否定したほうがいいというわけではないということだ。デザイナーにはクライアントからの要望を冷静に見定めていく客観性が求められ、もし課題そのものが間違っていると感じるのであれば、その理由をしっかりと言語化をしクライアントに伝える必要がある。 2.デザインプロセスの設計と説明デザイナーの考えるプロセスを、デザイナーではない人にも理解してもらうことは、仕事に対する納得度と相手からの理解度を得るためにもとても重要な作業である。大概の現場において、デザインの教科書に載っているプロセス通りに事が進むことは少ない。ゆえにデザイナーはプロジェクトごとにプロセスの最適化が必要である。この時、そのアレンジしたプロセスがデザイナーの独りよがりなものにならないためにも、クライアントにそのプロセスの意図をわかりやすく説明することはとても重要だ。相手にわかりやすく伝えようとする行為は自身の提案する各プロセスがどんな意味を持つのかを自分でも改めて客観的に理解するのにも役に立つのではないかと感じている。デザインプロセスを筆者がクライアントに説明する上で、気をつけていることが3つある。 1つ目は専門的な言葉やカタカナ語など特定の業界の人が使いやすい言葉を避けること。また、使わざるを得ない場面であればその単語を説明する一言を付け加えることである。最近はデザイン系の言葉が一般にも認知されてきてはいるが、なるべくデザインの専門用語も避けるべきだと思っている。 2つ目はスライドに図を使ったり、スライドに載っている図や文章でクライアントが理解できていない場合は、FigmaやMiro上でその場で新たに図を作成して説明する。 3つ目は、人によって解釈が違いそうな言葉を使う際には、その言葉と意味が混在されやすい別の言葉を比較し、今回使いたい言葉の意味をはっきりとさせる。このように相手がデザインに関する知識が無い前提に丁寧に言葉遣いや説明の方法を気をつける必要があると考える。 3.言葉の認識と辞書作りクライアントによっては、その会社ならではの専門用語や略称があったりする。そういった言葉については、わからないときははっきりと意味を聞き、その言葉と定義をまとめたプロジェクト用の「辞書」となるものを作っておくのがおすすめだ。そうすることで認識の齟齬を防止し、表記の揺れをなくすための対策になる。さらに可能であれば、普段のクライアントの言葉遣いを真似ることをおすすめする。そうすることで彼らとのコミュニケーションがスムーズになり、結果として認識の齟齬が少なくなる。また、クライアントに自分たちがプロジェクトのことを十分に理解しているという安心感を持ってもらえるようになる。ちなみにビートラックスでは、プロジェクトにおける辞書作りの一つの方法として、付箋にわからない言葉を意味を聞いたのち、付箋でまとめて一目で見直すことができるようにしている。スプレッドシートにまとめるより見やすく、後からグルーピングもしやすく、領域ごとの言葉の整理ができるからである。 4.レビュー会の適切な運営これはデザインをした後の話だが、クライアントとのデザインレビューとその事前準備も重要だ。レビュー会は、クライアントが求めることと自分たちの現状の進捗の差分を話し合いながら把握できる貴重な時間である。そのため、話し合いで議論すべきポイントが事前に絞られ、検証したいことがクライアントにも十分に理解されていることが重要である。そうすることで少ない時間でクライアントから欲しい意見を引き出すことができる。そのためには前提として、2で紹介した【デザインプロセスの設計と説明】によってそのプロセスへの理解を常に得られていることが重要だ。筆者は定例会議で今現在のプロセスで行っていることを資料の最初に入れておき、毎回の会議の初めに確認する時間を作っている。少しくどいと思われるくらいに丁寧に表現した方が、クライアントにとっては結果的に効果的だと実感している。しかし、そうは言ってもレビュー会では意見の発散に終始してしまう時もある。その際には、議事録ノートに「Parking Lot （今は一旦おいておいて）」と呼ばれる欄を作ってそこにまとめておき、後から振り返れるようにすると意見が無駄にならずに済む。ちなみに近年はリモートワークが一般的になったことによってオンラインツールを活用したレビューの実施が可能になった。そこでビートラックスでは、デザインのUIなどのレビューは会議外で自由にFigmaなどでコメントをもらい、会議ではそのフィードバックに対する認識の確認や議論する場という、時間による棲み分けを明確にしてみた。このようにすることで、効率が良くレビューの進行を行うことができた。 5　社内での咀嚼の時間レビュー会後や定例会議の直後に、社内のプロジェクトメンバーでクライアントからの意見を整理し、「咀嚼」する時間も、メンバーの認識を揃えて次のアクションを明確にする上で重要だと考える。クライアントからの意見を受け、なぜ彼らがそのような発言をしたのかをすぐにメンバー全員で考えるメリットは以下である。クライアントからの意見や言葉のイントネーションや意図をまだ鮮明に覚えているため、議論が効率的に行える。皆で一度話し合うことで「なぜそのような修正が必要なのか」を改めて問いやすくなる。話し合いの中でネクストアクションをタスクレベルまで細分化・具体化できる。チーム内で認識の齟齬がなくなる。このように会議直後にメンバーみんなで話し合うことで、クライアントの求めていることは何かを常に意識しながら効率よく次へと進めるだろう。終わりに今回はデザインスキルとは違った観点で、デザイナーにとって重要なクライアントとのプロジェクト進行に関するポイントをまとめた。いずれも共通して重要なスキルは、コミュニケーションの丁寧さだと感じた。特に、クライアントから大量の情報を受け取り、それを適切な形でユーザーに届けるデザイナーという仕事の特性上、クライアントのコミュニケーションの質は、最終成果物のクオリティに大きく影響すると感じている。この記事で述べた内容は、著者が実際にクライアントとのプロジェクトを通じて感じたり、実践したことになる。みなさんの仕事において、少しでも参考になれば幸いだ。

デザイナー目線で選ぶ、米国有名企業の斬新なロゴリデザイン5選

Hironori Aihara | 2022年4月27日

2021年は変化の多い年であった。コロナ禍がもはや生活の一部になり、多くの企業がリモートを前提にした働き方をするようになった。Web3.0やメタバースなどが流行り、その領域への進出を本格的に始めた企業もあった。そんな中、デザインもビジネスや社会の変化に合わせてさまざまな試みが行われていると感じる。特にこの2021年は面白い試みのロゴデザインが多く発表された年だと感じた。 2021年にロゴをリデザインした7のブランド今回はそんな2021年に発表されたリブランディングの中でこれまでにない新しいロゴのアプローチだと感じたものを取り上げる。 1.「レトロ感」で美味しさを表現したBurger King 2021年1月ハンバーガーチェーンのバーガーキングは20年ぶりのリブランディングを発表した。デザインしたのはLondon、NY、Shanghaiに拠点をもつクリエイティブエージェンシーのJones Knowles Ritchieである。これまでの赤と青が目立つ、スポーティーな印象のものから打って変わってレトロな印象を受ける柔らかい雰囲気のロゴになった。モダンでクリーンなロゴが流行っている中であえてレトロな印象のロゴを採用したところが新しいと感じた。また、これまでのロゴにあった青色を「食べ物に青色は存在しない」という理由で排除したことで従来のものよりも食品を扱う企業らしさが出ている。ロゴ以外にもカラーパレットや制服のデザインを見ても、どれもハンバーガーショップらしい、ハンバーガーの素材から抽出したかのような色使いになっており、オーガニックで安心できる印象を受ける。この事例を見てわかるように、色から受ける印象は非常に大きい。特にそれがパレットとして複数色並べた時にそのブランドで作りたい世界観を感じられるものになっているとそのブランディングは優れていると言えるだろう。 2.事業領域を3Dを用いて表現したMeta 旧Facebookがよりメタバース領域へ踏み込むことの現れとして社名の変更に合わせた新しいロゴが発表された。今後、Metaがメタバース領域を推進していくということがよりわかりやすくロゴとして表現されている。なおかつ旧Facebook時代の初期のロゴの名残を感じさせるような青色を再び採用している（Facebookの頃の最も新しいロゴはグレー一色だった）。そのため、社名とシンボルマークが変わっても旧Facebookだとすぐに受け入れられたのではないだろうか。また、ロゴとアニメーションの関係も大変興味深い。これまで多くのデジタルプロダクトの企業はフラットなロゴを採用することが一般的であったが、Metaのロゴは、ロゴが立体的に見えるように青色をグラデーションとして使っている。またアニメーションでもそのように奥行きがあるものとして表現されている。おそらく新しいロゴでメタバース空間における3次元的な空間の広がりを表現しているのだろう。奥にあるラインの方が明るい色になっている。この事例からも今後デザイナーは平面に囚われることなく3次元的な発想と2次元的な発想を行き来する力も必要になるのではないだろうか。 3.素材感を用いたBLOCK(旧Square) 決済サービスを提供していた旧Squareが社名をBLOCKに変更した際のリブランディング。Metaと同じく3Dを前提としたロゴなのだがBLOCKの場合は常に動き続ける。 Metaの場合は複数のプロダクトをメタバース軸1本へと統率するための社名変更だが、BLOCKの場合は事業領域をブロックチェーン技術をベースに広げていくための変更になる。この特定の形を持ち続けず動き続けるように見えるロゴから、ブロックチェーン領域にさまざまな形で挑戦するという意識が読み取れるのではないだろうか。また、このロゴからは３次元やアニメーションに加えてテクスチャーの発想を感じ取ることができる。BLOCKのホームページを見ると、背景は赤色と水色のグラデーションになっている。それがまるで鏡に反射するかのようにロゴの色が変わっていく。 2022年注目のブランディングトレンド 4.映画作品との協調を目指したWarner Bros サンフランシスコのデザイン会社Pentagramによって行われたWanner Brosのリブランディングで優れている点は、ロゴの活用方法までしっかりと考え込まれている点だ。 Warner Brosが今後のデジタルへ本格的にシフトするためにロゴをフラットにしただけではなく、本業である映画の映像に移った際にしっかりと存在感が出るように立体のロゴも残している。他にも映画事業という会社の特性を活かせるように、各映画作品とのコラボ方法のフォーマットも提案されている。どんな映画でもこの印象的な盾の形を模したロゴのアウトラインのなかに映画のキャラクターを入れることで、映画の世界観を壊さずに、うまくロゴをアピールできるようにしている。このようにデザインするロゴの企業がどんな事業を持っているか、その特性を理解しロゴのアピールの作法まで踏み込み提案することがよいブランディングを行う上では重要だろう。そのためデザイナーはロゴをデザインする企業の事業内容をしっかりと把握し、より踏み込んだ提案をすることが今後はより求められるのではないだろうか。 5.目の錯覚を用いたRENAULT 車メーカーのルノーも立体的な造形のロゴからフラットなロゴへとリデザインした。このリデザインに置いて優れている点は立体だった頃持っていた図の奥行き感が、目の錯覚を利用して表現され残されている点だ。特に旧ロゴに見られる重なる部分の奥行き感が新しいフラットなロゴでも感じ取るとこることができるだろう。このように目の錯覚といった人の目の見え方を学ぶこともロゴをデザインする上で重要な知識になる。特にこの見え方を知ることはロゴの完成度を上げる上でも重要な知識になる。まとめこのように、一口にロゴデザインと言ってもその表現手法や運用方法はとても奥が深い。特にこの記事で紹介したロゴのリデザインはどれも斬新な表現手法を取っているだけでなく、企業の理念やヴィジョンをうまく反映していると言える。デザイナーはロゴをデザインする際にはクライアント企業の事業内容やヴィジョンへの深い理解をすることに加え、それをヴィジュアルとして表現するための幅広い表現手法を知っておく必要があるのではないだろうか。

デザイナー目線で選ぶ、米国有名企業の斬新なロゴリデザイン5選

Hironori Aihara | 2022年4月27日

デザイナーがコロナ禍にサンフランシスコに行って感じたこと

Hironori Aihara | 2021年12月10日

筆者は普段、btraxの日本オフィスで働くUI/UXデザイナーだ。本社がサンフランシスコにあるにもかかわらず、自分はアメリカに足を踏み入れたことがなかったのだが、今回コロナ禍でのサンフランシスコへの出張をすることになった。初渡米ということもあり、サンフランシスコの街の中にあるサービスの便利さに驚かされることが多かった。また、コロナに対する対応も素晴らしく、あまり不安を感じずに生活することができた。しかし、中には日本と比べると劣っている部分もあった。そこを補おうとしているためにサンフランシスコ発のサービスはUXのクオリティが高いのではないかと思わせるポイントもいくつかあった。この記事ではそんな筆者がアメリカで3ヶ月ほど生活してみて気づいたことや、学びを書いていく。安心感と気軽さがあるワクチン接種筆者はワクチンを打たずにPCR検査のみでアメリカに入国したため、ワクチンはアメリカで接種しようと考えていたが、ここで驚きがあった。まず、筆者のような外国人であってもワクチン接種のための病院の予約は必要ない。そもそもTargetというアメリカのスーパーの中に併設されているCVS（薬局）のレジの横がワクチンの接種会場であり、とてもカジュアルな感じだった。そこに出向き、ワクチン接種をしたい旨を伝えるだけで、すぐにワクチンを用意してくれる。また、日本外でのワクチン接種ということで不安もあったが、打つ前に確認するべき事項が書かれた書類が様々な言語に対応したものが用意されており、とてもスピーディーに安心して受けることができた。こういった、アメリカ人だけにではなく、アメリカにいる人全てに対してコロナを収束させるための施策を平等に行うことは、アメリカ国民にとっても良いことだと思った。また、そのためにワクチン接種を気軽で誰にでも安心してできるような環境づくりの方法は、さまざまな人種が住まうアメリカならではの合理的な施策だと感じた。 PCR検査の気軽さ PCR検査もとてもスムーズであった。筆者が利用したのはcarbon healthという企業のものだ。空き地のような場所にテントを張っただけの最低限の施設ではあるが、検査会場がいくつかあり、最寄りの検査会場を探すのもホームページからすぐなので会場選びには困らなかったし、すぐに行くことができた。検査自体も無料で、予約も不必要。必要な情報も住所と名前、生年月日、結果を受け取るためのメールアドレスだけ。特別な準備も必要なかった。日本で検査をしようとした際にはまず検査ができる病院の情報が１つにまとまっていないので、検査を実施している病院探しから始まり、予約が必須で予約時間に行ってもそこそこ時間が取られるということがあったがそんなストレスがここでは感じなかった。そのため、検査へ行くために予定を立てる必要が無くフラッと行って検査ができるのはとてもユーザーにとってストレスフリーと感じ検査へ行くことの積極性に大きく貢献していると思った。ヘルスケアのDX – Carbon Healthを試してみた【UX分析】移動手段の選択肢が多いサンフランシスコは坂が多く徒歩での移動は大変不便である。かといって電車やバスは遅れることが当たり前なので基本移動はUberか自転車、電動スクーターなどのマイクロモビリティに限られていた（自家用車は持っていなかった）。電動スクーターは日本では道路交通法などが厳しく、乗ることを躊躇っていたがサンフランシスコではそこのルールが日本に比べて規制が少ないこともあり、大変重宝した。そもそもアメリカの道には、自転車と電動スクーター用の道路が、自動車道路とは別にほぼ必ずある。そのため、歩行者や車を気にすることなくスムーズかつ安全に移動ができた。また、筆者はUberの電動スクーターのサービスを利用していた。返却場所は自由なため、返却場所を探す手間がなく、借りるときのハードルが低いと感じた。また、借りる際は近くに置かれているスクーターがマップ上に表示されるため、一番近くのものを選ぶだけだった。ちなみに、これらシェアサイクルサービスの始まりとも言える「Bird」について調べると、サービスをサンフランシスコ市の許可を待たずして展開したらしい。サンフランシスコ市はそのサービスの便利さから、法律に影響があることに関しても柔軟になおかつ迅速に対応していったとのこと。シェアサイクル事業問題から見るサンフランシスコ市の意思決定の速さ市の許可を待たずしてサービスをローンチさせることは、日本で生まれ育った筆者からすれば、考えられないことであると思ったが、生活をする上で便利であるため、結果的に市も協力したというエピソードがとてもスタートアップの聖地らしいと思った。逆にわかった日本のすごいところここまでで、サンフランシスコの便利だった点を書いてきたが、逆に、生活に慣れていくにつれ、日本の方が優れている点も見えてきた。宅配がちゃんと届く筆者は出張中にUSのメルカリを利用して商品を出品していた。実際に商品が売れたため、バーコードを印刷して商品に貼り付けUPS（配達業者）経由で発送した。すると後日、商品が届かないと購入者からクレームの連絡が来た。アプリを確認すると、発送完了のお知らせは受け取っているが、肝心の商品がUPSの倉庫から動いていないと出るのだ。そこでUPSに問い合わせたが、そもそも商品が倉庫にないとのこと。後にネットで調べるとアメリカでは宅配業者や倉庫の労働者がお金になる商品を盗んだりすることがあるらしく、今回の場合もこの可能性が高いということで話は終わった。この件で思ったのが日本での商品が予定日にしっかり届く(しかも配達日の指定もできる)というのは、とてもすごいことである、ということだ。接客サービスの質の平均が高い日本における飲食店などのサービスは、クオリティが高く、なおかつ店員によってばらつきがあることも比較的少なく、一定の高水準であると感じた。一方、サンフランシスコでは、どんな人に接客してもらうかでサービスの品質が大きく変わると思った。特にファーストフード店では顕著で、日本の場合はどんな人でも丁寧に接客してくれる。個人的には日本のマックの接客は丁寧すぎると感じるほどに。しかし、サンフランシスコでは店員がぶっきらぼうなことがある。筆者がマクドナルドに行った際は、どうやら店員の機嫌が悪かったらしく、あからさまにめんどくさそうに対応されたことが記憶に強く残っている。また、Uber eatsを使った際にもなかなか商品を届けてくれない人もいた。そういった経験から、サンフランシスコではどんな人に配達や接客がされるのかが結構気になったゆえにUber eatsなどの配達員へのレビューはサンフランシスコでは比較的重要な要素だということに気づいた。アメリカ生活から学んだこと特に筆者はサンフランシスコでの生活で、現地で暮らしている人がサービスに合わせるというよりは、サービスが暮らしている人のライフスタイルに合わせていると感じる場面が多いと感じた。これは一見当たり前のことをいっているようだが日本では逆に個人の都合を後回しに頑張ってサービスを使いこなそうとしている、もしくはサービスのやり方に従おうとしていることが多いのではないだろうか。ユーザー中心設計コロナのワクチン接種では、アメリカの人種が多いという特性に合わせ、ワクチン接種時に不安を与えないような施策があるだけではなく、摂取会場にいったら必要なものは身分証明書くらいですぐにワクチンを打ってくれる。日本でのワクチン摂取までのフローを見るとまず摂取券が必要だったり、会場も住んでる地域によって異なる。これを見るとどちらかというとワクチンを提供する側の都合をユーザーの都合より優先しているように見える（日本はワクチンをアメリカから買っているため仕方ないことなのかもしれないが）。お客様第一主義とユーザー中心デザインの違い人に頼らずサービスで体験の質をあげる他にも改めて日本人は真面目であるとサンフランシスコで宅配や接客サービスを受けて感じた。反対に日本に比べて「不真面目」な人が多いサンフランシスコで良いUXを提供しようとすると、誰にでも完全に同じ機能を提供できるアプリなどの機械に頼るべきであるため、UXのクオリティを上げることは日本以上に重要視しているのではないだろうかとも考えた。 UXデザインとCXデザインの違いとそれぞれの役割バイアスを捨てることがデザイナーには重要と考えるこれまで自分が日本国内に留まっていた時は「ユーザーは皆真面目である」という暗黙の了解があった上でサービスのデザインを行っていたため、デザイナーの理想をユーザーに押し付けていた面があったのではないかとこの出張を通じ強く反省と共に感じた。また、優れたUXデザインや人間中心設計をすることとはユーザーの歩く道をデザイナーが決めるのでなく、ユーザーが歩いた道をデザイナーが後から整えるくらいのほうがいいのかもしれないとも思った。

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

Hironori Aihara | 2021年7月6日

最近のアプリはどれも非常に使いやすいのが当たり前になった。そのため、使いやすさ文脈での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項目

Hironori Aihara | 2021年5月27日

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 […]

UXデザイナー直伝！本当に機能するカスタマージャーニーマップの作るポイント

Hironori Aihara | 2021年3月2日

マーケターやデザイナーなどUXデザインに関係する誰もが当たり前に使うようになったカスタマージャーニーマップ。しかし、多くの場合は新規商品開発や新規サービスの提案フェーズのプロセスの一部として使われており、公表されることもないことから、我々が作っているマップは本当に効果的なのだろうか？と疑問を抱く人は少なくないだろう。
そこで今回はUXデザイナー視点からカスタマージャーニーマップを効果的に活用していくためのポイントをご紹介する。
UXデザインプロセスにおける基本的な6ステップ

カスタマージャーニー…

デザイナー必見！UXを学ぶ7つのTEDトーク

Hironori Aihara | 2021年1月19日

プロダクト開発やグロースにおいてUXデザインを考慮することが当たり前になった昨今、UXデザインにもさまざまな考え方が生まれた。特にデザインする対象がデジタルなのかアナログなのかによって考慮すべきUXデザインの領域は異なってくる。つまり、良いUXデザイナーになるには幅広いUXデザインに関する知識を身に着けることが重要になってくる。そこでこの記事では、代表的な7つの異なる考え方のTEDトークを紹介する。どれも10〜15分ほどのの動画のため、本を読むより短い時間で多くを学べると思う。休憩時間や移動時間にぜひ見ていただきたい。誰にでも分かるUXデザインの基本 1. Donald Norman – The three ways that good design makes you happy – (良いデザインがあなたを幸せにする３つの方法) 登壇者のDonald Normanは多くのデザイナーが一度は読んだことがあるだろう「誰のためのデザイン?」の作者であり、“ユーザー中心設計（User-centered design）”の提唱者である。人にとってプロダクトの魅力とは何かについて、車のMINIやGoogleのUIを例に述べている。 Dobald曰く、人がものを見て良し悪しを判断する際には3つのレベルでものごとを見ているらしい。ものサービスに触れる際に、なんとなく触れて楽しいと感じる潜在レベルそのモノでどんなことができるかということがわかる行動レベル外車は壊れやすいといった偏見に近い考えの内省レベルこのトークの良いところは、人のものの見方は意外と単純だということに気づかせてくれる点にある。冒頭でDonaldは、フィリップスタルクのジューサーを果物からジュースを絞るためには使わず玄関に置物として置いてると述べている。というのも、彼のジューサーは形が奇妙でジュースを絞ってみるものならコップにうまく入らず溢れてしまうからとのこと。しかし、その分魅力的な見た目を持っており、それが顧客を満足させてくれる要因として十分であると彼は語る。 UXデザインの評価方法はさまざまあるが、本質的に見るべきは人である。人はUXデザインの方法論とはお構いなしに、物事をただ欲しいか欲しくないかで判断する。このTEDトークからはそんな人のものの見方が学べるだろう。 2. John Maeda – Design for Simplicity – (シンプルさのためのデザイン) 2つ目は、世界的に有名なデザイナー、John Maedaによるシンプルさとは何か？について自身の体験談とともに語られるトークである。グラフィックやプロダクトのデザインの分野においてもシンプルさというのは重要視されてきたがUXのように形に表現できないものをデザインする上でのシンプルさとは何だろうか？という問いを中心にトークが展開される。 UXデザインにおいてもロジックや考え方はあるが、それは人の感じ方を保証するものではない。UXの目的はそのプロダクトを使っている人が楽しいかと感じるかどうかであり、それほどシンプルに考えることが重要だとここでは述べられている。 UXデザインに関する書籍やブログが多く、どうしても方法論的に処理されてしまいがちではあるが、今一度この動画でシンプルに人の気持ちについて考えてみてはいかがだろうか。なぜデザインはシンプルな方が良いのか – 5つの理由と6つの鉄則 3. Rochelle King – The complex relationship between data and design in UX – (UXにおけるデザインとデータの複雑な関係) Rochelle Kingは過去、NetflixのUXやサービスのデザインを率いており、現在はSpotifyにてデザイン、UXのヴァイスプレジデントとしてチームを統率する敏腕デザイナーだ。このトークではUXデザインにおいてデータの重要性が述べられている。特にデジタルプロダクトから収集できるデータはとても正確で、ボタン押す位置やそのページを見ている時間の長さもわかる。これをうまく活用することができれば会議でどちらのデザインが優れているかで不毛な言い合いに時間を割かずに済む。このトークで注目していただきたいのが、実際に彼女がSpotifyで行ったUXを改善の仕事を例にどのようにデータを活用したか解説している部分である。そこではなぜそのデザインが悪かったのかという分析からどう解決したか、その結果的にビジネス面でも効果的であったことが語られている。Spotifyは月間３億人以上のアクティブユーザーを持つ巨大なプロダクトであり、それを支えるデザインプロセスの考え方はデザイナー以外であっても参考になるだろう。 4. David Kelley – How to build your creative confidence. – (創造的な自信を構築する方法) Davidは言わずと知れたIDEOの創設者の一人であり元CEOである。デザイン思考やデザイン教育の第一人者と呼ばれている。そんなデザインの知を築きあげた人が見たクリエイティビティへの自身について語っている。 Davidはこのトーク内でクリエイティブはそれぞれ違った形で持ち合わせていると述べており、自分のアイデアがありきたりで、かっこよくないからといって自信を失う必要はないと強調している。筆者もワークショップでクリエイティブについて苦手意識を持っている人あったことがある。理由を聞いたことがあるが、その答えの多くが「かっこいいものを作らなくてはいけない」、「誰もが発想できない斬新なアイデアを求められているのではないか」という声だった。しかし、クリエイティブというのはそういった派手なものだけではなく、些細でありきたりであってもクリエイティブと言える事柄はあるとこのトークでは述べられている。その例として人の体に異常がないかみるMRIの診察方法が紹介されている。多くの子供はMRIの検査時に聞こえる激しい音に恐怖し、暴れてしまう。そのため鎮静剤を使って子供を宥めていた。この状況に心を痛めていた医師は、部屋全体を海賊船のようにペイントし、診察時の音は海賊船が揺れている音だと説明した。これによって子供たちは暴れることなく診察を終えるようになった。このような気遣いもクリエイティブなのだ。 5. Tony Fadell – the first secret of great design – (素晴らしいデザインの秘密) 彼はエンジニアでありデザイナーである。「iPodの父」と呼ばれ、ハードウェアやソフトウェアを専門にしている。このトークでは、思い込みをなくそうというテーマで人が習慣化してしまうことの良さと悪さを語っている。習慣化によって人は、例えばシャワーの際に冷たい水を間違えて被ってしまった、というような小さな絶望を忘れてしまいがちであり、それを発見する力こそ起業家やデザイナーには必要である。それを発見するための３つの方法があると述べられている。 1.より広く見る 2.より近くで見る 3.より若く考える Tonyはこの３つをまとめ、子供のように純粋でいようと言っている。また、例としてピカソの言葉である「子供は生まれながらにして芸術家である。」というものを取り上げ、大人になってしまうと世の中の不幸に慣れてしまい視野が狭くなってしまうことを述べている。 UXデザインでは、こういった小さな気づきや不満をいかにして見つけられるかが重要である。多くの問題は非常に些細であり、歳を重ねるにつれ不満を感じづらくなってしまう。しかし、そこを解決したデザインにこそ本当に心地よい体験を人々に提供できるのではないだろうか。 6. Johannes Ippen – Humans, not […]

デザイナー必見！UXを学ぶ7つのTEDトーク

Hironori Aihara | 2021年1月19日