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

WEBCRE8TOR.COM

ウェブデザインB 第12回

webdesignb12

ウェブデザインB 第12回

前回の講義ではページデザインを始める時に誰しもが頭を悩ませる「配色」についてのお話をしました。その流れで配色の練習もしましたが、色の意味や使い方については理解できたでしょうか??

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

Photoshopの基本設定

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

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

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

Webサイトデザインデータの課題

デザインの作り込み

最近なかなかデザインに時間が取れていませんね。
今回も時間をとりますので、デザインを完成に近づけていきましょう。

今回はデザイン制作に関して、
「配色とレイアウトについて学んだ知識を活かしてデザインを制作してみる」
というテーマをつけようと思いますので、配色とレイアウトを意識しながらデザイン制作を行ってください。

なお、表現のアイディアに困った時は、参考サイトを見てみるのも手です。

課題の提出

今回は現時点まで作り込んでいるWebサイトデザインを提出しましょう。
jpg以外は受け付けられないようになっていますので必ずjpgに書き出して提出してください。

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

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

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

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

本日のまとめ

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

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

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

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

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

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE