ノンデザイナーのためのWebデザイン用語10選！

こんにちは、塩です。
最近定例MTGでデザイン提案をする際に、より伝わる言葉の選定を心がけるようになりました。しかし、専門用語をわかりやすい言葉で言い換えることって意外と難しいなと思うこともしばしば。そこで、今回は初心にかえってみようと思います。

はじめに

言葉を言い換える場合、自身が意味を知らなければ不可能な話です。つまり、言い換えのバリエーションが豊富なことは、仕事において役立つスキルといえます。これはデザイナーのみならずビジネスでも通用すると考えています。

どういう意味？
知りません。
存じ上げません。

例えば、相手から「それ、どういう意味？」と文面で伝えられたとします。これだけだと、相手は内容が分かっていないのか、それとも一体どういうつもりで言っているのだ、と不満を抱いているのか、判別がつかないのです。つまり、相手に正確に伝える場合は、自分が知らないことを伝える必要があります。また、目上の方の場合は「知りません」ではなく、「存じ上げません」の方が適切です。

また、同じことを伝えているのに、ニュアンスが異なる場合や、状況や相手によっても自分の気持ちに応じて表現が変わってくることがあります。

Webデザイン用語

さて、前座はここまでにして、今から本題のデザイン用語について理解しよう！という話にうつります。タイトルがノンデザイナー向けなのは、デザイナー以外の人たちにWebデザイン用語を知ってもらえたら嬉しいなという気持ちで執筆しているからです。
今回は、主に提案時に使われる用語をピックアップして紹介していきます。

メインヴィジュアル

ヒーローイメージ（Hero Image）とも言います。
Webサイトのトップに大きく表示される目を引く画像のことです。
役割としては、最初に訪問者が目にする視覚的要素で、サイトの印象を決定づけるためのイメージになります。この中にメッセージ性やブランド感が伝わるようなキーワードや画像を配置していく感じです。

FV

Webサイトを開いたときに、画面最上部から1080pxまでをFV（ファーストビュー）とすることが多いです。サイトの第一印象を決定づける非常に重要な場所で、キャッチコピーやビジュアル要素など、訪問者の興味を引きつけることが目的です。また、必要に応じて、メインのボタンやリンクが配置されます。

トンマナ

「トーン＆マナー」の略で、デザインや制作物全体の一貫性を保つためのルールやガイドラインを指します。Webサイトや広告、ブランド全体で統一感を持たせるために設定される要素のことです。これにより、見る人に「このブランドだ」とひと目で認識してもらいやすくなります。

• フォント: 使用する文字の種類やサイズのルール。例：タイトル用は太字、本文は読みやすいゴシック体など。

• カラー: メインカラー、アクセントカラー、背景色など、コーポレートカラーを意識した色の組み合わせ。

• ビジュアル: 使用する写真やイラストのスタイル。例えば、リアルな写真中心か、イラスト中心かといった方針。

ナビゲーションバー

Webサイトの上部やサイドに配置されるメニューリストのことを指します。サイト内を効率よく移動できるように、シンプルでわかりやすいデザインを意識しています。

レスポンシブデザイン

デバイスに応じてレイアウトが自動的に調整されるデザイン手法のことです。スマホ、タブレット、PCなど異なる画面サイズで確認した際に、適切な表示になっていることが重要です。

CTA

訪問者に意思決定を示すボタン「CTA（Call to Action）ボタン」やリンクのことです。ユーザーに行動を促すように、デザインすることでコンバージョン率を上げるなど、目的達成に繋げることを意図しています。

ジャンプ率

ジャンプ率は、本文の文字サイズに対する見出しなどの文字サイズの比率を指します。簡単に言えば、見出しの大きさが本文に対してどれくらい目立っているかを示す尺度です。この比率が高いほど、テキスト内にメリハリがつき、ユーザーに重要なポイントをみせることができます。
デザイナーから「ジャンプ率を上げました」と伝えられた場合、「文字の大きさを大きくしました」と同義になります。

モーダルウィンドウ

モーダルウィンドウは、ユーザーが現在表示している画面の上にオーバーレイとして現れる小さなウィンドウです。このウィンドウが表示されると、ユーザーがモーダルウィンドウを閉じるまで、元のページやコンテンツは一時的に操作できなくなります。

アコーディオン

アコーディオンは、ユーザーがクリックやタップで、隠れているコンテンツを展開（表示）したり、逆に表示されているコンテンツを閉じる(非表示)にするインタラクティブなUI要素の1つです。長いテキストや多数の項目をコンパクトにまとめることができ、必要に応じて表示・非表示を切り替えることができます。情報を圧縮して表示することで、ユーザーが興味を持ったときのみ内容を展開できるため、Webページをすっきりさせたい場合に有効です。

おわりに

今回は10選に絞って執筆しましたが、この世にWebデザイン用語はたくさんあります。自分が知らないことを知らないままで終わらせずに、理解していくのは、他部署同士のコミュニケーション円滑にも繋がります。
これは自分にも言えることで、自分が普段使わないシステム開発の用語なども理解していく必要があると考えています。

この記事を読んだ方に少しでもデザインに役立つ情報をお届けできていたら幸いです。ここまでお読みいただきありがとうございました！