【要約】いちばんよくわかるWebデザインの基本きちんと入門レイアウト/配色/写真/タイポグラフィ/最新テクニック

February 25, 2021December 15, 2021

nobu

今日は、「いちばんよくわかるWebデザインの基本」の要約をご紹介します。

いちばんよくわかるWebデザインの基本とは？

一生使えるWebデザインの本気の入門書!
これからはじめる人、一気に学びたい人へ
一生使えるWebデザインのテクニック集!
絶対に外せない! レイアウト4つの原則とレスポンシブWebデザイン
今日から使える! 配色の基本と、実例デザインの配色見本集
ユーザーの心を動かす! 写真と図版の使い方、タイポグラフィの選び方
フレックスボックス、インタラクション、マーケティングの知識まで
この一冊でWebデザイナーに必須の基礎知識が網羅できる!
<本書の対象読者>
●これからWebデザインを学びたい初心者の方
●Webサイト制作に自信が持てない方
●1冊でWebデザイナーの基礎知識を網羅して学びたい方
amazonより

いちばんよくわかるWebデザインの基本の要約

まずはざっくりと計画を立てる

①まず最初にサービスのコンセプトを決める

→誰に何を伝えたいのか（ex.年齢層が高めならテキストリンクは青文字、リテラシーが高いならアニメーションなどインパクトのあるもの、同じ層を狙っている競合の真似をするなど）

②ワイヤーフレームを作成する

→パワポなどでざっくり

③制作開始

→パーツごとにスケジュールを組む

【レイアウトに関して】

・レイアウトの4原則

①近接の原則

→関連する項目をまとめてグループ化する

人間は位置的に近いものをなんらかのつながりがあるグループと認識する

ex.)hタグとpタグの位置をすべて均等にするのではなく、グループごとに狭くしたり広くしたりする

②整列の原則

→ページ上の要素を何らかのルールで統一化させること

ex.)hタグpタグすべてを左側寄せで、左側に揃える

③反復の原則

→デザイン上の何らかの特徴をデザイン全体を通して繰り返すこと

ex.)ヘッダーを全ページ共通のものにする

④対比の原則（コントラスト）

→全体の一部を統一化しないことで、要素に意味を持たせること

ex.)整列の原則で要素のグループ化をしても、見出しのサイズが文章とそこまで差がない場合に、見出しのサイズを大幅に大きくする、カラーを正反対のものにして目立たせる

レイアウトの種類

①グリッドレイアウト

→横幅を均等に分けて、マス目上にコンテンツを配置する

ブートストラップなどで使用され、デバイスごとにレスポンシブに対応することが可能

②フリーレイアウト

→コンテンツの横幅を固定し、グリッドにとらわれない。情報量が多いサイト向け

・ユーザーの視線の動き

→レイアウトにおいて視線をうまく誘導することが大切（大きくは、左上から右下に流れる）

①Z型

→左上、右上、左下、右上の順に動く目線の動き。同線上に重要な情報を配置する

②F型

→基本的にはZ型と同じで、ロゴからナビゲーションへと移動し、続いて見出しや記事へ

・レイアウトの種類

シングルカラムレイアウト
マルチカラムレイアウト
コンテンツを敷き詰めていくレイアウト
フルスクリーンレイアウト
情報量が多いレイアウト
余白を活かしたレイアウト
ECサイトによく使われるレイアウト
グリッドデザインを意識したレイアウト

【配色に関して】

・混色

2色以上の色を混ぜて別の色を作ることを「混色」と言う

種類は以下の2種類

①加法混色

→色を混ぜると明るくなるもの。光の三原色（赤・緑・青）を合成し、これらはRGBと表記される。ウェブデザインで使用されるのは主にこちら

②減方混色

→色を混ぜると暗い色になるもの。色料の三原色（シアン・マゼンタ・イエロー）を合成し、これに黒を足したCMYKと表記される

・色の三属性

①色相

赤・青・緑・紫・黄などの色の様相を現した色味のこと

上記の5色に中間色を追加した色を円環にしてまとめたものを色相環という

※色相環の正反対に位置する色を「補色」といい、お互いの色を引き立てあう

②明度

色の明暗のこと

色味のない黒、白などを無彩色、色味を持つものを有彩色という

色の3属性の中で一番視認性に直結しており、もし作ったデザインが見にくい場合、デザインを画像化してグレースケールなどをしてみる

③彩度

色の鮮やかさのこと

色のない無彩色を0とする

彩度が高い色は派手、低い色は地味な印象

・トーン

→明度と彩度が似ているものをグループ化したもの

PCCSトーンと呼ばれる、有彩色（12種類）・無彩色（5種類）それぞれ毎に分類されたものをサイト全体に適用することで統一感が生まれる

・配色の調和

→色相環には、一定の法則で規則的に選ばれた色は調和するという原理がある

12種類ほどその組み合わせがあるので、サイトの色味を選ぶ際には参考にすると統一感が生まれる

・色の印象

（色の寒暖）

暖色性、中性色、寒色系がある

（色の重さと触覚）

明度が高いほど「軽い」「やわらかい」

低いほど「硬い」「重い」と感じる

（進出色と後退色）

前に出て見える色を「進出色」といい、暖色系の高明度、高彩度の色

後ろに下がって見える色を「後退色」といい、寒色系の低明度、低彩度の色

（膨張色と収縮色）

膨張して見える色を膨張色と言い、明度が高いほど大きく見え、

収縮している色を収縮色と言い、明度が低い色をさす

（色の印象）

暖色系は火をイメージさせ、気持ちを高ぶらせる効果

中性色（緑系）は自然をイメージさせ、リラックスさせる効果

寒色系は水や氷をイメージさせ、気持ちを落ち着かせる効果

・配色の決め方

メインカラーを決めたら、ベースカラー（ホワイトスペース）とアクセントカラーを決める

決める際には調和の原理できめると楽

基本的な配色比率は70％はベースカラー、25％はメインカラー、5％がアクセントカラー

4色以上使う際には色を分割する（ベースカラーかメインカラー）

・リンクの色使い（使用例はp.72）

「未訪問と訪問済みリンク・マウスオーバーやタップした時」の反応を分ける

【タイポグラフィ（書体）】

・ナビゲーション→視認性

・見出し→強調性

・本文→可読性

・ウェイト

→文字の太さ。ウェイトを選ぶ際には、本文のウェイトを先に決めて、それを軸にほかの要素を考えていく

細ければ洗練された印象、太ければ力強い印象を与える

・書体の選び方

ウェブサイトのコンセプトから考える

ex.)信頼感は明朝体、優しい雰囲気丸ゴシックなど

・本文の組版

（一行の文字数）

35～45文字が読みやすい

（文字サイズ）

16～18pxが読みやすい

その際の行間はline-height 1.5～1.8くらいが最適

（webフォント）

閲覧しているPCにフォントデータがなくても、サーバ上からフォントデータを呼び出し、そのフォントを表示させる仕組み

拡大しても文字化けしないなどのメリットがあるが、読み込みに多少時間がかかってしまう

などのデメリットがある

利用したいフォントがある場合は、画像データでなくwebフォントを要検討

google fontsであれば無料で利用可能

その他、こんなコンテンツが欲しいというご要望・お問い合わせはこちらのフォームから

【要約】いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック