初心者向け!Webデザインでよく使われる専門用語

 「難しい用語ばかりで何が重要か分からない…」
 「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

 

HerTechといえば、完全初心者でもたった4か月でWebデザインスキルを習得できる女性限定スクールです♪

また、なんといってもオンライン勉強会・チャットサポート・グループコーチングで挫折・不安をゼロにする仕組みがあるので継続して勉強することができます
短期間でWebデザインスキルを学びたい!」「挫折せずスキルを身に着けたい!」方には、HerTechがおすすめです♪

でも、結構高い金額かかるんじゃないの…?
はじめは無料の説明会があるから、自分にあっている内容なのか確認できるから安心だよ!
しかも、60分少人数だから受講内容を詳しく知れるよ♪
ほんと!?
じゃあ、試しにHerTechの無料説明会に参加してようかな!
あと、補足で未経験でも分かりやすいオンライン動画講義と、実践課題があるから着実にスキルアップできるよ♪

 疑問や不安をすべて解消!
HerTech無料説明会を実施中(60分)

WEBCOACH

WEBCOACHといえば、副業・フリーランスを目指す幅広い年代(20代 ~ 40代)の方が学習できるオンラインWebデザインスクールです♪

また、なんとコーチは採用率5%を潜り抜けた現役のフリーランスコーチだから、プロ目線の指導を受けることができます。
質の高いWebデザインスキルを学びたい!」方には、WEBCOACHがおすすめです♪

でも、結構高い金額かかるんじゃないの…?
まずは無料カウンセリングがあるから、学習内容やコースがあっているか確認できるから安心だよ!
ほんと!?
じゃあ試しにWEBCOACHの無料カウンセリングに参加してようかな!
あと、完全マンツーマンで24時間担当コーチに質問をしたり、定期的なコーチングで学習計画やモチベーション管理があるから挫折せず続けられるよ♪

東京デザインプレックス研究所

東京デザインプレックス研究所といえば、2012年1月に開校し、急成長している「プロフェッショナル養成」のためのWebデザインの学校です♪

また、社会人・学生を中心に20代の方に人気で、未経験からキャリアチェンジしたい人におすすめの学校です。
プロのWebデザイナーになりたい!」方には、東京デザインプレックス研究所がおすすめです♪

でも、結構高い金額かかるんじゃないの…?
まずは無料で資料請求できるから、自分の方針にあっている学校なのか確認できるから安心だよ!
ほんと!?
資料請求ならすぐできるね!まずは、東京デザインプレックス研究所の資料請求してみるよ!
あと補足で、次世代のクリエイター/デザイナーに求められる志向性やスキルを学べるプログラムがあるから未経験からキャリアチェンジしたい人にはぴったりだよ♪