KOBITブログ

サイト運営者のための「UI/UX」解説記事のまとめ+チェックリスト

この記事は約 5分 で読めます。

User experience

これまでKOBITブログでは、「UI/UXを知り、優れたWebサイトを構築する」連載として、13回にわたりUI/UXについて紹介・解説してきました。

連載第一回目の良いUI/UXとは何か?Amazonと楽天に見るユーザー体験の違いでご紹介した通り、内容は大きく分けて下記の4項目です。

  1. UI/UXの基本
  2. UXに優れたサイトを構築するために検討するべき事項
  3. UIの要素や方法論の解説
  4. UI/UXに優れた海外事例の紹介

今回は本連載の最終回として、これまでの記事を改めて紹介しつつ、最後にこれまでの内容を5.サイト運営者が利用できる、UI/UXのチェックリストとしてまとめて連載を締めたいと思います。最後までお付き合いいただければ幸いです。

「UI/UXを知り、優れたWebサイトを構築する」連載まとめ

UI/UXの基本(全三回)

user experience written by hand, hand writing on transparent board, photo;

第一回:良いUI/UXとは何か?Amazonと楽天に見るユーザー体験の違い

第二回:UIとUXはどう違う?UXの基本と、優れたUXを構成する7つの要素

第三回:SEOからSXOへ?SEOとUI/UXの関係

第一回から第三回の「UI/UXの基本」では、UIとUXの違いや良いUXとはどういうものかといったことを解説しました。

優れたUXを構成する7つの要素UXハニカムや、検索を通してユーザー体験の最適化を図るSXOなど、UI/UXを考える上で役に立つ用語や考え方も合わせて紹介しています。

UXに優れたサイトを構築するために検討するべき事項(全四回)

%e3%83%9a%e3%83%ab%e3%82%bd%e3%83%8a%e3%81%a8%e3%82%b9%e3%83%88%e3%83%bc%e3%83%aa%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89

第四回:優れたUXを設計するための戦略:ペルソナ法とストーリーボード

第五回:優れたUX設計のための要件と構造:情報アーキテクチャとインタラクションデザイン

第六回:優れたUX設計のために:ワイヤーフレームとプロトタイプで骨格と表層を作る

第七回:優れたUX設計のために:ユーザビリティテストでUX上の問題を検出する

第四回から第七回の「UXに優れたサイトを構築するために検討するべき事項」では、UX設計で考えるべき5つの項目、戦略・要件・構造・骨格・表層について、図や例を交えて1つずつ解説しました。

サイトの目的やターゲットを設定し、それを要件に落とし込み、構造を明確化し、骨格と表層を作る。そのプロセスにおいて必要な考え方やパターン、便利なツールを紹介しています。

UIの要素や方法論の解説(全二回)

responsive web design concept in flat screen TV, tablet, smart phone and laptop

第八回:優れたUI設計のためのレイアウト・配色・フォントの原則

第九回:優れたUI設計のために知っておきたい4種類のデザイン手法

第八回から第九回の「UIの要素や方法論の解説」では、UIを構成する要素であるカラーやフォントの選択方法や、デザイン・レイアウトの手法について解説しました。

理想ではあるものの難しいシンプルなUIを実現するために、押さえておくべきレイアウトの4原則や、モバイルからのアクセスにも対応可能な流行のデザイン手法についてまとめています。

UI/UXに優れた海外事例の紹介(全四回)

man hand in car holding touch phone with app call taxi on screen

第十回:カラフルなのにシンプル。UI/UXに優れた海外のWebサービスサイト3選

第十一回:“業界を変えた”UberとTinder 2つの優れたUXデザイン

第十二回:コンテンツ表示の工夫でUX向上! 海外企業・メディアのサイトデザイン事例

第十三回:ヒットするEコマースサイトのUXとは?優れた海外事例3選

第十回から第十三回の「UI/UXに優れた海外事例の紹介」では、Webサービス系、モバイルアプリ系、企業・メディア系、Eコマース系の4つのカテゴリで優れた海外事例を紹介しました。

アクセントカラー、自動検索機能、無限スクロール機能などが効果的に使われている例を多数紹介していますので、ぜひ参考にしてみてください。

サイト運営者のためのUI/UXチェックリスト

最後に、これまで紹介してきたUI(ユーザーインターフェース)とUX(ユーザーエクスペリエンス)の設計に必要なステップを元に、次はあなたのWebサイトでもUX/UIの設計・改善を行えるよう、検討を始める際に必要な成果物をまとめたチェックリストを用意しました。

No

成果物名称

概要

1

ペルソナ

製品・サービスを利用する顧客層を象徴する仮想の人物

2

シナリオ

ペルソナが製品・サービスを利用する状況を物語形式で表現したもの

3

ストーリーボード

シナリオに合わせて、ペルソナが抱く感情や行動を視覚的に表現したもの。カスタマージャーニーマップも同様の役割を果たす。

4

ワイヤーフレーム

ユーザーに提示するWebサイトを枠線のみで記述した初期設計文書

5

プロトタイプ

UXの確認が可能な最低限の機能のみを実装した製品・サービス

6

解析データ

Googleアナリティクスなどで取得したユーザーの行動データ

7

ユーザー調査

アンケートやユーザビリティテストを通して得られたユーザーの意見・感想

8

仕様書

製品・サービスに求められる要求・機能を記載した文書

9

Webサイト

UX/UIを実装した最終成果物

これまでの記事とこのリストを参考に、ぜひUXに優れたサイトへの一歩を踏み出してみてください。


CATEGORY:

さあ、KOBITをスタートしよう。