Webデザインに関する専門用語をまとめました。
印刷に使われるCMYKやデジタル表示に使用されるRGB、画像を構成する最小単位のピクセル、画像の精細度を表す解像度など基本的な用語から、文字の微調整であるレタリングやキービジュアル、ブランディングなどデザインにおける重要な用語、ウェブフォントやSVG、GIF、JPEGなどの画像フォーマットについても解説しています。
レイアウト
「レイアウト」とは、ウェブサイトやアプリなどにおいて、コンテンツを配置するデザインの構成を指します。
レイアウトは、ユーザーがスムーズに情報を取得し、操作できるように設計されます。
ワイヤーフレーム
「ワイヤーフレーム」とは、ウェブサイトやアプリのレイアウトや機能を示した設計図です。ワイヤーフレームは、デザイナーや開発者がコンセプトを確認したり、プロトタイプを作成する際に使用されます。
モックアップ
モックアップは、実際のサイトやアプリのような見た目と動作を再現した模型です。モックアップは、クライアントやチームメンバーにプレゼンテーションを行う際に使用されます。
グリッド
[rml_read_more]
グリッドは、要素を配置するために規則的に配置された線のネットワークです。グリッドは、要素の位置やバランスを整え、視覚的な統一感を出すために使用されます。
ユーザーインターフェイス
ユーザーインターフェイスは、ユーザーがアプリやウェブサイトを操作するためのインターフェースを指します。ユーザーインターフェイスは、ユーザーが直感的に操作できるように設計され、使いやすさが求められます。
ユーザーエクスペリエンス
ユーザーエクスペリエンスは、ユーザーがアプリやウェブサイトを使用する際の全体的な体験を指します。ユーザーエクスペリエンスは、使いやすさ、情報の正確性、デザインの美しさなど、さまざまな要素によって形成されます。
カラースキーム
カラースキームは、使用されるカラーの組み合わせを指します。カラースキームは、デザインの雰囲気やブランドイメージを表現するために使用されます。
タイポグラフィ
タイポグラフィは、文字のスタイル、種類、サイズなどを表す用語です。タイポグラフィは、デザインの美しさや読みやすさを向上させるために使用されます。
レスポンシブデザイン
レスポンシブデザインは、様々なデバイスで同じコンテンツを表示するためのデザイン手法を指します。レスポンシブデザインは、スマートフォンやタブレットなど、さまざまなデバイスに対応する必要があります。
フォント
フォントとは、文字のデザインやスタイルを表すための種類のことです。フォントは、文字の太さ、傾き、形状、間隔などを決定します。代表的なフォントには、明朝体やゴシック体などがあります。
キャッチコピー
キャッチコピーとは、主要なメッセージや商品名をアピールするための短い文章のことです。キャッチコピーは、広告や販促ツールなどで使われ、商品やサービスの魅力を伝える役割があります。
アイコン
アイコンとは、機能やコンテンツを示す小さなグラフィックスのことです。アイコンは、ウェブサイトやアプリなどで使用され、直感的な操作を可能にします。代表的なアイコンには、ハートや星、ハンバーガーメニューなどがあります。
ナビゲーション
ナビゲーションとは、ウェブサイトやアプリの機能を探索するためのメニューやリンクのことです。ナビゲーションは、サイトやアプリの構造を整理し、ユーザーの利便性を高める役割があります。
ハンバーガーメニュー
ハンバーガーメニューとは、スマートフォンなどの小さな画面で使用される三つ線のアイコンメニューのことです。ハンバーガーメニューは、スマホなどの画面サイズの制限を考慮したデザイン手法であり、メニューを隠すことができます。
スクロール
スクロールとは、ウェブサイトやアプリで上下に移動するための操作のことです。スクロールは、情報量が多いコンテンツを掲載する場合などに利用されます。近年では、スクロールを前提とした縦長のデザインが主流となっています。
ホバーエフェクト
ホバーエフェクトとは、マウスカーソルが要素に重なったときに発生する効果のことです。ホバーエフェクトは、ボタンやリンクなどの要素にマウスカーソルを合わせたときに、視覚的なフィードバックを与えるために使用されます。
パララックス
パララックスは、背景と前景の要素が別々のスピードで移動する効果です。ウェブサイトやアプリでよく使用され、ユーザーに深さのある体験を提供します。スクロールすると、背景と前景の要素が違う速度で移動するため、立体的な印象を与えることができます。
レンダリング
レンダリングは、コンピューターが3Dグラフィックスや動画を表示するために行う処理のことです。ベクターグラフィックスは、拡大や縮小しても画質が劣化しない画像フォーマットで、SVGがその代表例です。一方、ラスターグラフィックスは、ピクセル単位で表現される画像フォーマットで、一般的な画像ファイル形式であるJPEGやPNGが該当します。
ベクターグラフィックス
ベクターグラフィックスは、線や曲線、ポリゴンなどの数学的なベクトルデータによって画像を表現するフォーマットです。拡大や縮小をしても画質が劣化しないので、ロゴやアイコンなど、サイズを変える必要があるものに適しています。代表的なベクターグラフィックスのファイル形式には、AI、EPS、SVGがあります。
ラスターグラフィックス
ラスターグラフィックスは、画像を小さなドット（ピクセル）の集まりで表現するフォーマットです。JPEG、PNG、GIFなどがあります。ラスターグラフィックスは解像度に依存しているため、画像を拡大するとピクセルが見えたり、画質が荒くなったりします。そのため、写真やビデオなどのように、解像度が固定されている場合に適しています。
DPI（ドット・パー・インチ）
DPIとは、「ドット・パー・インチ」の略で、プリンターやスキャナーなどの解像度の単位です。1インチあたりに表示できるドット（点）の数を表します。DPIが高いほど、画像や印刷物の解像度が上がり、より詳細な表現が可能になります。
CMYK（シーエムワイケー）
CMYK（シーエムワイケー）は、印刷に使用される四原色の略称であり、シアン、マゼンタ、イエロー、ブラックの頭文字をとったものです。これらの色を組み合わせることで、多彩な色合いを表現します。
また、CMYKでは、光を反射して目に見える色とは異なり、インクの量を減らすことで黒が濁らずに表現できるため、黒も独自に使用されます。
RGB（アールジービー）
RGB（アールジービー）は、デジタル表示に使用される三原色の略称であり、赤、緑、青の頭文字をとったものです。これらの色を組み合わせることで、カラフルな表示が可能となります。
ピクセル
ピクセルは、画像を構成する最小単位のことであり、画像を構成する点のことです。画像の解像度は、画像やディスプレイの精細度を表す数値で、ピクセルの数で表されます。
一般的に、解像度が高いほど、画像の精細度が高くなります。
しかし、解像度が高いと、ファイルサイズが大きくなり、表示や印刷に時間がかかることがあるため、適切な解像度の設定が必要です。
解像度
解像度は、画像やディスプレイの画素の数によって決まります。一般的に、解像度が高いほど画像やディスプレイの表示が鮮明になります。解像度は、横方向の画素数と縦方向の画素数を合わせて表され、例えばフルHDの場合は1920×1080の画素数があります。
また、解像度はdpi（dots per inch）やppi（pixels per inch）といった単位で表されることがあります。
dpiは印刷において使用され、ppiはデジタル表示において使用されます。一般的に、印刷物には高いdpiが必要で、デジタル表示には高いppiが必要です。ただし、解像度が高いほど画像やディスプレイの処理に時間がかかるため、パフォーマンスの面でのバランスも重要です。
レタリング
レタリングは、文字の間隔や形状を微調整することで、読みやすく美しい文字を作り出すことができます。キービジュアルは、主要なメッセージやブランドをアピールするためのビジュアルのことで、ブランディングは、企業や製品のイメージを構築するためのマーケティング手法です。
キービジュアル
キービジュアルは、広告やプロモーションなどで用いられ、主要なメッセージやブランドを視覚的に表現するためのビジュアルです。例えば、映画のポスターやCMのキービジュアルは、作品の内容やキャスト、魅力的な映像などを効果的に表現することで、視聴者の興味を引きつける役割を果たします。
ブランディング
ブランディングは、企業や製品のイメージを構築するためのマーケティング手法です。具体的には、ロゴやキャッチフレーズ、パッケージデザイン、広告などを統一的にデザインし、その企業や製品の特徴や価値を訴求することで、消費者に認知されやすくなり、ブランド価値を高めることを目的とします。また、ブランディングによって、競合他社との差別化を図ることもできます。
ウェブフォント
ウェブフォントは、ウェブサイトで使用するために設計されたフォントで、読みやすく、美しいフォントをウェブサイト上で使用できるようになります。また、SVGは、ベクターグラフィックスを表示するためのXMLベースの画像フォーマットであり、ウェブデザインにおいてよく使用されます。
SVG
SVG（Scalable Vector Graphics）は、XML（eXtensible Markup Language）ベースの画像フォーマットであり、ベクターグラフィックスを表示するために使用されます。SVGは拡大や縮小しても画質が劣化しないため、異なる解像度の画面に適応することができます。また、テキストやアニメーション、インタラクティブな要素を含めることができるため、Web上での動的なコンテンツやグラフィックスの表現に適しています。さらに、SVGはCSSやJavaScriptを用いたスタイリングや操作が可能であり、Webアプリケーションやモバイルアプリケーションの開発にも利用されます。
まとめ
この他にも、ウェブフォントやSVG、GIF、JPEGなどの画像フォーマットなど、Webデザインに関しては様々な用語があります。
