「難しい用語ばかりで何が重要か分からない…」
「WEBデザインで使われる基本的な用語を知っておきたい…」
「よく使われる言葉だけでも覚えておきたい」
このように思われている方は多くいると思います。
この記事では、WEBデザイン初心者の方向けに、覚えておいたほうがよい専門用語をまとめてみました！
WEB業界や、WEBデザイン初心者の方に是非覚えておいてほしい言葉をピックアップしていますので、是非チェックしてみてください！
デザイン全般の用語
ウェブページのレイアウト
ウェブページ上の各要素（テキスト、画像、ボタンなど）の配置方法です。レイアウトは、ユーザーの使いやすさ、見やすさに大きく影響します。
レスポンシブデザイン
デバイスのスクリーンサイズに合わせてウェブサイトのレイアウトが自動的に調整されるデザイン手法です。レスポンスデザイン設定をすることで、PCからスマホまで様々なデバイスにあったサイズでの表示ができるようになります。
UI(ユーザーインターフェース)
ユーザーとサービスとのインターフェース（接点）すべてのことを意味します。
WEBサイトやアプリの見やすさ、操作のしやすさのことをいいます。
UX(ユーザーエクスペリエンス)
ユーザーが商品やサービスを通じて得る体験のことをいいます。「ほしい商品がすぐ見つかる」「シンプルなデザインで分かりやすい」など、良いUXはユーザーが目的を達成するのに必要な手間を減らし、満足感を与えることができます。
SEO(検索エンジン最適化)
ウェブサイトが検索エンジンで上位に表示されるように、ウェブサイトを最適化することをさします。上位に表示されるように、キーワードの設定、タグの最適化、コンテンツの作成などが行われます。
ペルソナ
ターゲットユーザーの具体像です。具体的な年齢、性別、趣味、行動パターンなどを設定し、ユーザーのニーズや問題点を理解するのに役立ちます。
デザインに関する専門用語
アイコン
特定の機能やコンテンツをデザインした小さな図形やシンボルです。
ユーザーが直感的に理解でき、操作を簡単にするために使用されます。
カラーパレット
デザインに使われる配色のことです。ブランドイメージを強化し、視覚的な一貫性を保つために使用する色のセットになります。
配色の基本は、ベースカラー、メインカラー、アクセントカラーを組み合わせた3色です。
フォント
文字の書体のことです。フォントの種類はゴシック体、明朝体、筆書体など種類があり、コンセプトに合わせた設定をします。
RGB
コンピュータで使用されるカラーモデルです。
RGBは赤、緑、青の3色の組み合わせで色を表現します。
CMYK
チラシやカタログ、ポスターなど印刷されたものは一般的にCMYKで再現されています。CMYKはシアン、マゼンタ、イエロー、ブラックの4色の組み合わせで色を表現します。
セレクタ
HTMLやCSSで特定の要素を指定するための識別子です。クラスやIDなどを指定することで、特定の要素にスタイルを適用することができます。
ページ構造に関する専門用語
ドメイン
ドメインはWEBサイトの住所のことです。インターネット上でウェブサイトを判別するためのインターネット上の住所にあたります。
CMS
ウェブサイト上のコンテンツを管理、作成、編集、公開するためのソフトウェアまたはプラットフォームのことを指します。
CMS を使用すると、プログラミングの知識がなくても WEB サイトを更新できます。
ヘッダー
ヘッダーは、ウェブサイトのデザインや機能性において重要な役割を果たします。
ページの上部に位置し、通常はロゴ、サイト名、ナビゲーションメニューなどが含まれる箇所を指します。
フッター
ページの下部に位置し、通常はコピーライト情報、プライバシーポリシーのリンク、連絡先情報などが表示される箇所を指します。
ナビゲーションバー
ウェブサイト上に配置されるメニューバーのことを指します。ナビゲーションバーは基本的に、ウェブサイトの主要なページへのリンクを設定し、ユーザーがサイト内で必要な情報を簡単に見つけられる手助けをします。
ユーザビリティ
ユーザビリティとは、ウェブサイトやアプリを使用する際に、ユーザーにとってどれだけ使いやすいか、または理解しやすいかを指す専門用語です。ユーザビリティは設計において重要な要素で、ユーザーが目的を達成するための労力を最小限に抑えることを目指します。
ワイヤーフレーム
ワイヤーフレームとは、ウェブページやアプリの設計初期段階で使用される、画面のレイアウトを描いた基本的なスケッチのことを指します。ワイヤーフレームはページの主要なコンポーネントの配置や、それらの要素が相互にどのように関連するかを示します。
メディアクエリ
メディアクエリとは、CSSの機能で、特定の条件（例えばスクリーンの幅や高さなど）に基づいてスタイルを適用するためのものです。
メディアクエリは主にレスポンシブウェブデザインで使用されます。メディアクエリを使用することで、デバイスのスクリーンサイズに応じて異なるスタイルを適用することができます。
モバイルファーストデザイン
モバイルファーストデザインとは、モバイル端末を最初に考慮してデザインするアプローチです。デザインプロセスをモバイルデバイス（スマホやタブレットなど）から始め、それを基にしてデスクトップや他のデバイスのデザインを展開する手法を指します。
スマホやタブレットでの利用者が増えている現在、このアプローチが重要となっています。
HTML/CSS/Javascriptの用語
HTML
HTMLは「Hyper Text Markup Language」の略で、Webページの骨格となる構造や基本的な情報を記述するための言語です。
HTMLはウェブページの構造を定義し、テキスト、画像、ビデオ、リンクなどコンテンツをウェブページ上に配置します。
HTMLのコードは一連のタグ（または要素）で構成されており、ページ上の特定の部分がどのような種類のコンテンツを含んでいるかをブラウザに伝えます。
CSS
CSS（Cascading Style Sheets）とは、ウェブページの見た目（色、フォント）やレイアウトを設定するためのスタイルシート言語です。HTMLがウェブページの構造を定義するのに対し、CSSはそのデザインやスタイルを定義します。
CSSを利用することで、テキストの色やフォント、要素の配置、背景画像、アニメーション効果など、ウェブページのさまざまな視覚的要素を細かく制御することができます。
タグ
タグ（Tag）は、HTML文書内で要素を定義するための特殊な記号で囲まれたテキストです。HTML文書では、タグが要素の開始と終了を示し、その間にコンテンツが配置されます。タグは文書の構造を定義し、ブラウザに対してコンテンツの表示方法を指示します。
タグは”<>”で囲まれ、要素の開始と終了を示します（例：<h1>、<p>など）。
クラス
クラス（Class）は、HTMLのマークアップ言語です。クラスは、要素に対して特定の名前を割り当てることで、その要素をグループ化したり、スタイルや動作を適用するための手段となります。
HTMLにおいて、クラスは要素にclass属性を追加することで指定されます。class属性の値は、半角スペースで区切られた複数の名前を持つことができます。各名前は任意の文字列で構成され、要素に関連付けられたクラス名として機能します。
Javascript
JavaScript（JS）は、ウェブページに対して動的な要素を追加するためのプログラミング言語です。
HTMLがページの構造を、CSSがページの見た目をそれぞれ定義するのに対してJavaScriptはウェブページに対するユーザーのインタラクション（クリック、スクロール、フォームへの入力など）に応じてページの内容を動的に変更するのに使われます。
まとめ
こちらの記事では、WEBデザイン初心者向けにウェブデザインに関する基本的な専門用語をわかりやすく解説しました。
デザイン全般の用語からHTML/CSS/Javascriptの用語まで、基本となる用語がほとんどなので覚えておくとよいでしょう！
HerTech
