More than 1 year has passed since last update.

Google UXデザイン：ワイヤーフレームの基本的な描き方

Last updated at 2023-03-04Posted at 2022-11-08

はじめに

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

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

ワイヤーフレームは、次のコンポーネントで構成されます。

この例を見てください。一見複雑に見えますが、使っているのは線と基本的な図形、そしてテキストだけです。

携帯電話の中のアプリを示すワイヤーフレームを描きます。

まず、携帯電話のフレームを作成します。これは単純な長方形でかまいません。中に描画できるような大きさにしてください。

次に、上部にバーを追加します。このバーは、現在の画面に関連する情報やアクションを表示する場所です。この長方形のバーは、アプリの上部のほぼ全幅に渡っています。

トップバーの下には、3つのディバイダーがあります。デバイダーは、リストやレイアウトのコンテンツをグループ化するための細い線です。

トップバーでナビゲーションメニューのアイコンを描きます。左上の3本の水平線があるアイコンがそれです。ナビゲーションメニューのアイコンは、トップバーの中にあるはずです。

アバターを追加します。これは、大きな丸に、人の頭と棒状の体のアイコンがついたものです。アバターは、トップバーの右上に追加します。

仕切りでできたそれぞれの長方形の中に、円を追加します。円は長方形の左側に描きます。円の大きさはすべて同じにするつもりですが、多少乱雑でもかまいません。

この丸は画像を示すものにしたいので、それぞれの丸にXを描きます。

次に、枠の右下にプラス記号の入った丸を追加します。

最後に、各円の右側にテキストを示す水平線を描きます。この例では、線は長方形の真ん中だけで、端から端まで引いてはいけません。

これで、ワイヤーフレームができました。

ワイヤーフレームをシンプルでわかりやすいものにするために、業界標準を設けています。