Webサイト制作に欠かせないワイヤーフレームの基本と作り方徹底解説

Wireframe「ワイヤーフレーム」とは、 Webサイトやホームページ、スマホのアプリの設計・開発の際によく使われているいわゆるサイトデザイン設計図です。ウェブデザイナーには欠かせない一種の図として良く使われています。

ウェブサイトの設計において、ワイヤーフレーム (サイト設計図) はホームページやモバイルアプリ画面の構造や機能を視覚的に表現するものを指します。デザインやコンテンツ追加前の開発段階でページの基本的な構造を構築するために使われる設計図で、紙ベースや、直接 HTML/CSS で作成するほか、ワイヤーフレームツールを使って作成することもできます。  

ワイヤーフレームは、サイト作成の最初の段階である抽象的なサイトマップに代わる存在で、より具体的で理解しやすい要素を含みます。 ワイヤーフレームには以下のような目的があり、いずれも相互に関連しています。

• サイトやアプリの構成。

  クリエイティブによる影響を極力廃して機能を確認することで、関係者がプロジェクトの他の側面に集中できるようになります。 ワイヤーフレームを作成することで、機能の動作、配置箇所やメリットを把握でき、機能の実装方法を具体的に想定しやすくなります。サイトの目標にそぐわない機能の採用を取りやめることもできます。

• 使いやすさの重視。

  ワイヤーフレームを利用することで、リンク名、コンバージョンにつながるパス、使いやすさ、ナビゲーションや機能の配置を客観的に見渡すことができます。加えて、サイトのアーキテクチャや機能の欠陥を特定したり、ユーザーの視点からサイトの使用感を確認することもできます。

• コンテンツ増に対応できるキャパシティ。

  近い将来にサイトの内容を拡充する予定がある場合には、サイトのアーキテクチャ、使いやすさやデザインに対する影響を最小限に抑えながらコンテンツ増に対応できるよう、ウェブサイトを設計する必要があります。ワイヤーフレームを作成することで、こうしたコンテン拡充の可能性や対応策などを把握することができます。

• フィードバックを得ることで、修正も楽に。

  ワイヤーフレームを使えば、機能、レイアウトやクリエイティブ要素をすべて一度に盛り込むのではなく、これらを別々に検討できるようになります。このため、関係者からのフィードバックがプロセスの早い段階で得られます。ソフトウェアでワイヤーフレームを作成すれば、ウェブのデザインにつきものの反復プロセスにかかる手間も大幅に削減できます。

ウェブサイトとアプリの開発におけるワイヤーフレームの意義

ワイヤーフレームは、ウェブサイトの開発に関わる人すべてが最新の状況を共有するためのツールです。こうした共通認識の醸成には、さまざまな利点があります。デザインがより慎重に調整されるようになり、開発チームは、作成対象についての理解を深めることができます。また、コンテンツを作成しやすくなり、プロセスの後半での調整、修正や作り直し（スコープクリープ：scope creep）を強いられる可能性も低減できます。中でも最大のメリットは、時間と費用の節約でしょう。

ユーザーエクスペリエンス設計とは、顧客とサイト、アプリや製品との間のやり取りをよりスムーズに、楽しめるものへと改善することで、顧客のロイヤリティと満足度を高める方法論です。ユーザーインターフェイスのデザインはグラフィックデザインに近いものですが、若干責任範囲が複雑であるという違いがあります。ユーザーエクスペリエンスの設計は通常、ユーザーインターフェイスのデザインに先行します。UX と UI は、ワイヤーフレームのデザインプロセスと重複して進む傾向にあり、またそうするのがベストでもあります。このプロセスでは以下の点を重視します。

情報アーキテクチャとワイヤーフレーム

ウェブサイト開発とワイヤーフレーム作成全体のプロセスの一部を構成する情報設計 (IA) とは、サイトやモバイルアプリを将来的に利用するユーザーが理解しやすい方法で情報を配置し、優先順位を付けることを指します。情報設計の基本要素には以下の4つがあります。

• 組織スキームと構造 : 情報の分類と構造化
• ラベリングシステム : 情報の表示
• ナビゲーションシステム : 情報間の移動
• 検索システム : 情報の検索と発見

優れた IA は、企業目標に基づき、サイトの構造、コンテンツやデザインスタイルの全体像を描くためのコンテンツ戦略立案を目指した包括的な事業分析に始まります。 これらの分析や戦略が正しいものであることを確認するための最初の重要なステップが、ワイヤーフレームやペーパープロトタイプの作成です。設計の初期段階でユーザーからフィードバックを得て、費用負担の重いサイト公開後の再設計を回避するためには、プロトタイプやワイヤーフレームでテストを行うのが最善の方法です。こうしたテストは、パフォーマンスやユーザー選好度の観点からさまざまなデザインを評価し、全体として優れた製品を生み出す上でも有用です。

ナビゲーションデザインとワイヤーフレーム

ナビゲーションシステムには、ユーザーがページからページへの移動を行うために用いる一連の画面上の要素が含まれます。ナビゲーションのデザインにおいては、ナビゲーションの選択肢をユーザーが自然に理解できるよう、リンク間の関係を明確にすることが肝要です。通常、ウェブサイトでは、グローバル、ローカル、補足、コンテキストや儀礼的ナビゲーションなど、複数のナビゲーションシステムを備えています。 

ユーザーインターフェイスデザインとワイヤーフレーム

UI デザインには、ユーザーによるシステム機能との相互作用を最大限に効率化し、スムーズにするインターフェイス要素の選択と配置プロセスが含まれます。一般的な UI 要素には、ボタン、テキスト入力フィールド、チェックボックス、メニューやラジオボタンなどがあります。

UI ワイヤーフレームツールについてもっと詳しく

ごく単純なもの (モノクロや青写真) から非常に複雑なもの (実物と同等のレベル) まで、ワイヤーフレームには4種類あります。

• 基本的なワイヤーフレーム。

   低忠実度レンダリングとも呼ばれ、通常は白黒で、きわめて単純なページの概要を示します。

• 注釈付きワイヤーフレーム。

   基本的なワイヤーフレームにさまざまな詳細を追加したものです。注釈はワイヤーフレームの側面や下部に付される簡単なメモで、ワイヤーフレーム上の各項目をコンテンツと機能面に区切って説明し、各項目について理由と目的を簡潔に示すものです。

• ユーザーフローワイヤーフレーム。

  注釈ではサイトやアプリのユーザーがページからページへとコンテンツを論理的に移動する方法を示しきれない場合には、情報の追加が必要となることもあります。これらのユーザーフローワイヤーフレームは、完全にインタラクティブなワイヤーフレームを静的なビュー形式として作成するほか、スライドショーやシリーズ化された一連のワイヤーフレームを含めて、主要なユーザーフローや一覧のユーザーフローを示すこともできます。

• インタラクティブで高精細なワイヤーフレーム。

   個別のワイヤーフレーム内やワイヤーフレーム間の相互作用 (タップ、クリックやスワイプ) を体験できるものです。完全なモックアップの作成やプロトタイプの公開前に相互作用を追加することで、設計開発の所要時間を短縮することができます。こうしたワイヤーフレームは、プレゼンやグラフィックデザイン、またソフトウェアのワイヤーフレームやプロトタイプ作成でのみ使われます。

ワイヤーフレームの基本的な構成要素を確認したところで、これらをまとめて簡単なワイヤーフレームを設計し、作成する方法を見ていきましょう。 

1. ウェブサイトの最終的な目標について考え、その目標を念頭において設計を始めます。ユーザーとインターフェイスがどのようにやり取りするかを考えます。

2. ウェブサイトをヘッダー (ユーザーが最初に目にするページ上部のパーツ)、ウェブページ本文、あまり重要でない情報を記載するフッターに三分割した、簡易的で低忠実なレイアウトから始めます。

3. 次に、ナビゲーションについて検討します。ユーザーがコンテンツエリア、検索、ユーザーログインなどのサイトのメインセクションを訪問するためのボタンやリンクを追加します。

4. わかりやすくするため、ワイヤーフレームに注釈を付けます。 

この段階まで来ると、次の手順に進む前にワイヤーフレームを関係者に共有することができます。ワイヤーフレームの作成は、紙やホワイトボードを使った手描きから始めることもできますが、手順4以降はソフトウェアで詳細を作り込むのが一般的でしょう。

オリジナルのワイヤーフレーム作り方についての詳細は、こちらの Lucidchart チュートリアルをチェックしてみましょう。

ウェブサイトやアプリの完成形を頭の中で想像してみることもできますが、最初にワイヤーフレームを作成すれば、実際の構築に入る前に必要な要素を簡単に押さえることができます。ワイヤーフレーム用のソフトウェアやツールの機能を活用すれば、フレキシブルにすばやくデザイン例を作成でき、アイデアを広げ、全体像を掴み、構築プロセスでのミスを避けることができます。テンプレートを活用すれば、アイデアの視覚化、細部の調整や問題の解決なども一段とスムーズです。

ウェブサイトやアプリのワイヤーフレームデザインのためのソフトウェアやツールの利用について詳しく見てみましょう。

 

新しいウェブページやアプリケーションのデザインを始めるには、ワイヤーフレームのテンプレートが欠かせません。オンラインで無料のワイヤーフレームテンプレートを見つけるほか、ソフトウェアの大半に用意されているサイトやアプリの多彩なテンプレートを活用することもできます。以下では、ワイヤーフレーム設計プロセスの理解に役立つ Lucidchart の作業用テンプレートをいくつか紹介しています。

ワイヤーフレームはデザインのプレースホルダーとなるものですが、モックアップは、色、タイポグラフィーやブランド要素など、詳細なビジュアルを盛り込んだものです。 チームのビジョンを記録し、調整するためのツールという意味では、モックアップとワイヤーフレームの性質は近いものですが、ビジュアル面で優れるモックアップは、意思決定者にとってより有用なものです。モックアップとは本質的に、ワイヤーフレームで行ったスケッチに視覚的なニュアンスを加えたものといえます。

 

優れたワイヤーフレームツールを使えば、基本、注釈付き、ユーザーフロー、インタラクティブのどの種類のワイヤーフレームの作成も、すばやく、シンプルになります。ソフトウェア選定の際には、以下の点を考慮しましょう。

• ワイヤーフレームに求める「リアル」度は?

   デザイン機能がきわめて簡単で、手描きのような図が出来上がるものから、完成度の高いユーザーエクスペリエンスとインターフェイスを備えたプロトタイプに近いものが作成できるものまで、ソフトウェアの機能性は千差万別です。最終的な成果物に求める完成度を念頭にソフトウェアを検討しましょう。

• 共有の必要性は?

   さまざまな形式でワイヤーフレームをエクスポートできるソフトウェアもあれば、他のユーザーが図を閲覧するために各自のコンピューターへ製品をインストールする必要があるものもあります。デザインを大勢と共有したい場合には、オンラインやクラウドベースなど、共有することで評価、共同作業、承認を評価しやすいソフトウェアを選ぶべきでしょう。

• 最適なプラットフォームは?

   共有や、さまざまな OS を使うチームでのデザイン機能を重視するユーザーには、オンラインまたはクラウドベースでアクセスできる製品が適しているでしょう。他方で、1台のデバイスで作業をするユーザーや、ローカルストレージでのデザイン作業を希望する企業の場合には、ローカルにインストール可能な製品が向いているといえます。

• オフラインアクセスの必要性は?

   ブラウザーベースの製品は、ブラウザーなしでは利用できず、ローカルでの作業時やインターネット接続がない場合には、デザインを保存できない可能性があります。軽量で、頻繁にアップデートされるという利点の反面、オフラインでのアクセスが難しい欠点もあります。

テンプレートやライブラリを活用すれば、ワイヤーフレームの作成は格段にスムーズになります。モバイルアプリケーションやウェブブラウザーのデザインといった形式のテンプレートを備えたソフトウェアを使えば、作成にかかる時間が大幅に削減できます。種類の異なるワイヤーフレームを大量にデザインする際には特に有用です。また、アイコン、ウィジェットやテーマのライブラリがあるワイヤーフレーム製品も多数あります。

Lucidchart がワイヤーフレーム作成に最適のオンラインアプリである理由

Lucidchart は、エンジニアから作図初心者まで、誰にでもすぐに使えるソフトウェアです。インタラクティブなウェブサイトのデモも、わずか数分で完成! ダウンロードも不要です。ブラウザを使って、クラウド上で堅牢な図を作成することができます。また、さまざまなコンピューターやタブレットで1つのライセンスを利用することが可能です。

• 使いやすさ:

   ドロップダウンメニューやボタンなどの UI で、新しいコンセプトのスケッチや既存のアイデアの改善も思いのまま。ホットスポットを使えば、ページからページへの移動、外部ページへのリンクや動画再生など、ウェブサイトのナビゲーションを再現することもできます。

• 安全性と信頼性:

  Amazon Web Services のエンタープライズレベルのセキュリティプロトコルで、ユーザーの情報をセキュアな状態に保ちます。Lucidchart での作図中は、変更内容が継続的に保存され、データは複数のロケーションに格納されます。接続の問題で最新の下書きが保存されなかった場合にも、通知でお知らせします。

• インタラクティブな要素:

  静的なワイヤーフレームだけでなく、インタラクティブなモックアップも構築してみましょう。クリックボタン、[動画を視聴]、[メニューを表示] など、さまざまなリンクが利用できます。

• 共同作業がスムーズに:

  メンバー全員がプロセスに参加すれば、開発にかかる期間も短縮。顧客、コンテンツプロデューサーやプログラマーと手軽にチャットし、フィードバックを求めることができます。

• 充実した機能:

  インタラクティブなワイヤーフレームでユーザーエクスペリエンスのデモを行えば、クライアントの評価も高まります。デモモードをオンにすれば、アプリやウェブサイトの機能のプロトタイプをデザイナーやクライアントに披露できます。

• 公開と共有:

  ワイヤーフレーム完成後の共有も手軽です。さまざまな画像ファイル形式に保存したり、印刷したり、メールで送信するほか、ソーシャルメディアで公開したり、非公開で共有してフィードバックを募ることもできます。