名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

WEBデザインの制作現場ではデザインに関する様々な用語が使われます。制作現場で働くWEBデザイナーは用語を使ってコミュニケーションを取ることで円滑に制作作業を進めています。今回は、これからWEBの制作現場で働きたいと考えている方や、働き始めて間もないWEBデザイナーの方向けに、実際に現場で使用されているWEBデザイン用語をいくつか紹介します。

WEBデザイン用語

実際に現場で使われているWEBデザインに関する用語を解説とともに紹介します。

トンマナ

トンマナとは「トーン&マナー」の略です。WEBデザイン業界に関わらず、広告業などでも使われるため聞いたことがあるという方も多いのではないでしょうか。トーン(tone)とは「調子」「色調」などを表す言葉です。つまりトンマナとは、調子や色調を揃えるためのルールのことを表します。ホームページで使われる色味やオブジェクトの形状、フォントや余白感がトーンを左右します。WEBデザインでは基本的に、ホームページ全体でデザインの一貫性を保つため、コンテンツごとのトンマナを統一させることが重要であるため、ホームページ制作時にはデザイン着手前に目指すべきトンマナをクライアントやディレクターと握っておく必要があります。

カラム

カラムとは段組みのことです。WordやPowerPointなどでも同じく文字の段組みを変更することがあるので、WEBデザインに携わっていない方でも聞き馴染みのある言葉かもしれません。WEBデザインでは2カラムレイアウトや、3カラムレイアウトなど様々な文字組みのパターンが存在し、それぞれ機能性や印象が変わります。ナビゲーションをカラムを分けて配置することで機能性を持たせたり、文章を読みやすくすることが可能です。

【関連記事】
・WEBデザインレイアウトの種類とそれぞれのメリット・デメリット（https://onca.co.jp/column/column/p7579/）

マージン

WEBデザイン業界におけるマージンとは「余白」を意味します。ホームページ内のコンテンツ間で最適なマージン、つまり余白を付けることで情報を見やすくすることができます。
マージンの空け方はホームページのトンマナに左右されるため、一概にどれだけ余白を空けた方がいいという目安はありません。情報の構造を理解し、最適なマージンを見極めるのにはコツが要るので、デザイン初学者の方は様々なホームページを見ながら勉強するのをおすすめします。

ハンバーガーメニュー

ハンバーガーメニューとは主にスマートフォンやタブレットに対応したホームページで、ナビゲーションを3本線のメニュー内に格納するデザインの一つを言います。「=」のように2本線の場合もあります。その形がハンバーガーのように見えるため「ハンバーガーメニュー」と呼ばれるようになりました。ドロワーメニューと呼ばれることもありますが、ハンバーガーメニューの方が一般的な呼び方となっています。

ファーストビュー

ファーストビューとは、ユーザーがホームページに訪れた際、最初に目に入る領域のことを指します。PCでは、ページの上部から高さ800pxほどがファーストビューの領域と考えるのが一般的です。ただしブラウザによってナビゲーションバーの高さや位置が変わるため、ユーザーの閲覧環境によって変動する点に注意が必要です。ファーストビューはユーザーが最初に見る要素であるため、ユーザーに興味を持ってもらう工夫が必要です。大きなメインビジュアルを配置したり、印象に残るキャッチコピーなどを配置しましょう。

パンくずリスト

パンくずリスト（単にパンくずと呼ぶ場合もある）とは、ホームページの下層ページによく見られるナビゲーションの一つです。サイトのどこに自分がいるのかを視覚的に教えてくれるナビゲーションです。下層ページがいくつもあり階層構造が複雑なホームページで役に立ちます。

【パンくずの例】
トップ　>　ホームページ制作後の運用　>　検索順位を安定的に伸ばす内部SEO対策

今回のまとめ

今回はWEB制作現場で使用される用語をいくつか紹介しました。今回紹介した用語は、これからWEBデザイン業界で働こうとする方や、現場で働き始めて間もないWEBデザイナーにとって必ず役に立つ知識なので是非覚えておくようにしましょう。