Webデザインの基礎1
どうもhiroakiです。
今回はWebデザインの基礎についてです。最近、プログラミングの勉強としてpaizaラーニングに登録しましたので、学んだことをまとめていきたいと思います。
なぜ WEBデザインを学ばなければならないのか
ウェブデザインについて学ぶことで、クライアントやデザイナーとエンジニアとの認識のずれを減らしたり、自分の市場価値を高めることができます。
コンセプトとターゲットを意識する
サイトのデザインを作る前に、大事なことがあります。それは例えば以下のようなコンセプトとターゲットを意識することです。
サイトコンセプト：高級感、堅実さ、楽しさ
ターゲット：お金持ち層、ビジネスマン、子供
デザインは、こういったサイトコンセプトとターゲットを元に決めていきます。
統一感を意識する
次に大事なのは、統一感のあるデザインを目指すことです。デザインをよくするための要素はたくさんありますが、まずは色・文字・余白を意識することが大切です。
では、色・文字・余白の順にみていきましょう。
色について
色について以下押さえましょう。
RGB
RGBは、R(Red)、G（Green）、B（Blue）の３色で構成されたカラーモデル。ウェブ系で使われます。
CMYKは、C(Cyan)、M(Magenda)、Y(Yellow)、K(Black)の４色で構成されたカラーモデル。印刷物系で使われます。
色の３属性
色相：色の違い。色相環（環＝輪の意味）上で、近い色は類似色、反対側は補色と呼ぶ。
明度：色の明るさ。高いと白に近く、低いと黒に近づく。
彩度：高いと原色に近づき明るくなり、低いと灰色が足されてくすんだ色になる。
キーカラー
サイトなど制作物の基準となる色。キーカラーを決めたら、その色を軸に、相性のいい色を選ぶ。
例えば、統一感のある色は次のものを意識する。
彩度が同じで色相が違うもの
色相が同じで彩度が違うもの
逆に統一感のないものは、色相・明度・彩度がバラバラ。
トーン（色調） ＝ 明度 × 彩度
統一感を出すために次の２つを意識する。
①同じトーンの色を複数組み合わせること。色数を増やさないこと。
②同じ色相でトーンが近いものを組み合わせる。
配色の割合
ベースカラー７０％ 地の色、ウェブサイトでは背景色となる。
メインカラー２５％ ベースカラーと近い色にすれば、落ち着いた印象。離れた色であれば、コントラストのある配色になる。キーカラーとなる場合が多い。
アクセントカラー５％ 目立つ色を使うのが一般的だが、意味を持たせたいわけではない限り、見やすい色にすることが大切。文字が見づらいとか、目がちかちかしないように配色を工夫するといい。
文字や文書デザイン（タイポグラフィ）について
タイポグラフィとは文字の書体や字配り、配置を美しく整えることです。以下押さえましょう。
カーニング
文字と文字の間のスペース、字間の調整をすること。字詰め。
行や段落全体の調整のこと。字送り。
レディング
文字列の行送りのこと。行間。
ウェイト
文字の幅、太さ。サイズに緩急をつけると、めりはりをつけることができる。
文字のサイズ差の比率。隣接、または近い文字（たとえば大見出しと小見出しや本文）との文字サイズ比率。これが高いと文字間のめりはりがつけられる。
フォントデザイン
フォントの種類は１つか２つにすると統一感がでる。
欧文フォント…個人作成しやすい。フリーも多い。
セリフ
小説のように長くよませる文章や、高級感をだすときはセリフ体をよく使う。
サンセリフ
セリフがない文字。読みやすく視認性が高い。
ハンドライト
手書きでかいたようなフォント。やわらかい、ルーズなイメージとなる。
ディスプレイ
色々とデザインされたフォント。
日本語フォント…有料のものが多い。
明朝
筆でかいたような書体。やわらかい、少し高級感のあるイメージを出す。
ゴシック
角ばった、直線で構成されたフォント。セリフ体に近い。
丸ゴシック
ゴシック体を角丸にしたもの。やわらかい、やさしいイメージを作る。
ウェブフォント
Googleが提供しているGoogleFontsをはじめ、無料から有料まで、多くのWEBフォントが提供されている。
余白について
余白は、ホワイトスペースやネガティブスペースと表現されます。この余白もデザインに必要な要素です。例えば、余白の取り方として以下のものがあります。
高級志向のもの：余白をたっぷり取っている。
情報量を多く詰め込みたいもの：余白をあまり取らない。
また、余白には情報を区分する役割があります。なので、関連する要素同士のスペースは関連しない要素同士のスペースより大きくしないことが大切です。
連続して並べる要素などは、要素間や要素内の余白は同じ規則で統一感を出します。左右間は上下間と比べて、同じ大きさか２倍以下に設定するといいです。
また、文章周りの余白は行間よりも多く取ると見やすくていいです。文字のインデントも揃えてください。
以下も押さえましょう。
アクティブホワイトスペース
視線誘導などのために、意図的に作ったスペース。
パッシブホワイトスペース
文字やロゴなどの要素のまわりにあるスペース。マージン、パディングのこと。
マクロホワイトスペース
文章や画像など、主要な要素同士の余白を指す。
マイクロホワイトスペース
項目同士や行間、文字間の余白を指す。
今回は以上になります。
さわりだけの紹介になりましたが、みなさんもデザインを意識してウェブサイトを作ってみてください。
私もまだまだ勉強が必要ですので、学んだことをどんどんまとめて、活かしていきたいと思います。
ではでは。
