Mais conteúdo relacionado
Semelhante a Webデザインのセオリーを学ぼう (16)
Mais de Toshiaki Sasaki (8)
Webデザインのセオリーを学ぼう
- 1. Webデザインのセオリーを学ぼう
佐々木 敏明(Web Designer at BaseLine Inc.,)
2012.02.16 福井工業高等専門学校
- 2. Agenda - 本日の内容 -
• デザインとは
• Webデザインとは
• デザインセオリーについて
• まとめ
※今日お話するのは私なりのまとめです。
- 3. Goal - 本日の目的 -
• デザインセオリーを知る
• デザインを考える力を身につける
• 楽しみを知る
※ デザインの手法だけの話ではなくて、考え方の話もします
表面だけのデザインは意味がない場合があります
- 4. Please - お願い -
• 聴いて終わりではなく、手を動かす
• 作る、そして考える
• 考えて、また手を動かす
- 11. Design is not just what it looks like
and feels like.
Design is how it works.
デザインとは、単なる視覚や感覚のことではない。
デザインとは、どうやって動くかだ。
Steve Jobs
- 18. Flow
制 作 の 流 れ
要件定義 情報設計 デザイン コーディング
- 19. 要件定義 情報設計 デザイン コーディング
• 作る目的を考える
(ブランディング、商品販売、プロモーション etc...)
• 目的に適した戦略デザイン
- 20. 要件定義 情報設計 デザイン コーディング
• デザインの前に設計を行い、骨組みを作って
全体をイメージする(ワイヤーフレーム)
• クライアントワークの場合は、クライアントとの
意識共有のために
- 21. 要件定義 情報設計 デザイン コーディング
• Photoshop, Illustrator, Fireworks などを使い、
仕上がりイメージのデザインを行う
• 画像を用意できればソフトは何でもよい
• コーディングを効率的に行うことができる
- 22. 要件定義 情報設計 デザイン コーディング
• DreamWeaver等でHTML,CSSのマークアップ
• テキストエディタでよい(補完機能あると良い)
• ブラウザで表示されるようにする
- 24. Design Theory
デ ザイ ンセ オ リ ー
デザインするうえで注意するポイントや
体系化されたルールなどのこと
- 27. 今日は
色
25%
レイアウト
50% フォント
25%
- 29. Layout
レ イ ア ウ ト
• デザインの4つの基本原則
• 情報設計
• 視線の流れ
• 黄金比、白銀比
- 30. Layout
レ イ ア ウ ト
• デザインの4つの基本原則
• 情報設計
• 視線の流れ
• 黄金比、白銀比
- 31. デザインの4つの基本原則
1. 近 接
2. 整 列
3. 反 復
4. コントラスト
ノンデザイナーズデザインブック
Williams Robin著
Layout
- 32. デザインの4つの基本原則
1. 近 接
2. 整 列
3. 反 復
4. コントラスト
ノンデザイナーズデザインブック
Williams Robin著
Layout
- 34. 近接の例(メニュー)
akiyoshi akiyoshi
shiro shiro
aka aka
junkei junkei
negi-ma negi-ma
kushi-katsu kushi-katsu
waka waka
hatsu hatsu
tan tan
sasami sasami
Layout
- 35. 近接の例(メニュー)
akiyoshi akiyoshi
shiro shiro
aka aka
junkei junkei
negi-ma negi-ma
kushi-katsu kushi-katsu
waka waka
お
hatsu す hatsu
tan す
tan
め
sasami sasami
Layout
- 39. 近接の例(名刺)
佐々木 敏明 個人情報グループ
TOSHIAKI SASAKI
間隔
BaseLine Inc.,
〒910-0008 福井市中央2丁目00-0 HOGE BLD2F 会社情報グループ
TEL 0776-26-1181
Layout
- 44. デザインの4つの基本原則
1. 近 接
2. 整 列
3. 反 復
4. コントラスト
ノンデザイナーズデザインブック
Williams Robin著
Layout
- 46. 整列の例
0776-26-1181
BaseLine Inc.,
佐々木 敏明
福井市中央2丁目00-0
TOSHIAKI SASAKI
Layout
- 47. 整列の例
0776-26-1181
BaseLine Inc.,
佐々木 敏明
福井市中央2丁目00-0
TOSHIAKI SASAKI
それぞれの要素が独立したルールで配置されていて
まとまりがない
Layout
- 48. 整列の例
BaseLine Inc., 0776-26-1181
佐々木 敏明
福井市中央2丁目00-0 TOSHIAKI SASAKI
他の要素と視覚的に関連させて配置させたほうが
まとまりが良い印象を与える
Layout
- 49. 整列の例
佐々木 敏明
TOSHIAKI SASAKI
BaseLine Inc.,
〒910-0008 福井市中央2丁目00-0 HOGE BLD2F
TEL 0776-26-1181
見えない「線」を意識する
Layout
- 55. デザインの4つの基本原則
1. 近 接
2. 整 列
3. 反 復
4. コントラスト
ノンデザイナーズデザインブック
Williams Robin著
Layout
- 65. デザインの4つの基本原則
1. 近 接
2. 整 列
3. 反 復
4. コントラスト
ノンデザイナーズデザインブック
Williams Robin著
Layout
- 68. コントラストの例
福井高専のスクールライフ
近接や整列の原則に則ってるが
学科紹介
コントラストが弱いので
福井高専の大きな魅力の1つは、その充実した工
学教育にあります。ここでは全5学科及び工学基 少し読みにくい
礎コースを紹介します。また、専門科目以外の
授業や行事などについても紹介します。
福井高専のラジオ番組
毎週日曜午前11時∼12時。たんなんFM
79.1MHzにてお届けしています「高専ライ
ブ」!福井高専の得意とする「ものづくり」に
ついてもっと知ってもらおうと、いろんな人に
登場してもらうラジオ番組です!
Layout
- 69. コントラストの例
福井高専のスクールライフ タイトル、見出し、本文という
学科紹介 レベルを区別して文字の大きさ
福井高専の大きな魅力の1つは、その充実した工学教育 (コントラスト)を使い分ける
にあります。ここでは全5学科及び工学基礎コースを紹
介します。また、専門科目以外の授業や行事などについ
ても紹介します。
1ptや1pxのコントラストでは
違いがわからない
福井高専のラジオ番組
毎週日曜午前11時∼12時。たんなんFM 79.1MHzにてお 臆病にならず、大胆に!
届けしています「高専ライブ」!福井高専の得意とする
「ものづくり」についてもっと知ってもらおうと、いろ
んな人に登場してもらうラジオ番組です!
Layout
- 73. デザインの4つの基本原則
近接 整列 反復 コントラスト
感覚で要素を配置するのではなく、4つの基本原則を意識して
レイアウトすることで、まとまりや見やすさを作りだすことができる
Layout
- 74. Layout
レ イ ア ウ ト
• デザインの4つの基本原則
• 情報設計
• 視線の流れ
• 黄金比、白銀比
- 78. Layout
レ イ ア ウ ト
• デザインの4つの基本原則
• 情報設計
• 視線の流れ
• 黄金比、白銀比
- 80. 視線の流れ( Z 軸)
START 休憩(強) START 休憩(強)
休憩(弱) GOAL 休憩(弱) GOAL
Layout
via un-T BOOTCAMP
- 81. 視線の流れ( F 軸・E 軸)
START 休憩(強) START 休憩(強)
GOAL GOAL
Layout
via un-T BOOTCAMP
- 82. Layout
レ イ ア ウ ト
• デザインの4つの基本原則
• 情報設計
• 視線の流れ
• 黄金比、白銀比
- 83. 黄金比
1 : 1.618
名刺、カード、写真等
Layout
- 84. 白銀比
1 : 1.414
日本建築や彫刻、用紙のサイズ
Layout
- 93. 3つの色をベースにする
アクセントカラー 5%
ベースカラー 70% メインカラー 25%
Color
- 97. 色の選び方
反対色(補色)
差し色 差し色
近似色 近似色
基準色
Color
- 98. 色から受ける印象
情熱、勢い、危険 さびしい、静かな、固い
暖かい、ほがらか、楽しい 高貴な、粋、冷静
元気、奇抜、注意 女性的、ミステリアス、優雅
自然、爽やか、春 どんより、公平、憂鬱
安らぎ、深い、落ち着いた 真夜中、厳粛、シック
清潔感、涼しい、透明感 冬、清潔、神聖
Color
via un-T BOOTCAMP
- 99. トーン
明度・彩度の
調整により色の
明 調子を表した
度
もの
彩度
Color
via un-T BOOTCAMP
- 112. 文字詰め、行間にも注意する
•も じ の 間 を ゆ っ た り と
• 文字感覚を詰めることで緊張感が
文字の感覚だけでなく、行 行の間隔が狭いと読みにく
の感覚が狭いことによって
雰囲気を演出することがで いので、じゅうぶんな間隔
きる。
をとって、情報を伝えやす
雰囲気だけの問題ではなく
「見やすさ」「わかりやす くすることをしっかりと考
さ」にも影響を与えるので
見た目で判断をする。 慮しましょう。
Font
- 117. Design Theory
デ ザイ ンセ オ リ ー
色 レイアウト フォント
セオリーを理解し、情報をわかりやすく伝えよう