リモートサービス

この気づきが、アプリとウェブサイトのデザインを完全に変えた

デザインがようやくしっくりきて、「どうして今まで誰もこう説明してくれなかったんだろう」と思った瞬間はありませんか？私はかつて、UI/UXデザインとはすべてをきれいに見せることだと思っていました。でも本当は、ユーザーにとって「旧友のような」感覚を作ることだと気づいたのです。これからインターフェースデザインに足を踏み入れようとしている方、あるいはもっとスキルアップしたい方に向けて、本当に大切なことをお伝えします。余計な話は抜きで、もっと早く知りたかったことだけを詰め込みました。

初めてFigmaの真っ白なキャンバスを前に、完全に固まってしまったのを覚えています。見つけられる限りのUI UXデザインチュートリアルを片っ端から見ましたが、どこから始めればいいのかは誰も教えてくれませんでした。秘訣は？四角形ではなく、言葉から始めることです。最高のUIデザインツールを開く前に、ノートを手に取って、ユーザーが画面上で何をしたいのかを書き出してください。それがUXデザイン原則の核心——相手側にいる人間を理解することです。グラデーションやシャドウにこだわるのをやめた途端、すべてが楽になりました。

では、部屋の中の象について話しましょう。専門用語抜きで「UX vs UI」を説明します。UXはサンドイッチを作る論理——手順、順序、パンがべちゃべちゃにならないという安堵感。UIは盛り付け、ソースの芸術的なかけ方、写真を撮りたくなるほど見栄えが良いこと。私が「実際に機能するアプリのインターフェース」をどうデザインするか尋ねられたら、まずサンドイッチのレシピをデザインして、それから美しくしなさい、と答えます。焼いてもいないケーキにアイシングはできません。だからこそ、初心者がいきなりFigmaチュートリアルに飛び込み、ユーザーフローを一つもマッピングしないままピクセルを動かし始めると、私は少し身震いします。Figmaは強力で、間違いなく最高のUIデザインツールの一つですが、あくまでもハンマーです。何を作るのかを知っていなければなりません。

さて、具体的なウェブサイトUIデザインの基本に話を戻しましょう。優れたウェブサイトのレイアウトは革新ではなく、親しみやすさにあります。ユーザーはロゴが左上、ナビゲーションが上部、明確なコールトゥアクションがあることを期待します。何百万もの他のサイトで訓練されているからです。そのパターンを壊す瞬間、ユーザーに考えさせてしまう——考えることは摩擦を意味します。あるEコマースのチェックアウトを再デザインし、「続ける」ボタンをユーザーが期待する場所に移動しただけで、カート abandonment（放棄）が20%減少しました。それがユーザーインターフェースデザインのヒントの静かな魔法です。地味に聞こえますが、お金を生んだり時間を節約したりします。

さて、モバイルアプリUIデザインには独自の癖があります。親指が画面の主役です。主要なアクションは親指が届きやすいゾーン（スマートフォンの下半分）に常に配置します。アプリをスケッチするときは、実際にスマートフォンを片手で持ち、指ヨガをしなくてもボタンに届くかテストします。UIデザイナーになる方法の多くは、こうした共感に基づく細かいチェックに帰着します。派手な学位は必要ありません。普段使うアプリの小さなフラストレーションに、うるさく観察するようになることです。「再注文」ボタンを3画面も奥に隠しているコーヒーアプリ？頭の中で修正しましょう。書き留めてください。おめでとうございます、あなたはUIデザイナーのように考え始めています。

お金をかけずにUIデザイナーになる方法を探しているなら、私の道筋を紹介します。まずYouTubeの無料UI UXデザインチュートリアルで基本を学び、すぐに好きなアプリの一つの画面を再現しました。アプリ全体ではなく、たった一つの画面をFigmaでピクセル単位で再現したのです。これこそ初心者に本当に必要なFigmaチュートリアルです。良いデザインの決断をリバースエンジニアリングしながらツールを学べます。コンポーネントを見て、「なぜこのパディングは8pxではなく16pxなのか」「なぜこの色は黒ではなくグレーなのか」と自問します。やがて、UXデザイン原則の見えないルールが可視化されます。良いデザインは、ほとんどの人が気づかないが、欠けていると確かに感じる、小さな意図的な決断の積み重ねだと気づくのです。

よくある落とし穴から救いたいと思います。それはDribbbleの罠です。Dribbbleは美しくも非現実的な空想で溢れており、現実の使いやすさを壊してしまいます。実際のモバイルアプリUIデザインは、長い名前、空の状態、エラーメッセージ、読み込みの遅さに対処しなければなりません。これらは地味ですが、プロと趣味の人の違いを分けるものです。ユーザーインターフェースデザインのヒントを提供するときは、いつも「まず醜い状態をデザインしなさい」と言います。Wi-Fiが切れたときの画面をデザインしなさい。ユーザーのカートにアイテムがゼロのときはどうなるかデザインしなさい。そうした瞬間にもデザインが役立つなら、成功です。

最高のUIデザインツールについて——Figmaは明らかに人気で、それには理由があります。共同作業が可能で、ブラウザベース、個人利用は無料。ワイヤーフレームから高忠実度プロトタイプまで、すべてに使っています。しかし、ペンと紙も軽視しないでください。ウェブサイトUIデザインの基本に関する最も速く明確なアイデアは、しばしばドット方眼ノートへの乱雑なスケッチから始まります。Figmaに移行した後も、Content Reelのようなプラグインでリアルなテキストを入力したり、Starkでアクセシビリティをチェックしたりしています。多くのUI UXデザインチュートリアルはアクセシビリティを省略しますが、それはUXデザイン原則の中核です。視覚障害のある人がインターフェースを使えないなら、それは悪いインターフェースであり、それ以上でもそれ以下でもありません。

「アプリのインターフェースをどうデザインするか」を一文にまとめてほしいとよく聞かれます。私の答えは「会話をデザインする」です。タップの一つ一つが言葉であり、画面の一つ一つが返事です。アプリが、気の利いたユーモアのある友達とのチャットのように感じられれば、成功です。だからこそ、マイクロインタラクションが大好きです——読み込み時の微妙なバウンス、長押し時の優しい振動。人間の会話における「わかってるよ」といううなずきのようなもので、モバイルアプリUIデザインをロボット的ではなく、生き生きとさせます。

もし自分自身のキャリアのために「UX vs UI」をまだ整理しているなら、永遠にどちらかを選ばなければならないわけではないことを覚えておいてください。私は当初、ビジュアル面に惹かれていましたが、より多くのプロジェクトに取り組むうちに、UXのリサーチと心理学に魅了され始めました。優れたUI UXデザインチュートリアルは常に、最高のインターフェースは両方の融合から生まれると教えてくれます。ジュニアを指導するときは、UIデザイナーになる方法として、少なくとも一度はユーザーインタビューを3回実施するプロジェクトを行うよう勧めています。最初は怖いですが、3回のインタビューからは、10時間の受動的なチュートリアル視聴よりも多くのことが学べます。

状況は急速に変化しますが、基本は変わりません。Figmaチュートリアルに没頭しているときも、ポートフォリオ作品を磨いているときも、常に自問してください。「これでユーザーの生活が楽になるか、それともただきれいになるだけか？」最も美しいインターフェースでも、混乱する体験を救うことはできません。一方、しっかりしたUXデザイン原則に支えられた最もシンプルなレイアウトは、誰かの一日を少しだけストレスの少ないものにできます。それがこの仕事の本当の喜びです——ピクセルではなく、人のことです。アプリの形でハグを感じさせるものを作りに行きましょう。