ウェブデザインB 第11回 - ウェブデザインB | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザインB 第11回

webdesignb11

ウェブデザインB 第11回

前回は今までのおさらいを行いました。
今回からはまた通常講義に戻ります。

Photoshopの基本設定

今回もまず基本設定から行いましょう。
Adobe Photoshop CC 2017を起動してください。

Webデザインの構築① 配色のコツ

配色の基本は3つの色

今回は、ページデザインを始める時に誰しもが頭を悩ませる配色についてお話しします。

配色の何が難しいかというと、選択した色によってサイトの雰囲気やイメージが大きく変わってしまうため、選択を誤ってしまうと使いやすさ・機能性が損なわれてしまうからです。

特にECサイト(オンラインショッピングサイト)の場合はサイトの雰囲気やイメージも売上に直結する場合が多く見られます。

Webサイトを構成する色(配色)は基本的に3つです。
それぞれ、ベースカラー、メインカラー、アクセントカラーと呼ばれており、この3色を基本に構成を行っていきます。

3つのカラーには、最も美しいとされる面積比率があります。
それが以下の比率です。

ベースカラー メインカラー アクセントカラー
70 % 25  %

ベースカラー:70%、メインカラー:25%、アクセントカラー:5%、
となっていますが、具体的にこの3つはどういうものなのか?を、
中国学園のウェブサイトを参考にしながら解説していきます。

メインカラー

メインカラーとは?

メインカラーは、サイトのデザインを組む際に一番最初に決める色で、
サイトのイメージを決定づける最も重要な色になります。

中国学園の場合はロゴやナビゲーヨンに使われている紫色ですね。

webdesignb11_03

この紫がもし青だったらどうでしょう??

webdesignb11_04

たいぶ印象が変わりました・・・。

メインカラーの選び方

メインカラーの選び方ですが、
企業がブランドイメージカラーを持っていれば、たいていはその色を使えばいいでしょう。
ロゴで使われている色がメインカラーになることが多いのですが、複数色のロゴなら最も面積の多い色を使うことが一般的です。

しかし、ブランドイメージカラーなどがまだ確立されていない場合は新しく考えていかなければいけません。

まずヒアリングした内容から、ターゲットユーザーに「どんなことを伝えたいか?」や「どんな印象を与えたいか?」などを抽出し、オンラインのカラーチャートツールなどを使用して希望に沿った色を選定していきます。

ベースカラー

ベースカラーとは?

ベースカラーはサイトの背景色です。
面積比率が最も高く、ページ全体の雰囲気を作り出す役割を持っている色です。

ベースカラーの選び方

ベースカラーを選ぶとき、白や薄い色などを選択することが多いですが、
一番簡単な方法は、文字がどれだけ見やすいか?を考えることです。

Webサイトには当然ながら文字情報(コンテンツ)が載りますよね。
ということは、背景色の上に文字色が載ることになります。

例えば、中国学園学長メッセージのページを見てみましょう。

webdesignb11_01

文字色が黒(#333333)、背景色(ベースカラー)が白(#ffffff)になり、
色と色がの対比をなして文字がとても見やすいです。

例えば、この背景色を赤(#ff0000)に変更してみると・・・

webdesignb11_02

文字色が黒(#333333)、背景色(ベースカラー)が赤(#ff0000)になり、
文字がとても見えにくく読んでいたら疲れてしまいますよね。

このようにベースカラーは、
使う文字色によってその対比をなす色を選択するといいでしょう。

また、メインカラーの明度を思い切り上げたものも使いやすいです。
ロゴの紫をメインカラーにするなら、そこに白を乗せ限りなく白に近づけてしまえば、
簡単にベースカラーを選定することができます。

アクセントカラー

アクセントカラーとは?

アクセントカラーはページ内でのアクセントとして使われる色です。
しっかりと目立たせて、最も目を引くものでなければいけません。

アクセントカラーを使用するシーンとしては、お問い合わせボタンなど特に目立たせたいものに使うことが多いです。

アクセントカラーの選び方

アクセントカラーは、面積比率5%しかありません。
それだけに最も目立つ色が必要になります。

ベースカラーとなる色の対比をなす色が、
メリハリを生んで目立ちやすいため好ましいとされています。

ただアクセントカラーは全体の色味のバランスを見ながら決めてしまえばいいと思います。

色の持つ意味

ベースカラー・メインカラー・アクセントカラーがどういったものかを知ると、
自分が制作するWebサイトのデザインがどんな配色になるのかが見えてきます。

色は、色自体の意味や色が与える印象がそれぞれ違います。
下の画像をみてください。

webdesignb11_05

参考:色相環とトーンの表を使って色の意味をデザインに生かそう – Webデザイン – acky info

左の円は、円の外側から内側に向かって順に、ベースカラー(70%)、メインカラー(25%)、アクセントカラー(5%)を示し、また右の表は色がそれぞれ持つ意味をキーワードで並べているものです。

こうしてみると同じキーワードが複数の色にまたがっているものもありますね。
この表を参考にいろいろ試してみて、個性的な配色にチャレンジしてみましょう。

Photoshop 実践 その5:ベースカラー・メインカラー・アクセントカラーを調整する

今回の実践は、ベースカラー・メインカラー・アクセントカラーのパターンをいろいろといじってみようと思います。

まず、課題ファイルをダウンロードしましょう。

課題ダウンロード方法

課題ファイルURL:http://webcre8tor.com/data/webdesignb/vol11/kadai_color.psd

※ID・PASSは講義で伝えます。

課題ファイルの中身は、PSDデータです。以下を見てみましょう。

kadai_160628

このPSDデータは長方形ツールとテキストツールでレイアウトを作っていて、
それぞれの色を変えることができるようになっています。

現在は白黒でレイアウトが組まれていますが、
今日学んだ、「ベースカラー・メインカラー・アクセントカラー」がどこに使われるべきかよく考え、それをデータに反映してみましょう。

webdesignb11_06

また今回は配色の方向性を決めます。
今回は先ほど学んだ円と表の画像を見ながら、
「高級感のある大人な配色」を行ってください。

もう一度言いますが、「ベースカラー・メインカラー・アクセントカラー」がどこに使われるべきかよく考え、高級感のある大人なテイストの配色を行ってください。

課題の提出

配色の課題を提出しましょう。
今回もjpg以外は受け付けられないようになっていますので、
必ずjpgに書き出して提出してください。

では提出用にjpgで書き出してみましょう。
手順は以下。

  1. 上部のメニューバーの「ファイル」→「書き出し」→「Web用に保存」
  2. Web用に保存のウィンドウが出てきたら、プリセットの右のプルダウンメニューを「JPEG標準」に変更。
  3. 一番下の「保存」をクリック。
  4. ファイル名をつける必要があるので自分の学籍番号を記入して保存をクリック。

では下のフォームに、書き出したJPGを添付して送信してください。

学籍番号(必須)
氏名(必須)
フリガナ (必須)
メールアドレス
質問など
課題ファイル

本日のまとめ

デザイン制作の現場に限らず、「色」を決めるのは本当に難しいですよね。

デザインよりももっと身近なものであれば、
毎朝着る服を選ぶ時も・・・
雑貨屋さんでマグカップを買う時も・・・

何をどの色にするかは本当に悩みの種です。

ただし、理論的に考えることでより簡単に配色の答えを出すことができるようになります。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE