BLOG ブログ

デジタルマーケティングにおけるお役立ち情報やトレンドなどをお届けします。

  • カテゴリ:接客・制作
  • 2019.01.03(最終更新日:2020.09.15)

UI/UXデザインとは?GDTのUIX/UXデザインサービスのご紹介!

uiuxdesign.jpg

デザインをする上でも、ビジネスを設計する上でも、マーケティングのアプローチとして注目されているのが、UI/UXデザインです。

言葉自体が抽象度が高いため、分かりにくいと思う方もいるのではないでしょうか。

この記事では、UI/UXデザインを正しく理解し、現場でUI/UXデザインが活かせるようになるUI/UXデザイン手法をご紹介します。

 

UI/UXデザインとは?

aboutuiuxdesign.jpg

UIデザインとUXデザインについてそれぞれご説明します。

UIデザインとは

UI(ユーザーインターフェイス)とは、ユーザーが操作するインターフェースのことです。

サイトに表示されるデザイン、フォントなどユーザーの目に触れるものすべてが「UI」と呼ばれます。

誰もが理解できるUIを実装することで、ユーザーを混乱させないようにすることがポイントです。

UXデザインとは

UI(ユーザーエクスペリエンス)とは、ユーザー体験のことです。

ユーザー体験は、「ユーザーのタスク」+「コンテキスト」に分解できます。

ユーザーには、何かしらの要求があり、その要求のためにタスク(目的)を達成します。

そのタスクを達成する状況を踏まえて、サービスやWebサイト、アプリを設計することがUXデザインです。

コンテキストとは、ユーザーがそのサイトを利用する状況や環境を言います。

ユーザーの利用シーンをイメージすることで、ユーザーがどんな情報やコンテンツを欲しているのか理解することができます。

2. UIデザインとUXデザインの違いとは?

uiuxdiffrent.jpg

ユーザーの体験(UX)を設計していく中に、ユーザーとの接点(UI)をデザインする工程があります。

UXデザインには6つのワークフローが存在します。

UX6D

  • 1. 調査
  • 2. 定義
  • 3. デザイン
  • 4. 開発
  • 5. デプロイ
  • 6. 運用

1.調査(Discover)

  • フォーカスグループ
  • ユーザインタビュー
  • 要件の取りまとめ

2.定義(Define)

  • ブレインストーミング
  • ペルソナの設定
  • ストーリーボーディング
  • 要件定義

3.デザイン(Design)

  • ワイヤーフレーミング
  • プロトタイピング
  • 機能デザイン
  • コンセプトデザイン
  • ビジュアルデザイン
  • ユーザビリティテスト

4.開発(Develop)

  • UIの実装
  • スタイルガイドの作成
  • UIの仕様設計
  • コンセプトデザイン
  • ビジュアルデザイン
  • ユーザビリティテスト

5.デプロイ(Deploy)

  • UIの実装
  • スタイルガイドの作成
  • UIの評価
  • 基本的なコンプライアンスの確認
  • アクセシビリティのテスト
  • 専門家によるユーザビリティ評価

6.運用(Drive)

  • ユーザビリティの確認
  • メンテナンスとサポート
  • 新しいニーズの分析

UI/UXデザインは6つの工程に分かれます。

英語で表記すると全てDから始まるため「6D」と呼ばれています。

UXデザインの中の一部にUIデザインがあることがポイントです。

 

UI/UXデザイナーが必要な理由

desiner.jpg

デザイナーとUI/UXデザイナーは思考が全く違います。

通常のデザイナーとUI/UXデザイナーの違いは、デザイナーはデザイナーの世界観でデザインしますが、UI/UXデザイナーはユーザーを主軸とした視点でデザインをします。

UI/UXデザインの思考プロセス

  • 共通認識
  • 定義・問題発見
  • アイデア創造
  • プロトタイプ
  • テスト
  • 実装
  • メンテナンスとサポート
  • 新しいニーズの分析

UI/UXデザイン思考のプロセスは、第一に共通認識を持ち、第二に問題を発見し、第三にこの問題を解決するためのアイデア創造を行います。

第四に問題解決のための原型であるプロトタイプを作成し、第五にそれらをテストし、繰り返すというプロセスになります。

未来の顧客やユーザーを考え、創造的なアイデアを誕生させることができるのがUI/UXデザイナーの役割です。

ユーザー目線でUI/UXデザインを設計するコツ

point.jpg

UXデザインとUIデザインに分けてご紹介します。

UXデザインのコツ

UXデザインのコツ

  • ペルソナの設定
  • ユーザーの行動を可視化
  • ストーリーボード

UX設計で重要な道具であるペルソナを設定してサイトの目標を達成します。

ペルソナとは、ラテン語で、人格、仮面、キャラクターを示します。

ペルソナは、リサーチから得られた実在する人物の明確で具体的なデータのパターンを見つけ出し、それをもとに作り上げた架空の人物像です。

開発者やマーケターの勝手な想像で設定されたり、変更されるものではありません。

ペルソナを設定することで、具体的に開発をすることを目的としています。

ペルソナの設定として、プロフィール写真、名前、性別、年齢、職業、行動や性格などの特徴、そのペルソナが言い出しそうな言葉や一番イメージできる言葉を添えます。

その他、プロジェクトで必要な情報をペルソナ設定に追加します。

続いて、カスタマージャーニーマップでユーザーの行動を可視化します。

ペルソナ法でもシナリオを利用しますが、よりユーザーの行動を明確に可視化させるためにカスタマージャーニーマップを作成します。

カスタマージャーニーマップの作成のポイントは、チャネル(タッチポイント)、顧客の行動、思考、感情を表すことです。

最後に、ストーリーボードの作成をします。

ストーリーボードは、漫画のような絵コンテです。

カスタマージャーニーマップは、カスタマーの行動と感情、チャネルと接点、ストーリーを主に言葉で表現しています。

ストーリーボードを作成することで、どのような情報を入れるのか、どのような言葉を利用するのか、などの選定のためとチームでの情報共有やステークホルダーへの説明に利用します。

UXデザインの手法は、ペルソナ、カスタマージャーニーマップ、ストーリーボードの作成などいろいろ存在します。

これらはユーザーを知り、共有や共通認識を持つために必要です。

UIデザインのコツ

UIデザインのコツをご紹介します。

UIデザインのコツ

  • 整列
  • 反復
  • コントラスト

一つ目のポイントは、整列です。

情報を整列することで、スムーズな視線移動と統一感を生み出します。

情報を左揃え、中央揃え、あるいは、右揃えというように、「透明な線」を用いて要素を意図的に整列し、配置します。

このようなレイスとの原則を、「整列」と呼びます。

二つ目のポイントは、反復です。

情報の反復を行うことで、全体に一貫性や安定感を生み出します。

太自体、罫線、色、アイコン、間隔、レイアウトなど様々なものを繰り返して使うと、全体に一貫性や安定感が生まれます。

反復することで、ユーザーはパターンを予期できるため、情報を認識しやすくなります。

三つ目は、コントラストです。

情報に強弱をつけてよりわかりやすいデザインにします。

コントラストは、書体・線の太さ、色、形、サイズ、余白などの要素の視覚的な差です。

コントラストにより、要素が他よりも強調され、ユーザーの目を惹きつけられます。

あまり違いのないフォントサイズや色で差をつけるのではなく、明確に変えてコントラスト付けるのがポイントです。

UI/UXデザインの参考になる記事やスライド

UI/UXデザインについてシンプルにわかり易い解説をしています。

スマホアプリのUI/UXデザインのポイントを紹介しているスライドです。

オススメのUI/UXデザインツール

UI/UXデザインツール

  • Sketch
  • Adobe XD
  • Figma
  • InVision Studio
  • Photoshop,Illustrator
  • STUDIO

UI/UXデザインツールで人気なものを上げました。

中でも、SketchやAdobe XDは現状人気のUI/UXデザインツールとなっています。

様々な機能のついたUI/UXデザインツールが登場しているので、ぜひ色々使ってみてください。

海外アプリUI/UXデザイン事例

スマホアプリのUI/UXデザインは、海外のトレンドを見ることも重要です。

参考サイトを見ることで、UI/UXデザイン設計のヒント得てみましょう。

アプリのUI/UXデザインをする際に参考にしたい海外サイトを紹介します。

UX Archive

アクションごとにアプリ導線を設計した際は、UX Archiveを参考にしてみましょう。

ユーザーのアクションごとに、アプリ導線を画面単位で紹介しています。

http://www.uxarchive.com/

pttrns

ユーザーアクションではなく、その画面の目的の沿ったUIを探す場合は、pttrnsがおすすめです。

iPhoneやiPadのUIパターンがまとめられており、欲しい情報がすぎに見つかるでしょう。

https://www.pttrns.com/

Dribble

Dribbleは、UIデザインの定番参考サイトです。

様々なUIデザインが多く掲載されています。

https://dribbble.com/

GDTのUI/UXデザインサービスとは?

gdtuiux.jpg

多数のUI/UXデザイン実績を持つ、GDTでは、見た目のデザインはもちろん、ユーザーの満足度をあげるUXを考慮した、操作性の高いUIデザインをご提供します。

Webサイトを始め、Webアプリケーションやスマートフォンアプリなど幅広いUI/UXデザインに対応します。

サイトやアプリがどのように使われるのか、サービスを通して提供できる顧客体験(UX)についてお客様と密にコミュニケーションし、ユーザーにとってベストのUI/UXデザインを設計します。

UI/UXデザインについてのご相談はこちらからお問い合わせください。

まとめ

顧客体験価値を高めるために、今後UI/UXデザインの重要性はますます高まってきます。

UI/UXデザインはサービスの質を左右するものですので、ぜひ理解を深め、Webサイトやスマートフォンアプリ開発に役立ててみてください。

この事業について
もっと詳しく知りたい方へ

UI/UXデザインのページへ

サービスに関する
お問い合わせ

オンライン無料相談

この記事を書いた人

GDT(編集部)

デジタルマーケティングやWebマーケティングに役立つ記事をご紹介します。

サービスに関するお問い合わせ

サービスに関するご相談やご質問などはこちらからお問い合わせください。

オンライン無料相談

GDTメルマガ購読
(無料)

GDTの更新情報や、ホットなニュースを毎週お届けします!

GDTのオススメ記事

  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク