はじめに

わたしがGoogle UX Design Crtificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

ワイヤフレームのおさらい

ワイヤーフレームとは、アプリやWebサイトなどのデジタル体験の基本的なアウトラインで、線と単純な図形で構成されていることを忘れないでください。

ワイヤーフレームを作成する目的は

ページの基本構造を確立し、
各要素の意図された機能を強調する

ことです。色やフォントなどの視覚的な要素を加える前に、 構造と機能 に焦点を当てたいのです。

新しいサービスのワイヤーフレーム

前回のGoogleフォトアプリの最初のワイヤーフレームの例では、すでに存在するサービスでした。しかし、通常は新製品や新機能のためにワイヤーフレームを描きます。多くのアイデアを検討するために、アプリやWebサイトの同じ画面に対して、複数のワイヤーフレームを作成することもあります。

今回、犬の散歩アプリのホームページのワイヤーフレームを描いてみます。

Step1

描き始める前に、載せるべき情報を簡単にリストアップしておくと便利です。このような情報を前もってリストアップしておくことで、各ワイヤーフレームですべての要素を忘れずに描くことができるのです。たとえば、ナビゲーションアイコン、検索バー、画像、およびテキスト説明などです。

Step2

描画を開始します。ページ内の情報をどのように構成するか、少なくとも5種類のバージョンを作成してみるのが良い方法です。この段階では、ワイヤーフレームで多くのアイデアを検討することが目標であることを忘れないでください。

今回の例では、犬の散歩アプリのトップページのワイヤーフレームを5つ描いてみます。描きながら、ステップ1のリストを確認し、忘れている要素がないかを確認します。正解はないので、クリエイティブに、新しいアイデアを試してみてください。一見、バカバカしいレイアウトでも、それが斬新なアイデアになるんです。

Aは、ドッグウォーカー一人ひとりがプロフィールカードを持つトップページのレイアウトを描きました。ドッグウォーカーがスーパーでチラシを配るときのようなイメージで、それぞれのプロフィールをカードに見立てました。また、トップページの上部には検索バーを設けました。
Bは、トップページにはドッグウォーカーのプロフィールだけでなく、もっと多くの情報を掲載したいと思いました。トップページに犬のしつけのコツや記事などがあると、ユーザーにとって便利だと思ったからです。また、ドッグウォーカーのプロフィールを、カードのような縦長の長方形ではなく、横長の長方形にしてみました。
Cでは、アプリ内でのユーザーの最近の行動を表示するエリアを追加しました。これは、同じドッグウォーカーを何度も予約したいユーザーにとって便利だと思ったからです。私は、横長のドッグウォーカーのプロフィールが好きです。でも、今回は長方形ではなく、仕切りを使っています。また、プロフィールを「あなたの近くのドッグウォーカー」と表現するヘッダを追加しました。

Dはまったく違うものを描きました。これもアイデアのひとつです。このアプリで最も重要な機能を強調するために、3つの大きなセクションを描きました。ドッグウォーカーを予約する」「最近のアクティビティ」「最新のトレーニングのヒント」です。これによって、ユーザーがアプリを簡単にナビゲートできるようになると思ったからです。
Eですが、ホームページをより魅力的なものにしたかったので、プレースホルダー画像（四角に×印のついたもの）をいくつか追加しました。また、右上にアバターを表示することで、ユーザーが簡単にプロフィールページに移動できるようにしました。

Step３

アイデアを出し終えて、ワイヤーフレームを洗練させるときです。作成したワイヤーフレームのバージョンを確認し、最も気に入った部分の横に星印を付けます。この例では、ほとんどの検討で、ナビゲーションメニューを保持するバーを上部に描きました。このことから、おそらくそのコンテンツを上に置いておきたいのだと思います。そこで、ワイヤーフレームのその部分に星印を追加します。

さらに、私は本当にあなたの近くにドッグウォーカーをリストで表示するのが好きです、それはユーザーが迅速にできるだけ多くの新しい犬の散歩の候補を見て、彼らが雇いたい誰かを見つけることが容易になるので、私はその横に星を置くつもりです。

Step4

アイデアのベストに注目した上で、デジタルワイヤーフレームでさらに検討したい部分を絞り込んでいきます。デジタルデザインツールを使って、さらに作り込みたいアイデアを2～3個選ぶと便利です。

ワイヤーフレームはデザインプロセスの重要な部分であるため、紙のワイヤーフレームを保存して、ポートフォリオに写真を掲載したいものです。紙のワイヤーフレームを作成するたびに、写真を撮ることを忘れないでください。そうすれば、ポートフォリオに掲載する作品を作るときに、たくさんの写真から選んで掲載することができます。

サンプル集