すべての非設計者が知っておく必要のある設計用語

公開: 2020-08-21

すべての非設計者が知っておく必要のある設計用語

2つの異なる言語を話していることに気付くまで、デザイナーと一緒に仕事をするのはとても楽しいことです。 他の人が何を意味するのかわからない場合、または他の人が言っている言葉を1つおきにグーグルで検索する必要がある場合は、設計用語をブラッシュアップするときが来たことを知っています。

そのため、このブログでは、デザイナーが使用するさまざまな用語の内訳を示し、自分が何を扱っているかを正確に把握できるようにします。

ブランディングデザイン用語

コンビネーションマーク

これは、ロゴマークとロゴタイプを組み合わせたり組み合わせたりするものです。

ロゴマーク

ロゴマークはブランドマークとも呼ばれ、ブランドを表すシンボルです。 ブランド名は含まれておらず、抽象的でシンプルです。

出典:こんにちはアリ
ロゴタイプ

これは通常、美的魅力を備えた独自の方法で設計された会社の名前です。

空欄
出典:こんにちはアリ
アイコン

アイコンは、アイデアを読者に伝えるための非常に簡単な方法です。 また、Webデザインのテキストを単純化して分離します。 ロゴマークと混同しないでください。幅広いアプリケーションで使用できます。

空欄

色に関連するデザイン用語

CMYK

これは、シアン、マゼンタイエロー、キーの略で、印刷デザインに使用されるカラーモデルです。 それがどのように機能するかは、これらの色の小さな点が配置されているということです。 また、さまざまな組み合わせで使用すると、さまざまな色が表示されます。 たとえば、4色すべてを足し合わせると、黒になります。

空欄
カラーパレット

これは、互いに補完し合い、デザインの要素をまとめる色のセットです。

勾配

グラデーションを使用すると、作成するデザインに奥行きと寸法を追加できます。 また、視聴者の目が1つの色から別の色にスムーズに流れるようになります。 フラットカラーを使用すると、同じようにフラットな最終出力を作成できます。 色の混沌とし​​た使用は忙しすぎる可能性がありますが、グラデーションを使用すると、秩序と美的魅力を確保できます。 使用できるグラデーションにはいくつかの種類があります。

  • 線形–ここでは、色は開始点から遷移し、直線で終了します。
  • ラジアル–ここでは、色は中央の開始点から円形のパターンで広がります。
  • 角度–パターンは反時計回りに流れます。 色の広がりの始まりと終わりを示す線がはっきりと見えます。
  • 反射–色は開始点の両側に均等に広がります。 これは、光沢のある仕上がりのデザインを作成するときに使用すると便利です。
  • ダイヤモンド–色はダイヤモンドの形に広がります。 この開始点は通常、菱形の1つの角になります。
色相、色合い、色調、色合い

色相は基本的にカラーホイール上の任意の色であり、これらの色を組み合わせて他の2次色と1次色を作成できます。

これで、カラーホイールの色相(色)に黒、白、またはその両方を混ぜると、バリエーションが得られます。 これらのバリエーションは、私たちが色合い、色調、色合いと呼んでいるものです。

白を色相に混ぜると、色合いが出ます。 これは、それほど強くない色の明るく彩度の低いバージョンです。 パステルとも呼ばれ、落ち着いた色です。

黒と白を色相と混ぜると、トーンが得られます。 基本的に、色相にグレーを追加しています。 追加する白黒の量に応じて、トーンを明るくしたり暗くしたりできます。

色相に黒を追加するだけで、色合いが得られます。 これは、元の色合いよりも暗く、はるかに強烈です。 黒を追加するのは難しい場合があります。これは、ほんの少量が本当に圧倒される可能性があるためです。

空欄
ネガティブ/ホワイトスペース

これは、デザインにある視覚要素を囲むスペースを指します。 とはいえ、スペースはネガティブではなく、白である必要もありません。 それはデザインの呼吸スペースのようなものであり、どんな色、パターン、テクスチャーでもかまいません。 デザインするときは、空白も非常に重要です。 適切な焦点を強調し、気分を呼び起こすのに役立ちます。

不透明度

この用語は、画像の透明度を表します。 通常、パーセンテージで表示されます。 0%は画像が非表示であることを意味し、100%は画像が完全に透明であることを意味します。

空欄
パントン

これらは特定の色合いを表す色です。 基本的に、パントンコードを介して必要な正確な色を伝えることができます。 これは、グラフィックスの色の基本言語と見なされます。 パントンによって開発された式は、スポットカラーとして知られています。 これは、パントンパレットが画面やドットではなく、18の基本色で構成されていることを意味します。

RGB

このカラーモデルは画面に使用され、赤、青、緑を表します。 これらすべての色を追加すると、白になります。

飽和

この用語は、画像の色の強さを表します。 飽和した画像は、過度に明るい色になります。 たとえば、画像が露出不足の場合は、グラフィックを使用して画像の彩度を上げることができます。

画像タイプのデザイン用語

ラスター画像

これらはビットマップ画像とも呼ばれ、数千のピクセルで構成され、画像の色と形を決定します。 たとえば、写真はラスター画像です。 これらの画像は有限量のピクセルで構成されているため、これらのサイズ変更は難しい場合があります。

たとえば、Photoshopでラスター画像のサイズを大きくすると、画像のサイズに追加するためにソフトウェアがデータを作成する必要があり、品質が低下します。 ラスターイメージ内で知っておく必要のあるファイルには、いくつかの種類があります。

  • GIF – Graphics Interchange Formatは、透明度とアニメーションをサポートするラスターファイルです。 GIFには最大256色しか表示できないため、ファイルサイズは非常に小さくなります。
  • JPEG –これはJoint Photographic Experts Groupの略で、Webデザインに関して最も広く使用されているラスター形式です。 これらは高速にロードされ、圧縮ファイルです。
  • PNG –これらのファイルは、圧縮されてPortable Network Graphicsの略である場合でも、品質が低下することはありません。 それらはWebベースのフォーマットを持っています。 これらのファイルは、GIFファイルの品質を向上させるために実際に開発されました。
  • PSD –デザイナーがAdobe Photoshopで非圧縮の作業用ラスターファイル画像を作成すると、PSDファイルになります。 文字はPhotoshopドキュメントを表します。
  • TIFF –タグ付き画像ファイル形式は、アプリケーション間でラスター画像を交換するためにかなり一般的に使用されます。 JPEGやPNGよりもやや高品質で、主に写真家や出版業界で使用されています。
ベクター画像

ベクター画像は多くのポイントで構成されています。 これらのポイントにはXまたはY座標があります。 これらのポイントはパスを結合して図形を形成し、これらの図形の内側に色を追加できます。 品質を気にすることなく、ベクターのサイズを大きくすることができます。 これらは通常、リーフレットからビルボードまで、さまざまな出力として使用できるロゴやグラフィックスに使用されます。 このカテゴリに分類されるさまざまな種類の画像を見てみましょう。

  • AI –これはAdobeIllustratorドキュメントの略です。 この形式のファイルはAdobeシステムによって作成されており、1ページのベクターデザインが使用されています。
  • EPS –カプセル化されたPost Scriptはサイズを変更でき、ベクターデザインに広く使用されています。 非常に高品質で、ロゴ、パンフレット、名刺などの多くの印刷要素で使用されています。
  • PDF –Adobeによって開発されたPortableDocument Formatは、任意のコンピューターでダウンロードおよび表示できるファイルタイプです。 普遍的に表示できるため、作品のプレビューを共有するのに理想的です。
解像度

ここでは、DPIとPPIの2つのタイプに注意する必要があります。

  • DPIは、印刷出力の作成に取り組んでいるときに気にする必要があるものです。 また、1インチあたりのドット数を表します。 これは基本的に、1つの印刷ページの1インチあたりのドット数を指します。 ここでのドット数が多いほど、画像の品質は高くなります。 印刷画像の標準は300DPIです。
  • PPIは、1インチあたりのピクセル数を表します。 Photoshopで大きな画像を作成する場合は、1インチあたりのピクセル数を増やす必要があります。この場合、Photoshopがデータを構成し、品質も低下します。

ベクトルはピクセルでは機能しないため、解像度はラスター画像にのみ適用されます。

フォント、テキスト、およびタイポグラフィのデザイン用語

アセンダー

これは、正中線の上に表示される文字の線形拡大です。

空欄
ベースライン

これは、デザインに入力したすべての文字が配置される、目に見える線です。

空欄
キャップハイト

これは、ベースラインと大文字の最上部の間の距離です。

ディセンダー

これは、ベースラインの下に表示される文字のエクステンダーです。 以下の例の赤い領域は、指定された文字の子孫です。

空欄
字詰め

これは、特定のフォントの文字間の間隔を調整して、より視覚的に満足のいく結果が得られるようにすることを意味します。 たとえば、tとiの間に少しスペースを空けて、tのアームがiと結合しないようにすることができます。 また、見出しにTやAなどの大文字を使用する場合は、カーニングが正確であることを確認する必要があります。

孤児と未亡人
空欄

組版を使用する場合、未亡人は次のページまたは列の先頭の行で終わる段落です。 一方、孤立したものは、ページまたは列の下部から始まる段落です。 それらはあまり魅力的に見えず、通常はより多くのコピーで埋める必要があります。そうしないと、デザイナーがそれらを修正することができます。 段落の最後の行にある単語が1つでもある場合は、見苦しいように見えるので、それらに取り組んでみてください。

サンセリフ

これらは、セリフの場合のように、文字の末尾に行やスタブを使用しないフォントのグループです。 このグループに含まれる人気のあるフォントには、Helvetica、Arial、Genevaなどがあります。 サンセリフフォントは少し読みにくいです。 多くの場合、キャプションやヘッドラインなどの短いテキストでのみ使用されます。

脚本

これらのフォントは、筆記体の手書きを模倣しています。 書道のように個性的です。 フォーマルフォントとカジュアルフォントの2種類のスクリプトフォントから選択できます。 正式なグループには、たくさんの凝ったタッチがあります。 また、セリフから外側に向かってカールや繁栄があるため、簡単に識別できます。 一方、カジュアルスクリプトフォントのカーリングビットは少なくなっています。 デザインに家庭的な雰囲気を与えたい場合は、このタイプのフォントを使用できます。 ただし、スクリプトのようなフォントを選択する場合は、読みやすさが低下する可能性があるため、注意が必要です。

セリフ
空欄

セリフは一般的に使用されるタイプのフォントです。 この場合の文字には、上の画像に示すように装飾的なスタブがあり、強調表示された緑色のビットを見ることができます。 セリフフォントには主に4つのタイプがあります。

  • 古いスタイル
  • 過渡的
  • やった
  • スラブセリフ
追跡

追跡とは、(ほとんどの場合)行内またはテキストブロック内の文字間のスペースを増やす(ほとんどの場合)か減らすことを指します。 通常、水平に適用されます。 リーディングは、同じ原則が垂直に適用されたときに発生します。 これは基本的に、2行の間に同じスペースを維持することを意味します。 ここでの主な目標は、タイプが読みやすく、子孫がすぐ下の行とマージされないようにすることです。

一般的な設計用語

アラインメント
空欄

配置とは、基本的に、テキストや画像を含むデザインの要素が相互にどのように配置されるかを指します。 これらの画像は、ページに合わせて配置するだけでなく、互いにぴったりと表示することもできます。

アスペクト比

これはたまたま高さと幅の比例関係です。 x:y形式で表示されます。 たとえば、サイズが6 x 4の画像のアスペクト比は、3:2になります。 これにより、画像のサイズではなく、画像の比率と形状が決まります。

空欄
対比

これは、ビジュアルの2つの要素がかなり劇的に異なる場合に発生するデザインの原則です。 差が大きいほど、コントラストが高くなります。 デザインのコントラストは、視聴者の目を焦点に向けることで、メッセージを伝えるのに役立ちます。 また、読みやすさの向上にも役立ちます。 色、サイズ、値、またはデザインの他の側面の観点から、コントラストが適用されていることがわかります。

圧縮

画像の圧縮は、基本的に、画像の品質に悪影響を与えることなく、グラフィックファイルのバイト単位のサイズを縮小したときに発生します。 ファイルサイズを小さくすると、これらのファイルを電子メールで送信しやすくなり、ストレージの占有スペースも少なくなります。 その後、Webページから簡単にダウンロードすることもできます。

フラットデザイン

フラットデザインは、非常にシンプルで2次元の要素と、明るく鮮やかな色を備えたユーザーインターフェイスデザインのスタイルです。

バランス

これは、グラフィックコンポーネントとテキストコンポーネントが正しく均等に配置されるように、ページ内の要素のバランスをとることに関連しています。 これを達成するための3つの主な方法があります。

  • 非対称–ゴッホのこの絵は、さまざまなオブジェクトと色を使用して、均等に分散されていない完璧な作品を作成する非対称デザインの完璧な例です。 グラフィックスでは、たとえば片側に画像があり、反対側にテキストがある場合、それは非対称であると言われます。
空欄
  • 対称–すべての設計要素は中心線の両側で均等にバランスが取れています。
空欄
  • ラジアル–このタイプのデザインでは、要素が中心点から放射状に広がり、デザインのバランスがとれます。
構成とレイアウト

デザイン(別名フォーム)の構成は、さまざまなデザイン要素の配置です。 作曲が成功すれば、それは視聴者を魅了し、完全なデザイン全体に目を向けます。 バランス、配置、近接性、空白、コントラストなど、さまざまな要素で構成されています。

規模

同じデザインの別の要素と比較した場合の、あるデザイン要素のサイズ。

テクスチャ

グラフィックデザインでは、テクスチャーとは、触覚、実現感、感覚を指します。 この特徴は、色、内容、パターン、イラストなど、デザインの他の要素を高めます。

トリムとブリード
空欄

トリムサイズは、実行しているデザインの最終的な寸法を表します。 ブリードは基本的に、デザインがトリムサイズを超えた場合です。 最終的な設計が完了すると、ほとんどの場合、ブリード領域がカットされます。 ブリード領域の目的は、見苦しい白い境界線がないように、デザインがすべてのコーナーに適切に届くようにすることです。

あなたの用語を知ることはあなたがロードするのを助けることができます

私たちはあなたに非デザイナーとしてあなたを助けると私たちが知っている多くをあなたにもたらしました、しかしデザインについて学ぶことはここで終わりではありません! デザインのトレンドと同じように、デザイン用語も変わります。 そして、あなたが最新の状態を維持しようとすればするほど、あなたはあなたの仕事をよりよくやり遂げることができるでしょう。 このように、チームメンバーまたは上司があなたが成し遂げる必要があることをあなたに話し、詳細が専門用語で提供されるとき、あなたはそれらが何を意味するかを正確に知るでしょう。