Webデザインのセオリーを学ぼう

Webデザインのセオリーを学ぼう

2012.02.16　福井工業高等専門学校

佐々木 敏明（Web Designer at BaseLine Inc.,）

Agenda

• デザインとは

• Webデザインとは

• デザインセオリーについて

• まとめ

- 本 日 の 内 容 -

※今日お話するのは私なりのまとめです。

Goal - 本 日 の 目 的 -

• デザインセオリーを知る

• デザインを考える力を身につける

• 楽しみを知る

デザインの手法だけの話ではなくて、考え方の話もします

表面だけのデザインは意味がない場合があります

※

Please - お 願 い -

• 聴いて終わりではなく、手を動かす

• 作る、そして考える

• 考えて、また手を動かす

About Design

Design

ある問題を解決するために思考・概念の組み立てを行い、

それを様々な媒体に応じて表現すること

Design? Art?デザイン

• 人に伝えるため/ものをよく見せるための技術

• 明確な目的、ターゲットがいて作り手側の意図を伝えるために行うもの

アート

• 自己表現。人に伝わらなくてもよい

• 明確なターゲットや目的はなく、芸術的/美術的感覚によって造形されたもの

via un-T BOOTCAMP

広義のデザイン

コンセプトの具現化、人間の行為をより良いかたちにするための

「設計」「計画」

戦 略 制 度 組 織 プロセス

via @nakagawan

狭義のデザイン設計を行う際の形態、特に図案、模様、レイアウト等の計画

造形行為とそのディレクション

視 覚

機 能

空 間

その他

• グラフィックデザイン

• タイポグラフィ

• 映像・アニメーション

• 環境デザイン

• インテリアデザイン

• 建築デザイン

• プロダクトデザイン

• ファッションデザイン

• テキスタイルデザイン

• 情報デザイン

• サイン計画

• インターフェースデザイン

• ゲームデザイン

via @nakagawan

デザインするということ

• 情報を整理し、わかりやすく伝えること

• もの/サービスの価値を最大限に高めること

意識しながら

デザインする

Design is not just what it looks likeand feels like. Design is how it works.

デザインとは、単なる視覚や感覚のことではない。

デザインとは、どうやって動くかだ。

Steve Jobs

About Web Design

Webデザインとは

• Webという空間で活かされるデザイン表現

• 「見る」「感じる」だけでなく、

「使う」「コミュニケーションする」

• Webサイト、Webアプリケーション、

モバイルサイト、モバイルアプリケーション

見るだけではない

• 検 索

• インタラクション（相互作用）

• 発 信（ブログ、SNS）

• コミュニケーション（ブログ、SNS）

コンテキスト（前後関係）を考える

• どのようなユーザーがターゲットなのか

• ターゲットに合わせた見せ方、プロモーション

• 情報の配置、色、文字 など

• ユーザーの背景を考えてデザインをする

Webデザインまとめ

• Webという空間で活きる設計・見せ方

• ターゲットとなるユーザーを考える

• PCだけではなく、モバイルも意識する

制 作 の 流 れ

Flow

制 作 の 流 れ

Flow

要件定義 情報設計 デザイン コーディング

要件定義 情報設計 デザイン コーディング

• 作る目的を考える

(ブランディング、商品販売、プロモーション etc...)

• 目的に適した戦略デザイン

情報設計要件定義 デザイン コーディング

• デザインの前に設計を行い、骨組みを作って

全体をイメージする（ワイヤーフレーム）

• クライアントワークの場合は、クライアントとの

意識共有のために

デザイン情報設計要件定義 コーディング

• Photoshop, Illustrator, Fireworks などを使い、

仕上がりイメージのデザインを行う

• 画像を用意できればソフトは何でもよい

• コーディングを効率的に行うことができる

コーディングデザイン情報設計要件定義

• DreamWeaver等でHTML,CSSのマークアップ

• テキストエディタでよい（補完機能あると良い）

• ブラウザで表示されるようにする

Design Theory

Design Theoryデ ザ イ ン セ オ リ ー

デザインするうえで注意するポイントや体系化されたルールなどのこと

Design Theoryデ ザ イ ン セ オ リ ー

色 レイアウト フォント

色レイアウト

フォント50%

25%

25%

レイアウト

色

フォント50%25%

25%

今日は

Layoutレ イ ア ウ ト

Layoutレ イ ア ウ ト

• デザインの4つの基本原則

• 情報設計

• 視線の流れ

• 黄金比、白銀比

Layoutレ イ ア ウ ト

• デザインの4つの基本原則

• 情報設計

• 視線の流れ

• 黄金比、白銀比

デザインの4つの基本原則

1. 近 接

2. 整 列

3. 反 復

4. コントラスト

LayoutノンデザイナーズデザインブックWilliams Robin著

デザインの4つの基本原則

1. 近 接

2. 整 列

3. 反 復

4. コントラスト

LayoutノンデザイナーズデザインブックWilliams Robin著

近接の原則

Layout

関連する項目をまとめてグループ化する

注）

関連しない情報同士を近づけない

ページの構造と内容の直線的な手がかりをユーザーへ提供するもの

近接の例（メニュー）

Layout

akiyoshishiroakajunkeinegi-makushi-katsuwakahatsutansasami

akiyoshishiroakajunkeinegi-makushi-katsu

wakahatsutansasami

近接の例（メニュー）

Layout

akiyoshishiroakajunkeinegi-makushi-katsuwakahatsutansasami

akiyoshishiroakajunkeinegi-makushi-katsu

wakahatsutansasami

おすすめ

近接の例（名刺）

Layout

佐々木 敏明

BaseLine Inc., 0776-26-1181

福井市中央2丁目00-0 TOSHIAKI SASAKI

近接の原則

Layout

関連する項目をまとめてグループ化する

注）

関連しない情報同士を近づけない

ページの構造と内容の直線的な手がかりをユーザーへ提供するもの

近接の例（名刺）

Layout

佐々木 敏明

BaseLine Inc.,〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181

TOSHIAKI SASAKI

近接の例（名刺）

Layout

佐々木 敏明

BaseLine Inc.,〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181

TOSHIAKI SASAKI個人情報グループ

会社情報グループ

間隔

Layouthttp://www.microsoftstore.jp/Form/Product/ProductCategory.aspx?cat=100&WT.mc_id=windows_productpage_topmodule

Layouthttp://www.microsoftstore.jp/Form/Product/ProductCategory.aspx?cat=100&WT.mc_id=windows_productpage_topmodule

Layout

?

近接のまとめ

Layout

• 関連する項目のグループ化

• 他のグループとの間に十分な隙間をあける

• 視線の流れも意識する

デザインの4つの基本原則

1. 近 接

2. 整 列

3. 反 復

4. コントラスト

LayoutノンデザイナーズデザインブックWilliams Robin著

整列の原則

Layout

各要素を意図的に整列して配置する

注）

すべての項目が他の項目と視覚的に関連しなければならない

整列の例

Layout

佐々木 敏明

BaseLine Inc.,0776-26-1181

福井市中央2丁目00-0TOSHIAKI SASAKI

整列の例

Layout

佐々木 敏明

BaseLine Inc.,0776-26-1181

福井市中央2丁目00-0

それぞれの要素が独立したルールで配置されていてまとまりがない

TOSHIAKI SASAKI

整列の例

Layout

佐々木 敏明

BaseLine Inc., 0776-26-1181

福井市中央2丁目00-0 TOSHIAKI SASAKI

他の要素と視覚的に関連させて配置させたほうがまとまりが良い印象を与える

整列の例

Layout

佐々木 敏明

BaseLine Inc.,〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181

TOSHIAKI SASAKI

見えない「線」を意識する

整列の例

Layout

佐々木 敏明

BaseLine Inc.,〒910-0008 福井市中央2丁目00-0 HOGE BLD2F

TEL 0776-26-1181

TOSHIAKI SASAKI

こういうのもアリ :-)

整列の例

Layout

佐々木 敏明

BaseLine Inc.,〒910-0008 福井市中央2丁目00-0 HOGE BLD2F

TEL 0776-26-1181

TOSHIAKI SASAKI

整列の例

Layout

佐々木 敏明

BaseLine Inc.,〒910-0008 福井市中央2丁目00-0 HOGE BLD2F

TEL 0776-26-1181

TOSHIAKI SASAKI

これはナシ :-(

Layouthttp://www.solala.co.jp/

整列のまとめ

Layout

• 要素の視覚的なつながりを意識して配置する

• 出来上がりを見たときに統一感があるか

• あえてルールを破ることで目立つ場合もある

デザインの4つの基本原則

1. 近 接

2. 整 列

3. 反 復

4. コントラスト

LayoutノンデザイナーズデザインブックWilliams Robin著

反復の原則

Layout

デザイン上のなにかの特徴を作品全体を通して繰り返すこと（一貫性を持たせる）

反復の原則

Layout

これらも反復の法則に則って配置してます

Layouthttp://www.ntmed.co.jp/

メニューボタンを反復

Layout

事業内容（リンク）を反復

Layout

トピックステキストの反復Layout

Layout

サイト全体で見出しの反復

Layout

反復のまとめ

Layout

• 特徴的ななにかを反復して使う

• 全体に統一感、一貫性を作る

• くどくならないような注意も必要

デザインの4つの基本原則

1. 近 接

2. 整 列

3. 反 復

4. コントラスト

LayoutノンデザイナーズデザインブックWilliams Robin著

コントラストの原則

Layout

異なる要素をはっきりと違わせること

注）

レイアウトだけに限らず、フォントの大きさ、色にも関わってくる

コントラストの例

Layout

福井高専のスクールライフ

学科紹介

福井高専の大きな魅力の1つは、その充実した工学教育にあります。ここでは全5学科及び工学基礎コースを紹介します。また、専門科目以外の授業や行事などについても紹介します。

福井高専のラジオ番組

毎週日曜午前11時～12時。たんなんFM 79.1MHzにてお届けしています「高専ライブ」！福井高専の得意とする「ものづくり」についてもっと知ってもらおうと、いろんな人に登場してもらうラジオ番組です！

コントラストの例

Layout

福井高専のスクールライフ

学科紹介

福井高専の大きな魅力の1つは、その充実した工学教育にあります。ここでは全5学科及び工学基礎コースを紹介します。また、専門科目以外の授業や行事などについても紹介します。

福井高専のラジオ番組

毎週日曜午前11時～12時。たんなんFM 79.1MHzにてお届けしています「高専ライブ」！福井高専の得意とする「ものづくり」についてもっと知ってもらおうと、いろんな人に登場してもらうラジオ番組です！

近接や整列の原則に則ってるが

コントラストが弱いので

少し読みにくい

コントラストの例

Layout

福井高専のスクールライフ

学科紹介福井高専の大きな魅力の1つは、その充実した工学教育にあります。ここでは全5学科及び工学基礎コースを紹介します。また、専門科目以外の授業や行事などについても紹介します。

福井高専のラジオ番組毎週日曜午前11時～12時。たんなんFM 79.1MHzにてお届けしています「高専ライブ」！福井高専の得意とする「ものづくり」についてもっと知ってもらおうと、いろんな人に登場してもらうラジオ番組です！

タイトル、見出し、本文という

レベルを区別して文字の大きさ

（コントラスト）を使い分ける

1ptや1pxのコントラストでは

違いがわからない

臆病にならず、大胆に！

コントラストの例

Layout

福井高専のスクールライフ

文字の大きさだけではなく、太さでもコントラストを表現できる

福井高専のスクールライフ

小塚ゴシック EL 64pt

小塚ゴシック H 64pt

コントラストの例

Layout

色の濃淡でもコントラストを表現

福井高専のスクールライフ

福井高専のスクールライフ

K 30%

K 0%

コントラストのまとめ

Layout

• 異なる要素をはっきりと違わせること

• 僅かな違いでは気づかない。大胆に！

• どの要素をコントラストを強くするかは

情報のレベルを考えることが大事

• 目立たせるにはコントラストを意識すること

デザインの4つの基本原則

Layout

近 接 整 列 反 復 コントラスト

感覚で要素を配置するのではなく、4つの基本原則を意識して

レイアウトすることで、まとまりや見やすさを作りだすことができる

Layoutレ イ ア ウ ト

• デザインの4つの基本原則

• 情報設計

• 視線の流れ

• 黄金比、白銀比

情報設計

Layout

• デザインとは機能するもの

• 情報をわかりやすく配置する

• 情報に優先度をつける

• 要素を配置する場所のセオリーを知る

（ユーザーを混乱させないため）

Layouthttp://http://mb.softbank.jp/mb/customer.html/

http://www.nttdocomo.co.jp/

Layouthttp://store.apple.com/jp http://lotte-shop.jp/shop/default.aspx

Layoutレ イ ア ウ ト

• デザインの4つの基本原則

• 情報設計

• 視線の流れ

• 黄金比、白銀比

視線の流れ

Layout

• モノを見るとき、視線の流れにルールがある

• 流れに則って見せたい情報を配置することで

よりわかりやすく情報を伝えられる

視線の流れ（ Z 軸）

Layout

START

GOAL

休憩（強）

休憩（弱）

START

GOAL

休憩（強）

休憩（弱）

via un-T BOOTCAMP

視線の流れ（ F 軸・E 軸）

Layout

START

GOAL

休憩（強） START

GOAL

休憩（強）

via un-T BOOTCAMP

Layoutレ イ ア ウ ト

• デザインの4つの基本原則

• 情報設計

• 視線の流れ

• 黄金比、白銀比

黄金比

Layout

名刺、カード、写真等

1 : 1.618

白銀比

Layout

日本建築や彫刻、用紙のサイズ

1 : 1.414

Color色

色は

印象 を与える

Color

色の3属性

• 色 相

• 明 度

• 彩 度

Color

色 相

Color赤・青・緑・黄...など「色み」のこと

彩 度

Color

色の「鮮やかさ」

彩度が高い 彩度が低い

明 度

Color

色の「明るさ」

彩度が高い 彩度が低い

光の3原色

• 光を加える形で色を合成

• Red, Green, Blueの

組み合わせで色を表現

• ほぼすべての色を表現

Color

使う色を決める

Color

3つの色をベースにする

Color

ベースカラー 70% メインカラー 25%

アクセントカラー 5%

メインカラー

Color

• デザインのキーとなる色

• Webサイトの場合、ロゴマークから取ってくる

• ターゲットユーザーによって決めるパターンも

ベースカラー

Color

• 背景など、広い面積に使う色

• 薄い色が扱いやすい

• 色で印象づけたいなら濃い色を使う

アクセントカラー

Color

• アクセントを出す色

• リンクテキストやボタンに使うことで

クリックされやすくする

• メインカラーの反対色など

色の選び方

Color基準色

反対色（補色）

差し色 差し色

近似色 近似色

色から受ける印象

情熱、勢い、危険

暖かい、ほがらか、楽しい

元気、奇抜、注意

自然、爽やか、春

安らぎ、深い、落ち着いた

清潔感、涼しい、透明感

さびしい、静かな、固い

高貴な、粋、冷静

女性的、ミステリアス、優雅

どんより、公平、憂鬱

真夜中、厳粛、シック

冬、清潔、神聖

Colorvia un-T BOOTCAMP

トーン

彩度

明度

明度・彩度の

調整により色の

調子を表した

もの

Colorvia un-T BOOTCAMP

意味（理由）のある色使いを

「購入意欲を高めるために赤色のボタンを配置」

や「ターゲットユーザーが若者なのでビビッドな

色使い」など、意味のある色使いを意識する

Color

Colorhttp://colorschemedesigner.com/

Fontフ ォ ン ト

書体選びの重要性

Font

• 色々な種類の書体がある

• 色と同じく、書体も人に印象を与る

• コピーに合う書体を選択する

YES!! ff pop

書体選びの重要性

Font

•色々な種類の書体がある

•色と同じく、書体も人に印象を与る

•コピーに合う書体を選択する

YES!! coffee time pop

文字の種類

Font

Typeface

書体見本

セリフ体/明朝体

Typeface

書体見本

サンセリフ体/ゴシック体

フォントファミリー

Font

Helvetica lightHelvetica regularHelvetica boldHelvetica italicHelvetica italic bold

コントラストの例

Layout

福井高専のスクールライフ

文字の大きさだけではなく、太さでもコントラストを表現できる

福井高専のスクールライフ

小塚ゴシック EL 64pt

小塚ゴシック H 64pt

ジャンプ率

Font

• 一番大きい要素と小さい要素の差

• ジャンプ率が大きいと「活発・若者」という印象

• 小さいと「高級・大人っぽい」という印象

http://www2.gwc.gakushuin.ac.jp/ Font

http://www.charleselena.com.au/ Font

Fonthttp://www2.panasonic.biz/es/lighting/feu/

文字詰め、行間にも注意する

Font

• も じ の 間 を ゆ っ た り と

• 文字感覚を詰めることで緊張感が

文字の感覚だけでなく、行の感覚が狭いことによって雰囲気を演出することができる。

雰囲気だけの問題ではなく「見やすさ」「わかりやすさ」にも影響を与えるので見た目で判断をする。

行の間隔が狭いと読みにく

いので、じゅうぶんな間隔

をとって、情報を伝えやす

くすることをしっかりと考

慮しましょう。

文字の間隔を細かく調整

Font

コントラストを意識

文字の間隔を細かく調整

Font

コントラストを意識

文字の間隔を細かく調整

Font

コントラストを意識

• 書体のもつ雰囲気を理解し、

コピーにふさわしい書体を選択する

• 文字の大きさ、コントラスト、ジャンプ率、

文字間、行間で雰囲気を演出する

• ターゲットによって文字の大きさを考える

フォントのまとめ

Font

Design Theoryデ ザ イ ン セ オ リ ー

色 レイアウト フォント

セオリーを理解し、情報をわかりやすく伝えよう

Endinf

セオリーを知る

• デザインセオリーは今も昔も変わらない

• その時代のトレンドも知る → 次のセオリー

• アンテナを広く（SNS, RSS, コミュニケーション）

センスを磨く

• いろいろな経験をする

• 同じカリキュラムでも、出来上がるモノは違う

• センスとは経験によって生まれるもの

• 見る、使う、感じる、コミュニケーション

説明できるものづくり

• 色やフォントなど、なぜそれを選んだかを

説明出来るようにする

• セオリーで説明することができる

• クリエーターにもプレゼンテーション能力は必要

手を動かす

• 何も思い浮かばなくても、とりあえずは動く

• セオリーに沿ってレイアウトや色を決めていけば

形にはなる

• 次に考えて、それをブラッシュアップさせる

クリエーターに求められるスキル

Information Architects,User Experience Design,Programming, Marketing,Presentation, Manegement,Communication, etc...

デザインを楽しむ

• 考えることは多いけど、デザインは楽しい

• 楽しくないなら他の人にお願いしてもよい

• 楽しむことが、いいものづくりにつながる

Thank you

Toshiaki SasakiWeb Designer at BaseLine Inc.,http://nicebaseline.com/

twitter : @shirokuro331facebook : https://www.facebook.com/shirokuro331

author

ノンデザイナーズ・デザインブックhttp://book.mycom.co.jp/book/978-4-8399-2840-7/978-4-8399-2840-7.shtml

refarence

Luc Viatourhttp://www.lucnix.be/main.php

photo credit

色彩センスのいらない配色講座http://www.slideshare.net/marippe/ss-9003317

un-T BOOTCAMP

respect!!