ウェブデザイン技能検定3級学科解説その14ウェブカラーデザインについて

ウェブデザイン技能検定3級学科出題範囲

5.ウェブビジュアルデザイン

5-1.ページデザインおよびレイアウト

3)ウェブカラーデザイン

4)構成について

5)レイアウト手法

2.ウェブサイトのページデザイン、サイト構築について一般的な知識を有すること。

 

ウェブカラーデザインについて

RGBとCMYK

RGBとは

RGBとは光の3原色のことで、主にWebデザインで使用する。

赤(Red)、緑(Green)、青(Blue)の3色の頭文字をとってRGBという。

光の3原色と呼ばれるこの3色を使ってさまざまな色をつくりだすことができる。

3色を等量で混ぜ合わせると白になるという特徴がある。

WEBサイトなどパソコンのディスプレイで表示されるものは

すべてRGBカラーで制作されている。

 

CMYKとは

CMYKとは色の3原色のことで、主にグラフィックデザインで使用する。

色の3原色であるC(シアン:cyan)、M(マゼンタ:Magenta)、Y(イエロー:Yellow)に

BlackのKを組み合わせてCMYKという。

こちらは3色を等量ずつ混ぜ合わせることで徐々に暗くなっていき、最後は黒になる。

印刷物制作の際に使用されている。

 

色の三属性とは

色には「色相」「明度」「彩度」の3つの属性がある。

まずはカラーデザインの基礎である三属性について説明する。

色相とは

色相とは、いわゆる赤・青・黄色・緑といった色味のことを指す。

上は色相を円状に配置した「色相環」と呼ばれるもの。

色相環上で、あるひとつの色と反対に位置する色のことを「補色」と言い、

お互いの色をより引き立てあうことができる。

 

明度とは

「明度」とは色の明るさのことである。

黄色と緑であれば黄色の方がより明るい色である。

つまり、明度が高いほど白に近づき、低くなるほど黒に近くなる。

上の画像では、右が明度高め。左が明度が低めである。

明け方と夕方のような違いがある。

 

「彩度」とは

彩度は色の鮮やかさを意味している。

上の画像だと右が彩度高め、左が彩度低めとなっている。

今回のイチゴのケーキだと彩度高めの方がより鮮やかでおいしそうに見える。

彩度を低めにするとスモーキーで柔らかな印象に。

彩度はもっとも低くするとモノクロになる。

 

 

面積比率

配色をする時は比率に気をつけるだけでぐっと見栄えが良くなる。

ベースカラー 70%
サブカラー 25%
アクセントカラー 5%

このようにその面積の比率を考えて配色を行うという手法である。
(※厳密に%計算の必要はない。あくまで目安。)

 

可読性とは

可読性とは色によって文字が読みやすいかどうかを表す性質である。

基本的には白×黒のように背景と文字の明度の差が大きいと可読性が高いと言われている。

最も読みやすい組み合わせは白×黒といわれていて、

その他の色は可読性は高くとも、読みやすさでは少し劣ってしまう。

ブログなどユーザーが文字を読み進めたり

長い間webサイトと関わるのなら可読性にも注意しなければならない。

カラーコードについて

下記のサイトでカラーコードを調べることが出来る。

色の名前とカラーコードが一目でわかる

WEB色見本原色大辞典

ブラウザで名前が定義されている140色の色名と16進数

https://www.colordic.org/

 

構成について

ウェブサイトを構築する際に、

全体の構成をどのようにするか事前によく検討する必要がある。

そのために必要なものがデザインであり、

ウェブデザインでよく利用される手法が出題される傾向がある。

 

サイトマップについて

サイトマップとは、ウェブサイトのページの一つで全ページへのリンクが記述されている。

製作者側から見たサイトマップはウェブページの構造を全体的に把握できるもので、

最も多いものはツリー構造で表現されたサイトマップである。

製作初期の段階では、サイトマップを利用することによってサイトの

全体像を視覚的に把握しながら検討することができる。

 

ワイヤーフレームとは

サイトマップがウェブサイトの全体構造を表しているのに対し、

各ページの中のコンテンツのレイアウトに関してはワイヤーフレームというものが

よく利用されている。

ワイヤーフレームを一言で言うと「サイトの設計図」である。

サイトを開発する前に「何を・どこに・どのように」画面に配置するかを

明らかにし、サイトマップと同様に製作初期の段階で内容を検討する際に利用する。

視覚的で分かりやすいため、どの役割の人も同じように理解を深めることが期待できる。

また、Webサイトの開発には時間がかかってしまうが、

ワイヤーフレームは簡単に作成することができる。

ブレインストーミングを行ったり、仕様を柔軟に変更したりすることで、

デザインを改善することができる。

 

ワイヤーフレーム作成に必要なこと

ワイヤーフレームの作成では「何を・どこに・どのように」配置するかを決める。

「何を」については、メニューの構成、ロゴ、コンテンツ、広告などを漏れなく描きだす。

「どこに」については、画面上部・下部・左右などの画面上の位置について検討する。

「どのように」については、段組やリンクなどの仕様を決定する。

デザインを設計する際には、「ユーザーにとって使いやすいこと」や

「伝えるべきメッセージが伝わること」を意識する必要がある。

例えば、ユーザーの視線は左上から右下へ進むと言われている。

そのため、重要な情報は左上に配置することが推奨されている。

一方で、ワイヤーフレームの段階では色や画像といった詳細な仕様にはこだわる必要は無い。

装飾は後回しとして、まず、枠組みを確立することが目的である。

 

レイアウト手法について

ワイヤーフレームの構成要素

ワイヤーフレームのレイアウトには、いくつかの種類がある。

全面を一つの要素で埋めるフルスクリーン型や

ヘッダーのあるシングルページ型などが挙げられる。

一般的に用いられるのは、マルチカラム型のレイアウトで、

マルチカラム型のレイアウトは以下の要素から構成されている。

 

ヘッダー:メニューや検索フォームなどを配置する

コンテンツ:訪問者に伝えたい情報を盛り込む。文章・画像・動画・表など。

サイドバー:ナビゲーションや広告などを含む

フッター:コピーライトの表記やサイトマップを配置する

 

ヘッダーとは

ヘッダーとは、webサイトの最上部に位置するパーツである。

一般的にwebサイト内の全ページ共通のパーツであり、すべてのユーザーが閲覧する。

そのため、サイトロゴや重要なリンクなどが配置される傾向にある。

当サイトのヘッダーは「トップページへのリンク(ロゴ)」「特商法に関する表記」

「ご依頼ご相談後の流れ」「参加無料オンラインサロンのご案内」が設置されている。

この4つは重要度の高い要素であり、他サイトでもたびたびヘッダーに配置されている。

よく見かける構造のため、初めて来訪したユーザーでも戸惑うことなく使用できる。

ヘッダーの構造を決めるときに気を付けるべきことは、

「ユニットを置きすぎない」ということである。

ヘッダーはファーストビューに位置し、必ずユーザーの視界に入る。

そのため重要なリンク設置に最適なエリアなのだが、

あまりにたくさんのユニットを配置してしまうと、

肝心のコンテンツ本体が押し下げられてしまう。

結果的にユーザビリティが低下し、

ファーストビューだけで離脱してしまうユーザーが増えかねない。

デザインと操作性を考え、厳選したパーツを設置するようにするべきである。

なお、スマホで閲覧した場合はPCよりもファーストビューの面積が少ないため、

「グローバルナビゲーションを折り畳み式のアコーディオンメニューにする」などの

配慮が必要となる。

ヘッダーに限らず、サイト構造を考えるときには、

PCサイトだけでなくスマホサイトでの利便性も必ず考えよう。

パンくずリストとは

パンくずリストとはユーザーが現在閲覧しているページが、

Webサイト内のどこなのか?を明示したものである。

パンくずリストという言葉の由来だが、

グリム童話のヘンゼルとグレーテルに由来している。

兄妹が森に道に迷うのだが、どのように道をたどったかが後で分かるように、

道を曲がった時にパンをちぎって落としていったことに由来している。

このエピソードと同じように、

どのようにページをたどったをわかるようにしたものである。

フッターとは

フッターとは、webサイトの最下部に位置するパーツである。

ヘッダーと同様webサイト内の全ページ共通のパーツだが、

こちらはあまりユーザーの視界には入らない。

メインコンテンツを閲覧したユーザーは、

そのまま離脱してしまうことが多いからだ。

逆にいえば、フッターまで目を通してくれるユーザーは、

コンテンツだけでなくwebサイト自体にも興味を持ってくれたユーザーといえる。

そのため、「運営会社の情報・クレジット表示」「個人情報の取り扱い」

「問い合わせ入力欄」など、

webサイトの主軸ではないものの重要な情報が配置される傾向にある。

収益化しているサイトであれば、広告が設置されることもある。

また、サイト内の重要なページへの内部リンクを設置し、

サイトマップのような使い方をすることも多くある。

フッターをサイトマップ的に使うことは、

ユーザーに「このページが重要ですよ」と示すとともに、

内部リンクが集中することで検索エンジンにもページの重要性を示す効果がある。

 

サイドバー

サイドバーは、メインコンテンツの横に設置されるパーツである。

左右のカラム(縦の列)に置かれ、主にメニューとして機能する。

メインコンテンツを閲覧している間にも視界に入るため、

他のコンテンツへの誘導に適したパーツである。

ブログサイトであれば、「筆者の紹介」「カテゴリページへのリンク」

「投稿年月ごとのまとめページへのリンク」

「メルマガ登録への誘導リンク」などが主に設置される。

ただし、スマートフォンサイトはサイドバーを設置すると視認性が低下するため、

ほとんど設置されない。

また、近年のトレンドである1カラムサイトなどは、

デザイン性やブランディングの観点からサイドバーを敢えて排除している。

こういった場合は、一般的にサイドバーに設置されるメニュー部は、

コンテンツ下部やフッターにメニュー設置するといい。

 

メインコンテンツ

記事上部

メインコンテンツ(記事本文)の上部パーツである。

主に「ページタイトル」「公開日」「更新日」「ソーシャルボタン」など、

webサイト全体ではなくページごとに必要な要素が配置されている。

サイトによっては、ここにパンくずリストが設置されていることもある。

このパーツもヘッダーと同じく、ユーザーにとってのファーストビューに位置する。

ユーザーの視界に入りやすいエリアだが、

情報を詰めすぎるとコンテンツ本体が押し下げられてしまう。

場合によってはページタイトルのみを設置し、

それ以外はすべて記事下に置くのも選択肢の一つである。

 

記事内部

メインコンテンツである記事内部も、記事自体の質はもちろんだが、

構造的に気を付けるべきことがある。

記事内の移動や他関連ページへの移動がしやすいように配慮する必要がある。

ユーザーが記事全体ではなく特定の話題にのみ興味がある場合、

記事冒頭に目次があり、そこから各見出しへ移動できると便利である。

また、専門用語の解説記事へのリンクや関連記事へのリンクが設置されていると、

「わからない用語の意味を知りたい」「これについてもう少し詳しく知りたい」

といった欲求にすぐ応えられるようになる。

当サイトでは、記事内に「目次」「見出し」「テキストリンク」などを設置している。

閲覧しているユーザーがなにを知りたいか、その目線に立ったリンク設置しよう。

 

記事下部

メインコンテンツの下部パーツは、

ユーザーになんらかの行動を促す要素の設置に適している。

たとえば「関連記事」で他の記事に誘導したり、

「SNSボタン」で記事のシェアを促したり、といったことである。

記事下部を閲覧しているユーザーは、

途中で離脱せずに最後までコンテンツを読んだユーザーである。

途中で離脱したユーザーよりも、記事やサイト、

著者などに対して関心を持っているといえる。

ユーザーが興味を持っているであろう別記事へ適切な誘導ができれば、

サイトのPV数向上に寄与することはもちろん、

ユーザーにとっても有益な構造となる。

主に設置されるものとして、「関連記事」「最新記事」「同ジャンルの最新記事」

「前後の記事」「SNSボタン」「広告バナー」

「商品ページへのリンク」などが挙げられる。

原則として、記事下のユニットは「見てほしい順」に上から配置していく方が効果的だ。

広告で収益化しているサイトであれば、広告バナーを直下に配置してもいい。

自社が最もPRしたい商品ページへのリンクなどを置くのにも適している。

自サイトが何を目的としてどんな成果を得たいのかよく考えて、

設置するユニットと順番を決めていく必要がある。

 

まとめ

ウェブデザインについては、テキスト、画像、カラーなどの知識と、

構成やレイアウトなど、それらを扱う手法について出題される。

 

過去問

1. 各設問において、正しいものは1を、間違っているものは 2 を、該当設問の解答欄に記せ。

Q1.色の表現手法の 1 つである RGB とは red、gray、blue の頭文字をつなげたものである。

正解は2。赤(Red)、緑(Green)、青(Blue)の3色の頭文字をとってRGBという。

 

Q2.加法混色とは、赤・青・黄色の 3 色の組み合わせによる色表現の方法である。

加法混色とはRGBのことである。

RGBは赤(Red)、緑(Green)、青(Blue)の3色の組み合わせなので正解は2。

ちなみに色の3原色であるC(シアン:cyan)、M(マゼンタ:Magenta)、Y(イエロー:Yellow)に

BlackのKを組み合わせたCMYKは、減法混色である。

 

Q3背景色が白のとき、アクセシビリティを高くするのであれば文字色はできるだけ薄い色を使用した方が良い。

 

考えなくても分かりそうだが、正解は2である。

基本的には白×黒のように背景と文字の明度の差が大きいと可読性が高い。

 


このエントリーをはてなブックマークに追加

マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です