Webデザイン初心者だった自分がお金をもらえる程度にワンステップ上がれた基礎の知識を紹介します。
- これからWebデザインを学びたい
- 何から勉強すればいいかわからない
- Webデザインで副業など仕事を始めたい
という人にとって身につけておくとお仕事をもらえる土台に立てるレベルになるので、しっかりと学んでいきましょう。
フォントの基礎知識
Webサイトのコンテンツの多くはテキストで占めることになるため、フォントなどの文字の印象はデザインに大きな影響を与えます。
最適なフォントは状況や目的に応じて変化しますが、基本これであればハズレないよねという基準は存在します。
上級者は別として、初心者のうちは次のポイントを基本として理解しておきましょう。
ヘッドラインには、大きなフォントサイズ
ヘッドラインには、ひと目で重要とわかるほど大きなフォントサイズを選びましょう。
例えばメインには60px,サブには32pxなど。
90pxでもフォントウェイトをノーマルにしたりすると十分プロフェッショナルに魅せることができます。
ボディに使われるテキストは、15px〜25px
ボディに使われるテキストは、15-25pxのサイズにしましょう。
これ以上小さいと見にくくなり、26px以上だと大きすぎて違和感を覚えます。
どちらにしてもヘッドラインやサイトの構成で相対的に決まってくる要素なので、最終的に微調整するとして初期の段階では15-25pxのフォントサイズを選びましょう。
行間は、フォントサイズの120%〜150%
行間は、フォントサイズの120%〜150%にすると見やすくなります。
行間が詰まっていると圧迫感がでてしまいます。
行間が広すぎると文章のまとまりが感じられなくなったり、読みにくくなります。
1行あたり、日本語なら22~45文字程度
1行あたり、日本語なら22~45文字程度、アルファベットなら45~90文字で収まるようにしましょう。
フォントにこだわる
フォントにはこだわりましょう。
Webサイトにどのようなイメージを持ってほしいのかをフォントの見た目から、反映できるものを選びます。
Serif(セリフ)かSans-serif(サンセリフ)かを選びます。
Serif(セリフ)
Serifはウロコやヒゲ飾りといった意味があり、線の太さが様々で端に装飾があるタイプのフォントです。
Serifは伝統的なイメージがあり、物語を読ませたいときや、長い読み物によく使われます。
日本語では明朝体が代表的です。
Sans-serif(サンセリフ)
Sans-serif(サンセリフ)はのsansはフランス語でなしの意味で、線の太さが一様で文字の端に装飾のないフォントのことです。
Sans-serifはニュートラル、シンプル、きれい、モダンなWebサイトによく使われています。
日本語ではゴシック体が代表的です。
Googleフォントを活用しよう
Google fontsでは素敵なフォントが数多く無料で利用できます。
使い方も簡単なので、積極的に利用していきましょう。
ただし、日本語フォントは重たくなる可能性があるので、サイトスピードを意識しながら活用しましょう。
プロフェッショナルなWebデザインでよく使われているGoogle fontsには一例ですが次のようなフォントがあります。
おすすめのSerifのGoogleフォント
Google fontsで素敵なSerifフォントは、たとえば次のフォントがあります。
- Cardo
- Merriweather
- PT Serif
日本語では、明朝体では次のフォントがあります。
- ヒラギノ明朝
- 游明朝体
- Noto Serif
- 筑紫明朝
- さわらび明朝
おすすめのSans-serifのGoogleフォント
Google fontsで素敵なSans-serifフォントは、たとえば次のフォントがあります。
- Open Sans
- Monsterrat
- Lato
- Raleway
- PT Sans
日本語では、ゴシック体で次のフォントがあります。
- ヒラギノ角ゴシック
- 游ゴシック
- Noto Sans
- 筑紫ゴシック
使うフォントは一つにしぼる
使うフォントは一つにしぼりましょう。
フォントは迷ってしまいがちで、ついついたくさん選びたくなります。
しかし、たくさんのフォントを選ぶとほぼ確実に統一感が失われて素人臭いWebサイトに出来上がります。
使うフォントは厳選して一つしぼりましょう。
例外として、長文コンテンツが多いWebサイトの場合です。
ヘッダーにSans-serifフォントを一つ選び、ボディで長い文章を読ませたいときはSerifフォントを一つ選ぶというのは統一感を損なわないデザインになります。
フォントの基礎知識まとめ
- ヘッドラインには、大きなフォントサイズ
- ボディに使われるテキストは、15px〜25px
- 行間は、フォントサイズの120%〜150%
- 1行あたり、日本語なら22~45文字程度
- フォントにこだわる
- 使うフォントは一つにしぼる
色の基礎知識
色は目的に応じて選ぶ
まず、自分の好きな色や顧客の好きな色でベースの色を選んではいけません。
色にはそれぞれ心理学的な効果があります。好きな色を選ぶのではなく、Webサイトの目的に応じた色を選択しましょう。
それぞれのベーシックは色の特徴は次の通りです。
赤は、情熱や力強さ、パワーや興奮をイメージする色です。明るいトーンの赤色は、よりエネルギッシュで暗めのトーンの赤色は、より力強くエレガントさが際立ちます。
オレンジは、ほどよい強さで関心を引き寄せたいときに最適な色です。元気になったり、創造性をかき立てたり、友好的で勇気づけられる色です。
黄色は、エネルギッシュで幸せやイキイキとした感覚を伝える色です。また興味を引いたり、知的で、明るさがある印象を与えます。
緑色は、自然、人生、健康、お金、などバランスが良い印象を与える色です。
青色は、冷静で、平和的で、安定感があって、信頼できる印象を与えます。男性からは特に好かれる色です。プロフェッショナルなイメージを与え、信頼と誠実な印象も与えます。
紫は、伝統的なイメージや、尊く、豊かな印象を与えます。高貴で、叡智に富んだ印象や、豪華さ、ミステリアスなイメージを与えます。
ピンクは、恋愛、ロマンス、気遣い、平和、女性的、甘い、幼さ、弱さ、優しさなどの印象を与えます。
茶色は、地面や自然に存在することから、リラックス、自信、信頼性、快適さといったイメージを与えます。
また、国によって色のイメージは異なるため、多国籍のサイトを作る場合はその国のそれぞれの色のイメージを調べましょう。
ベースとなる色は一つにしぼる
ベースとなる色は一つにしぼりましょう。
フォントと同じ理由で、複数選ぶと統一感を失う可能性が高くなります。
アーティスティックなデザインセンスに優れている場合を除いて、ベースとなる色は一つにしぼりましょう。
2色以上使いたい場合はツールを使う
2色以上使いたい場合は、カラーの相性の良い組み合わせがわかる参考資料から選ぶことを強くおすすめします。
カラー選びには無料で使える優れたツールがたくさんあります。
それらのツールを使いこなして、目的にあった色で興味を引きましょう。
黒色はデザインのベースに使わない
黒色は自然界に存在していることは極めて稀な色のため、ベースを黒でデザインするには高度なテクニックが必要になります。
初心者の間は、黒色をベースのデザイン色に使用するのは控えましょう。
色の基礎知識まとめ
- 色は目的に応じて選ぶ
- ベースとなる色は一つにしぼる
- 2色以上使いたい場合はツールを使う
- 黒はデザインのベースに使わない
画像の配置方法の基礎知識
通信量の増加で画像やイラスト、動画といったコンテンツも年々重要度が増してきています。
素晴らしい画像やイラストや動画を選んでテキストをつけることは必須です。
つまり、画像の上に文字を載せて、いかに見やすくするかという工夫が必要になります。
その際、画像とテキストの配置に活かせるテクニックを知っておきましょう。
- 画像の上に半透明の色のレイヤーを重ねる
- テキストは半透明の背景色にした枠に入れる
- 画像をぼかす
- 画像下部をかすませる方法（Floor Fade)を使う
アイコンの基礎知識
アイコンは軽いのでWebサイトで使うのはとても有効的です。
アイコンを有効に使うと、読み手にイメージを簡単に伝えることができます。
アイコンフォント(ベクター)を選ぶ
アイコンには大きく分けて2つ種類があります。
アイコン画像(ラスター)とアイコンフォント(ベクター)です。
アイコン画像(ラスター)は拡大縮小すると画像が粗くなることがあります。
また、ベクターより変更の自由度が低かったり、重いこともあります。
アイコンフォント(ベクター)は拡大縮小してもアイコンが粗くなることがありません。また、カラーの変更など自由にできます。
アイコンフォント(ベクター)が使えるときは、拡大縮小してもきれいに表示されるアイコンフォント(ベクター)を使いましょう。
機能紹介や手順説明のところにアイコンを使う
機能紹介や手順説明のところにアイコンを使いましょう。
認識を助けるアイコンを選ぶ
認識を手助けできるようなアイコンを選びましょう。
アイコンが無料で使えるサイトはたくさんあるので、そこを使ってもいいですし、イラストレーターなどで自作して、アイコンフォントを作ることもできます。
アクションを起こしてほしいところにアイコンを使う
アイコンは目を引きます。
そのため、起こしてほしいアクションのある部分やリンク部分にアイコンを使いましょう。
リンクの場合はアイコン+ラベル
リンクの場合は、アイコンだけでは意味が伝わらない場合があります。
そのため、アイコンの隣にラベルをつけましょう。
アイコンの基礎知識まとめ
- アイコンフォント(ベクター)を選ぶ
- 機能紹介や手順説明のところにアイコンを使う
- アクションを起こしてほしいところにアイコンを使う
- 認識を助けるアイコンを選ぶ
- リンクの場合はアイコン+ラベル
レイアウトの基礎知識
レイアウトの基本は、なんといっても余白です。
余白の使い方次第で、雰囲気をよくすることもぶち壊しにすることも可能になります。
主に余白が必要となる場所とその使い方を学んでおきましょう。
余白で関係性が決まる
要素同士がくっついていれば関連性を感じ、離れていれば関連性を感じなくなります。
その距離感を余白でつくることができるので、余白を調整することで関係性をつくることができます。
余白を入れなさすぎると息苦しくなりますし、余白の入れすぎは関係性を失わせる原因になるので、余白の塩梅は大事です。
余白は次の場所にいれましょう。
要素の間に余白をいれる
要素の間に余白をいれましょう。
余白によって要素ごとの見えない関係性を示すことができます。
要素のグループの間に余白をいれる
要素のグループの間に余白をいれましょう。
グループ間に余白があることで、それぞれのまとまりを示すことができます。
セクションの間に余白をいれる
セクションの間に余白をいれましょう。
上に同様で、セクションごとのまとまりを意識することができるようになります。
情報の優先順位はビジュアルヒエラルキーを意識する
どの情報が優先順位が高いかがわかるように、位置、大きさ、色も含めてデザインしましょう。
これはビジュアルヒエラルキーの考え方です。
難しいことは置いておくとして、要するに重要なことは、
最初に見てほしい部分が見られるようにデザインするということです。
そして、その後にコンテンツのメッセージが自然な流れになるように設計しましょう。
流れを作るために、余白を活用する
メッセージの流れを作るためにも、余白を活用します。
レイアウトの基礎知識まとめ
- 余白で関係性が決まる
- 要素の間に余白をいれる
- 要素のグループの間に余白をいれる
- セクションの間に余白をいれる
- 情報が優先順位はビジュアルヒエラルキーを意識する
- 流れを作るために、余白を活用する
Webデザインの勉強方法
Webデザインの本を買って読んでみるのも大切なことですが、一番効果があった方法は、無料でできる次の方法です。
- 良いと思うデザインのWebサイトを集める
- それらがなぜよいと思うのかを考える
- 個々の部分や全体のイメージがなぜそのようなデザインなのかを考える
- 良いと思うWebサイトの共通点を探してみる
- HTML&CSSがどのように作られているのか考えてみる&調べてみる
最初のころは特に、好きなWebサイトからアーティストのように盗んで真似していくことが重要です。
まとめ
Webサイトはやっぱり文字がコンテンツの大半になります。
それゆえ、フォント選びの影響力は大きいです。
Webサイトに画像やイラストはほぼ必須で必要です。
画像とテキストの具体的な組み合わせ方を知っておきましょう。
アイコンを使うとWebサイトに親しみやすい空気感を表現できます。
アクセントにもなるので積極的に使いましょう。
余白を上手に計算すると、プロらしいデザインへの第一歩を進むことができます。
余白の正しい使い方を学びましょう。
コンテンツの視覚的なヒエラルキーを意識したレイアウトにしましょう。
Webサイトやアプリを使う人も、それの所有者も満足できるデザインを考えましょう。
他のデザインを見て学んで考えて、勉強しましょう。