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

WEBCRE8TOR.COM

ウェブデザインB 第12回

webdesignb12

ウェブデザインB 第12回

Photoshopの基本設定

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

前回の講義ではページデザインを始める時に誰しもが頭を悩ませる「配色」についてのお話をしました。

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

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

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

課題ダウンロード方法

課題ファイルURL:https://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を添付して送信してください。

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

    Webデザインの構築② レイアウトのルール

    色の意味や使い方については理解できたでしょうか??「色」の理解が深まれば今度は「レイアウト」です。
    今回はレイアウトを組む上で最も基本的には4つのルールを説明していこうかと思います。

    Webデザインレイアウトを考える時、何も考えずにただ闇雲に組んでみても、
    雑然としたデザインレイアウトしか組めなくなってしまいます。

    デザインレイアウトをあまりに難しく感じてしまうために組む人たちの苦手意識を増幅させ、
    結果的にデザイン自体を諦めさせてしまう場合もあります。

    実はデザインレイアウトにもルールがあります。
    そのルールを頭に入れた上で、デザインレイアウトを組んでみましょう。

    経験が増えれば、

    デザインレイアウトのルールを守ること。
    今度は守ったルールを客観的に見てみること。
    そして、客観的に見て、あえてルール破ってみること。

    そういったことができてくるはずです。

    近接

    近接とは、関連性の高い情報は配置を近づけ、
    逆に関連性の低い情報は配置を遠ざけるというもの。

    人はWebページを見たときに、
    近くにあるものは関連性が高く、遠くにあるものは関連性が低い。
    と無意識に思ってしまうものです。

    下の画像を見てみましょう。

    webdesignb12_01_01

    サムネイル画像とキャプション(画像を説明するテキスト)がありますね。
    キャプションを読んでみるとキャプションがサムネイル画像の説明だということがわかりますが、
    上段の画像のものなのか、下段の画像のものなのかが明確ではなく、とてもわかりづらいですね。

    こういった場合は「近接」をうまく使いましょう。
    下の画像を見てみましょう。

    webdesignb12_01_02

    キャプションがサムネイル画像の近くに配置され、
    とてもわかりやすくグルーピングされていますね。

    先ほどの画像とこの画像、違いはなんでしょう?

    違いは一つです。
    関連性の高いものを近づけて配置しただけ。
    もっと具体的に言うと、キャプションを画像に近づけただけです。

    近接の法則を守るだけでこれだけ違います。

    近接に関しての参考になる解説がありますので見てみましょう。

    参考:エンジニアのためのWebデザイン基礎の基礎(1):重要な情報は左上に――効果的なデザインに必要な4つの原則 – @IT

    整列

    整列の目的は、ユーザーの視線をバラバラにしないために統一感を生み、
    「何がどこにあって何を見ればいいのか」を、
    無意識のうちに判断できるようにしてあげることです。

    上端揃え、下端揃え、中央揃え、左揃え、右揃え・・・揃え方は様々ありますが、
    いずれかの方法でページ内の要素どうしを揃えなければいけません。

    効果的な整列のためのコツがあります。
    それが「見えない線を意識すること」です。

    Photoshopのグリッド線が一番わかりやすいと思いますが、
    キャンバスにグリッド線を引き、線に要素を整列すれば、
    美しく統一感のあるデザインの近道になります。

    ではまず下の画像を見てみましょう。

    webdesignb12_02_01

    画像とキャプションを左揃え、テキストを中央揃えにしているために統一感がありません。
    見ていて視線がバラバラになってしまい、とてもわかりにくいですね。

    では次の画像を見てみましょう。

    webdesignb12_02_02

    全ての要素を見えない線を基準に左揃えにしたことで統一感が生まれ、
    「近接の法則」合わせて使うことで全体がとても美しく見やすくなりました。

    参考:エンジニアのためのWebデザイン基礎の基礎(2):“見えない”線を“見せる”グリッドシステム――Webデザインの4原則その2「整列」 – @IT

    コントラスト

    テキストや画像も含め、サイズや色などの強弱をつけて差を生み出すことを言います。
    コントラストがつけば、タイトルやサブタイトル、本文などの区別がつき、
    読みやすさや見やすさを生むことができます。

    下の画像を見てみましょう。

    webdesignb12_03_01

    ここにはタイトル・サブタイトル・本文があります。
    けどどれがタイトルでどれがサブタイトルでどれが本文なのか・・・
    タイトルと本文に差がないためこの状態では判別が難しいですね。

    次に下の画像を見てみましょう。

    webdesignb12_03_02

    タイトル・サブタイトル・本文に、フォントサイズ(文字の大きさ)・フォントウェイト(文字の太さ)・色などの差をつけました。それぞれの区分が明確になり、非常に見やすくなります。

    参考:エンジニアのためのWebデザイン基礎の基礎(4):情報のレベルをコントロールする――Webデザインの4原則その4「コントラスト」 – @IT

    反復

    反復の法則とは、「レイアウトなどのデザインの要素を繰り返して使う」ことです。

    ユーザーはサイトを訪れ、無意識にサイトのルールを頭に入れながらサイト内を見てまわります。
    「どれだけ早く慣れさせるか」というのもデザインの大切な役割なので、
    一貫性を持ったレイアウトにすることが重要です。

    画像で見てみましょう。下の画像を見てみてください。

    webdesignb12_04_01

    まずこの一覧は商品一覧です。
    一覧にあるものは、全て同じフォーマットの商品詳細ページにリンクするようにしています。
    つまり、商品は違えども、全て同じレベルの内容で同じ機能を持つ、ということです。

    それを頭に入れた上で「商品の一覧」として見てみると、
    フォントの書体やサイズも違う・・・さらに画像や文字もがあったり無かったり・・・
    この状態では全く一貫性を保たずに、同じ機能を持ってるとはわかりづらいですね。

    では次に下の画像を見てみてください。

    webdesignb12_04_02

    今度は全て同じレイアウト、書体、画像もあり、
    一貫性のあるルールの中でデザインを行っています。

    ユーザーは「選択」をすればいいだけなので、
    とてもスムーズに次の行動へ移行することができます。

    またWebサイトにはページが複数存在する場合が多いですよね。
    ページが複数存在するということは、ナビゲーションなどの機能が備わってることがほとんどだと思いますが、例えばページごとに全然違うデザインのナビゲーションだとどうでしょう??

    違うページを開くたびに考えなくてはならず、戸惑いながらページを見ることになります。
    戸惑いを与えている時点でそもそも購入やお問い合わせに結びつくわけがないですよね。

    参考:エンジニアのためのWebデザイン基礎の基礎(3):デザインで使い勝手を向上させる――Webデザインの4原則その3「反復」 – @IT

    本日のまとめ

    配色と同じように、レイアウトはとても頭を悩ませるポイントです。
    でも、実はどちらにも先人たちが知識と経験で培ったものをベースにしたルールが存在し、
    そのルールを知り、ルールを守るところからデザインを始めてみましょう。

    そして、そのルールが自然に身についてきたら、
    今度はルールを客観的に見つめなおしてみます。

    「正しい」だとされていたことが本当に「正しい」のかを考え、分析してみましょう。
    その上で「こっちの方が自分に合っているんじゃないか?」と考えられるものがあれば、
    今度はそのルールを壊して自分のものにしてみましょう。

    ただ忘れてはいけないのは、
    ルールを壊せるのはルールを知っている人にしかできません。
    ルールを知らずにルールを壊そうとしても、次のステップには進めません。

    まずはしっかりとルールを身につけることが大事です。

    WEBCRE8TOR.COM

    SEARCH

    PAGES

    CATEGORY

    ARCHIVE

    LINK

    CLOSE