Webデザイナーとスムーズにコミュニケーションを取るために押さえておきたい！デザイン制作の用語まとめ

Webサイトや広告クリエイティブなど、社外向けの発信をする上でWebデザイナーに制作を依頼することもあるかと思います。

どの職種にも専門用語があるように、デザイン制作の現場でもたくさんの用語が飛び交います。曖昧なまま進めてしまったり、突然言われて慌てて調べたりした経験がある方も多いのではないでしょうか。

そこで今回は、Webデザイナーとスムーズにコミュニケーションを取るために、デザイン制作の現場でよく使われる用語について解説します。

なぜ他業種の用語を覚えるのか？

デザイン制作に関する用語を覚えることがなぜ大切なのか、前置きとして語らせてください。デザイナーと関わる立場の人が、専門用語を覚えた方がいい理由は、大きく2つあります。

1．スムーズで正確なコミュニケーションがプロジェクトの成否にも関わってくるから

どんなビジネスでもスピードは大切です。依頼主とデザイナーがスムーズに連携できるかどうかは、プロジェクトの成否に影響すると言ってもよいでしょう。目的を果たせないデザインになってしまったり、意思疎通が取れないことで必要以上のリソースがかかってしまうのも避けたいところです。

2．調べ物や相談が効率的にできるから

デザイン制作に限らず、どんな業種にも説明が難しい複雑な概念がありますよね。それらを短い言葉で表現できる適切な言葉を知っていれば、調べ物をしたり人に相談するときにも、早く答えにたどり着けるでしょう。

制作の進行に関する用語

まずは制作の進行でよく使われる用語を紹介します。それぞれの言葉がどの程度の完成度を意味するのか、共通認識を持つことが大切です。

ラフ

デザインの初期段階で、コンセプトや要件を基にざっくりとビジュアル化したものを指します。「ラフスケッチ」「ラフデザイン」「ラフ案」「ラフ画」のように呼ぶこともあります。

バナー広告でもWebサイトでも、デザイン制作に関するものであれば大抵はラフの作成からスタートします。

バナー広告のラフの例。字や絵は上手でなくても問題ありません。

ラフは具体的なデザインやレイアウトを決定する前に、方向性をすり合わせたり整理する目的で制作します。手描きでも、デジタルでも（PowerPointなどでもOKです）作りやすいもので構いません。

ラフの段階で細かな作り込みに時間をかけず、以下のようなことをおおまかに整理、共有できれば十分です。

テキストと写真・イラストなど情報の配置バランス
面積に対して盛り込む情報量が多すぎたり、少なすぎたりしないか
情報に過不足が無いか

ラフがあることで最小限の工数で制作物のゴールの認識合わせができ、修正などを減らすことができます。

ワイヤーフレーム

Webサイトやアプリの制作で、レイアウトを定める設計図のようなものです。ビジュアル的な表現は最小限に留めて、簡単な線描画で表現することが多いです。コンテンツやボタンなどの配置を示し、ページ全体の構造を明確にするために用いられます。

筆者の経験上ではありますが、「ワイヤーフレーム」がどこまでの完成度を指すものか、認識の齟齬が起こりやすい言葉です。例えば、後に紹介する”モックアップ”のことを”ワイヤーフレーム”と認識している方もいらっしゃいます。この認識のズレはプロジェクトの進行管理において致命的なので、初めてやり取りをする相手とはワイヤーフレームの具体例を添えながら、スケジュールのすり合わせを行うことをお勧めします。

なお、ワイヤーフレームは基本的にWebページ制作のために作成するものなので、バナー制作においては登場することはありません。

ワイヤーフレームの段階で細かい見栄えを整える必要はなく、必ずしもデザイナーが制作する必要はありません。専門のツールなども必要ないので、下記の記事を参考にアイデアをカタチにすることに挑戦してみてください。

【ノンデザイナー向け】ランディングページを提案したいときに読みたい、ワイヤーフレーム作成の３STEP

カンプ / モックアップ

Webサイトやアプリの見た目を共有する完成図を指します。ワイヤーフレームを基に、デザインの配色、フォントなどの詳細も具体的に整えた状態のものを指します。実際に表示して閲覧するイメージをつかむことができるため、最終調整の段階で活用します。

カンプ、モックアップはそれぞれ同じ意味で使われます。似た言葉に「プロトタイプ」というものがありますが、これは見た目を表すカンプ、モックアップに対し、機能性を実装したものを指します。これらも曖昧になりやすい言葉なので、不安があれば認識を合わせておきましょう。

トンマナ

「トーン＆マナー」の略で、デザインの雰囲気や統一感を指します。ビジュアル表現という100％の言語化が難しいものに対して「こういう感じ」の認識を合わせるためのルールのようなものです。企業やブランドによっては、使用するフォントや色のバランスなどをルールとして設けているケースもあります。

たとえばフィットネスクラブの広告で「初心者歓迎」「入会費無料」など、ハードルの低さをアピールしたいとします。下図の左の例は、メッセージとビジュアル・言葉選びに一貫性がなく、違和感がありますよね。対して右側は、初心者でも親しみが持てるよう、フォントや写真素材の選び方に一貫性があります。これがトンマナが合っているということです。

参考：運用型広告で利用するバナー作成の依頼時に役立つトンマナについて

運用型広告で利用するバナー作成の依頼時に役立つトンマナについて

ムードボード

デザインのコンセプトやイメージを表現するために、色彩やフォント、画像などを組み合わせたイメージボードのことを指します。トンマナよりもさらに抽象的な段階のもので、デザインの方向性をすり合わせるために共有します。

ムードボードには決まったお作法などはなく、自由帳のようにイメージに近い画像やメモを貼り付けて作成します。PinterestやWebデザインのアーカイブサイトなどを活用しながら、イメージに近いものを集めていきましょう。NG要素や避けたい要素も含めるのも効果的です。

例えば、女性向けのフィットネスクラブのデザインを検討するとき、以下のようなスライドが1枚あるだけでも方向性の共有や言語化の助けになりますよね。

シンプル、スタイリッシュ、かっこよく、可愛く……のような言葉は、人によって捉え方が曖昧かつ様々です。頭の中には大まかなイメージがあるけど言語化できない場面や、言語化してみたものの言葉だけでは同じイメージを持てているか不安なときに、ムードボードを活用してみましょう。「そうそう、こんな感じです！」「うーん、もうちょっと○○なイメージでした！」のような一歩踏み込んだコミュニケーションが生まれます。

ムードボードの共有は、ヒアリングの初期段階や、ワイヤーフレームからモックアップの制作に進める段階で役立ちます。事前にすり合わせることで、制作後に「なんかイメージと違う」となるリスクを軽減できます。

コーディング

カンプ、モックアップを元に、実際にWeb上で閲覧できるためにコードを書く工程・作業を指します。HTMLやCSS、JavaScriptなどのプログラミング言語を用います。

コーディングが完了した後にデザインに変更が発生すると、複数の工程をやり直すことになり、大幅なスケジュール遅延や追加料金が発生することもあります。コーディングまで進める際は、スケジュール内でのデザイン変更は出来なくなるつもりでGOサインを出しましょう。「実際にブラウザで確認できるようになったら細かく見ればいいや」のようなスタンスは事故の元ですから、厳禁です。

マークアップ

Webページの表示内容をHTMLで記述する作業工程そのものや、文書の構造化のことを指します。文書の構造化がどういうことか説明しますと、たとえば以下のような文書を見た時、文字の大きさなどの書式や記載されている順序などから文書の構造を把握することができますよね。

しかし検索エンジンのクローラーなどコンピューターからすると、基本的にはどれも等しく文字列なので、人間と同じように汲み取ってくれるとは限りません。

そこで、「これが見出しですよ」「ここは箇条書きですよ」「これはただの挿絵ですよ」などのように、文書のそれぞれの役割をコンピューター向けに明示するのがマークアップです。

例えばページ内で最も大きな（重要な）見出しは<h1>、段落1つ1つは<p>のように表記します。これらの表記のことを「タグ」や「要素」と呼び、要素の範囲を示すために開始時と終了時にそれぞれ開始用のタグと終了用のタグを表記します。

Webサイト構築に関する用語

ここでは、Webサイトに関する概念や、特定の部位を示す用語を解説します。これらの用語を知ることで、サイトやページのどの部分に対して言及しているのか、スムーズに意思疎通が取れるようになります。

レスポンシブデザイン

Webページの閲覧端末・ブラウザ画面の横幅に応じて、自動的にレイアウトやコンテンツといった表示内容を変化させるデザイン手法のことを指します。レスポンシブデザインを用いることで、パソコンやスマートフォン、タブレット端末など、さまざまなデバイスでの閲覧に最適化した見せ方に1つのページで対応することができます。

広告運用の「レスポンシブ広告」は様々なアセットを自動的に組み合わせるものを指しますが、意味が全く違うため混同しないよう注意が必要です。

ブレイクポイント

レスポンシブデザインに関する用語で、画面幅に応じて表示内容を変更するとき、具体的に画面幅がどのサイズになったら変化させるのか指定するものです。

例えばパソコン、スマートフォン、タブレットの3種類に最適化させたい場合は以下のようにブレイクポイントを設定します。「パソコン」「スマートフォン」のように端末の種類で区別するのではなく、画面の横幅の大きさで区別しています。

パソコン：画面幅が1200pxより大きい場合
タブレット：画面幅が501px～1199pxの場合
スマートフォン：画面幅が500px以下の場合

それぞれの幅の数値はあくまで一例です。ブレイクポイントをどこに設けるかはデザイナー同士でもよく議論になったり、悩んだりします。マーケティング的な観点で決めるとすれば、実際にGoogle アナリティクスで割合の多い画面幅を確認したり、シェア率の高い端末を基準にするのも良いでしょう。

ブレイクポイントは増やそうと思えばいくらでも増やすことが出来ますが、増やすほど構築が複雑になって保守性が下がったり、思わぬレイアウトの崩壊を起こす原因になります。全ての端末や画面サイズで完璧を目指すのではなく、ターゲットとなるユーザーの閲覧環境に応じてどの程度までブレイクポイントを細かく設定していくか決めていきましょう。ワイヤーフレームやモックアップを作成するよりも前の段階でブレイクポイントの数を決めておくのが理想です。

多くの場合はパソコン用、タブレットとスマートフォン用は共通で合わせて2種類、多くてもタブレットとスマートフォンを分けて3種類程度で十分です。

また、アクセス解析ツールで9割以上がモバイルのクリックであることが分かっている場合などはパソコン向けのサイズは用意せず、浮いたリソースの分を改善サイクルの高速化に充てるのも良いでしょう。

ファーストビュー

Webページにランディングしたとき、スクロールせずに表示される範囲のことを指します。Webサイトの印象はもちろん広告などプロモーションの効果を大きく左右するため、優先的にテストしていきたい部分です。

略称として「FV」と表記する場合もあります。

キービジュアル / ヒーローイメージ

Webページのトップに大きく配置される目立つ画像のことを指します。サイトの雰囲気やコンセプトを表現し、視覚的な印象を決定づけます。略して「キービジュ」「KV」や「ヒーロー」などと呼ばれることもあります。

言葉にするとファーストビューと混同しやすいですが、以下のように使い分けます。

ヘッダー

Webページの上部に表示される、タイトルやロゴ、ナビゲーションなどの情報をまとめた部分のことを指します。

マーケターの視点だと混乱しやすいのですが、Googleタグマネージャや広告媒体のトラッキングコードを設置するときによく「head内に設置」のような指示を見かけると思います。ここでいう「head」というのはデザイン上のヘッダーのことではなく、HTML内でWebサイトの様々な設定を記載する部分のことを指しています。head要素はブラウザでは表示されない部分なので、目には見えません。

グローバルナビ

Webサイト全体のメニューをまとめたナビゲーションのことを指します。サイト内を簡単に移動することができ、ユーザーの利便性を高めます。「グロナビ」などと略すこともあります。

フッター

Webページの下部に表示される、各種コンテンツへのナビゲーションやコピーライト、連絡先などの情報をまとめた部分のことを指します。

ファビコン

ブラウザのタブや検索エンジンの検索結果ページなどに表示される、小さなアイコンを指します。

OGP

「Open Graph Protocol」の略称で、SNSやチャットツールなどでページがシェアされた時に表示されるタイトルや説明文、アイキャッチ画像などを指定することができます。

内容を検索エンジンやブラウザに表示させるためのものと区別することが可能です。場合によっては同じページでも検索エンジン用とSNS用で違う内容に設定しても良いでしょう。

画像データに関する用語

画像ファイルは、デザイン制作の業務はもちろん、Webブラウジングをする1人のエンドユーザーとしても何かと接点が多いですよね。視覚的には同じ「画像」ではありますが、様々な種類があり、適切に使い分けることは運用型広告のパフォーマンスにも影響を与えます。

また、デザイナーやクライアントとファイルの受け渡しをする機会も多く、デザイナーでなければ馴染みのないファイル形式をやり取りすることもあるでしょう。頻出するものをまとめるので、これだけでも覚えておけばいざという時も安心です。

ラスター

画像をピクセル（粒）単位で構成し、保存する方式のことを指します。写真など、複雑な色彩やグラデーションの表現に優れています。一方、画像を拡大した場合に画質が低下したり、一度縮小した画像を同じ大きさに戻せないという点には注意が必要です。

そのため、提供してもらった写真素材が要件より小さかった場合、拡大加工して使用することは現実的ではありません。

ベクター

画像を数式や点、線、曲線などの数値データとして保存する方式のことを指します。拡大・縮小しても画質が劣化しないという利点があり、ロゴやアイコンなど、線や曲線で構成されたイラストなどに適しています。

ベクター形式のデータがあれば、拡大加工して使用することができます。現場でよくあるシーンだと、提供してもらったロゴデータが要件より小さかった場合に「ベクター形式のデータはありませんか？」のようなやり取りになります。

参考：クリエイティブ発注がもっとスムーズに！広告運用者がおさえておきたい素材選びや依頼のポイント

クリエイティブ発注がもっとスムーズに！広告運用者がおさえておきたい素材選びや依頼のポイント

JPG（JPEG）、PNG、GIF

Webサイトで利用される画像ファイルの代表的なフォーマットです。JPGは写真など、カラフルで複雑な画像に適しており、PNGは透過性を持たせたい場合やシンプルなイラストなどに適しています。GIFはアニメーション表示が可能です。なおJPGとJPEGは同じ意味です。

同じ画像でも、「シンプルなイラストならPNGが最適」のようにフォーマットごとの向き不向きがあります。これらの組み合わせが不適当だと、画質の劣化やファイルサイズの肥大化が起こるので、閲覧体験の悪化や読み込みスピードの遅延の原因になり、結果的に広告のパフォーマンスに悪影響を与えます。以下の表やフローチャートを参考に、適切なフォーマットを選択してください。

参考：JPEG・PNG・GIFの違いとは？広告運用者も知っておきたい、最適な画像ファイル形式の選び方

JPEG・PNG・GIFの違いとは？広告運用者も知っておきたい、最適な画像ファイル形式の選び方

SVG

Scalable Vector Graphicsの略で、その名のとおりScalable（拡大縮小が可能）なベクター形式のグラフィックデータです。データはテキスト形式で作られており、画像よりも軽量であることが特徴です。また、テキストの内容次第で色や形に変化をつけることも可能です。

Webサイトではこれらの特徴を活かして、ロゴやアイコン、グラフなどの描画に使用されることが多いです。

WebP

WebP（ウェッピー）は「次世代画像フォーマット」と呼ばれる画像形式のひとつで、Googleが開発したWebページに最適化された画像ファイルフォーマットです。JPGやPNGに比べて、高画質かつ軽量なのが特徴です。高機能なので使わない理由がないように思えますが、次世代画像フォーマットはサポートしているブラウザが限定的であることが弱点です。

次世代画像フォーマットの中ではWebPは機能面・対応範囲ともに広く、mac版safariもmacOS 11 Big SurからWebPをサポートするようになったため、今後の普及に期待できます。

なおInternet ExplorerはWebPをサポートしていない点には注意が必要です。古いブラウザですが、シルバー層など特定のセグメントが利用していることがあります。次世代画像フォーマットを導入する際は、実際にGoogle アナリティクスでサポート外のブラウザからのアクセスがどの程度あるのか確認しておくと安心です。

元データ

制作業務そのものに使用する、編集可能な状態のデータを指します。入稿に使用するものは元データではなく書き出した状態のものなので、直接編集することはできません。（加工自体は可能ですが、上から色を塗りつぶす程度のことしかできません）

納品後に変更が生じた時に元データがあればスムーズに対応ができますが、元データが無い場合はゼロから作り直しが必要なこともあります。外部デザイナーからの納品物には基本的に元データは含めないのが一般的なので、元データの提供を希望する場合は早い段階で伝えることをお勧めします。（元データの共有について、ほとんどの場合は別料金もしくは提供不可なので注意しましょう）

元データを開くには、それぞれの制作に使用したソフトが必要です。ソフトによって拡張子が異なります。以下が代表的です。

psd・・・Adobe Photoshopのデータ
ai・・・Adobe Illustratorのデータ
xd・・・Adobe XDのデータ

なおCanvaやFigmaといったブラウザ上で制作する形式のツールの場合、元データは存在せず、編集する際は編集ページにアクセスする必要があります。

※Figmaはデータのエクスポート・インポートが可能です。

※Canvaもpsdやaiファイルをサポートしています。2023年4月現在はまだベータ版で、実際に試してみたところまだ実用レベルとは言い難い状態ではありましたが、今後の進化に期待しましょう。

参考：Adobe IllustratorまたはPhotoshopファイルのインポート

ロゴに関する用語

バナー制作にはロゴが付き物なので、ロゴに関するやり取りをすることもあるでしょう。ロゴは場所によって名称がついているので、細かな調整のときに名称を知っていると便利です。

シンボル

企業やブランドを表すマークのことを指します。文字を使用しない場合でも、このシンボルだけで企業やブランドが認知されることがあります。たとえばマクドナルドやAppleなどは分かりやすく、有名ですよね。

ロゴタイプ

ロゴのうち、企業名やブランド名を表す文字の部分を指します。ロゴタイプのみで構成されたロゴもあります。

タグライン

企業やブランドのコンセプトやメッセージを表す、短いフレーズのことを指します。タグラインが含まれるロゴをバナーなどに掲載する場合は、実際の表示サイズになったときに文字が小さすぎて読めない状態になっていないか注意が必要です。

※アナグラムのロゴにはタグラインはありませんが、説明用のサンプルとして掲載しています

アイソレーション

ロゴの周辺に設ける余白のことです。多くの場合はロゴの一部を基準として、基準とする部分の指定の割合を余白として指定します。大抵はガイドラインにアイソレーションに関する記載があります。必要な余白のサイズはロゴによって異なるため、ロゴを取り扱う際はデザイナーにガイドラインを渡すなどして連携すると良いでしょう。

バナーでいうと、隅っこに配置してしまったり、ロゴのすぐ近くにキャッチコピーを配置してしまうのはお作法としてはNGです。