「専門用語がよくわからない…」
「WEBデザインをしたい、知識を深めるために用語を覚えたい…」
「デザインに興味があるけど難しくてよくわからない…」
こんなお悩みございませんか？
WEBデザインに興味を持っている方々必見！
この記事では、WEBデザインの基本用語とデザインの要素についてご紹介します。デザインの世界は広大で多岐にわたりますが、基本的な用語を理解することで、より深いデザインの理解に繋がります。
是非チェックしてみてください！
WEBデザインの専門用語をわかりやすく解説！
HTMLとCSSの基本
HTML（Hypertext Markup Language）の基本用語
HTMLタグ
HTML文書内において要素を定義するためのマークアップ言語。例えば、<p>は段落を表し、<h1>から<h6>は見出しを表します。
属性
タグに追加され、その要素に対する追加情報を提供します。例えば、<a href=”https://example.com”>でhrefはハイパーリンクのURLを指定します。
ブロック要素とインライン要素
ブロック要素は新しい行で表示され、親要素の幅いっぱいを占めます（例: <div>, <p>）。インライン要素は新しい行で始まらず、内容の幅だけを占めます（例: <span>, <a>）。
CSSの基本用語
セレクタ
スタイルを適用する要素を指定するためのパターンです。例えば、h1はすべての<h1>要素を選択します。
プロパティ
スタイルの属性を指定します。例えば、colorはテキストの色を指定し、font-sizeはフォントのサイズを指定します。
値
プロパティに適用される具体的なスタイルの値です。例えば、color: blue;でblueが値となります。
クラスとID
HTML要素に対して特定のスタイルを適用するための識別子です。クラスは.（ピリオド）で始まり、IDは#（ハッシュ）で始まります。
<!– クラスの例 –>
<p class=”highlight”>This is a highlighted paragraph.</p>
<!– IDの例 –>
<div id=”header”>This is the header.</div>
こちらの用語と概念は、HTMLとCSSを使用してウェブページの構造とスタイルを制御するための基本となりますので覚えておくとよいでしょう。
レスポンシブデザイン
メディアクエリ
メディアクエリは、CSS3の機能であり、デバイスやビューポートの特定の条件に基づいてスタイルを変更するために使用されます。
分かりやすく説明すると、条件を満たした場合は指定したCSSを、満たさない場合は指定したCSSを適用させないといった指示ができます。
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
上記の例では、画面幅が600px以下の場合に、body要素のフォントサイズを変更します。
ビューポート
ビューポートは、ウェブページが表示される領域を指します。モバイルデバイスなどでよく使用され、以下のようなメタタグで設定できます。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
これにより、デバイスの幅に基づいてビューポートが設定され、デバイスの画面にページが適応されます。
フレキシブルボックス
フレキシブルボックスは、レスポンシブデザインの一部として使用されるCSSの機能で、コンテナ内のアイテムを柔軟に配置するためのものです。以下は基本的な使用例です。
<style type="text/css" scoped>ul { display: -webkit-flex; display: flex;}</style> <style type="text/css" scoped>ul { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; height: 200px;} カラーデザイン
カラーコード
カラーコードは、色をデジタルで表現するためのコードです。代表的なものには以下のようなものがあります。
HTMLカラーコード
16進数で表現される色のコード。例えば、赤は #FF0000 です。
RGBカラーコード
赤、緑、青の3つの要素で色を表現するコード。例えば、赤は rgb(255, 0, 0) です。
色相環
色相環は、色を円環状に配置したもので、相補色や類似色などの色の関係性を理解するのに役立ちます。
相補色
色相環上で対向する位置にある色。これらの色を組み合わせると、対比が際立ちます。
類似色
色相環上で隣り合う位置にある色。類似色を組み合わせると、調和のとれた配色が得られます。
RGBとCMYK
RGB（Red, Green, Blue）とCMYK（Cyan, Magenta, Yellow, Key/Black）は、色を表現するための異なるカラーモデルです。
RGB
デジタルディスプレイやウェブで一般的に使用されるモデル。色は赤、緑、青の光の組み合わせで表現されます。
CMYK
印刷に使用されるモデル。色はシアン、マゼンタ、イエロー、ブラックの4つのインクの組み合わせで表現されます。
ウェブフォント
Google Fonts
Google Fontsは、ウェブデザインで利用できる無料のオープンソースのフォントライブラリです。以下は、Google Fontsを使用する基本的な手順になります。
- フォントの選択
Google Fontsのウェブサイトで使用したいフォントを選択します。数百種類のフォントが提供されています。 - スタイルの選択
選択したフォントにはさまざまなスタイルがあります（通常、通常、太字、斜体など）。必要に応じてスタイルを選択します。 - 埋め込みコードの取得
フォントを使用するための埋め込みコードを生成します。例えば、<link>タグを使用してHTMLファイルに追加します。
フォントの読み込み方法
ウェブフォントをウェブページに組み込む方法には主に2つの方法があります。
外部リンク
オンラインのフォントライブラリやCDN（Content Delivery Network）からフォントを読み込む方法。例えば、Google Fontsの利用がこれに該当します。
ローカルファイル
フォントファイル（.woff、.woff2など）をウェブサイトのサーバーにアップロードし、それを利用する方法。
ユーザーエクスペリエンスデザイン
ユーザーエクスペリエンス（UX）
ユーザーエクスペリエンスは、製品やサービスを使用するユーザーが感じる総合的な印象や体験を指します。UXデザインは、ユーザーが製品やサービスを使う際に生じる感情や対話を理解し、それを最適化するためのデザインプロセスです。
ユーザーフロー
ユーザーフローは、ユーザーがウェブサイトやアプリケーション上でどのように移動するかを示す視覚的なダイアグラムやマップです。ユーザーフローを作成することで、ユーザーのナビゲーションパスや重要な行動ポイントを把握しやすくなります。
ワイヤーフレーム
ワイヤーフレームは、ウェブページやアプリケーションの基本的な構造や配置を示す、シンプルなスケッチや図です。これはデザインの初期段階で使用され、レイアウトや機能の概念を視覚的に整理するために役に立ちます。
プロトタイプ
プロトタイプは、製品やサービスの初期モデルや試作品で、ユーザビリティのテストやデザインの概念の検証に使用されます。ユーザーが実際に対話できる形でデザインのアイデアを提示することができます。
ユーザーテスト
ユーザーテストは、実際のユーザーに製品やサービスを使用してもらい、フィードバックを収集するプロセスです。これにより、デザインの問題点やユーザーのニーズを特定し、製品やサービスを改善するための洞察を得ることができます。
ユーサビリティ
ユーサビリティは、製品やサービスがユーザーにとって理解しやすく、使いやすいかどうかを評価する指標です。ユーザビリティの向上は、UXデザインの中心的な目標の一つです。
これらの用語や概念は、ユーザーエクスペリエンスデザインにおいて重要な役割を果たし、製品やサービスの利用者に良い印象や効果的な利用体験を提供するために活用されます。
JavaScript
JavaScriptは、ウェブページを動的に制御し、ユーザーとの対話を可能にするプログラミング言語です。主にクライアントサイドで使用され、ブラウザ上で実行されます。
変数
データを格納するための記号。letやconstを使用して変数を宣言します。
関数
処理をまとめたもの。関数を呼び出すことでその処理が実行されます。
API
APIは、ソフトウェア同士が相互に通信するためのインターフェースを提供する仕組みです。ウェブデザイナーは、外部APIを利用してデータや機能を組み込むことがあります。
フロントエンド
フロントエンドは、ユーザーが直接操作するウェブページの部分で、HTML、CSS、JavaScriptを使用して構築されます。
バックエンド
バックエンドは、サーバーサイドで処理され、データベースや外部サービスとのやりとりを担当します。
バックエンドの処理を実行するためのプログラミング言語には、例えば、Node.js (JavaScript), Python, Ruby, PHPなどがあります。
まとめ
この記事ではWEBデザインの基本用語についてご紹介しました。WEBデザインの基本用語を理解することで、デザインに対する感覚がより深まります。
ご紹介した専門用語を実際のデザインに取り入れながらデザインスキルの向上を目指しましょう！基本知識を豊富に持つことで、複雑なデザインにも挑戦できますので是非チャレンジしてみてください！