この記事の目的
Webの世界は日進月歩で進化していて、便利で新しい技術がどんどん登場しています。
その進化に伴い、新たな用語も年々増えています。
私たちが提供する「ホームページ制作サービス」の観点から専門用語を抜粋して分かりやすくお伝えします。
この記事の対象読者
Web制作を始めたばかりの人。
Webデザインを行なっているが、言葉の定義を再確認したい人。
自社でWeb担当を任されたが専門用語についていろいろ知りたい人。
など、Webに限らずDXに携わるすべての方に。
ワイヤーフレームとは
画面設計図とも呼ばれ、ホームページ内の構成要素をレイアウト・定義するものです。
文字通り、ワイヤーは「線」、フレームは「枠」という意味です。各ページにどのようなコンテンツを設置するか、サイトの完成イメージをシンプルな線と枠で表現する設計図のことになります。クライアントの目的やサイトコンセプトなどに基づいて作成します。
ワイヤーフレームとはそもそも画面レイアウトおよび構成する要素を定義する工程ですが、レイアウトや文字の装飾など一部デザイン工程を含む場合もあります。
そのため要素のみ確認すればよいのか、レイアウトを確認すればよいのか、使用されている写真、テキストなどの素材まで確認すべきなのかといった、ワイヤーフレーム時点で定義しておくレベルのすり合わせが必要です。
類似して使われる言葉
「デザインカンプ」
デザインカンプはWebサイトの細かい部分まで確認するためのデザイン案、完成イメージのことです。最終的な外観を正確に示し、ビジュアルデザインの確認に使われます。
また、ワイヤーフレームではわからないデザイン上の問題点を見つけることができる場合があります。
「モックアップ」
モックアップはwebサイト制作の用語として、「デザインカンプ」とたいてい共通の意味で使われます。
もともとはプロダクトデザインで使われていた用語で、実物大の模型や試作品を意味しています。模型という言葉から派生して、webサイト制作の現場では、完成イメージを表す言葉として使われています。
ワイヤーフレーム作成の注意点
詳細な画面表示を決める前に作成するので、ワイヤーフレームの作成段階では大きな仕様変更も可能です。
シンプルなページの中にテキストや画像などの要素を効果的に配置し、目的を達成するための構成を視覚的に表現しています。
本来、ワイヤーフレームにはビジュアル的な要素は含まず、骨組みの状態です。サイトのタイプや役割によって、必要なパーツの配置や機能、コンセプトについて確認し、全体的なイメージと方向性を可視化します。
ユーザーの視点を意識した設計図作りを
人の目線の動きには決まった法則があります。紙媒体とWebの画面では視線誘導の法則が異なり、紙媒体では「Zの法則」と呼び、Webでは「Fの法則」と呼ばれます。
ユーザーの目線は、まずは左上のロゴ部分からヘッダーが目に入り、グローバルナビゲーション（メニュー）、コンテンツ、記事と読み進めていくような移動です。
事実ほとんどのWebサイトでは、左上に企業ロゴを配置するレイアウトをしています。
最もユーザーに伝えたい内容を左側や中央に配置することで、効果的な訴求が期待できます。
