ホームページ作成初心者でも知っておくべき、デザイン基礎用語10選

刻々と変化していくWebデザイン業界。次々と新しい技術や手法が誕生するので、常にチェックが必要な反面、そのトレンドを追うのは流行の最先端を行く感覚でわくわくするはずです。

その一方、時代が経っても変わらないデザイン用語というのも存在します。そこで今回は、ホームページ作りで 、仲間とのコラボレーションやクライアントとのミーティングに役立つ、基本的なデザイン用語をご紹介します。

デザイン初心者ではなくても、リストアップした基礎用語と一言解説で、理解に漏れやズレがないか再確認してみてください！

タイポグラフィ

タイポグラフィのもともとの意味は「活版印刷術」ですが、現在ではデザインにおける活字の書体や、字配りなどの構成およびその表現全般を指します。

つまり文字を美しく見せるためのフォント、大きさ、字間、行間、字数、行数などを揃え、余白を調整するといった作業のことです。

Webデザインにおいて、文字の読みやすさは大変重要なポイントで、決しておろそかにすることができません。

グリッド

グリッドによるWebサイトのレイアウトは、画面やページを列と行、縦横に分断。直線で格子状に分割し、これを組み合わせてブロック内の要素の大きさや配置を決定します。

Wixエディタ（Wix 編集画面）のカラム機能によるレイアウトがまさしくグリッドを利用しています。情報量が多いホームページであっても、グリッドによってコンテンツをすっきり整理することで、見やすいサイトを作ることができます。

配置

デザインにおける配置とは、いわゆる左揃え、中央揃え、右揃え、均等揃えなど、オブジェクトを揃えることです。文字や画像を揃えるのは、より見やすくレイアウトするためです。

各要素が揃うと、ユーザーの印象が格段に良くなり、その一方、揃っていないと落ち着かないものです。横文字は、左から右に文字を読むため、左揃えが基本ですが、その時々の用途に合わせて整列の種類を使いこなしましょう。

カーニング

文字間隔を調整する技法をカーニングと呼び、これをすることでテキストの見た目や読みやすさが向上します。

等幅フォントの場合は間隔がすべて均等ですが、プロポーショナルフォントでは文字間をカーニングすることが可能です。カーニングしない場合の文字のすき間は不自然ですが、適切にカーニングされた場合のすき間面積はほぼ均等に整います。

行間

行間とは文字通り、行と行との間隔のことです。一般的には、文字サイズが小さいほど行間を広くとるのが読みやすく、逆に大きな場合は行間が狭くても読みやすいと言われています。

文字数が多い場合は、文字サイズの半分から一文字分までの間で調節するのが理想的です。

解像度

解像度はピクセルという単位で表現され、画面に表示される最小単位です。このピクセルの数値が高いほど高精細画像となります 。

Wixユーザーは画質へのこだわりが高い方が多いので、取り扱うデータ容量も自ずと大きくなります。しかし場合によっては、ホームページのレスポンス速度を重視して画像の解像度を下げる必要があります。

画像最適化のガイドラインはこちらを参照してください。

彩度

彩度とは、色の鮮やかさを表します。同じ色でも、彩度が高い色ほど鮮やかに、低い色ほどグレーに近くなります。もっとも彩度が高い色は原色です。

画面上で目立たせたい画像は彩度を高くし、文字などを重ねる画像は彩度を落とします。

コントラスト

コントラストとは、要素同士の違いを区別させることで、言葉の通り「対比」を表します。

色や大きさによってコントラストを作り出すことによって、インパクトが高い表現をすることが可能です。色が混ざり合ってごちゃごちゃしたホームページよりも、シンプルに各要素がコントラストされた方がユーザーの注意を惹くことができます。

また見やすさという点においても、コントラストを意識したデザインが求められます。

不透明

不透明度を下げると、画像要素がより透明になり、下のレイヤーにあるオブジェクトが映し出されます。不透明度を操作することで、複数の要素をレイヤーに重ねて、一緒に表現することが可能になります。

グラデーション

色の明るさ、色彩の変化させることによって、グラデーションをつけることが可能です。

単純に色の変化を楽しむデザインだけでなく、平面を立体的に描写することもできます。例えば、丸い形のオブジェクトに対してグラデーションを取り入れることで、質感が生まれます。

デザイン用語の基礎チェックはいかがでしたか？ 用語チェックの後は、Wixであなただけのホームページを作成しましょう！

ライター： Wix Team