Embed Size (px)
DESCRIPTION
2012年2月16日 福井工業高等専門学校で行いましたデザインセミナーでのスライドです。
Citation preview
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
これはナシ :-(
整列のまとめ
Layout
• 要素の視覚的なつながりを意識して配置する
• 出来上がりを見たときに統一感があるか
• あえてルールを破ることで目立つ場合もある
デザインの4つの基本原則
1. 近 接
2. 整 列
3. 反 復
4. コントラスト
LayoutノンデザイナーズデザインブックWilliams Robin著
反復の原則
Layout
デザイン上のなにかの特徴を作品全体を通して繰り返すこと（一貫性を持たせる）
反復の原則
Layout
これらも反復の法則に則って配置してます
メニューボタンを反復
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!!
