あなたがマーケティングに慣れていないとき、特に小さなチームでは、一瞬の通知で多 そして、それはブログやソーシャルメディアのようなものに来るとき、確かに、あなたはこれを持っています。 しかし、すぐに、あなたは設計プロジェクトに引っ張られています。 ある日、インフォグラフィックを嘲笑している;次は、ebookを設計している。 あなたは悲惨に準備ができていないと感じます-そして、そのデザインの語彙? それは外国語のように感じることができます。
おなじみの音?
私たちはそこにいました-そして、ある時点で、この語彙に堪能になる必要があったのはマーケティング担当者だけではないことを知っています。 だから我々は、私たちはすべて私たちのゲームを少しステップアップするために、より大きな用語集を共有することにしました。 決してこれは設計用語のすべての終わりのすべてではないので、コメントにも定義を追加して自由に感じてください。 ここでは、アルファベット順に整理し、私たちが持っているものです。
- 究極のウェブデザイン用語集
- A
- 1)アライメント
- 2)類似色
- 3)Ascender
- B
- 4)ベースライン
- C
- 5)キャップの高さ
- 6)CMYKカラーモデル
- 7)カラーホイール
- 8)カラースキーム
- 9)補色
- 10)圧縮
- 11)コントラスト
- 12)被写体を再構成したり、画像の縦横比のサイズを変更したりするために画像の外側の部分を削除したときに、
- 13) CSS
- D
- 14)Descender
- 15)ドット/インチ(DPI)
- 16)ドロップシャドウ
- E
- 17)EPS
- 18)Extender
- F
- 19)フェザリング
- 20)フォント
- G
- 21)GIF
- 22)グラデーション
- 23)Grid
- H
- 24)HEX Code
- 25)HTML
- 26)色相
- J
- 27)JPEG
- K
- 28)カーニング
- L
- 29)先頭の
- 30)Lossy
- 31)Lossless
- M
- 32)正中線
- N
- 33)負のスペース
- O
- 34)オープンタイプのフォント
- 35)Orphan
- P
- 36)Pantone
- 37)PDF
- 38)ピクセル
- 39)ピクセル/インチ(PPI)
- 40)PNG
- R
- 41)矩形(または四面体)色
- 42)解像度
- 43)RGBカラーモデル
- S
- 44)彩度
- 45)セリフ
- 46)シェード
- 47)分割-補色
- 48)正方形の色
- 49)Stem
- 50)ストローク
- T
- 51)Tail
- 52)Terminal
- 53)色合い
- 54)Triadic Colors
- 55)書体
- V
- 56)ベクトル画像
- 57)ビジュアル階層
- W
- 58)透かし
- 59)重さ
- 60)ホワイトスペース
- 61)Widow
- X
- 62)x-height
- Z
- 63)ZIPファイル
究極のウェブデザイン用語集
A/B/C/D/E/F/G/H/J/K/L/M/N/O/P/R/S/T/V/W/X/Z
A
1)アライメント
デザイン内の要素(テキスト、画像など)の配置). これらの要素は、ページと相互の両方に整列させることができます。 たとえば、このテキストの段落は左マージンに揃えられ、下の画像に示されている線は右に揃えられます。
![](https://blog.hubspot.com/hs-fs/hubfs/document-27091_960_720.png?width=669&name=document-27091_960_720.png)
2)類似色
カラーホイール上で互いに隣接して表示される色。
![](https://blog.hubspot.com/hs-fs/hubfs/analogous.jpg?width=669&name=analogous.jpg)
3)Ascender
正中線の上に表示される文字の線形拡張-ベースライン、キャップの高さ、descender、およびextenderも参照してください。
![](https://blog.hubspot.com/hs-fs/hubfs/ascender-1.png?width=669&name=ascender-1.png)
B
4)ベースライン
書体のすべての文字が座っている偶数の目に見えない線-ascender、cap height、descender、extender、および正中線も参照してください。
![](https://blog.hubspot.com/hs-fs/hubfs/baseline.png?width=669&name=baseline.png)
C
5)キャップの高さ
ベースラインと大文字の上部との間の距離-ascender、descender、extender、および正中線も参照してください。
![](https://blog.hubspot.com/hs-fs/hubfs/cap%20height.png?width=669&name=cap%20height.png)
6)CMYKカラーモデル
は、シアン、マゼンタ、イエロー、ブラックの略です。 この色のセットは、紙が光を吸収する方法のために印刷デザインに使用されます。
![](https://blog.hubspot.com/hs-fs/hubfs/CMYK-1.png?width=604&name=CMYK-1.png)
7)カラーホイール
一次、二次、三次の色の関係を示す色の円。
![](https://blog.hubspot.com/hs-fs/hubfs/BYR_color_wheel.svg.png?width=669&name=BYR_color_wheel.svg.png)
8)カラースキーム
カラーホイールからの二つ以上の色の組み合わせ-また、カラーハーモニーとして知られています。
9)補色
カラーホイール上で互いに正反対の色。
![](https://blog.hubspot.com/hs-fs/hubfs/complementary.jpg?width=669&name=complementary.jpg)
10)圧縮
余分なデータを排除してファイルサイズを縮小します。 大きな画像ファイルを電子メールで送信または保存するときに特に便利です。 非可逆圧縮と可逆圧縮の詳細を参照してください。
11)コントラスト
色、形、間隔、またはその他のデザイン要素の違いの強調。
![](https://blog.hubspot.com/hs-fs/hubfs/leaves-835488_960_720.jpg?width=669&name=leaves-835488_960_720.jpg)
12)被写体を再構成したり、画像の縦横比のサイズを変更したりするために画像の外側の部分を削除したときに、
をトリミングします。
![](https://blog.hubspot.com/hs-fs/hubfs/M6bEaWiUIs.gif?width=669&name=M6bEaWiUIs.gif)
13) CSS
webページの実際のコンテンツとは別に、webサイトのルックアンドフィールを指定するために使用されるコードの一部。
D
14)Descender
ベースラインの下に表示される文字のエクステンダー-ascender、キャップの高さ、および正中線も参照してください。
![](https://blog.hubspot.com/hs-fs/hubfs/descender-1.png?width=669&name=descender-1.png)
15)ドット/インチ(DPI)
ウェブのピクセルと同様に、ドットはデジタル画像を印刷するときの最小の測定単位です。 Dpiの数は、印刷されたデジタルオブジェクトの解像度を指します。DPIが高いほど、解像度が高くなります。
16)ドロップシャドウ
グラフィックの背後に影があるかのように表示する視覚効果。
![](https://blog.hubspot.com/hs-fs/hubfs/Blurshadow.png?width=238&name=Blurshadow.png)
E
17)EPS
テキストとグラフィックスの両方を含むベクトル画像に使用されるファイル形式。
18)Extender
xの高さの上またはベースラインの下に伸びる文字の部分-ascender、capの高さ、descender、および正中線も参照してください。
F
19)フェザリング
フィーチャのエッジを滑らかにするために使用される設計技術。
20)フォント
特定のスタイルとサイズの書体。 例としては、サイズ14のTimes New Roman Semi Boldが含まれます。
G
21)GIF
色やデザインの少ない小さな画像ファイルやアニメーション画像に最適な画像ファイル形式です。 アニメーションGIF画像の例を以下に示します:
![](https://blog.hubspot.com/hs-fs/hubfs/Humulone-3D-xray.gif?width=654&name=Humulone-3D-xray.gif)
22)グラデーション
画像のある色または部分が別の色にフェードインするように見えるデザイン技術。
![](https://blog.hubspot.com/hs-fs/hubfs/turquoise-top-gradient-background.jpg?width=669&name=turquoise-top-gradient-background.jpg)
23)Grid
ドキュメント内の画像とテキストを整列させるのに役立つ垂直線と水平線の純粋に仮説的なマップ。
H
24)HEX Code
特定の色を指定するためにHTMLとCSSで使用されるコードで、多くの場合、ポンド記号(#)の後に表示されます。 以下は、16進数のカラーコードのチャートです:
![](https://blog.hubspot.com/hs-fs/hubfs/Xterm_color_chart.png?width=669&name=Xterm_color_chart.png)
25)HTML
ウェブ上のテキスト、画像、リンクなどのコンテンツを表示するために使用されるコンピュータ言語。
26)色相
ほとんどの人が”色”と考えるもの-赤、オレンジ、黄色など。
J
27)JPEG
非可逆圧縮または可逆圧縮を使用し、品質の損失がほとんど認識されない画像ファイルタイプ。 このタイプのファイルは、色の間のスムーズな移行がある写真や現実的な絵画に最適です。
K
28)カーニング
個々の文字の間のスペース。
![](https://blog.hubspot.com/hs-fs/hubfs/1280px-Kerning_EN.svg.png?width=669&name=1280px-Kerning_EN.svg.png)
L
29)先頭の
タイプの行間のスペース。
30)Lossy
ファイルサイズが小さくなるにつれて詳細が削除されるデータ圧縮の形式。 通常の非可逆圧縮方法はJPEGです。
31)Lossless
非可逆圧縮とは対照的に、この形式では画像の詳細を復元できます。
M
32)正中線
“e”、”g”、および”h”の曲線を含む、ほとんどの小文字のベースラインから上までの距離。 アセンダ、キャップの高さ、およびディセンダーを参照してください。
![](https://blog.hubspot.com/hs-fs/hubfs/midline-1.png?width=669&name=midline-1.png)
N
33)負のスペース
ウェブページまたは単一の画像かどうかにかかわらず、デザインを囲む空のスペース-空白も参照してください。
![](https://blog.hubspot.com/hs-fs/hubfs/negativespace.jpg?width=669&name=negativespace.jpg)
O
34)オープンタイプのフォント
フォント形式の現在の標準。 これは、単一のファイルに画面とプリンタのバージョンの両方が含まれており、WindowsとMacの両方で互換性があります。 ファイルの拡張子は.otf。
35)Orphan
ページの下部に単独で表示される段落の開始行。 孤児は、段落の最後に単独で表示される単語または非常に短い行にすることもできます。
![](https://blog.hubspot.com/hs-fs/hubfs/2000px-Orphan-typesetting.svg.png?width=669&name=2000px-Orphan-typesetting.svg.png)
P
36)Pantone
Pantone社が開発したカラーマッチングシステム。 主に印刷デザインで使用され、デザインのデジタル段階で画面に表示される色に印刷された色を一致させるために使用されます。
![](https://blog.hubspot.com/hs-fs/hubfs/nuance-1086725_960_720.jpg?width=669&name=nuance-1086725_960_720.jpg)
37)PDF
文書やプレゼンテーションを表現するために最もよく使用されるファイル形式。
38)ピクセル
コンピュータ上の画像の最小要素。
39)ピクセル/インチ(PPI)
画像の特定のセクション内に存在するピクセルの数に応じた画像解像度の別の尺度。
40)PNG
画像が均一な色の広い領域を持っている場合、または(JPEGとは異なり)透明な背景を持っている場合に最もよく使用される画像ファイル形式。
R
41)矩形(または四面体)色
補色の二組である四色。
![](https://blog.hubspot.com/hs-fs/hubfs/rectangular.jpg?width=669&name=rectangular.jpg)
42)解像度
画像の鮮明さと詳細レベルを測定する方法。 解像度が高いと、通常、画像内のピクセルやドットなどのデータ量を表すファイルサイズが大きくなります。
43)RGBカラーモデル
赤、緑、青の頭文字です。 モニターはこれらの色で光を透過するため、RGBカラーモデルはwebデザインに使用されます。
![](https://blog.hubspot.com/hs-fs/hubfs/AdditiveColor.svg.png?width=669&name=AdditiveColor.svg.png)
S
44)彩度
色の明るさや強さ。
![](https://blog.hubspot.com/hs-fs/hubfs/HSV_color_solid_cylinder_alpha_lowgamma.png?width=669&name=HSV_color_solid_cylinder_alpha_lowgamma.png)
45)セリフ
いくつかのフォントでストロークの終わりに取り付けられた小さな線。 “Sans serif”は、この行を持たないフォントを指します。
![](https://blog.hubspot.com/hs-fs/hubfs/2000px-S_long_serif_et_sans_serif.svg.png?width=669&name=2000px-S_long_serif_et_sans_serif.svg.png)
46)シェード
どのくらいの黒が色相と混合されています。
47)分割-補色
ベースカラーと補色の隣にある二つの色で構成される色。
![](https://blog.hubspot.com/hs-fs/hubfs/splitcomplementary.jpeg?width=669&name=splitcomplementary.jpeg)
48)正方形の色
カラーホイール上では、四つの色が互いに均等に間隔をあけられています。
![](https://blog.hubspot.com/hs-fs/hubfs/SQUARE-4.jpg?width=669&name=SQUARE-4.jpg)
49)Stem
文字の主な垂直ストローク。 これは、文字”B”と”V”の対角線で使用されています。
50)ストローク
書体で文字を構成する線。
T
51)Tail
装飾的であることが多い文字の降順のストローク-たとえば、文字”Q”
52)Terminal
セリフを含まないストロークの終わり。
53)色合い
どのくらいの白が色相と混合されています。
54)Triadic Colors
カラーホイール上で互いに120度に位置する三つの色を組み合わせた配色。 それは多くの場合、最高の配色と考えられています。
![](https://blog.hubspot.com/hs-fs/hubfs/triadic.jpg?width=669&name=triadic.jpg)
55)書体
文字、数字、句読点を含む文字のデザインコレクション。 例としては、Times New Roman、Helvetica、Arialなどがあります。
V
56)ベクトル画像
画像を表現するためにピクセルを使用する代わりに、ベクトルは線と図形を使用します。 ピクセルに依存しないため、拡大されたベクトル画像は依然として画像の明瞭さと品質を維持します。
57)ビジュアル階層
色、サイズ、レイアウトを使用して、コンテンツのメッセージのさまざまな部分を視覚的に注文して強調する設計原則。
W
58)透かし
ウェブ上および印刷中の写真の上に配置された見やすいマーカー。 これは、画像の所有者を識別し、視覚的なコンテンツの盗難を防ぐために使用されます。
59)重さ
書体では、ストロークの幅の太さ。 いくつかの例には、demibold、light、boldが含まれます。
60)ホワイトスペース
デザイン内のオブジェクトを囲む空白スペース-負のスペースも参照してください。
![](https://blog.hubspot.com/hs-fs/hubfs/books-education-school-literature-48126.jpeg?width=669&name=books-education-school-literature-48126.jpeg)
61)Widow
次の列またはページにこぼれる段落の最後のテキストセクション。
![](https://blog.hubspot.com/hs-fs/hubfs/2000px-Widow-typesetting.svg.png?width=669&name=2000px-Widow-typesetting.svg.png)
X
62)x-height
文字の中で、正中線とベースラインの間の距離-ascender、cap height、descender、およびextenderも参照してください。
![](https://blog.hubspot.com/hs-fs/hubfs/xheight.png?width=669&name=xheight.png)
Z
63)ZIPファイル
複数のファイルを圧縮して単一のフォルダに結合するファイル形式。 圧縮されたファイルは、小さくなるために任意のデータを失うことはありませんし、簡単にZIPファイルを解凍することによって復元されます。