ワイヤーフレームは、Webサイトやホームページでのユーザーナビゲーションなどをレイアウトで示す役割を持っています。Webサイトに盛り込むべき要素、ページ内のコンテンツの位置、コンテンツ間の相互作用を決めるための骨組みのようなものと言えるでしょう。ワイヤーフレームを作成することによって、コーディング等の作業前にホームページやサイト全体のイメージを伝えることができる見える化された一種の設計図として、使用することができます。
このガイドでは、ワイヤーフレームの作り方ポイントや Lucidchartで簡単に作成できるワイヤーフレームツールのご紹介と注意しておきたいポイントなどのご説明をしています。
この記事を読むのに必要な時間 : 3 分
LucidchartでWebページの制作に欠かせないワイヤーフレームやモックアップを早速作成しましょう。
押さえたいワイヤーフレームの作り方ポイント
ワイヤーフレームの作成に着手する前に押さえておきたいポイントはいくつかあります。サイトの必要性の特定、ページの各ワイヤーフレームの要素のもつ重要性の評価、さらにこうした要素と訪問者が相互作用する方法などがこれに含まれます。以下では、ワイヤーフレームに関するお役立ちヒントをご紹介しています。
1. 制作者やクライアントとの共通認識
Webサイトを実際にデザインする際には、クライアントの要件を理解することが非常に重要です。ワイヤーフレームの作成前にまずは、主要なプロジェクトメンバーを集めて会議を開き、サイトの全体的なイメージと目標、サイトユーザーに期待する行動を明確にします。強調したいレイアウトやデザインについて話し合い、トラブル無しでワイヤーフレームを作り上げていくことができます。
2. ボタンやCTAのデザインは分かりやすく
注文の送信や支払いの確認などのタスクをウェブサイトで実行する際には、CTAなどをデザインするのが一般的です。ここ覚えておきたいのは、ユーザーが慣れ親しんだ方法でサイトをデザインしていきましょう。また、サイト全体をで同じ形状のCTAをワイヤーフレーム内で表していくことをお勧めします。
3. Webナビゲーションを考慮する
構築するサイトの種類により、数ページから数百ページまで、ページ数に大きな差が出ます。ここで重要なのが、分かりやすい階層を設けることです。例えば、企業ウェブサイトの作成であれば、企業関連の項目を1つのドロップダウンメニューにまとめ、別のメニューに製品関連の要素をまとめます。加えて、ユーザーがサイト全体を移動する経路、深い階層まで辿り着いた後にホームページへ戻る方法などについても検討が必要です。
4. グリッドを設定し、ボックスを使用する
グリッド機能のあるオンラインツールを使うことで、ページ上の項目のバランスが取りやすくなります。グリッドを利用すれば、項目間の間隔を適切に設定しやすくなり、ページ上でどう表示されるかを掴みやすくなります。コピー、画像や広告などのページ要素の表示にはボックスを使います。繰り返しになりますが、ワイヤーフレームはあくまで骨組みです。見た目にこだわる必要はありません。
5. 実際のテキストを追加する
ページのコンテンツを表すのに「lorem ipsum」テキストを用いるデザイナーは多数いますが、ワイヤーフレーム作成時には、実際のコピーを使いましょう。こうすることで、ページ上での既存のコンテンツの見え方を簡単に確認し、割り当てたスペースの調整やテキストのトリミングの要否をチェックすることができます。また、フォントを変えてみて、コピーにどう影響するかを確認してみましょう。
6. 重要な要素を含める
ページに含めるべき主要な構成要素をリストアップします。この内容は、作成するサイトの種類により異なるでしょう。例えば、代金の支払い用ページのワイヤーフレームを作成するの であれば、ユーザーが送信ボタンをクリックする前に入力すべきボックスすべてを含めます。サイトのナビゲーションとユーザーログインエリア、コンテンツ、検索ボックスや企業ロゴを配置する場所も考慮しましょう。
7. ワイヤーフレームを他のユーザーと共有する
ワイヤーフレームの作成が終了したら、同僚や上司にフィードバックを求めましょう。ワイヤーフレームを共有でき、編集/コメント機能のあるオンラインツールを使えば、このプロセスもスムーズです。複数のユーザーがワイヤーフレームを確認しながらオンラインチャットに参加できるオンラインアプリであれば、改訂履歴も追跡しやすく、時短にもつながるでしょう。
ワイヤーフレームの最終版の確定後は、実際の構築に移る前に Illustrator や Photoshop などのアプリを利用してワイヤーフレームをビジュアルに変換することもできます。あるウェブページで事物を表すのに使った要素と同じものを別のウェブページでも必ず使うようにしましょう。優れたユーザーエクスペリエンスの実現には一貫性が大切です。
LucidchartでWebページの制作に欠かせないワイヤーフレームやモックアップを早速作成しましょう。
ワイヤーフレームを作成するLucidchartでのワイヤーフレーム作り方ステップ
以下では、 Lucidchartのワイヤーフレームツール使ったのWebサイト設計図の作成方法を説明しています。Lucidchart にはワイヤーフレームの作成をスムーズにするテンプレートやサンプルが多数揃っており、ユーザーさんのニーズに合わせ、自由にテンプレートを変更することができます。まずは、アカウントへログイン (アカウントをお持ちでない場合は、新規無料登録) し、以下の作成手順に従っていきましょう。
1. ワイヤーフレーム専用テンプレートを検索する
まずは、ワイヤーフレームツール内のエディター内のオレンジ色の「新規」をクリックし、「テンプレートから文書を作成」を選択します。選択した後は、下のセクションにある「ワイヤーフレーム」をクリックします。
2. お好きなワイヤーフレームのテンプレートを選択する
ワイヤーフレームを選択した後は、以下のワイヤーフレームのサンプルが表示されます。このテンプレート一覧よりお好きなサンプルを選択してクリックしましょう。
3. ワイヤーフレームにタイトルを付ける
画面の左上にあるタイトルをダブルクリックして、ワイヤーフレームにタイトルを付けましょう。
4. Webサイト全体イメージのデザインを開始する
ワイヤーフレームのテンプレートにタイトルを付けた後は、ワイヤーフレームに欠かせない要素や図形、アイコン等を図形ライブラリーより追加しましょう。また、図形ライブラリーでワイヤーフレーム専用要素が見つからない場合には、お好みな図形を他のプラットフォームより図形一覧としてアップロードすることも可能です。
5. テンプレート内の要素を編集する
お好きなワイヤーフレームの要素や図形を選択した後は、ダブルクリックで、テンプレート内にある要素や図形、テキストの内容等を編集しましょう。また、アイコンや図形の位置はクリックして、ドラッグするだけで、お好きなポジションに要素を配置していくことができます。
6. ワイヤーフレームをクライアントやメンバーとシェアする
編集後は、完成したワイヤーフレームを、メールやSNS(Facebook、Twitter、Google+ や LinkedIn) 、またはウェブ（Web) サイトやチャットツールへの埋め込みで関係者と共有することができます。画面右上のオレンジの [共有] ボタンをクリックするとポップアップが表示されます。図を共有したい方法を選択し、追加したい関係者のメールアドレス等を入力 するだけで、ファイルのシェアが完了します。
ワイヤーフレームへのリンクをメールで送信して共同編集者を追加すれば、ワイヤーフレームを同時に編集し、チャット機能 (画面右上の黄色の引用符アイコン) を活用してデザインに関する議論も全てLucidchart上で行えます。
世界中で愛用されているおすすめワイヤーフレームツール
すぐに使える Lucidchart のワイヤーフレーム専用テンプレートを編集すれば、ウェブサイトのデザイン制作も、アプリのデザイン開発も簡単にスタートすることができます。Webサイトの制作が初心者の方でも安心して使えるインターフェースで、インストールや無駄な操作無しで業務に必要な書類やデザインが楽々に。作成したワイヤーフレームも自動保存され、インターネット接続環境があればどこからでもアクセスが可能で、クラウド上でそのまま関係者とリアルタイムに同時作業が実 現します。まずは、無料プランで是非ワイヤーフレームやモックアップの作成を試しみましょう。