PINGDOM_CANARY_STRING
Lucidspark Logoホームページ制作にも必要なワイヤーフレームとは?
    デザインの開始
Diagram

ホームページ
制作にも必要な
ワイヤーフレームとは?

ワイヤーフレーム完全ガイドへようこそ

ワイヤーフレームの作り方を学びたい。
早速自分でワイヤーフレームをデザインしたい。

目次

この記事を読むのに必要な時間 : 6 分

ワイヤーフレームの作り方とデザインなら、Lucidsparkを活用しましょう。素早く、簡単でにワイヤーフレームを作成できます。

Get started

ワイヤーフレームとは一体何?

ワイヤーフレームとは、ウェブサイトのホームページやスマホのアプリのレイアウト構造を決定する際に必要な『設計図』を示しています。住宅の建設の際にも良く使われている間取り図のように、ワイヤーフレームはサイト全体のレイアウトを設計する時に使われる設計図です。

ワイヤーフレームの役目としては、サイト上に何をどこに配置するかといった構造がメインです。細かいデザインの設定は後でモックアップ上で行いますので、あくまでもワイヤーフレームはレイアウトなどの構造を作成する物だと考えた方がいいでしょう。検索バー、ヘッダー画像やその他のコンテナーなど、ページの視覚的要素を示す基本的な要素で構成されるのがワイヤーフレームです。

ワイヤーフレームの作成は一見複雑に見えるかもしれませんが、作成には特別なソフトや経験も不要で、初心者でサイトを設計する方にも簡単に作り上げることが出来ます。ワイヤーフレームの多くは、思いつきを手元にあるレポート用紙やメモにスケッチとして書きつける形で始まります。ただ、ワイヤーフレームを最大限に活用するには、スケッチに留めることなく、アイデアの発展に合わせて、オンラインワイヤーフレームツールでWebサイトの設計図を作成し直すことをおすすめします。ツールでワイヤーフレーム作成することによって、サイト構成の詳細を追加し、ユーザーエクスペリエンスをシミュレーションできるようになります。高度なワイヤーフレームでは、ページレイアウトだけでなく、ユーザーフロー、情報アーキテクチャや想定されるユーザー動作を表すこともできます。

ワイヤーフレームには、デザイナーや関係者全員にウェブサイトやアプリについての明確なゴールを提示し、ユーザー目線を重視したデザインを維持できるという主に2つのメリットがあります。

サンプルで分かるワイヤーフレームのポイント

ワイヤーフレーム以外にもモックアップ、サイトマップ、ディレクトリマップやデザインカンプを良く耳にしますが、これらは全てワイヤーフレームとは違います。以下のサンプルのように、ワイヤーフレームはレイアウト設計図なので、実際のデザイン等はモックアップを作成する時に行いましょう。

見て分かるワイヤーフレームのサンプル例

低忠実度のワイヤーフレーム

ウェブサイトのデザインのプロセスは通常、ワイヤーフレームの作成から始まります。アプリやウェブサイトの基本的なレイアウトを手早く視覚化する簡単なスケッチのように、シンプルさが重要となります。内容には基本的なテキストとレイアウト要素だけを含め、画像、テキストやアイコンは省略し、ボックスや「X」などで表示することをお勧めします。

ワイヤーフレームの作成は手早く、でも押さえるべき内容はきちんと含めるようにしましょう。また、ワイヤーフレームは紙上でも書くことが出来ますが、ワイヤーフレームツールを活用すれば、デザイナーやウェブ計画全ての関係者とコミュニケーションが取れるようになり、関係者に伝えたいことが伝えられるので一番おすすめします。

要素を含めたワイヤーフレームのサンプル

中忠実度のワイヤーフレーム

ワイヤーフレームでウェブサイトのアイデアを可視化させたら、追加したい内容を加えていきましょう。ワイヤーフレームを作る際は、画面全体、他の要素に対する各要素のサイズなど、スケールと比率を重視します。スタイル設定は最小限に抑え、必要に応じて一般的なアイコンや重要なテキストを含めるのみとします。

高度なワイヤーフレームはUXデザイナーが好む

高度なワイヤーフレームを作成する際は、精度を必ず重視しましょう。設計図のあらゆる要素をピクセル単位で正確に、適切な場所に配置します。完成品に含まれる画像とテキストを加えればもっと良くなります。ページのメニューなどのクリック可能なCTAなどは、完成品と同等の機能と詳細を加えたものとします。

精度の高いワイヤーフレームは、プロのUX デザイナーが作成するのが一般的です。他のワイヤーフレームはデザイン分野外の人がデザイナーにアイデアを伝えるためのものであるのに対し、高忠実度のワイヤーフレームはデザイナーが他の関係者に最終デザインの確認を依頼するために使用されます。

ワイヤーフレームとモックアップの違い

ワイヤーフレームがアプリやウェブサイトの設計図だとすれば、モックアップは磨き上げたワイヤーフレームの次の段階を示す物だと思って下さい。例えばマイホームの間取り図だけでは、完成した家の想像がつきませんよね? ワイヤーフレームも同じで、ワイヤーフレームから完成品のWebサイトを想像することは普段難しいです。

これに対し、モックアップは、最終的なウェブサイトやアプリを可能な限り正確にモデル化するためのものです。モックアップにはフォント、カラーやイメージといったスタイルがすべて含まれますが、ワイヤーフレームには普段、イメージなどは含まれませんので注意しておきましょう。

前述のように、ワイヤーフレームはデザインプロセス全体で使われる図で、設計チーム以外のメンバーにより作成されることもよくあります。ワイヤーフレームは、関係者が構造設計上の欠陥を見出し、アプリやウェブサイトの動作について意見を一致させる上で役立つもので、その他の要素は除外されています。

モックアップは製品の外観に焦点を当てたもので、通常、ワイヤーフレームの完成した後にデザイナーが作成します。製品のモックアップが関係者により承認されると、サイトやアプリのプロジェクトを開発段階に進められるようになります。

ワイヤーフレームの重要性

ワイヤーフレームは誰にでも作成できますが、一般に、UX デザイナーに最もよく利用されます。このセクションではその理由を説明して行きます。

UX デザイナーは、その名の通り、ユーザーが製品を操作する方法を決める役割を担い、アプリやウェブサイトの場合にはインターフェイスの設計を担当します。ワイヤーフレームを使用することで、UX デザイナーは実際のコーディングが始まる前にユーザーインターフェイスのシミュレーションを行うことができ、デザインを作り上げ行くことが出来ます。

では、ワイヤーフレームは実際にはどのように使われているのでしょう? 例えば、UX チームがウェブインターフェイスをデザインする場合には、ユーザーがページをナビゲートする方法、ポップアップやドロップダウンメニューの有無、どこに配置するかなど、考慮すべき点が多数あります。

Webサイトのワイヤーフレームを作成することで、UX デザイナーはウェブサイトやアプリのレイアウトとユーザーフローの両方のドラフトを仕上げることができます。

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

Get started

ワイヤーフレーム作成ツールをおすすめする理由

ワイヤーフレームの作成は先ほども紹介した通り、紙上でホームページやアプリなどのデザインレイアウトを行う事も可能ですが、全ての関係者の意見の統一やサイトレイアウト内の変更にアップデートがあった場合には、ワイヤーフレームツールで設計図の作成を行うことを一番お勧めします。ツールを活用することによって、ウェブ担当者やUXデザイナー、ウェブディレクターの方々と一緒にファイルの共有が可能になり、コミュニケーションツールとしての役割も果たしてくれるので、スムーズにWebサイトの設計が実現します。

ここでおすすめするのが、Lucidsparkです。Lucidsparkなら、ワイヤーフレームやモックアップのサンプルやテンプレートからスマホのアプリやホームページの制作が全ての関係者とリアルタイムに行えます。以下にLucidsparkのメリットを紹介しますので是非、試してみて下さい。

Lucidsparkの利用メリットとは?
 

  • 人数制限無しで、ワイヤーフレームの共有と編集が可能
  • パソコン機種関係無しに操作が可能
  • リアルタイムでサイト制作のデザインがいつでもOK
  • コメントやノート整理機能でコミュニケーションが楽に
  • ワイヤーフレーム専用テンプレートやアイコンも豊富

知っておきたいワイヤーフレームの要素と利用場面

ウェブやアプリの開発においては、ユーザーエクスペリエンスを適切に企画する前に、フォントや色の選択に気をとられてしまいがちな傾向があります。ワイヤーフレームを作成することで、こうした細部にとらわれず、情報、ナビゲーションやインターフェイスのデザインという3つの基本的な側面に焦点を当てることができます。

情報のデザインで使えるワイヤーフレーム

アプリやウェブサイトを操作する際、どのようなウェブサイトを訪問しているか、どのようにやり取りしているか、サイトの「目的」は何かなど、ユーザーは常に情報を取り入れています。このプロセスは自動的で、主に潜在意識下で行われます。ページ上での情報の表示方法を選択することで、こうしたやり取りを円滑化するのがデザイナーの役割です。

では、実際の例を見てみましょう。

例えば、チャットサービスを提供するウェブサイトの場合、サイトにアクセスするユーザーの大半は再訪問者と新規訪問者のいずれかに分類されます。再訪問するユーザーの目的はおそらくログインすることで、新規訪問者の目的はアカウントの作成やサービスに関する詳しい情報を得ることなどでしょう。ホームページでは、訪問者のタイプ別に説明を行い、各自が訪問目的を達成するのに十分な情報を提供する必要があります。こうした情報は、ログイン、新規登録や詳細情報などのボタンを通じて伝えることもできます。これらの要素どこに含め、どこに配置するかを決めるのが情報のデザインです。

ナビゲーションのデザインにも役立つ

ユーザーとしてアプリを操作する際に、「設定」に時間がかかりすぎると感じたことはないでしょうか。また、ウェブサイトの中で堂々巡りをしているように感じられたことはないでしょうか。例えば、あと少しで「アカウント情報」ページに辿り着けそうだと思ったのになぜかホームページに戻ってしまったり、挙げ句は404エラーページに行き着いてしまったり。質の低いナビゲーションデザインに遭遇する機会があまりに多いのが現実です。

ナビゲーションのデザインとは、その名の通り、アプリやウェブサイト内でのユーザーの移動方法を決めることを指します。特定の画面からユーザーが移動できる画面は多数ありますが、デザインでそのことを伝えなければ分かりません。ドロップダウンメニュー、クリック可能なリンク、スクロールバーなどを使って、製品内で移動する方向を視覚的に示す必要があります。

インターフェイスのデザイン

インターフェイスのデザインには、情報、ナビゲーションとワイヤーフレーム内のその他のすべての要素が含まれます。ナビゲーションのデザインと情報のデザインにはいずれも、ボタンやメニューなどの画面上のコンポーネントが含まれます。インターフェイスのデザインとは、これらの要素をテキストボックス、ヘッダー画像やサイドバーなどの他の要素を合わせた全体として、ユーザーインターフェイスに組み込む方法を指します。

ワイヤーフレームの作り方ステップ

このガイドでワイヤーフレームの全てを理解したところで、実際にワイヤーフレームの作り方を学んでいきましょう。

1. まずはサイトマップを忘れずに


スマホアプリのワイヤーフレームサンプル例

まず、ワイヤーフレームの作成の前に、必ずサイトマップの作成を忘れずに行いましょう。サイトマップがある程度完成した後は、エンドユーザーフローを重視してワイヤーフレームをデザインしていきましょう。ユーザーがアプリ内をどう移動するか、最終的に到達してほしい箇所などを検討しましょう。

一見、準備作業に手間をかけすぎているようにも思えますが、ユーザーフローを明確に把握せずにワイヤーフレーム作成に入ると、分かりづらく見にくいワイヤーフレームになりがちなため、ここは注意しましょう。

2. ワイヤーフレーム図形と要素の追加


ワイヤーフレーム

徹底的に計画を立てた後には、ワイヤーフレームのデザインに取り掛かります。まず、図の「フレーム」を選択します。アプリのワイヤーフレームを作成する場合はスマートフォンの画面専用の図形を、ウェブサイトのワイヤーフレームの場合はブラウザウィンドウのようなアイコンや要素を選択します。Lucidsparkのワイヤーフレームツールなら、ワイヤーフレームに必要な要素が既に揃っていますので安心してデザインが出来ます。

次のステップは、ワイヤーフレームの最大の要素となるヘッダー、サイドカラム、テキストボックスなどのアイテムを示すサイトやアプリに必要な図形やコンテナーなどを追加します。この時点ではテキストや画像は含めず、大まかなレイアウトのみを決定します。

この手順を繰り返して各ワイヤーフレームを作成します。

3. ボタンの追加とワイヤーフレームの接続


ワイヤーフレーム

ワイヤーフレームのレイアウトが固まったら、機能を追加していきます。製品の画面にユーザーを新しい画面に遷移させるボタンが複数あり、このボタンを最後のステップで図形として追加していない場合は、各ボタンを表す基本図形を選択してここで追加します。「ホーム」など、ボタンにテキストを追加することもできます。

ワイヤーフレームの作成対象のプラットフォームにリンク機能が含まれる場合は、ユーザーの遷移先となるワイヤーフレームに各ボタンをリンクします。

ヒント : ワイヤーフレームに使用するフォントは1つに絞りましょう。必要に応じて太字や斜体を適用できますが、他の種類の書式設定はモックアップやプロトタイプ作成の時点までとっておきます。

4.フィードバックの収集と関係者と同時編集


ワイヤーフレーム

時間をかけて作成したワイヤーフレームが完成し、レイアウトも適切で、ユーザーフローのシミュレーションのための接続も完了したら、他のサイト設計者やウェブデザイナー関係者とワイヤーフレームをシェアし、細部を追加する前にワイヤーフレームを改善できるよう、違った視点からのフィードバックを集めます。

ボタンの位置が少しずれている、メニューバーが大きすぎてページを占有しすぎなど、同僚からのさまざまなフィードバックに耳を傾け、共同で検討します。

提案された変更を適用し、ワイヤーフレームを改善します。関係者全員によりデザインが承認されるまで、このプロセスを繰り返します。

5. 必要に応じて詳細の追加


ワイヤーフレーム

この時点で、ワイヤーフレームの忠実度は中程度になっているでしょう。基本的なデザインが承認されたら、詳細を作り込んでいきます。画像やテキストを追加し、ページ上のさまざまな要素を色分けで区別しますが、全体のトーンはグレースケールのままとします。どの要素もピクセル単位で適切なサイズに設定します。

6. ワイヤーフレームを共有

機能的で、忠実度の高いワイヤーフレームが完成したら、プロジェクトの関係者や関連するチームと共有します。


ワイヤーフレームの作り方とデザインなら、Lucidsparkを活用しましょう。素早く、簡単でにワイヤーフレームを作成できます。

日本語
EnglishFrançaisDeutsch日本語PortuguêsEspañolNederlandsPусскийItaliano
プライバシー法的事項
© 2021 Lucid Software Inc.