Suche senden
Hochladen
Webデザインのセオリーを学ぼう
•
827 gefällt mir
•
603,777 views
Toshiaki Sasaki
Folgen
2012年2月16日 福井工業高等専門学校で行いましたデザインセミナーでのスライドです。
Weniger lesen
Mehr lesen
Design
Technologie
Business
Melden
Teilen
Melden
Teilen
1 von 127
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
Yuudai Tachibana
Empfohlen
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
Yuudai Tachibana
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
典子 松本
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
Yoshiki Hayama
UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)
インターリンク株式会社
プレゼン初心者にありがちなアンチパターン
プレゼン初心者にありがちなアンチパターン
真俊 横田
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
アイデア収束からプロトタイピング
アイデア収束からプロトタイピング
Masaya Ando
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
Yoshiki Hayama
デザイン提案の参考資料
デザイン提案の参考資料
Tsutomu Sogitani
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
Yasuhisa Hasegawa
UXデザイン概論 2019
UXデザイン概論 2019
Masaya Ando
振り返り(アジャイルレトロスペクティブズ)
振り返り(アジャイルレトロスペクティブズ)
Keisuke Tameyasu
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」
swwwitch inc.
Weitere ähnliche Inhalte
Was ist angesagt?
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
典子 松本
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
Yoshiki Hayama
UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)
インターリンク株式会社
プレゼン初心者にありがちなアンチパターン
プレゼン初心者にありがちなアンチパターン
真俊 横田
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
アイデア収束からプロトタイピング
アイデア収束からプロトタイピング
Masaya Ando
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
Yoshiki Hayama
デザイン提案の参考資料
デザイン提案の参考資料
Tsutomu Sogitani
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
Yasuhisa Hasegawa
UXデザイン概論 2019
UXデザイン概論 2019
Masaya Ando
振り返り(アジャイルレトロスペクティブズ)
振り返り(アジャイルレトロスペクティブズ)
Keisuke Tameyasu
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
Was ist angesagt?
(20)
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
デザインのためのデザイン
デザインのためのデザイン
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)
プレゼン初心者にありがちなアンチパターン
プレゼン初心者にありがちなアンチパターン
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
アイデア収束からプロトタイピング
アイデア収束からプロトタイピング
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
デザイン提案の参考資料
デザイン提案の参考資料
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
UXデザイン概論 2019
UXデザイン概論 2019
振り返り(アジャイルレトロスペクティブズ)
振り返り(アジャイルレトロスペクティブズ)
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
Andere mochten auch
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」
swwwitch inc.
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
Shoe-g Ueyama
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Yasuhisa Hasegawa
プレゼンテーションドキュメント講座 Basic
プレゼンテーションドキュメント講座 Basic
Miho Yamahashi
明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら
明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら
SKET
文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)
文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)
Takashi Iba
さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西
rie05
ビビッド・パワポ・オペーレーション Revision 2015
ビビッド・パワポ・オペーレーション Revision 2015
Masahito Zembutsu
“ロジカル・プレゼンテーション”で実践的な論理的思考力を身につける
“ロジカル・プレゼンテーション”で実践的な論理的思考力を身につける
bijikin
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
Kumiko Hiramoto
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
いいデザインと悪いデザイン
いいデザインと悪いデザイン
Takahashi Koki
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
Michiyo Fukada
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Taichi Hirano
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Sasaki Kouhei
いますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィ
Shinichiro Yabu
いますぐ使えるタイポグラフィ2〜書体のはなし
いますぐ使えるタイポグラフィ2〜書体のはなし
Shinichiro Yabu
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
schoowebcampus
Andere mochten auch
(20)
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
プレゼンテーションドキュメント講座 Basic
プレゼンテーションドキュメント講座 Basic
明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら
明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら
文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)
文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)
さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西
ビビッド・パワポ・オペーレーション Revision 2015
ビビッド・パワポ・オペーレーション Revision 2015
“ロジカル・プレゼンテーション”で実践的な論理的思考力を身につける
“ロジカル・プレゼンテーション”で実践的な論理的思考力を身につける
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
いいデザインと悪いデザイン
いいデザインと悪いデザイン
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
いますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィ2〜書体のはなし
いますぐ使えるタイポグラフィ2〜書体のはなし
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
Ähnlich wie Webデザインのセオリーを学ぼう
Web design
Web design
kazuko kaneuchi
Digital Business and Agile
Digital Business and Agile
Kenji Hiranabe
LightSwitchからUXを見てみる
LightSwitchからUXを見てみる
Yoshitaka Seo
「Webディレクションの教科書のご紹介」@田口真行さん主催 webディレクター向けセミナーイベント
「Webディレクションの教科書のご紹介」@田口真行さん主催 webディレクター向けセミナーイベント
Rie Fujii
社会のコードを、書き換えよう~エンジニア起点のNew Normalな働き方~
社会のコードを、書き換えよう~エンジニア起点のNew Normalな働き方~
Hitachi, Ltd. OSS Solution Center.
Flat design iOS7
Flat design iOS7
Masataka Ohara
実演・開発の進め方
実演・開発の進め方
TechGardenSchool
iOS7に学ぶフラットデザイン
iOS7に学ぶフラットデザイン
Mari Takahashi
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
Yoshitaka Kawashima
小川流!わかりやすいテーマの作り方
小川流!わかりやすいテーマの作り方
Kasumi Ogawa
フラットデザインってなに?
フラットデザインってなに?
Yoshinori Kamaishi
瀬戸内デザインアワードに多くのデザインを集めたい!
瀬戸内デザインアワードに多くのデザインを集めたい!
さぶみっと!ヨクスル
130216gis商談における営業プロセスの解説
130216gis商談における営業プロセスの解説
三紀夫 玉置
UIデザインの基本
UIデザインの基本
Roy Kim
IT技術者でも1から学べるビジネスモデルキャンバス入門
IT技術者でも1から学べるビジネスモデルキャンバス入門
陽一 滝川
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
Yuki Okada
Ähnlich wie Webデザインのセオリーを学ぼう
(17)
Web design
Web design
Digital Business and Agile
Digital Business and Agile
LightSwitchからUXを見てみる
LightSwitchからUXを見てみる
「Webディレクションの教科書のご紹介」@田口真行さん主催 webディレクター向けセミナーイベント
「Webディレクションの教科書のご紹介」@田口真行さん主催 webディレクター向けセミナーイベント
社会のコードを、書き換えよう~エンジニア起点のNew Normalな働き方~
社会のコードを、書き換えよう~エンジニア起点のNew Normalな働き方~
Flat design iOS7
Flat design iOS7
実演・開発の進め方
実演・開発の進め方
iOS7に学ぶフラットデザイン
iOS7に学ぶフラットデザイン
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
小川流!わかりやすいテーマの作り方
小川流!わかりやすいテーマの作り方
フラットデザインってなに?
フラットデザインってなに?
瀬戸内デザインアワードに多くのデザインを集めたい!
瀬戸内デザインアワードに多くのデザインを集めたい!
130216gis商談における営業プロセスの解説
130216gis商談における営業プロセスの解説
UIデザインの基本
UIデザインの基本
IT技術者でも1から学べるビジネスモデルキャンバス入門
IT技術者でも1から学べるビジネスモデルキャンバス入門
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
Mehr von Toshiaki Sasaki
ぼくがやってるぷろじぇくとまねじめんと
ぼくがやってるぷろじぇくとまねじめんと
Toshiaki Sasaki
Performance up Web Design
Performance up Web Design
Toshiaki Sasaki
Tips of Design
Tips of Design
Toshiaki Sasaki
ルビー( ´∀`)人(´∀` )ルビー
ルビー( ´∀`)人(´∀` )ルビー
Toshiaki Sasaki
First sass
First sass
Toshiaki Sasaki
Hello Google+
Hello Google+
Toshiaki Sasaki
デザイナー視点のWordPress WordCrub Fukui 2011.1.29
デザイナー視点のWordPress WordCrub Fukui 2011.1.29
Toshiaki Sasaki
Progressionのススメ
Progressionのススメ
Toshiaki Sasaki
Mehr von Toshiaki Sasaki
(8)
ぼくがやってるぷろじぇくとまねじめんと
ぼくがやってるぷろじぇくとまねじめんと
Performance up Web Design
Performance up Web Design
Tips of Design
Tips of Design
ルビー( ´∀`)人(´∀` )ルビー
ルビー( ´∀`)人(´∀` )ルビー
First sass
First sass
Hello Google+
Hello Google+
デザイナー視点のWordPress WordCrub Fukui 2011.1.29
デザイナー視点のWordPress WordCrub Fukui 2011.1.29
Progressionのススメ
Progressionのススメ
Webデザインのセオリーを学ぼう
1.
Webデザインのセオリーを学ぼう
佐々木 敏明(Web Designer at BaseLine Inc.,) 2012.02.16 福井工業高等専門学校
2.
Agenda
- 本日の内容 - • デザインとは • Webデザインとは • デザインセオリーについて • まとめ ※今日お話するのは私なりのまとめです。
3.
Goal
- 本日の目的 - • デザインセオリーを知る • デザインを考える力を身につける • 楽しみを知る ※ デザインの手法だけの話ではなくて、考え方の話もします 表面だけのデザインは意味がない場合があります
4.
Please
- お願い - • 聴いて終わりではなく、手を動かす • 作る、そして考える • 考えて、また手を動かす
5.
About Design
6.
Design ある問題を解決するために思考・概念の組み立てを行い、 それを様々な媒体に応じて表現すること
7.
• 人に伝えるため/ものをよく見せるための技術 • 明確な目的、ターゲットがいて作り手側の意図を
伝えるために行うもの デザイン Design? Art? アート • 自己表現。人に伝わらなくてもよい • 明確なターゲットや目的はなく、 芸術的/美術的感覚によって造形されたもの via un-T BOOTCAMP
8.
広義のデザイン コンセプトの具現化、人間の行為をより良いかたちにするための 「設計」「計画」 戦略
制度 組織 プロセス via @nakagawan
9.
狭義のデザイン 設計を行う際の形態、特に図案、模様、レイアウト等の計画 造形行為とそのディレクション
• グラフィックデザイン • 環境デザイン 視覚 • タイポグラフィ 空間 • インテリアデザイン • 映像・アニメーション • 建築デザイン • 情報デザイン • プロダクトデザイン • サイン計画 • ファッションデザイン 機能 その他 • インターフェースデザイン • テキスタイルデザイン • ゲームデザイン via @nakagawan
10.
デザインするということ • 情報を整理し、わかりやすく伝えること • もの/サービスの価値を最大限に高めること
意識しながら デザインする
11.
Design is not
just what it looks like and feels like. Design is how it works. デザインとは、単なる視覚や感覚のことではない。 デザインとは、どうやって動くかだ。 Steve Jobs
12.
About Web Design
13.
Webデザインとは • Webという空間で活かされるデザイン表現 • 「見る」「感じる」だけでなく、 「使う」「コミュニケーションする」 •
Webサイト、Webアプリケーション、 モバイルサイト、モバイルアプリケーション
14.
見るだけではない • 検索 • インタラクション(相互作用) •
発信(ブログ、SNS) • コミュニケーション(ブログ、SNS)
15.
コンテキスト(前後関係)を考える • どのようなユーザーがターゲットなのか • ターゲットに合わせた見せ方、プロモーション •
情報の配置、色、文字 など • ユーザーの背景を考えてデザインをする
16.
Webデザインまとめ • Webという空間で活きる設計・見せ方 • ターゲットとなるユーザーを考える •
PCだけではなく、モバイルも意識する
17.
Flow 制 作 の
流 れ
18.
Flow
制 作 の 流 れ 要件定義 情報設計 デザイン コーディング
19.
要件定義
情報設計 デザイン コーディング • 作る目的を考える (ブランディング、商品販売、プロモーション etc...) • 目的に適した戦略デザイン
20.
要件定義
情報設計 デザイン コーディング • デザインの前に設計を行い、骨組みを作って 全体をイメージする(ワイヤーフレーム) • クライアントワークの場合は、クライアントとの 意識共有のために
21.
要件定義
情報設計 デザイン コーディング • Photoshop, Illustrator, Fireworks などを使い、 仕上がりイメージのデザインを行う • 画像を用意できればソフトは何でもよい • コーディングを効率的に行うことができる
22.
要件定義
情報設計 デザイン コーディング • DreamWeaver等でHTML,CSSのマークアップ • テキストエディタでよい(補完機能あると良い) • ブラウザで表示されるようにする
23.
Design Theory
24.
Design Theory
デ ザイ ンセ オ リ ー デザインするうえで注意するポイントや 体系化されたルールなどのこと
25.
Design Theory
デ ザイ ンセ オ リ ー 色 レイアウト フォント
26.
レイアウト 色
25% 50% フォント 25%
27.
今日は
色 25% レイアウト 50% フォント 25%
28.
Layout レ イ
ア ウ ト
29.
Layout
レ イ ア ウ ト • デザインの4つの基本原則 • 情報設計 • 視線の流れ • 黄金比、白銀比
30.
Layout
レ イ ア ウ ト • デザインの4つの基本原則 • 情報設計 • 視線の流れ • 黄金比、白銀比
31.
デザインの4つの基本原則
1. 近 接 2. 整 列 3. 反 復 4. コントラスト ノンデザイナーズデザインブック Williams Robin著 Layout
32.
デザインの4つの基本原則
1. 近 接 2. 整 列 3. 反 復 4. コントラスト ノンデザイナーズデザインブック Williams Robin著 Layout
33.
近接の原則 関連する項目をまとめてグループ化する 注) 関連しない情報同士を近づけない ページの構造と内容の直線的な手がかりをユーザーへ提供するもの
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
36.
近接の例(名刺) BaseLine Inc.,
0776-26-1181 佐々木 敏明 福井市中央2丁目00-0 TOSHIAKI SASAKI Layout
37.
近接の原則 関連する項目をまとめてグループ化する 注) 関連しない情報同士を近づけない ページの構造と内容の直線的な手がかりをユーザーへ提供するもの
Layout
38.
近接の例(名刺) 佐々木 敏明 TOSHIAKI SASAKI BaseLine
Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 Layout
39.
近接の例(名刺) 佐々木 敏明
個人情報グループ TOSHIAKI SASAKI 間隔 BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F 会社情報グループ TEL 0776-26-1181 Layout
40.
Layout http://www.microsoftstore.jp/Form/Product/ProductCategory.aspx?cat=100&WT.mc_id=windows_productpage_topmodule
41.
Layout http://www.microsoftstore.jp/Form/Product/ProductCategory.aspx?cat=100&WT.mc_id=windows_productpage_topmodule
42.
? Layout
43.
近接のまとめ • 関連する項目のグループ化 • 他のグループとの間に十分な隙間をあける •
視線の流れも意識する Layout
44.
デザインの4つの基本原則
1. 近 接 2. 整 列 3. 反 復 4. コントラスト ノンデザイナーズデザインブック Williams Robin著 Layout
45.
整列の原則 各要素を意図的に整列して配置する 注) すべての項目が他の項目と視覚的に関連しなければならない
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
50.
整列の例 佐々木 敏明 TOSHIAKI SASAKI
BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 こういうのもアリ :-) Layout
51.
整列の例 佐々木 敏明 TOSHIAKI SASAKI
BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 Layout
52.
整列の例 佐々木 敏明 TOSHIAKI SASAKI
BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 これはナシ :-( Layout
53.
http://www.solala.co.jp/
Layout
54.
整列のまとめ • 要素の視覚的なつながりを意識して配置する • 出来上がりを見たときに統一感があるか •
あえてルールを破ることで目立つ場合もある Layout
55.
デザインの4つの基本原則
1. 近 接 2. 整 列 3. 反 復 4. コントラスト ノンデザイナーズデザインブック Williams Robin著 Layout
56.
反復の原則 デザイン上のなにかの特徴を 作品全体を通して繰り返すこと (一貫性を持たせる)
Layout
57.
反復の原則 これらも反復の法則に 則って配置してます
Layout
58.
http://www.ntmed.co.jp/
Layout
59.
メニューボタンを反復
Layout
60.
事業内容(リンク)を反復
Layout
61.
トピックステキストの反復
Layout
62.
Layout
63.
サイト全体で 見出しの反復 Layout
64.
反復のまとめ • 特徴的ななにかを反復して使う • 全体に統一感、一貫性を作る •
くどくならないような注意も必要 Layout
65.
デザインの4つの基本原則
1. 近 接 2. 整 列 3. 反 復 4. コントラスト ノンデザイナーズデザインブック Williams Robin著 Layout
66.
コントラストの原則 異なる要素をはっきりと違わせること 注) レイアウトだけに限らず、フォントの大きさ、色にも関わってくる
Layout
67.
コントラストの例 福井高専のスクールライフ 学科紹介 福井高専の大きな魅力の1つは、その充実した工 学教育にあります。ここでは全5学科及び工学基 礎コースを紹介します。また、専門科目以外の 授業や行事などについても紹介します。 福井高専のラジオ番組 毎週日曜午前11時∼12時。たんなんFM 79.1MHzにてお届けしています「高専ライ ブ」!福井高専の得意とする「ものづくり」に ついてもっと知ってもらおうと、いろんな人に 登場してもらうラジオ番組です!
Layout
68.
コントラストの例 福井高専のスクールライフ
近接や整列の原則に則ってるが 学科紹介 コントラストが弱いので 福井高専の大きな魅力の1つは、その充実した工 学教育にあります。ここでは全5学科及び工学基 少し読みにくい 礎コースを紹介します。また、専門科目以外の 授業や行事などについても紹介します。 福井高専のラジオ番組 毎週日曜午前11時∼12時。たんなんFM 79.1MHzにてお届けしています「高専ライ ブ」!福井高専の得意とする「ものづくり」に ついてもっと知ってもらおうと、いろんな人に 登場してもらうラジオ番組です! Layout
69.
コントラストの例 福井高専のスクールライフ
タイトル、見出し、本文という 学科紹介 レベルを区別して文字の大きさ 福井高専の大きな魅力の1つは、その充実した工学教育 (コントラスト)を使い分ける にあります。ここでは全5学科及び工学基礎コースを紹 介します。また、専門科目以外の授業や行事などについ ても紹介します。 1ptや1pxのコントラストでは 違いがわからない 福井高専のラジオ番組 毎週日曜午前11時∼12時。たんなんFM 79.1MHzにてお 臆病にならず、大胆に! 届けしています「高専ライブ」!福井高専の得意とする 「ものづくり」についてもっと知ってもらおうと、いろ んな人に登場してもらうラジオ番組です! Layout
70.
コントラストの例 福井高専のスクールライフ 小塚ゴシック EL 64pt 福井高専のスクールライフ 小塚ゴシック
H 64pt 文字の大きさだけではなく、太さでもコントラストを表現できる Layout
71.
コントラストの例 福井高専のスクールライフ K 30% 福井高専のスクールライフ K 0%
色の濃淡でもコントラストを表現 Layout
72.
コントラストのまとめ • 異なる要素をはっきりと違わせること • 僅かな違いでは気づかない。大胆に! •
どの要素をコントラストを強くするかは 情報のレベルを考えることが大事 • 目立たせるにはコントラストを意識すること Layout
73.
デザインの4つの基本原則 近接
整列 反復 コントラスト 感覚で要素を配置するのではなく、4つの基本原則を意識して レイアウトすることで、まとまりや見やすさを作りだすことができる Layout
74.
Layout
レ イ ア ウ ト • デザインの4つの基本原則 • 情報設計 • 視線の流れ • 黄金比、白銀比
75.
情報設計 • デザインとは機能するもの • 情報をわかりやすく配置する •
情報に優先度をつける • 要素を配置する場所のセオリーを知る (ユーザーを混乱させないため) Layout
76.
http://www.nttdocomo.co.jp/
http://http://mb.softbank.jp/mb/customer.html/ Layout
77.
http://store.apple.com/jp
Layout http://lotte-shop.jp/shop/default.aspx
78.
Layout
レ イ ア ウ ト • デザインの4つの基本原則 • 情報設計 • 視線の流れ • 黄金比、白銀比
79.
視線の流れ • モノを見るとき、視線の流れにルールがある • 流れに則って見せたい情報を配置することで よりわかりやすく情報を伝えられる
Layout
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
85.
Color 色
86.
色は 印象 を 与える Color
87.
色の3属性 • 色相 • 明度 •
彩度 Color
88.
色相 赤・青・緑・黄...など「色み」のこと
Color
89.
彩度 彩度が高い
彩度が低い 色の「鮮やかさ」 Color
90.
明度 彩度が高い
彩度が低い 色の「明るさ」 Color
91.
光の3原色 • 光を加える形で色を合成 • Red,
Green, Blueの 組み合わせで色を表現 • ほぼすべての色を表現 Color
92.
使う色を決める
Color
93.
3つの色をベースにする
アクセントカラー 5% ベースカラー 70% メインカラー 25% Color
94.
メインカラー • デザインのキーとなる色 • Webサイトの場合、ロゴマークから取ってくる •
ターゲットユーザーによって決めるパターンも Color
95.
ベースカラー • 背景など、広い面積に使う色 • 薄い色が扱いやすい •
色で印象づけたいなら濃い色を使う Color
96.
アクセントカラー • アクセントを出す色 • リンクテキストやボタンに使うことで クリックされやすくする •
メインカラーの反対色など Color
97.
色の選び方
反対色(補色) 差し色 差し色 近似色 近似色 基準色 Color
98.
色から受ける印象 情熱、勢い、危険
さびしい、静かな、固い 暖かい、ほがらか、楽しい 高貴な、粋、冷静 元気、奇抜、注意 女性的、ミステリアス、優雅 自然、爽やか、春 どんより、公平、憂鬱 安らぎ、深い、落ち着いた 真夜中、厳粛、シック 清潔感、涼しい、透明感 冬、清潔、神聖 Color via un-T BOOTCAMP
99.
トーン
明度・彩度の 調整により色の 明 調子を表した 度 もの 彩度 Color via un-T BOOTCAMP
100.
意味(理由)のある色使いを 「購入意欲を高めるために赤色のボタンを配置」 や「ターゲットユーザーが若者なのでビビッドな 色使い」など、意味のある色使いを意識する
Color
101.
http://colorschemedesigner.com/
Color
102.
Font フォ ン ト
103.
書体選びの重要性 • 色々な種類の書体がある • 色と同じく、書体も人に印象を与る •
コピーに合う書体を選択する YES!! ff pop Font
104.
書体選びの重要性 • 色々な種類の書体がある • 色と同じく、書体も人に印象を与る •
コピーに合う書体を選択する YES!! coffee time pop Font
105.
文字の種類 セリフ体/明朝体
サンセリフ体/ゴシック体 Typeface Typeface 書体見本 書体見本 Font
106.
フォントファミリー Helvetica light Helvetica regular Helvetica
bold Helvetica italic Helvetica italic bold Font
107.
コントラストの例 福井高専のスクールライフ 小塚ゴシック EL 64pt 福井高専のスクールライフ 小塚ゴシック
H 64pt 文字の大きさだけではなく、太さでもコントラストを表現できる Layout
108.
ジャンプ率 • 一番大きい要素と小さい要素の差 • ジャンプ率が大きいと「活発・若者」という印象 •
小さいと「高級・大人っぽい」という印象 Font
109.
http://www2.gwc.gakushuin.ac.jp/
Font
110.
http://www.charleselena.com.au/
Font
111.
http://www2.panasonic.biz/es/lighting/feu/
Font
112.
文字詰め、行間にも注意する •も じ の
間 を ゆ っ た り と • 文字感覚を詰めることで緊張感が 文字の感覚だけでなく、行 行の間隔が狭いと読みにく の感覚が狭いことによって 雰囲気を演出することがで いので、じゅうぶんな間隔 きる。 をとって、情報を伝えやす 雰囲気だけの問題ではなく 「見やすさ」「わかりやす くすることをしっかりと考 さ」にも影響を与えるので 見た目で判断をする。 慮しましょう。 Font
113.
文字の間隔を細かく調整 コントラストを意識
Font
114.
文字の間隔を細かく調整 コントラストを意識
Font
115.
文字の間隔を細かく調整 コントラストを意識
Font
116.
フォントのまとめ • 書体のもつ雰囲気を理解し、 コピーにふさわしい書体を選択する • 文字の大きさ、コントラスト、ジャンプ率、 文字間、行間で雰囲気を演出する •
ターゲットによって文字の大きさを考える Font
117.
Design Theory
デ ザイ ンセ オ リ ー 色 レイアウト フォント セオリーを理解し、情報をわかりやすく伝えよう
118.
Endinf
119.
セオリーを知る • デザインセオリーは今も昔も変わらない • その時代のトレンドも知る
→ 次のセオリー • アンテナを広く(SNS, RSS, コミュニケーション)
120.
センスを磨く • いろいろな経験をする • 同じカリキュラムでも、出来上がるモノは違う •
センスとは経験によって生まれるもの • 見る、使う、感じる、コミュニケーション
121.
説明できるものづくり • 色やフォントなど、なぜそれを選んだかを 説明出来るようにする • セオリーで説明することができる •
クリエーターにもプレゼンテーション能力は必要
122.
手を動かす • 何も思い浮かばなくても、とりあえずは動く • セオリーに沿ってレイアウトや色を決めていけば 形にはなる •
次に考えて、それをブラッシュアップさせる
123.
クリエーターに求められるスキル Information Architects, User Experience
Design, Programming, Marketing, Presentation, Manegement, Communication, etc...
124.
デザインを楽しむ • 考えることは多いけど、デザインは楽しい • 楽しくないなら他の人にお願いしてもよい •
楽しむことが、いいものづくりにつながる
125.
Thank you
126.
author Toshiaki Sasaki Web Designer
at BaseLine Inc., http://nicebaseline.com/ twitter : @shirokuro331 facebook : https://www.facebook.com/shirokuro331
127.
respect!! un-T BOOTCAMP refarence ノンデザイナーズ・デザインブック http://book.mycom.co.jp/book/978-4-8399-2840-7/978-4-8399-2840-7.shtml 色彩センスのいらない配色講座 http://www.slideshare.net/marippe/ss-9003317 photo credit Luc
Viatour http://www.lucnix.be/main.php
Jetzt herunterladen