一言でいうと
ワイヤーフレームは、ウェブサイトやアプリを作る前に、「どこに何を配置するか」をシンプルな図で表したものです。
もう少し詳しく
ワイヤーフレームは、建物の設計図のようなイメージです。実際の家を建てる前に、どこにドアをつけるか、窓をどこに配置するかを線だけで表した図を描きますよね。ウェブサイトやアプリも同じで、実際にデザインやプログラミングを始める前に、ページレイアウトの大まかな構成を図で表します。
具体例としては、ショッピングサイトの場合、「一番上にロゴとメニューボタン」「中央に商品画像」「右側に説明文」という配置を、実際の色やデザインなしに、シンプルな四角や線で描くイメージです。
よく使われる場面
ワイヤーフレームは、ウェブデザインやアプリ開発の初期段階で活躍します。クライアントとの打ち合わせで「こんな感じのレイアウトにしたいのですが」と確認するために使われたり、デザイナーとエンジニアが情報を共有する際に使われたりします。色やデザインの細かい部分は後から調整するため、まずは構成を確認するために便利です。
関連する言葉
- プロトタイプ：ワイヤーフレームよりも詳しく、実際に動かせるように作ったもの
- モックアップ：デザインや色を含めて、より完成に近い形で表したもの
- レイアウト：ページ上での配置のこと