『UIデザイン必携』著者 原田秀司さんに聞く、認知特性にもとづく“使いやすさ”のデザイン
新著発売記念スペシャルインタビュー

2022年6月23日(木)19:30より、「『UIデザイン必携』著者に聞く、認知特性にもとづく“使いやすさ”のデザインとは?~新著発売記念!原田さんへのスペシャルインタビュー~」を開催しました。

デバイスやアプリケーションの多様化にともない、UIデザインの重要性がますます高まっています。そこで、4月に発売された『UIデザイン必携』の著者である原田秀司さんをゲストにお招きし、イベントを開催。

UIデザインでどんなことを大切にしていく必要があるのか、前線でご活躍される原田さんの考え方について根掘り葉掘りお聞きしたイベントの様子をレポートします。

ゲスト

 

原田 秀司(はらだ ひでし)さん


UIデザイナー
 

1974年東京都生まれ。東京大学工学部卒。ITベンダーにてプログラマー/SEとして勤務したのち、Web制作会社にてディレクターとして勤務。2008年よりフリーランスとして独立。PC、スマートフォン、タブレット、TV、スマートホーム機器などのUIを設計している。ベストセラー『UIデザインの教科書[新版]』の著者。2022年4月『UIデザイン必携』発売。

モデレーター

石川智規


キャリアカウンセラー
 

ウェブスタッフ株式会社のエージェント部門の責任者。求職者と企業の架け橋として、人材採用・組織コンサルティングを担当。15年間で約1,000名のWebクリエイター・エンジニアの転職支援の実績を持つ。

Twitter:@tomonorix0805

今回は、モデレーターを務めた石川が、当日の様子をご紹介します!

目次

  1. 第I部『UIデザイン必携』に迫る
    1. 1:UI × デザイン=?
    2. 2:デザインのDay1
    3. 3:Webな私たちのインタラクション
    4. 4:UIはロジックの世界?
    5. 5:結局「使いやすさ」ってなんだろう?
    6. 6:謙虚と傲慢のバランス
  2. 第II部『原田さんの考え』に迫る
    1. 1:UIデザインを考えることになったきっかけ
    2. 2:UIデザイナーの日々の積み上げ
    3. 3:今後手掛けてみたいこと
  3. 参加者の声
  4. おわりに

1.第I部『UIデザイン必携』に迫る

第I部では、4月に発売された新著『UIデザイン必携』の中から、私が気になった項目について、パネルトーク形式で原田さんに質問。書籍のCHAPTERに沿って、お話を伺いました。

1.UI × デザイン=?

まずは「CHAPTER1: UIとデザイン」より、そもそもUIデザインIってなんだろう?という部分について、原田さんにお聞きしました。
UI/UXと併記されることも多い「UI」とは何かについての原田さんの見解はこちら。

UI/UXとまとめて表現されることも多いですが、人によって解釈の分かれる言葉です。実際に仕事をする際には、目の前の方が何をUI/UXと考えているのか、認識合わせが必要だと感じています。

書籍にも書いた通り、私自身は、主観的・感情的な体験がUXで、客観的な分かりやすさ・使いやすさがUIと捉えています。

では、「デザイン」って何かな?ということも質問してみました。

デザインというとビジュアルデザイン・グラフィックデザインのような意匠のイメージが強いですが、本来的にはデザインは設計に近いものだと考えています。

ITやWebの世界であれば、機能をビジュアルと構造にどうやって落とし込むかという行為がデザインだというのが、私の見解です。

では、UIとデザインを組み合わせた「UIデザイン」については、このような回答。

ユーザーインターフェースを設計することです。

たとえば何かの機能を作るときに、どういう見せ方でどういう構造に落とし込むかというのがUIデザインですね。見た目だけでも構造だけでもダメなものだと考えています。

そして、使う側の負担が少ないものが良いUIデザインだと思っています。

インタビューを通じて、「そもそもUIデザインとは何なのか?」という考え方について、理解を深めることができました。

2.デザインのDay1

「CHAPTER2: 環境による影響」からは、UIをデザインするうえでの前提条件や制約について、原田さんの見解を伺いました。

まずは、「画面・入力手段・サイトやアプリといった制約となるような前提条件を考える」とは、どのようなことか、質問。

デバイスによって動きもユーザーの操作方法も異なるので、何が入力手段なのか、それが画面にどう出てきて、どう動かすのかといったところを考えなければなりません。その中でも、まずは、どう入力するのかが、デザインの出発点だと考えています。

将来、今までにないデバイスが出てきた場合でも、同じように「何から始まるのか?」を出発点として考えていけば通用するのではないかと思います。

確かに、使うデバイスによって、ユーザーがどのように入力するか大きく変わりますよね。しかし、デバイスの前提条件を考えると、UIデザインとは実は制約だらけのような…?

実際、UIは制約だらけですね。あっちを立てれば、こっちは立たない、といったことだらけ。

私の場合は「あるべき姿」ではなく、「どうしたらより良くなるか?」を考えながら、実際に作ってみて、それを少しずつ改善していくスタイルでUIをデザインしています。

一線で活躍されている原田さんでも、実際に作ってみては改善するということを繰り返していると聞くと、励みになりますね!

3.Webな私たちのインタラクション

「CHAPTER3: 人間の認知特性」は、色・形・動きの効果やコントラストなど、人間の認知特性をもとにしたデザインの基本について書かれた章。

その中でも今回は、Webに関わる人がUIで特に気になるであろう「インタラクション」について質問しました。

まずは、私の本の中では、特に「動き」の効果を「インタラクション」と呼んでいます。

動きの効果を分類すると、目立たせるために動きをつける「注目」、今どこにいるのかを気付かせる「理解」、カッコよさなどの「演出」の3つの要素があると考えています。

特に重要なのが「理解」だと考えています。ユーザーが画面の中でどこにいるのか、何をするべきなのか、色や動きで変化をつけることで、ユーザーの認知的な負荷を下げることができると思います。

また、この章ではブランドや商品特有の色の価値についても、原田さんにお聞きしました。このあたりが気になる方は、ぜひ後日公開予定のアーカイブ動画をご確認くださいね!

4.UIはロジックの世界?

「CHAPTER4: 構造とナビゲーション」は、本の中でも一番、章を割いて説明されている部分です。そこで、構造の重要性について伺ってみました。

見た目のデザインももちろん大切ですが、構造のデザインをしっかりしておくことが重要ですし、費用対効果も高いと思います。

私自身が2004年に手掛けたサイトがあるのですが、何度かリニューアルして見た目は変わっていますが、サイト構造自体は私が手掛けたものと大きく変わっていなくて、驚いています。

デザインのうえで構造をしっかり作れば、思った以上に経年劣化しにくいですね。

20年近く構造が変わらないとは驚き!サイトの構造をしっかりとつくることが、いかに重要なことか理解できるエピソードですね…!

ちなみに、非デザイナーの私からすると、デザインというと感覚的なものをイメージしがちなのですが、実はもっとロジックの世界なのかなと感じました。そこについて原田さんのご回答。

デザインというのは生まれ持ったセンスや感覚のようなものが必要なのではなく、後天的に習得可能な技術だと思います。

確かに向き不向きはありますが、勉強して身につけたり考えたりしていけば、ある程度は誰でも習得可能なものなのではないでしょうか。

それでは、私もデザイナーになれる可能性があるということでしょうか…?
という私のつぶやきに、「生まれ変わらないとなれないという類のものではないでしょうね」と苦笑いの原田さん。失礼しました(笑)。

また、この章で私が好きなのが、「マルチデバイスデザインは、同一でなくとも、同等であることあることはできる」という表現。これは、つまり、どういうことなのでしょうか?

PC・スマホ・タブレット・TVなど、複数のデバイスで同じサービスを展開するとき、デバイスの特性に応じて見え方や使い勝手は異なりますが、同じサービスの同じ機能を使うことができる、ということです。

一人の人が複数のデバイスを持ち、状況に応じてPCを使うのかスマホを使うのかなど、デバイスを使い分けるようになった現在において、デザインで同等のサービスを実現していくことは重要なことなんだなと、改めて感じました。

5.結局「使いやすさ」ってなんだろう?

「CHAPTER5: 分かりやすさ、使いやすさ」からは、原田さんの考える「使いやすさ」について教えていただきました。

「分からない」という状態を考えると、「場所・操作・状態」の3つのうちどれかが分からない状態ではないかと感じています。

そして、アタマの負担とカラダの負担を合わせた「インタラクションコスト」が最も低い状態が、一番良いインターフェースのデザインだと考えています。

デザインの一貫性をもたせる、シンプルにする、共通概念に従う、こういったことはデザインをするうえで大切なことですよね。ただ、これはあくまで手段で、根っこにある考え方は「インタラクションコストを低くすること」というお話に、なるほど~!と感じました。

6.謙虚と傲慢のバランス

「CHAPTER6: 留意すべきこと」では、原田さんが仕事をするうえで、常に忘れてはいけないと考えていることについて書かれています。原田さんはどのようなことを心にとめながらお仕事されているのでしょうか?

仕事でデザインするときに、機能を増やしすぎたり、売り手の都合を買い手に押し付けたりしないように心がけています。

また、デザインは最終的には決めなければいけないタイミングが多く、自信を持たなければいけないけれど、謙虚でいなければいけないと感じています。

「謙虚と傲慢のバランス」めちゃくちゃ痺れる表現です!
デザイナーとしてお仕事されているみなさんは、ぜひ心にとめていただければと思います。

実は私、このイベントに向けて何度も『UIデザイン必携』を読んでいたのですが、その中でも気になった部分を原田さんに詳しくお聞きすることができました!

このレポートを読んだみなさんも、ぜひ『UIデザイン必携』読んでみてくださいね。

2.第II部『原田さんの考え』に迫る

第II部では、UIデザイナーとして活躍される原田さんご自身の考え方について、色々とお話を伺いました。

Q.UIデザインを考えることになったきっかけは?

PCサイトのWebディレクターをしていたときに、スマホ(タッチデバイス)とTV(フォーカスデバイス)のデザインをするタイミングがありました。

その際、デバイスごとで意識するべきことの違いに気付いたことが、UIデザインを考えることになったきっかけです。

イベント当日は、実際に原田さんがUIデザインを考えるきっかけだったと仰る、TVの動画レンタルサービスのリニューアル案件をご紹介いただきました。リニューアル前とリニューアル後で、原田さんがどのようなことを考え、最終的にどのようにデザインされたのか、具体的な内容を理解できて非常に納得!

具体例を見ながら知ることができたので、参加いただいた方からも非常に好評でしたが、実案件のため、レポートではご紹介できないのが残念です…><

Q.UIデザインをしていくうえで、どのように勉強していくべきですか?

事前アンケートでもご質問が多かった内容。UIデザインをどのように習得すればいいか、みなさん気になりますよね。

原田さんのご回答はこちらです。

1つは、基本的なことを知ることです。

デザインの基本は昔から変わっていないので、古典的なデザインの本を読んで、基本的な考え方を学ぶことはおすすめです。ただし、古典的な本は絶版になって手に入らないものも多いので、図書館などをチェックしてみてはいかがでしょうか。

原田さんおすすめの本を、後からお聞きしたのでご紹介します。なかには絶版となっていて数万円するものも…図書館などで見かけたら、ぜひ読んでみたいですね。また、原田さんの著書『UIデザイン必携』も、基本を知るうえでぜひ読んでいただきたいと思います!

ただ、勉強するだけではUIデザインを身につけられるわけではないですよね。原田さんは、このようにも仰っていました。

習作としてUIデザインを練習するだけでなく、お金をもらえる仕事としてUIデザインに関わることが重要だと思います。

私の場合は、ディレクターとしてレイアウトを決める中で、必然的にユーザーインターフェースに関わるようになりました。自分の業務に加えて少しでもUIに関連する業務に取組んでみて、チャンスをつかんでいくとよいのではないでしょうか。

まずは基本を押さえつつ、仕事としてUIデザインに関わっていくことが大切ですね。

Q.今後手掛けてみたいことは?

少し余裕が出てきたので、iPhoneのアプリ開発を始めました。普段は開発はエンジニアの方にお願いしていますが、自分でも開発してみようと取り組んでいます。

また、マンガが好きなので、UIデザインに関するマンガの原作を手掛けられたら面白いのではないかと考えています。

確かに、今はさまざまな領域でマンガが出ているのに、ユーザーインターフェースのデザインに関するマンガはありませんよね。参加者のみなさんからも「ぜひ読みたい」「UIデザイナーが主人公のマンガがあれば面白いかも」と大盛り上がりでした。1年後、原田さん原作のUIデザインのマンガが読めるかもしれませんね^^

また、実際にご自身でアプリ開発を始められたという原田さん。「そろそろ自分でも書いてみようと思って比較的手軽なiPhoneアプリから始めている」と涼しい顔で仰っていましたが、これもエンジニア出身の原田さんならではだな~と感じました。

原田さんご自身も「時間があると色々やりだす性格」と仰っていましたが、新たなことに楽しみながらチャレンジできる、そのことが原田さんの今のキャリアを作っているのかもしれませんね。

原田さん、素敵なお話をありがとうございました!

3.参加者の声

参加者からいただいた感想を一部抜粋してご紹介します。

原田さんのUIデザインの考え方(見やすさ、わかりやすさなど)を体験談も絡めて説明してもらい、終始、興味深く聞かせていただきました。
納得できる内容で、原田さんが実直にUIデザインに取りくまれてきた方なんだということがわかりました。
UIってWebデザインをしていく上で、切り離せないものなんだな、と今回のお話を聞いて感じました。原田さんの本を買って勉強してみます。
UIデザインが気になってはいたものの、目の前の仕事に追われて特に何かアクションを起こしたことはなかったので、今回のお話を聞いて、まずは原田さんの本を読んでみようと思いました。

4.終わりに

ご参加いただきましたみなさま、ありがとうございました!

Webデザイナーの方も、Webディレクターやエンジニアの方も、さまざまなデバイスの設計に関わるうえで必要な「UIデザイン」の考え方。今回のイベントで得た考え方を日々のお仕事にも活かしていただけると嬉しいです。

もっと詳しくUIデザインを学びたいという方は、ぜひ原田さんの著書『UIデザイン必携』を読んでみてくださいね。

Web業界経験者向け!オンライン個別転職相談

ウェブスタッフでは、Web業界で活躍するクリエイター・エンジニアの方の長期的なキャリア支援・転職支援を行っています。
今後のキャリアの積み方に悩んでいらっしゃるのであれば、ぜひ一度キャリアアドバイスをご利用ください。
その人の市場価値をもとに、有利な転職活動の進め方や転職のタイミングなどもアドバイスいたします。すぐに転職活動を考えてない方も、一度お気軽にご相談くださいね。

+ オンライン個別キャリア相談


ウェブスタッフのイベント・勉強会

ウェブスタッフでは、IT・Webクリエイター・エンジニアの方向けのイベントや勉強会・セミナーを随時開催!
スキルアップしたい、仲間と一緒に勉強したいという方は、ぜひご参加ください。


+ 最新のイベント・セミナーを
チェックする

  • WSイベント・セミナー TOP
  • 開催報告
  • 『UIデザイン必携』著者 原田秀司さんに聞く、認知特性にもとづく“使いやすさ”のデザイン新著発売記念スペシャルインタビュー

ウェブスタッフが運営するサイトでは、利便性向上・分析・広告配信等のためにCookie等のデータを使用しています。当社が取得したアクセスデータとの関連付けの削除(オプトアウト)に関しては「個人情報の取り扱いについて」をご覧ください。

同意して閉じる

確認する