タカフミのデザインについて思うことタカフミのデザインについて思うことはじめてのコーディングはじめてのデザインillustratorPhotoshopSketchFigma仕事のご依頼ホームデザイン非デジタルネイティブ世代に向けたUIデザインを僕らは真剣に考えないといけない2018/02/04SHAREツイートシェアはてブGoogle+PocketLINEこんにちは、タカフミです。仕事でアプリやウェブのUIを考えたり、デザインをしていて最近思うことがありました。それは、ついつい自分の学習経験などに基づいてデザインをしてしまうことです。こんな事言われてもわからないと思うので、これから詳しく話していきたいと思います。見た目も大事だけど、ユーザーを迷わせてはいけないもはやスマホは若者だけのものではない日本ではこれまでフィーチャフォンとよばれる、いわゆるガラパゴス携帯が一般的でした。iPhoneやAndroidの登場によって、わずか数年でスマートフォンに置き換わってしまいました。iPhoneが最初に発売された時は、一部のアーリーアダプターの人しか食いつきませんでしたが、その方達によって利便性が一般の人に伝わるとあっという間に普及しました。いうのって、本当にインフルエンザの流行のように瞬く間に広がるので面白いものです。事実、電車や町中でも老若男女問わずみなさんスマホを持っています。総務省が調査を行った情報通信白書(平成29年版)の「スマートフォン個人保有率の推移」の結果をみると、2011年には20%をきっていた40代50代のスマホ所有率が2016年には60%を超えています。この結果からもわかるように、すでにスマホは若者だけのものではないということです。なると、これまで若者が使うことを前提としていたアプリやウェブサイトのUIに対しても、もう一度立ち返って考えていく必要がでてきます。カーナビアプリで見えたUIデザインの奥深さ僕がこの記事を書こうと思ったきっかけがありました。それは、母が友人と一緒に車で旅行に言った時のことです。我が家の車にはカーナビがついているのですが、10年以上前のもので地図情報も更新していないので全く役に立たない無用の長物となっていました。あまりにも情報が古いので、橋を渡ると海の上を走っていることになるほどです。そこで、ドライブするときは必ずカーナビアプリを使っています。母が友人と出かけるときも、僕のほうで目的地を設定して出発していきました。途中道に迷ったり(なんのためのカーナビなのか。)しながらも、なんとか目的地に到着できたようで安心したのですが、その後大変なことが待ち受けていたのです。「事故もなく無事について良かったなー」と安心していた矢先に、母親から電話が掛かってきたのです。電話の内容は「カーナビのアプリで帰りのルートを調べたいんだけど、どうしたらいいの?」というもの。僕のスマホにも同じアプリが入っていたので、電話越しで「画面の上のほうにあるボタンをタップして〜」などのように言葉で説明しながら、使い方を説明するも全く伝わらず。しびれを切らして、ラインのテレビ電話を使って画面を映しながら説明したのですが、これですら凄い時間がかかったのです。「検索バーに目的地を入力して、ルートを検索する」という、基本的な操作が完了するまでに30分近く教えてやっと伝わったのです。カーナビアプリでコアとなる操作なのに、ここまで時間が掛かってしまうのは致命的だと感じました。テキストフィールドと認識できなかった母なぜ、基本的な操作にも関わらず30分以上かかってしまったのでしょうか。電話越しの母親の反応や、やりとりなどから考察したところ以下の2点が原因だとわかりました。テキストフィールドと認識できなかったアイコンの意味がわからなかったするべきアクションがわからなかったテキストフィールドと認識できなかった下の画像は実際に使用したアプリのデザインを再現したものです。これだけに限らず、多くのカーナビアプリは似たようなデザインになっていると思います。スマホアプリになれている人だったら、すぐに上部の検索窓をタップして目的地を入力することでしょう。それは、たいていのアプリでは検索バーが上部にあって、そこから検索するという体験を何度もしているからです。僕の母親の場合は違いました。いま主流のフラットデザインでは、すべてのパーツが同一レイヤー上に配置されることが多いため、ある程度スマホやアプリなどを使ったことのある経験者でないとパーツと背景の境目がぼんやり見えてしまうことがあります。それが背景の一部なのか何か機能が割り当てられたパーツなのかが判別しづらくなってしまうのです。そのため、本来なら検索内容を入力するテキストフィールドなのに、僕の母親にはこれが背景の一部に見えてしまっていたようです。事実、電話で教えているときも「どこにも押すところがない」とか「文字を入力するところなんてない」となんども言っていました。アイコンの意味がわからなかった上部のテキストフィールドにところにある検索を意味する「虫眼鏡」のアイコン。検索」とは結びつかなかったようです。考えてみれば、虫眼鏡って本来は小さいものを拡大して大きくみるための道具ですよね。検索」と連想されるのだと思いますが、少し遠回りな感じがします。これについても、やはり他のアプリを使ったことがある人でないと伝わらないものだと思います。僕の母親はLINE以外のアプリを使うことがほとんどないので、学習機会がなかったのだと思います。ちなみに天下のGoogle様では次のようになっています。アイコンなどは一切なく、検索とかかれています。するべきアクションがわからなかった今回のUIで一番の問題点はここにあると思います。それは、アプリの画面と向き合った瞬間にここでするべきアクション(操作)が何なのかわからなかったということです。先のスマホアプリでは検索バーのところに「住所/施設/駅/TEL」というプレースホルダーだけが表示されています。デザイナーの意図としては、住所だけでなく、施設名や駅名、電話番号でも検索できるよと伝えたかったのだと思います。僕の母親にしてみれば「住所/施設/駅/TEL」と書かれているけど、これは一体どんな意味なのだろうと考えたのだと思います。ここをタップして入力するという、すべきアクションが伝わっていなかったのです。考えすぎかもしれないですが人によってはパンくずリストに見える人だっているかと思います。僕が考えた改善案はこれ僕なりに今までの問題点を改善したUIデザイン案を考えてみました。これで完璧ではないけど少しは改善されたものになったと思います。テキストフィールドの曖昧さをなくした以前のデザインでは背景色の灰色とテキストフィールドの背景色である白の2色の色違いしかなかったため、背景とテキストフィールドの境界が曖昧になっていました。そこで、テキストフィールドの縁に色をつけることで境界をハッキリとさせるようにしました。これによって、ユーザーはこの部分が一つのパーツだと認識しやすくなります。検索」というイメージが非デジタル・ネイティブ世代にとっては一般的ではないように思えました。そこで、今回の検索バーからもアイコンを削除することにしました。すべきアクションを明確にしたテキストフィールドの所に「ここに目的地を入力」と書くことで、ユーザーにしてほしいアクションを明確にしています。これで、ユーザーは「ここをタップして目的地を入力すればいいんだな」と理解しやすくなります。僕の母親の場合はキーボードのEnterキーが検索実行アクションだと気づかないため、ただ目的地を入力しただけで、そこから先に進まないことがよくあります。そこで、分かりやすく「調べる」というボタンを追加しました。「検索」という言葉よりも、道を「調べる」という言葉の方がフレンドリーなので、言葉を変更しています。このボタンもグラデーションを付けて、ドロップシャドウをつけることで「押せる感」を出すようにしています。見た目も大事だけど、ユーザーを迷わせてはいけない一部分ではありますが、カーナビアプリのUIを考察してみてUIデザインの奥深さを改めて痛感しました。明らかに若者しか使わないようなアプリやサービスの場合であれば、その世代に共通する認識に従ってUIを考えても問題がないと思います。事実、アイコンを使ったり繊細な配色を行ってデザインしたほうが、今風な感じでスッキリしてクールなものができるでしょう。カーナビアプリのように幅広い世代の人たちが使うアプリの場合では、デザイン的に少し野暮ったくなったとしても「ユーザーが迷わず操作できる」という機能性の方が大切になります。人間はだれしもヒューマンエラーを起こします。どんな製品でも、ユーザーが間違った操作をしてしまった場合、その責任はデザインを行ったデザイナーにあります。それだけ、デザイナーが負う責任はとても大きいものなのです。記事の最初に紹介した調査結果からもわかるように、スマートフォンの普及はより進んでいくことでしょう。60代以上の人にも広がっていき、今以上に様々な世代の人がアプリやウェブサービスに触れていくことになります。若者だけのものでなくなったアプリやウェブサービスのデザインに携わる一人のデザイナーとして、よりよいユーザー体験が提供できるように日々勉強しなければ駄目だと感じました。CLOUDはビジネスをされている方をデザイン面でサポートする定額制のデザインサービスです。デザイナーが完全定額・無制限で、あなたに代わって、広告やバナーなどビジネスに必要なデザイン関連の業務をプロのクオリティで行います。面倒な年契約はなく、業務に応じて柔軟にご利用いただけます。苦手なデザイン業務に時間を割く必要はありません。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。デザインについてのご相談はこちらのフォームからお問い合わせください。基礎を学ぼうデザインコースアプリ日々のデザイン業務で困っていた事を解決するために、タスクとフォルダを同時に管理できる超シンプルなタスク管理アプリを作りました。思いついたアイデアをサクッとメールに送信できるiPhone専用のメモアプリです。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。フリーランスのデザイナーさん向けに超シンプルなタスク管理アプリDesignBoxを作っています。デザインについてのご相談はこちらからお問い合わせください。