フリーランスとセルフマネジメントby アキユキ

フリーランスのお役立ちブログ+モチベーションを高く維持するためのセルフマネジメント術

UI/UXデザインの基礎理解と勉強方法を解説するよ

Webデザインの勉強をしていると必ず出てくるのがUIとUX。でもUI/UXデザインと言われても直感的にそれが何なのか理解しづらいですし、ちょっと難しく感じますよね。

でもWebデザイナーをやっていく上でUI/UXデザインを理解している人とそうでない人では実力がわかれます。

このUI/UXデザインを基礎からしっかり理解していると1つステップアップできると思いますので、この記事ではUI/UXデザインとはそもそも何なのか、そしてその勉強方法について解説していきます。

まずはUI/UXデザインの基礎理解をしていきましょう。

UIデザインとは

UIはユーザーインターフェース(User Interface)の略です。

インターフェースとしての使いやすさ、理解のしやすさを求めたデザインを追求することをUIデザインといいます。

平たくと言うとユーザーにとってのWebサイトの使い勝手をよくしましょうということです。インターフェースというのはそもそも何かと何かの接点/繋ぎ役のことです。

Webサイトを閲覧したい人とWebサイトで情報を提供したい人の接点になるのがWebデザインですよね。そのWebデザインをわかりやすく、より理解が促進されるようなデザインをすることをUIデザインといいます。

UIデザインの例

UIデザインの例を出すと次のようなものがあります。

  • ボタンがクリックしやすい
  • ぱっと見てそのボタンがクリックできるかどうかわかる
  • ボタンなどの各パーツの機能が見ただけでわかる
  • 読みやすい行間、各セクションのマージンが確保されている
  • サイトの構造や導線が適切でユーザーが必要な情報を取りに行きやすい
  • お問い合わせフォームなどの入力が簡単である

例を出すと色々ありますが、細かく“これがUIデザインだ”と定義するよりは、ユーザーにとっての使いやすさ、理解のしやすさだと考えていればまずはいいと思います。

次にUIデザインと関係するインタラクションコストの概念についても解説をします。

インタラクションコストの概念

インタラクションコストとは、 “ユーザーが何かを求めてアクションをした時にそのリアクションを得るまでにかかるコスト”です。

1つの例ですが、特定の情報を求めてボタンをクリックしてページ遷移を繰り返して、お目当ての情報にたどり着くフローを考えた時に、そこにどのくらいのコストがかかっているかということです。

ですので、ボタンをクリックしたら想定外のページに飛ばされた場合や、そもそもボタンをクリックしづらいなど、ユーザーアクションに対して適切な反応がなかったり、ユーザーアクションを阻害する要素があるWebサイトはインタラクションコストが高く、NGなWebサイトといえます。

インタラクションコストは様々な場所で検討することができます。例を出すと次のようなものがあります。

  • お問い合わせフォームの入力が簡単である(例えば電話番号は3つの入力ボックスにわけずに1つのボックスで完結させる)
  • 入力フォームのバリデーションが即時表示される(入力エラーは送信ボタンを押下後ではなく、入力直後に表示する)
  • ボリュームがあるページについては、要約した内容をページトップに表示する(ブログの目次表示もその一環だといえます)
  • 検索フォームでサジェスト機能がある
  • 検索結果から類似商品を提案する

このようなインタラクションコストを下げる努力をしているWebサイトはユーザーにとって非常に使いやすいです。

UXデザインとは

UXはユーザーエクスペリエンス(User Experience)の略です。

エクスペリエンスは体験とか経験を意味します。つまりUXデザインはユーザーがWebサイトを使った時にどんな体験ができか、その体験を与えるためのデザインです。

感動や驚き、楽しさ、憧れなど色んな体験が考えられます。UXデザインは主にその企業やブランドが打ち出したいブランドによってどんな体験をデザインによって創造するのかを考えるところから始まります。

別の言い方をすると企業やブランドがユーザーに与えたい価値観は何かということです。

例えば、キャンプ用品ブランドWebサイトであれば、ユーザーがトップページを開いた瞬間に、キャンパーなら誰しも憧れるようなキャンプ地でキャンプしている写真がフルワイド画面で出てくるなど。スポーツカーのWebサイトであればサーキットを走っている背景動画をトップページのヘッダーに使ったWebデザインも昔見た記憶がありますが、それも世界観ですよね。

もちろんトップページの表示だけではなく、ボタンをクリックした時の挙動なども含めてそこに与えたい価値にふさわしい体験があるかどうかがUXデザインです。

体験を与えるためには、どんな写真、イラスト、動画を使うのか、そのセンスが問われるのでUXデザインは素材収集がものすごく大切な場面が多いでしょう。

UIとUXは相互に影響を与え合う関係性

UIとUXをそれぞれ説明してきましたが、これらは相互に影響を与え合う関係です。UIが良くなければUXデザインでユーザーに与えたい体験も与えることができませんし、UXが良くなければUIもユーザーがその価値を理解する上で最適とはいえません。

お互いに影響をすることを念頭におきながらUI/UXの学習をすると良いでしょう。

UI/UXデザインの理解の重要性

もう言うまでもないかもしれませんが、UI/UXデザインを作れるようになると、企業やブランドがユーザーに理解してもらいたい価値観や内容をより理解してもらいやすくなります。何よりもUI/UXデザインに長けたWebサイトはよりユーザーの注目を引きますし、ブランディングとしてWebを最適化するにおいても非常に重要になります。

UI/UXデザインができるWebデザイナーになれば周囲よりも1つレベルの高いデザインができることでしょう。

UI/UXデザインの勉強方法

ではUI/UXデザインの勉強方法にはどんな方法があるのでしょうか。基本的にはデザインの基礎をおさえていることが前提です。その上で何を意識してデザインをするのか、それを踏まえた上で参考サイトを色々閲覧したり、実際に手を動かして勉強していきましょう。

1.デザインの基礎を勉強する

グルーピング

基本的なことですが、UIデザインに大きく影響するのがグルーピングです。

グルーピングとは複数の情報があった時に特定の条件でそれぞれをグループわけしてユーザー理解を促進する方法です。

飲食店のメニューを見るとすごくわかりやすいですが、前菜とメインとスイーツとドリンクなど、ぱっと見て理解しやすいメニューは必ずグルーピングがわかりやすくなっています。Webサイトでも同じことでメニューでもいいですし、料金表でもいいのですが、グルーピングがはっきりしているとユーザーが情報収集をしやすくなります

グルーピングのために必要な技術として余白と配色は特に意識して下さい。

■余白を意識する

余白のとり方で情報のみやすさがまるで変わってきます。余白をしっかり意識してどれだけ余白を取ればそこが1つのグループとして成り立つのかを意識しましょう。

■配色を意識する

配色とは色分けですね。グループによって色分けすることでグルーピングすることもあります。あまり色を多く使わないWebデザインでは、配色でのグルーピングを避けて余白だけでグルーピングすることもあります。

デザインの一貫性

例えば各セクション(コンテンツの塊)のタイトルはこのフォントでサイズは20pxにする、など全体的に一貫性のあるデザインを心がけましょう。

一貫性があればデザインをぱっと見た時にユーザーの中でもルールがはっきりするので、情報を見つけやすくなります。UIにとってこれも欠かせませんね。

機能の連想

ボタンなど機能的なパーツに関しては、クリックするとどうなるのか連想できる方がユーザーフレンドリーでUIとしても良いです。

例えばハンバーガーメニュー(≡)はクリックするとメニューが展開されることは一般的な理解がありますよね。他にもダウンロードボタンの場合は、テキストでダウンロードと書いてあるのもいいですが、ダウンロードアイコンもあると非常に見やすいです。外部リンクへのリンクの場合は、外部リンクでよく使われるアイコンがありますよね。

ボタン1つとっても内部リンクなのか外部リンクなのか、メニュー展開か、ダウンロードか、色々機能がありますので、直感的にわかるデザインを心がけましょう。

2.参考サイトを閲覧・分析してUI/UXデザインを勉強する

UIもUXも具体的にどんなデザインが優れているのか、実際の参考サイトを閲覧するのが一番手っ取り早いです。

Webデザイン集のようなまとめサイトが今たくさんあるので、その中から実際にユーザーの観点から使いやすくて、理解がしやすいUIデザインに優れたもの、体験性に優れていて価値観がすぐに伝わってくるUXデザインに優れたものをピックアップしましょう。

そしてピックアップしたWebデザインを見たり使ったりしながら、何が使いやすいのか、なぜ価値観が伝わってくるのかをしっかり分析してください。

この記事の前半で解説したUI/UXとは何かを理解していただければ、何に着目して分析したらいいのかわかっていただけると思います。

3.UI/UXデザインを意識しながら実際に手を動かして勉強しよう

UI/UXデザインは実際に自分で手を動かして勉強するのが一番身につきやすいです。それは現在公開されているWebサイトを模写してもいいですし、自分の案件の中で何度も試行錯誤しながらデザインを作っていってもいいです。

実際に手を動かして頭の中では理解していたことを具現化すると、スキルが身についていきます。

模写する時は単に作業的に模写するのではなく、そのWebサイトのUI/UXの何が良いのかを理解しながら模写してください。

まとめ

UI/UXデザインは難しいのですが、しっかり分析して理解し始めると本当に面白いと思います。
またWebデザイナーとしても確実にステップアップできる技術なので、この機会に勉強をしてみてはいかがでしょうか。



プロフィール

田中亮行
アキユキ

フリーランスWebデザイナー・エンジニア歴6年。主に企業のホームページの企画・デザイン・開発をしています。

ここでは自分の経験から感じたフリーランスにとって役立つ情報を発信しています。また、「やりたいことをやれる自分になりたい」そのために必要な“セルフマネジメント”についても執筆しています。フリーランスとしての生き方にも関係してくることが多いので参考にしてもらえたら嬉しすです(´ε` )

おすすめ書籍紹介