Diagram

ワイヤーフレームは、ウェブサイトの動作やサイト内でのユーザーナビゲーションなどをレイアウトで示す役割を果たします。サイトに盛り込むべき要素、ページ内の要素の位置、要素間の相互作用を決めるための骨組みのようなものと言えるでしょう。こうしたワイヤーフレーム作成のプロセスを省略すると、ユーザーエクスペリエンス面で劣るサイトが出来上がることにもなりかねません。

必須の要素が揃っていることを確かめるため、デザイナーが紙にワイヤーフレームをスケッチすることから始める場合もあるでしょう。その後、オンラインツールを使用して共有できるワイヤーフレームを作成します。見栄えよりも機能性を優先したデザインです。この時点では、カラーパレットやサイトの全体像を考えることはしません。

このページは4分で読めます

ワイヤーフレーム図の作成には、Lucidchart を試してみましょう。素早く、簡単に使えて、完全に無料です。

または
Google MarkGoogle 登録

登録により、Lucid Software のサービス利用規約プライバシーポリシーに同意します。

ワイヤーフレーム作成のための7つのポイント

ワイヤーフレームの作成に着手する前に押さえておきたいポイントはいくつかあります。サイトのニーズの特定、ページの各要素のもつ重要性の評価、さらにこうした要素と訪問者が相互作用する方法などがこれに含まれます。以下では、デザインプロセスの円滑化と生産性向上に役立つヒントを紹介しています。

1. 関係者の意見を聞く

社内用と外部顧客用、どちらのウェブサイトを作成する場合でも、顧客の要件を理解することが非常に重要です。主要な関係者を集めて会議を開き、サイトの全体的な目標とサイトユーザーに期待する行動を明確にします。強調したい機能について質問し、ファーストビュー (詳細を表示するためにスクロールせずともサイトに常時表示される内容) として表示すべき特定の項目があるかどうかを確認する上でもよいタイミングです。

2. ボタンの表示は分かりやすく

注文の送信や支払いの確認などのタスクをウェブサイトで実行する際には、ボタンを使うのが一般的です。ここでは、ユーザーが慣れ親しんだ方法を使うようにしましょう。長方形のボタンであれ、角丸のボタンであれ、サイト全体を通じて同じ形状のボタンを使います。

3. ナビゲーションを考慮する

構築するサイトの種類により、数ページから数百ページまで、ページ数に大きな差が出ます。ここで重要なのが、分かりやすい階層を設けることです。例えば、企業ウェブサイトの作成であれば、企業関連の項目を1つのドロップダウンメニューにまとめ、別のメニューに製品関連の要素をまとめます。加えて、ユーザーがサイト全体を移動する経路、深い階層まで辿り着いた後にホームページへ戻る方法などについても検討が必要です。

4. グリッドを設定し、ボックスを使用する

グリッド機能のあるオンラインツールを使うことで、ページ上の項目のバランスが取りやすくなります。グリッドを利用すれば、項目間の間隔を適切に設定しやすくなり、ページ上でどう表示されるかを掴みやすくなります。コピー、画像や広告などのページ要素の表示にはボックスを使います。繰り返しになりますが、ワイヤーフレームはあくまで骨組みです。見た目にこだわる必要はありません。

5. 実際のテキストを追加する

ページのコンテンツを表すのに「lorem ipsum」テキストを用いるデザイナーは多数いますが、ワイヤーフレーム作成時には、実際のコピーを使いましょう。こうすることで、ページ上での既存のコンテンツの見え方を簡単に確認し、割り当てたスペースの調整やテキストのトリミングの要否をチェックすることができます。また、フォントを変えてみて、コピーにどう影響するかを確認してみましょう。

6. 重要な要素を含める

ページに含めるべき主要な構成要素をリストアップします。この内容は、作成するサイトの種類により異なるでしょう。例えば、代金の支払い用ページのワイヤーフレームを作成するのであれば、ユーザーが送信ボタンをクリックする前に入力すべきボックスすべてを含めます。サイトのナビゲーションとユーザーログインエリア、コンテンツ、検索ボックスや企業ロゴを配置する場所も考慮しましょう。

7. ワイヤーフレームを他のユーザーと共有する

ワイヤーフレームの作成が終了したら、同僚や上司にフィードバックを求めましょう。ワイヤーフレームを共有でき、編集/コメント機能のあるオンラインツールを使えば、このプロセスもスムーズです。複数のユーザーがワイヤーフレームを確認しながらオンラインチャットに参加できるオンラインアプリであれば、改訂履歴も追跡しやすく、時短にもつながるでしょう。

ワイヤーフレームの最終版の確定後は、実際の構築に移る前に Illustrator や Photoshop などのアプリを利用してワイヤーフレームをビジュアルに変換することもできます。あるウェブページで事物を表すのに使った要素と同じものを別のウェブページでも必ず使うようにしましょう。優れたユーザーエクスペリエンスの実現には一貫性が大切です。

Lucidchart を使えば、素早く、簡単に図を作成することができます。今すぐ無料のトライアルを開始して、作図と共同編集を始めましょう。

または
Google MarkGoogle 登録

登録により、Lucid Software のサービス利用規約プライバシーポリシーに同意します。

ワイヤーフレームの書き方

役立つワイヤーフレームの作成に必要なポイントを把握したところで、今度は Lucidchart を使った実際の作成方法を見ていきましょう。Lucidchart には作成プロセスをスムーズにするワイヤーフレームテンプレートが多数揃っており、作図のニーズに合わせ、自由にテンプレートを変更することができます。アカウントへログイン (アカウントをお持ちでない場合は、1週間無料の Lucidchart トライアルに登録しましょう) し、以下の手順に従います。

1. ワイヤーフレームテンプレートを選択する

[文書] セクションでオレンジ色の [+文書] ボタン内の下向き矢印をクリックし、右側のカテゴリ列をスクロールします。[ワイヤーフレーム] をクリックします。

2. ワイヤーフレームテンプレートを選択する

たくさんのオプションがありますが、このチュートリアルでは、Wordpress ブログワイヤーフレームを使用してグルメブログを作成することにします。Wordpress ブログテンプレートをダブルクリックします。

3. ブログのワイヤーフレームに名前を付ける

画面中央上のワイヤーフレームヘッダーをクリックします。テキストが強調表示され、図の名前を入力できるようになります。

4. ワイヤーフレームの作成を開始する

Lucidchart のテンプレートには、標準的な UI オプションが多数含まれています。いくつか構成要素を追加し、要素を移動させていきたいと思います。ヘッダーから始めましょう。最上部の大きな長方形のボックスをクリックし、上部中央の青いボックスを長押ししながら下方へドラッグします。

[Home]、[About]、[Contact Us] をクリックし、ページの左上隅へドラッグします。

他のナビゲーションボタンも追加しましょう。今回はドロップダウンメニュー形式とします。[UI 入力] から、下向き矢印付きのボックスをクリックしてドラッグし、ページの右上隅へドラッグします。ボックスを動かして配置を調整します。

ボックス内のコピーをダブルクリックし、新しい名前を入力します。これは「レシピ」と呼ばれます。

5. 右列へ検索ボックスを移動する

コンテンツを表示するスペースをもう少し確保したいので、検索ボックスを右側の列に移動します。矢印をリストの最下部の隅に置き、上方向にドラッグして右側の列内の項目すべてを選択します。すべてが選択され、項目を下に移動しやすくなります。強調表示された項目をクリックして下方へドラッグします。

同様に、検索ボックスを移動してみます。検索ボックス内のすべての要素を選択し、右側の列の最上部へドラッグします。列内に収まるようにボックスのサイズを調整します。

6. ワイヤーフレームに動画を追加する

このページでは、ブロガーが毎週更新するデモの動画を紹介します。[Article Title]、投稿日とコピーを選択し、キーボードの [delete] キーを押します。注意: 動画要素で使用するため、[Category]、[Tags]、[Comments] 要素は残します。

[UI ウィジェット] から動画アイコンをクリックして長押しし、左側のヘッダー画像のちょうど下へ揃うようにドラッグします。

[UI コンテナー] の要素ボックスをクリックし、動画ボックスの右側へドラッグします。ここには、動画に関するテキストを入力します。

[Category]、[Tags]、[Comments] をクリックしてドラッグし、動画ボックスの下に揃えます。以下のように表示されるはずです。

テキストボックスだと分かるよう、要素ボックスにコピーを追加します。メニューバーのフォント、種類、位置合わせツールを使用して書式設定を調整します。

7. ページの内容を調整する

ブログ記事ティーザーを移動し、ページの動画に揃えていきます。残りの記事セクションの項目すべてを選択し、[Category]、[Tags]、[Comments] セクションの下に揃えます。すべての項目が選択された状態のまま、青い正方形を使ってページにうまく収まるようサイズを調整します。

8. ワイヤーフレームを共有する

この課題の初めに作成したタイトルが図の最上部に表示されます。希望通りのワイヤーフレームが完成したら、メール、リンク、ソーシャルメディア (Facebook、Twitter、Google+ や LinkedIn) 経由、またはウェブサイトへの埋め込みで共有します。画面右上の青色の [共有] ボタンをクリックするとポップアップが表示されます。図を共有したい方法を選択し、適宜情報を入力します。

ワイヤーフレームへのリンクをメールで送信して共同編集者を追加すれば、ワイヤーフレームを同時に編集し、チャット機能 (画面右上の黄色の引用符アイコン) を利用して内容について議論することができます。

Lucidchart でワイヤーフレームの作成を開始

ご覧のとおり、すぐに使える Lucidchart のテンプレートを利用すれば、ワイヤーフレームの作成は簡単です。白紙の状態からスタートしたい場合には、白紙のワイヤーフレームテンプレートを選択するだけ。これにより、デザインを完成させるのに必要な UI 要素すべてが事前に読み込まれます。ウェブベースのアプリ、Lucidchart ではワイヤーフレームが自動保存され、インターネット接続環境があればどこからでもアクセスが可能です。同僚や顧客とのワイヤーフレームの共有も格段にしやすくなります。相手がファイルを開けるか、ファイルにアクセスできるかを心配する必要ももうありません。


ワイヤーフレーム図の作成には、Lucidchart を試してみましょう。素早く、簡単に使えて、完全に無料です。