「Webデザインを学び始めたけれど、うまくいかない」「基本をどうやって学習すればいいかわからない」と悩んではいませんか?

Webデザインの基本から学びたいという方も多いのではないでしょうか。

 

そこでこの記事ではWebデザインに取り組み始めた方に向けて、以下を解説します。

この記事を読めば、Webデザインの基本がわかるだけでなく、よりよいWebデザインを制作することができるでしょう。ぜひ最後までお読みください。

 

Webデザインの基本が大切な理由

デザインと聞くと、「かわいい」「カッコいい」「オシャレ」など、ビジュアル面のデザインを想像しがちです。

しかしWebデザインの本当の目的は見た目の美しさではなく、ユーザーの目的達成を助けること。

 

色鮮やかでカッコいいデザインであっても、配置や大きさなどによってはユーザーにストレスを与える可能性があります。

 

基本がおろそかなWebデザインは、ユーザーの目的達成を助けられません。

Webデザインの基本を学ばないと、以下のような問題に直面する可能性があるため、注意しましょう。

 Webデザインを作成する際には、絵画とは違い、ユーザーにとっての見やすさや使いやすさが大切です。

 

デザインはセンスが必要と思われがちですが、実はよいデザインには一定の「セオリー」があります。

基本原則に則ってデザインできる知識を身につければ、誰でもデザイン力を向上・ブラッシュアップできますよ。

 

Webデザインの基本5つ

Webデザインの基本は大きく分けると5つあります。 

 それぞれの内容を、次の章から詳しく見ていきましょう。

 

基本1.カラーについて

カラーはWebサイトの印象を左右する、重要な要素です。

ユーザーに対して、訴求力の高いWebデザインにするために、主に以下の基本を押さえましょう。

 

色相・明度・彩度

Webサイトのカラーはサイトイメージに合った色相・明度・彩度選びがポイントです。

 

 色相とは赤や青のような色のグループを指し、明度は色の明るさ度合いを意味します。

明度が高いと明るくやわらかな印象になり、一方で明度が低いと、暗く重い印象の色になります。

 

彩度とは、色の鮮やかさの度合いです。 彩度が高ければ高いほど、鮮やか(ビビット)で目を惹く効果があります。

彩度が低いと落ち着いた無彩色に近い色味になります。

 

カラープロファイルデータの色特性

カラープロファイルとは、カラー値(RGBやCMYKの数値)とカラーアピアランス(実際に発色した色)を結びつけるデータの色情報です。

この基本を理解していれば、共有したデータ同士で見え方に差が生じる事態を回避できます。

 

カラープロファイルには、どのような色でWebサイトを表示するかまとめた、指示書のような役割があります。

 

デザインする際、WebデザインではRGB、紙媒体の印刷ではCMYKのカラーを用いて配色するのが一般的です。

ただし、RGBやCMYKは状況に合わせて色が変化する特性があるため、モニターが変わると、それに応じてカラーも変わる可能性があります。

 

したがって、デザインデータにカラープロファイルを埋め込めば、どのデバイスでも同じカラーで表現できます。

 

カラーの心理効果

人間は色によって心理に影響を与えられています。

たとえば「イチゴは赤色」「海は青色」のように、色でものを覚えながら心に働きかけているからです。

 カラーの心理効果を理解できれば、見る相手の印象や感情を思った方向に導けます。

Webデザインでカラーを選択する際には、伝えたいメッセージに合った色を選びましょう。

 

アクセシビリティへの配慮

日本人男性の20人に1人(5%)、女性の500人に1人(0.2%)は色覚障がいがあるともいわれています。

同じ物を見ていても、実は見え方は人によってさまざまです。

 

色覚多様性に配慮されていない配色は、Webサイトの利用や情報の理解を妨げる要因になります。

Webデザインでも、アクセシビリティに配慮したカラー選びが不可欠です。

 

たとえば以下の色の組み合わせは、識別しにくいため、避けるようにしましょう。

 また彩度の高い色に比べて、「灰色と淡い水色」「灰色と淡い緑」などの彩度の低い色の組み合わせは、識別がより困難になります。

カラーについてのバリアフリー化に配慮できれば、さまざまな立場の人に立ったWebデザインが実現するでしょう。

 

基本2.レイアウトについて

レイアウトに関して、以下の基本を押さえましょう。

 

レイアウトの構成

Webサイトに掲載する写真やテキストなどの構成要素(パーツ)のレイアウトによって、ユーザーの操作性や見やすさが大きく変わります。 

 

 このようにレイアウトの構成には、基本的に5つのパーツを必要に応じて加えていきます。

それぞれのパーツの詳細は以下の通りです。

基本的な5つのレイアウト

Webデザインでは、カラムとグリッドを用いてレイアウトを決めていきます。

 

カラムとは、縦のまとまり(列)を意味します。

Webデザインでは目的に合わせたカラム数で、レイアウトを組むのが一般的です。

またグリッドとはWeb画面で表示される格子状の模様を意味します。

 

Webサイトの制作目的やコンテンツなどに応じて、最適なレイアウト方法を選びましょう。

よく使われるレイアウトは以下の5つです。

 

 それぞれの特徴もチェックしておきましょう。

基本3.フォントについて

Webデザインにおけるフォントは、文字による表現を決める役割があります。

特に大切なポイントは次の3つです。

 

フォントの種類と特徴

どのフォントを選ぶかによって、Webサイト全体の印象が変わります。

選び方を間違えると、文字が見えづらくなったり意味が伝わりづらいWebデザインになりかねません。

 

フォントの種類は大きく分けると「デバイスフォント」と「Webフォント」の2つ。

どちらのフォントを選んでも問題ありませんが、それぞれの特徴やメリット・デメリットを理解して利用しましょう。

 

基本的なフォントの種類として、和文では「明朝体」と「ゴシック体」、欧文は「セリフ体」と「サンセリフ体」があります。

 

明朝体は、横線に対して縦線が太く、ウロコと呼ばれる三角の山がある書体です。

教科書や新聞で使用されており、厳格なイメージがあります。

 

ゴシック体は、横線と縦線の太さが均一で、基本的にウロコのない書体です。

視認性が高いのが特徴で、ポスターやスライド資料で使用されます。

 

フォント選びのポイント

フォント選びは感覚ではなく、論理的に選びましょう。

デザインの邪魔をせず、かつ文字が読みやすいのは「視認性」「判読性」「可読性」が高いフォントです。

使う位置や役割によって、うまく使い分けたいですね。

 

フォントを選ぶ際には、以下の特徴を踏まえて選びましょう。

 

フォントサイズや行間の設定

見やすいWebサイトにするには、本文テキストのサイズや行間設定も重要です。

フォントサイズが適切であれば、モバイルからも見やすく、フォントサイズをレスポンシブ(ユーザーに合わせた最適デザイン)に対応させる手間がいりません。

 

基本となる本文テキストのフォントサイズは16px。

多くのWebサイトでは14~16pxのフォントサイズが用いられています。

 

本文のフォントサイズが決まったら、それに合わせて小見出し・中見出し・大見出しを決定しましょう。

それぞれの見出しの要素の大きさの差が大きいと、メリハリの付いたデザインになります。

 

行の高さ(line-height)は1.5~2.0emまでが読みやすい行間です。

行間によってデザインの印象も変わるため、Webサイトの目的に合わせて調整しましょう。

 

基本4.画像について

Webデザインのクオリティを上げるには、画像の選び方、使い方も注意が必要です。

まずは以下の3点を理解しておきましょう。

 

画像の種類と特徴

Webサイトで利用する画像はJPEG・PNG・GIF・SVGなどさまざまな画像形式があります。

まずはそれぞれの画像の種類について理解しておきましょう。

 

Webサイトでは適切な画像形式を選び、データ容量はできるだけ軽くすることがポイントです。

画像を軽くすると、読み込みスピードが上がり、ユーザーにとって使いやすいWebサイトになります。

 

画像選びのポイント

視覚情報が人間に与える影響は55%、第一印象は3~5秒で決まるといわれています。

Webサイトの印象にも、画像は大きな影響があるとわかりますよね。

 

適切な画像を選んで、Webサイトの印象をよくするためにも、次のポイントを押さえましょう。

 

素材サイトの画像は有料・無料を問わず、事前に利用規約に目を通すことも重要です。

 

画像素材のなかにはクレジットの掲載を求めるものや、使用を個人的な用途のみに限定しているケースもあるため、注意しましょう。

後からトラブルにならないようにしたいですね。

 

画像の圧縮方法

Webサイトに掲載する画像のファイルサイズは、ページの表示速度に影響します。

データ容量の大きい画像は、画像圧縮ツールを利用して圧縮しましょう。

たとえばOptimizillaやTinyPNG、JPEGminなどの圧縮ツールが便利です。

 

圧縮ツールによっては、すべての画像形式に対応しているわけではありません。

使用するツールが自分の用途に合っているか確認してください。

 

また一括アップロードに制限があるツールもあるため、アップロードできる最大量やサイズもあわせて確認しておきましょう。

 

基本5.SEO対策について

WebデザイナーもSEO(検索エンジン最適化)の知識が不可欠です。

ではWebデザイナーは具体的にどういった点でSEOに気をつければいいのでしょうか。

 

以下の3つの観点から解説します。

 

SEO対策のポイント

SEOとはSearch Engine Optimizationの略で「検索エンジン最適化」のことです。

Googleはデザインのよし悪しを判断できるわけではないため、デザインはSEOの検索順位を上げる直接的な要素にはなりづらい傾向があります。

 

しかしWebデザインはWebサイトの印象や利便性(ユーザビリティ)に関わる重要な要素です。

間接的にSEOにも影響するため、デザインの観点からも対策が必要です。

 

具体的には以下の点に気をつけましょう。 

 

SEOに配慮したWebデザインができると、ブランディングや認知度、収益を上げることができます。

 

キーワードの選び方

SEO対策でキーワードの選定は非常に重要です。

狙うキーワードによって、上位表示できるか、成果につながるかが左右されます

 

具体的には以下の手順でキーワードを選定しましょう。

 

Google AdWords(Googleの広告出稿サービス)の機能のひとつであるキーワードプランナーは、検索のボリュームや検索キーワードを調べるのに便利なツールです。

しかもGoogle AdWordsに登録すれば誰でも無料で利用できるのでぜひ使ってみましょう。

 

ページタイトルやメタディスクリプションの設定

ページタイトルはSEO対策で重要度の高い要素です。

検索ユーザーはページタイトルを見て、自分に必要かどうかを判断するため、タイトルの付け方次第で実際のクリック率や順位が大きく変わります。

 

SEOに効果的なタイトルをつける際には、以下のポイントを押さえましょう。

 

次にメタディスクリプションとは、そのWebページ内容を要約した文章のこと。

これを設定することで、クリック率向上やページの内容を検索エンジンにアピールするなどの効果があります。

検索結果でページタイトルの下に表示される文章がメタディスクリプションです。

 

SEOに効果的なメタディスクリプションをつけるには、以下のポイントを押さえましょう。

 

魅力的なページタイトルやメタディスクリプションが作れると、アクセス数を増やせます。

 

Webデザインとグラフィックデザイン・UI/UXデザインの違い

グラフィックデザインやUI/UXデザインは、Webデザインと混同しやすい概念です。

そこでこの章ではWebデザインと以下の違いを解説します。 

 

グラフィックデザインとの違い

グラフィックデザインとWebデザインは情報を掲載する媒体が異なります。

 

グラフィックデザインとは、ポスターや広告など紙媒体がメインの印刷物をデザインすること。

一方でWebデザインはデジタル媒体のデザインを指します。

 

その他、グラフィックデザインとWebデザインで異なる点を表にまとめました。

 

UI/UXデザインとの違い

UI/UXデザインとWebデザインにはそれぞれ、下表のような違いがあります。

UI(ユーザーインターフェース)はユーザーがサービスを利用する上での接点を指します。

ボタンや入力欄など、ユーザーがコンテンツと接する構成要素すべてがUIです。

 

UX(ユーザーエクスペリエンス)はユーザーがサービスを利用する上での体験を指します。

たとえばユーザーが欲しい情報を探しやすい、商品内容がわかりやすいなどのユーザー体験です。

 

クライアントの成果を出すWebデザインを作るには、見た目がよいだけではなくユーザーにとって使いやすいデザインにする必要があります。

 

WebデザインとUI/UXデザインの目的の違いを理解したうえで、よりよいデザイン作成を進めましょう。

 

Webデザインの基本を理解してスキルを活かそう！

今回はWebデザインに取り組み始めた方が押さえておきたい、Webデザインの基本をご紹介しました。

 

Webデザインの基本が理解できれば、才能やセンスに頼らずに誰でもよいデザインができます。

勉強の際には本や動画などによる知識のインプットだけでなく、実際に自分の手を動かしながら知識の習得が重要です。

 

活躍できるWebデザイナーになるためにも、アウトプットをメインに勉強を始めましょう。