こんにちは。UIデザイナーのカヒブンです。

ワイヤーフレームは、大きなアイデアを伝えるために使える最もシンプルな形式の一つです。今回の記事では、これまでのワイヤーフレームデザインの経験とネットで見つけたワイヤーフレーム制作に関する注意点をまとめて、ワイヤーフレームとは何か、そしてワイヤーフレーム作成する時のポイントと手順ついて説明したいと思います。

まず、ワイヤーフレームとは？

ワイヤーフレームは、ウェブサイトやデジタル製品の骨組みを表すシンプルなビジュアルガイドです。最終的なデザインの設計図のようなものと考えてください。壁の形は示しますが、壁を作るレンガの種類までは決めません（それは後で決定します）。ワイヤーフレームは主にデザイナーによって作られますが、他のデザイナー、ステークホルダー、開発者、ユーザー全員がアイデアを理解できるように、十分シンプルである必要があります。そして、ワイヤーフレームで決めた内容が、後工程のデザインに大きく影響します。

ワイヤーフレームの種類

従来のデザインプロセスでは、ワイヤーフレームは即興で描かれた手描きのスケッチの後に作成され、最終的には高忠実度のモックアップやプロトタイプへと進みます。ワイヤーフレームには「Low fidelity」と「High fidelity」の2つのレベルがあります。ただし、Low fidelityのワイヤーフレームから直接プロトタイプに進み、High fidelityのワイヤーフレームを省略することも可能です。

Low fidelityのワイヤーフレーム

Low fidelityワイヤーフレームは最も基本的なタイプです。紙とペンでも十分ですが、Figmaでワイヤーフレームを作成することで、簡単に共有でき、チームが最新のアイデアにアクセスできるようになります。Low fidelityワイヤーフレームはグレースケールで作成され、レイアウトや主要なインタラクションに焦点を当てます。UI要素やコンテンツは、四角形、三角形、円、線などの基本形状で表現されます。

Low fidelityのワイヤーフレームでは、基本形状を使ってページの構造やレイアウトを伝えます。

High fidelityのワイヤーフレーム

High fidelityワイヤーフレームは、Low fidelityのワイヤーフレームにさらに詳細な要素を追加したものです。High fidelityワイヤーフレームには、色、グラフィック、フォントスタイルなどのビジュアル要素やブランドのロゴが含まれます。UI要素は現実的に見え、テクスチャや影が含まれることもあります。この段階では、デザイナーが画像やテキストを追加することもあります。 

ワイヤーフレーム作成する時のポイント

ワイヤーフレームに何を含めるか、何を省略するかに厳密なルールはありませんが、作業を最大限に活用するためのポイントがいくつかあると思います。

要素はシンプルに保つ：色はグレースケール（白、黒、およびグレーの範囲）で使用しましょう。

フォントは最大2種類まで：この段階では、フォントを使って情報の階層を伝えます。フォントは2種類までに制限し、サイズを変えたり、太字や斜体を使用して情報の重要性を強調します。

図形でグラフィックや画像を表現する：レイアウトに焦点を当てるために、シンプルな記号を使ってグラフィックや画像の位置を示しましょう。動画の位置は三角形で再生ボタンを示し、画像の位置は四角形や長方形にX印をつけて表します。

ワイヤーフレーム作成する時の手順

STEP1：情報のリストアップと整理
ワイヤーフレーム作成の最初のステップは、ページに含まれる情報をリストアップし、その情報の優先順位とボリュームを整理することです。例えば、求人の詳細ページを作成する場合、求人名、求人詳細、求人写真、求人応募ボタンなどを含めます。リストアップした情報をページの目的に応じて取捨選択し、優先順位を決定します。これにより、重要な情報が上位に配置されるようにします。競合サイトを参考にしたり、クライアントとのヒアリングを通じて優先順位を明確にすることが有効です。

STEP2：レイアウトや仕様を決める
次に、決定した情報の配置方法を具体化します。レイアウトは一般的なパターンから選びます。代表的なレイアウトには、シングルカラム、マルチカラム、グリッド、フルスクリーンがあります。シングルカラムはランディングページやスマホ向けに適しており、マルチカラムはECサイトやニュースサイトでよく使われます。グリッドレイアウトは統一感があり、情報量の多いサイトに向いています。フルスクリーンレイアウトはビジュアル重視のブランドサイトに適しています。

レイアウトだけでなく、仕様についても検討します。たとえば、スライド表示（カルーセル）やアコーディオン、ドロップダウンメニューなど、情報の見せ方も考慮します。

STEP3：ワイヤーフレームを作成する
レイアウトが決まったら、ワイヤーフレームを実際に形にしていきます。この段階では、色やフォントなどのデザイン要素をできるだけ排除します。デザイン要素があると、情報設計に関する議論が妨げられる可能性があるからです。また、ワイヤーフレームはデザイナーへの指示書としても機能するため、シンプルに仕上げることが重要です。

ツールを使う前に、まず手書きでワイヤーフレームを作成すると、心理的な負担が少なく、全体を俯瞰して考えやすくなります。

STEP4：レビューしてもらう
ワイヤーフレームが完成したら、まず自分で確認し、その後チームメンバーにレビューしてもらいます。経験のあるディレクターやデザイナー、エンジニアからフィードバックを受けることで、改善点が明確になります。初心者の場合、まず手書きの下書きを見てもらい、作成後に再度レビューを依頼するのがスムーズです。

最後に

ワイヤーフレームとは何か、そしてワイヤーフレームを作成する時のポイントと手順についてまとめてみました。

最後までお読みいただきありがとうございました！