UXデザインのプロセス その3

今回はスケッチとプロトタイプ、そして実装(本ブログのデザインリニューアル)です。

前回までの記事で、ストーリーボードの作成まで行いました。
今回はスケッチとプロトタイピングを行い、最後に本ブログを実際にリニューアルしてこのシリーズを終わりとします。
このエントリがアップされた時点では既にリニューアル後のデザインになっています。

このエントリの目次

1. スケッチとプロトタイプとは
2. まずは提供するべきデータと機能をリストアップ
3. スケッチとプロトタイプの作成
4. で、今のデザインになりました。新旧比較
5. さいごに

1.スケッチとプロトタイプとは

どちらもUXデザインの初期の具現化ステップです。
が、以下のような違いがあります。

• スケッチ
  アイデアの創出・具現化が目的で「探求」のステージ。より多くのアイデアを素早くたくさん具体化することが目的で、より良いものを選択していきます。
• プロトタイプ
  実際の見た目に近いものを作成してフィードバックを得る「検証」のステージ。関係者へのプレゼンやユーザビリティテストなどを目的とします。

2.まずは提供するべきデータと機能をリストアップ

まずは、前回の記事で作成したストーリーボードの各ステップで、ユーザに提供するべきデータと機能をリストアップします。

当ブログでは下のようになりました。

まず第一に提供するべきなのは「分かりやすい本文」で、この点については考えるべき階層構造があまりないので、シンプルなものになりました。

3.スケッチとプロトタイプの作成

本来、スケッチは紙に書きだすなどして大量にアイデアを生み出すのがよいのですが、今回は 目的がシンプルなため、またBloggerのテンプレートデザインなどを使って実現したいUIがすぐに反映できるため、プロトタイプをスケッチと同時に行いました。

そのときに検討した項目を書いていきます。

配置するデータについて

1. デザインの原則に従って、記事の本文を左側に、ナビゲーションを右側に配置する
2. 記事本文のカラムについて
   1. 記事本文の下には、その記事のラベルを配置する。
   2. 各記事の最下部には、それ以外の要素を配置する。
   3. と思ったけど、なぜかその辺りの順番変更できないね…。
3. 他エントリの導線となる要素以外は極力排除する。
   1. 美人時計とか旬が過ぎたし、本ブログで見る必要はないので削除する。
   2. Android関連のニュースのブログパーツは、英語だし見られていないはずなので削除する。
   3. 当ブログの読者一覧は特に知りたくないと思うので削除する。
4. ナビゲーションの要素は使ってほしい機能の順に上から配置していく。
   1. 検索窓は最重要ではないけど、縦幅が狭くシンプルすぎて見落としやすいので一番上に配置する。
   2. 同じような内容の記事は割と近い日付で並び、タグ一覧よりも記事同士の関連性が高いので、月別の記事一覧を上に配置する。
   3. タグ(ラベル)一覧はPV順に並べたいけど方法が分からないので、とりあえずタグクラウドで妥協。
   4. よく検索されているエントリも配置したいが、それぞれ関連のないエントリが並ぶので下の方に配置する。
   5. 自己紹介は所詮おまけなので、ナビゲーションの下に配置する。

ビジュアルデザインについて

1. ブログのメインカラーを青系の色にする。今までは緑だったのだけれど。(ブログのタイトルがWorld Wide Windblueなのに！ 個人的にはこれが一番意味の分からないデザインでした)
2. 記事本文は白背景に黒テキストにする
3. 記事を読むときに目障りにならないように、全体を主張しすぎない色でまとめる
4. 気楽に読んで欲しいので、パステル系の色を使って柔らかい雰囲気を出す
5. 記事本文の構成がぱっと見で分かるように、タイトルと見出しの区切りを大きく分かりやすくする

記事の文章構成について

1. タイトル
   1. 正確にシンプルで端的なものにする。検索にひっかかったときのタイトルの全文表示を目指すよりは、正確さを優先する
2. 本文
   1. 小難しい印象を持たれないために、地の文は丁寧語で分かりやすい言い回しをする。ひらがなを多く使う。
   2. 検索エンジンで表示されたときに記事の内容が分かるように、概要を本文の一番上に書く。でも記事本文にスッと入ってほしいので、できたらアイスブレイク的なことも書く。
   3. アイスブレイクの効果を狙って、各記事の一番上にはイラストや写真を入れる。
   4. サンプルコードとキャプチャ画像をたくさん入れて、ユーザが迷ったり悩む回数を減らす。
   5. 各見出しの内容が一画面を超える長さの場合は、できるだけ分割する

これらのコトを意識し、Bloggerのテンプレートデザインでトライアンドエラーを繰り返しました。

4.で、今のデザインになりました。新旧比較

だいぶすっきりとした印象になりました。
右側のタグクラウドなどはまだ気に食わないですが、できたら随時修正していこうと思います。

旧バージョンのキャプチャを貼ります。







見出しと地の文がパッと見で区別がつきにくくて、ゴチャコチャしている感じです。
ざっとスクロールしたとき、記事の構成がわかりづらいです。
ここが今回なおしたかった最大のポイントです。

素人が中途半端にデザインするもんじゃないですな。

ちなみに本文の横幅は 前のバージョンでは意図的に狭くしてたのですが(視線の横移動がだるい)、それだとサンプルコードが見づらくなるので、今回は仕方なくデフォルトの幅にしています。

ていうかなんでメインカラーを緑に選択したのか…(ブログのタイトルがWorld Wide Windblueなのに！)(二回目)。
まあ単純に緑色が好きだからだったんですが。

5.さいごに

これで、UXデザイン入門―ソフトウェア&サービスのユーザーエクスペリエンスを実現するプロセスと手法を参考にしたシリーズを終わります。

「当ブログが見やすくなった」っていう人がいらっしゃいましたらコメント頂けると嬉しいです！

UXについてはまだまだ初心者レベルですので、これからも勉強していきます。
情報アーキテクチャも勉強していこうと思っています。

また、ソーシャル系やモバイル系も最適化していこうと思っています。

それでは。

参考書籍