Soumettre la recherche
Mettre en ligne
ノンデザイナーのためのWebデザイン講座
•
11 j'aime
•
5,846 vues
光利 吉田
Suivre
ノンデザイナーのためのWebデザイン講座
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 100
Recommandé
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01
Kenta Nakamura
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
Kenta Nakamura
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
Web design
Web design
kazuko kaneuchi
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
Recommandé
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01
Kenta Nakamura
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
Kenta Nakamura
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
Web design
Web design
kazuko kaneuchi
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
Concent, Inc.
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
20121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド02
Kenta Nakamura
20130216 講演資料
20130216 講演資料
Kenta Nakamura
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
Kanako Kawahara
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
Webサービスをデザインするってどういうこと?
Webサービスをデザインするってどういうこと?
Kanako Kawahara
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
本間 和城
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
Contenu connexe
Tendances
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
Concent, Inc.
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
20121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド02
Kenta Nakamura
20130216 講演資料
20130216 講演資料
Kenta Nakamura
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
Kanako Kawahara
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
Webサービスをデザインするってどういうこと?
Webサービスをデザインするってどういうこと?
Kanako Kawahara
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
本間 和城
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
Tendances
(19)
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Web Design Process for The Future
Web Design Process for The Future
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
20121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド02
20130216 講演資料
20130216 講演資料
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Webサービスをデザインするってどういうこと?
Webサービスをデザインするってどういうこと?
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
En vedette
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Sasaki Kouhei
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
しごとで使うTitanium 第2版
しごとで使うTitanium 第2版
忠利 花崎
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
En vedette
(15)
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
デザインのためのデザイン
デザインのためのデザイン
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
色彩センスのいらない配色講座
色彩センスのいらない配色講座
しごとで使うTitanium 第2版
しごとで使うTitanium 第2版
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
CSS の歩き方
CSS の歩き方
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
Similaire à ノンデザイナーのためのWebデザイン講座
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
初めてのWebプログラミング講座
初めてのWebプログラミング講座
DIVE INTO CODE Corp.
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
Daisuke Yamazaki
業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順
Masaya Okamoto
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
schoowebcampus
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
naoki ando
Keynote 20120316
Keynote 20120316
Rikimaru Tomohiro
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
知己 久保
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
DIVE INTO CODE Corp.
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
DIVE INTO CODE Corp.
PHPerでもわかる!実践Webアクセシビリティ
PHPerでもわかる!実践Webアクセシビリティ
shiori koga
非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術
非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術
div Inc
InDesign正規表現勉強会_名古屋_0727
InDesign正規表現勉強会_名古屋_0727
ShinyaNakagawa
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
DIVE INTO CODE Corp.
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
本間 和城
知ってるようで知らないWeb基礎セミナー
知ってるようで知らないWeb基礎セミナー
ukkyo
javascriptの基礎
javascriptの基礎
Masayuki Abe
Similaire à ノンデザイナーのためのWebデザイン講座
(20)
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
初めてのWebプログラミング講座
初めてのWebプログラミング講座
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
Web Design Process for The Future
Web Design Process for The Future
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
Keynote 20120316
Keynote 20120316
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
PHPerでもわかる!実践Webアクセシビリティ
PHPerでもわかる!実践Webアクセシビリティ
非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術
非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術
InDesign正規表現勉強会_名古屋_0727
InDesign正規表現勉強会_名古屋_0727
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
知ってるようで知らないWeb基礎セミナー
知ってるようで知らないWeb基礎セミナー
javascriptの基礎
javascriptの基礎
ノンデザイナーのためのWebデザイン講座
1.
SKILLHUB ノンデザイナーのための Webデザイン入門 初心者でもちょっと良いデザインを実現 1
2.
SKILLHUB 自己紹介 2 株式会社スキルハブ代表 吉田 光利 Skillhubの制作者 http://skillhub.jp スキルセット RubyとRailsプログラミング UI/UX, Webデザイン HTML/CSSマークアップ Webマーケティング 教育関連 民間ITスクール Web講座企画・開発・講師 企業用Web講座企画・開発・講師 担当した企業は1000社以上 教えた生徒数は10000人以上 著書:起業のWeb技術
3.
SKILLHUB 本日の目的と内容 デザインの4原則を知り、少しデザイン力を上げる 1.近接 2.整列 3.反復 4.コントラスト 3
4.
SKILLHUB 近接 Proximity 4
5.
SKILLHUB 近接:Proximity 5 Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone Computers MacBook MacBook
Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone この2つを見てどう思いますか?
6.
SKILLHUB 近接:Proximity 6 Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone 左側 これは共通する 何かがあるな
7.
SKILLHUB 近接:Proximity 7 右側 下の方は何か違う意 味があるな Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone
8.
SKILLHUB 近接:Proximity 8 Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone Computers MacBook MacBook
Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone 「近くにあるということは関係がある」ことを意味する
9.
SKILLHUB 近接:Proximity 9 吉田 光利 スキルハブ代表 この名刺には5つの要素があります 090-0000-0000 上目黒5丁目 東京都目黒区
10.
SKILLHUB 近接:Proximity 10 吉田 光利 スキルハブ代表 この名刺には5つの要素があります 090-0000-0000 上目黒5丁目 東京都目黒区
11.
SKILLHUB 近接:Proximity 11 吉田 光利 スキルハブ代表 Q1. どこから読み始めますか? 090-0000-0000 上目黒5丁目
東京都目黒区 …
12.
SKILLHUB 近接:Proximity 12 吉田 光利 スキルハブ代表 Q1. どこから読み始めますか? 090-0000-0000 上目黒5丁目
東京都目黒区 真ん中です。 文字が太いからです。
13.
SKILLHUB 近接:Proximity 13 吉田 光利 スキルハブ代表 Q2. 次はどこを読みますか? 090-0000-0000 上目黒5丁目
東京都目黒区 …
14.
SKILLHUB 近接:Proximity 14 吉田 光利 スキルハブ代表 Q2. 次はどこを読みますか? 090-0000-0000 上目黒5丁目
東京都目黒区 左から右に読みます
15.
SKILLHUB 近接:Proximity 15 吉田 光利 スキルハブ代表 Q3. 右下まで行ったら次に視線はどこに行きますか? 090-0000-0000 上目黒5丁目
東京都目黒区 …
16.
SKILLHUB 近接:Proximity 16 吉田 光利 スキルハブ代表 Q3. 右下まで行ったら次に視線はどこに行きますか? 090-0000-0000 上目黒5丁目
東京都目黒区 隅を見落としていな いかあちこち見てし まいます。
17.
SKILLHUB 近接:Proximity 17 吉田 光利 スキルハブ代表 Q4. 太字を増やしてみると 090-0000-0000 上目黒5丁目
東京都目黒区
18.
SKILLHUB 近接:Proximity 18 吉田 光利 スキルハブ代表 Q4. どこから読み始めますか? 090-0000-0000 上目黒5丁目
東京都目黒区 …
19.
SKILLHUB 近接:Proximity 19 吉田 光利 スキルハブ代表 Q4. どこから読み始めますか? 090-0000-0000 上目黒5丁目
東京都目黒区 なんか太字を行った り来たりしてしまい ます。定まりません
20.
SKILLHUB 近接:Proximity 20 吉田 光利 スキルハブ代表 Q4. いつ読み終わったかわかりますか? 090-0000-0000 上目黒5丁目
東京都目黒区 …
21.
SKILLHUB 近接:Proximity 21 吉田 光利 スキルハブ代表 Q4. いつ読み終わったかわかりますか? 090-0000-0000 上目黒5丁目
東京都目黒区 わ、わかりません
22.
関連する要素を近接させ グルーピングする 22
23.
SKILLHUB 近接:Proximity 23 吉田 光利 スキルハブ代表 関連する要素を近接させグルーピングする 090-0000-0000 上目黒5丁目 東京都目黒区
24.
SKILLHUB 近接:Proximity 24 吉田 光利 スキルハブ代表 いかがでしょう? 090-0000-0000 上目黒5丁目 東京都目黒区
25.
SKILLHUB 近接:Proximity 25 吉田 光利 スキルハブ代表 以下の問いに答えられるようになっているはずです 090-0000-0000 上目黒5丁目 東京都目黒区 どこから読み始めるか迷います か? 次はどこを読むべきかすぐにわ かりますか? 読み終えた実感は湧きますか?
26.
SKILLHUB 近接:Proximity 26 吉田 光利 スキルハブ代表 近接させると… 090-0000-0000 上目黒5丁目 東京都目黒区 知覚的に組織化する 視覚的に組織化する 上の2つにより「情報がより伝 わるようになる」
27.
近接:Webサイト事例 27
28.
SKILLHUB 近接:Proximity 28 Amazonの場合 イメージユニット 情報ユニット アクション ユニット
29.
近接:実習 29
30.
SKILLHUB 近接:Proximity 課題:近接 30 以下を近接の法則に従って並べ替えましょう
31.
SKILLHUB 解答:情報がグルーピングされた状態 31
32.
SKILLHUB 解答:情報がグルーピングされた状態(枠線つき) 32 キャッチフレーズ イメージ ボタン 3つのメリット
33.
SKILLHUB 解答:グループに感覚をつけた 33 間隔 間隔 間隔
34.
SKILLHUB 近接:Proximity 34 吉田 光利 スキルハブ代表 まとめ 090-0000-0000 上目黒5丁目 東京都目黒区 関連する項目をまとめる 情報の流れがわかるようにする スペースをとって情報の区別が できるようにする
35.
SKILLHUB 整列 Alignment 35
36.
SKILLHUB 整列:Alignment 36 Q. このデザインから何か関連を見つけられますか? … 吉田 光利 スキルハブ代表
090-0000-0000 上目黒5丁目 東京都目黒区
37.
SKILLHUB 整列:Alignment 37 Q. このデザインから何か関連を見つけられますか? いいえ、バラバラで どこが関連している かはわかりません吉田 光利 スキルハブ代表
090-0000-0000 上目黒5丁目 東京都目黒区
38.
SKILLHUB 整列:Alignment 38 Q. では、これは関連がわかりますか? … 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
39.
SKILLHUB 整列:Alignment 39 Q. では、これは関連がわかりますか? 上がその人が何者か 下が住所ですね。 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
40.
SKILLHUB 整列:Alignment 40 見えない線があるからそう感じるのです なるほど 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
41.
整列は強い結びつきを作り レイアウトに強さを与える 41
42.
SKILLHUB 整列:Alignment 42 端 えは真ん中 えよりも力強い 吉田
光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
43.
SKILLHUB 整列:Alignment 43 端 えは真ん中 えよりも力強い 吉田
光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
44.
SKILLHUB 整列:Alignment 44 左右に配置するパターンも強力 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
45.
究極の整列を実現する グリッドシステム 45
46.
46 グリッドシステムとは “ “ レイアウトを行う際、画面上に架空の 縦横線をガイドラインとして引き、そ のブロックごとに文字や図版を配置し、 無駄なくスッキリした画面を作る手法。
47.
要は 「見えない線を利用する」 ということ 47
48.
SKILLHUB 整列:Alignment 48 Webページの場合 http://www.slideshare.net/Leursism/grid-systems
49.
SKILLHUB 整列:Alignment 49 昔(200年前くらい)の本もグリッド http://www.slideshare.net/Leursism/grid-systems
50.
SKILLHUB 整列:Alignment 50 モダンな建物もグリッド http://www.slideshare.net/Leursism/grid-systems
51.
SKILLHUB 近接:Proximity 51 Sony Music: 16個のグリッドで区切られている
52.
実習:整列 52
53.
SKILLHUB 並べ替えて整列させてみましょう 53
54.
SKILLHUB 整列の比較 54 整列前 整列後
55.
SKILLHUB 見えない線 55
56.
SKILLHUB 見えない線の比較 56
57.
SKILLHUB グリッドデザインの作り方 57
58.
SKILLHUB 整列まとめ 58 「見えない線」が見え るか 完成デザインをジーっと見た時に、しっかりとアラ イン線を認識できるか。 異なった行 えになって いないか 同じ要素の中で異なった行 えになっていないか。 左
え、真ん中 え、右 えが同じ要素の中で混在 していると整列感がなくなる。 異なる要素を整列させ ていないか 異なる情報レベルの要素が整列によって結ばれてい ないか。もし整列させてしまっていれば、ユーザー は「近い情報」として認識してしまう。 例外がきちんと処理され ているか アライン線をはみ出している表現であったり、行 えをわざと変えている場合にそれが理解できるか。 これらの例外は、他の部分で整列原則が守られてい る場合に成立する
59.
SKILLHUB 反復 Repetition 59
60.
SKILLHUB 反復:Repetition 60 これはトップページです …
61.
SKILLHUB 反復:Repetition 61 学習を開始ボタンをクリックすると …
62.
SKILLHUB 反復:Repetition 62 コース(講座)の一覧ページに移動します …
63.
SKILLHUB 反復:Repetition 63 2つ目の講座を見るためにクリックします …
64.
SKILLHUB 反復:Repetition 64 レッスンページに移動します …
65.
SKILLHUB 反復:Repetition 65 3ページは同じサイトです。どう思いましたか? …
66.
SKILLHUB 反復:Repetition 66 3ページは同じサイトです。どう思いましたか? ほとんど同じサイト だとは思えません。 なんというか…
67.
SKILLHUB 反復:Repetition 67 3ページは同じサイトです。どう思いましたか? 一貫性に欠けている 気がするのです
68.
一貫性、それこそが 反復を通して得られるもの 「反復 = 一貫性」 68
69.
SKILLHUB 反復:Repetition 69 一貫性を保ったデザイン
70.
SKILLHUB 反復:Repetition 70 ページをまたいで反復している
71.
SKILLHUB 反復:Repetition 71 内部も一貫性がある ロゴ グローバルナビ インフォメーション
72.
SKILLHUB 反復:Repetition 72 リンクカラーも反復している
73.
SKILLHUB 反復:Repetition 73 ページの中での反復
74.
SKILLHUB 反復:Repetition 74 ページの中での反復 ・学習途中が半分塗りつぶし ・学習終了がチェックマーク
75.
SKILLHUB 反復:Repetition 75 一貫性の比較
76.
実習:反復 76
77.
SKILLHUB 第2階層を反復させてみましょう 77 文字の大きさや色、図形などを使って反復を作ってみましょう
78.
SKILLHUB 反復まとめ 78 ヘッダーは共通か? ロゴの位置、ナビゲーションの項目は同じであるか 見出しは共通か? 大見出し、中見出しなどHTMLで言えばh1,
h2などの見た目がページ間 で共通であるか? 文字について 本文の文字サイズや行間などの設定が共通であるか。引用などにもルー ルが設定されているか。 アイコンで意味の反復を実現でき ているか? アイコンはユーザーに意味を学習させる要素になります。例えば会話で あれば、吹き出しなどになります。意味のあるアイコンを繰り返してい るかが重要です。 階層ごとのレイアウトは共通か? レイアウトのパターンはサイトの中でいくつもあっていいのだが、階層 ごとに用意することが好ましい。多くても3以内のレイアウトパターン に収めるべきであろう。 ルック・アンド・フィールが守ら れているか? 使い勝手が共通になっているか?ユーザーは使い方を学習します。使い 勝手が機能によってバラバラになっていないか? カラー 色に統一感があるか?きちんとベースカラーを守られているか テイスト 画像やイラストなどビジュアルのテイストは共通か?例えばフラットデ ザインで統一されているかなど。
79.
SKILLHUB 第2階層を反復させてみましょう 79 模範解答は以下になります
80.
SKILLHUB コントラスト Contrast 80
81.
SKILLHUB コントラスト:Contrast 81 左と右は同じ文書です
82.
SKILLHUB コントラスト:Contrast 82 左と右を比べるとどうですか? …
83.
SKILLHUB コントラスト:Contrast 83 左と右を比べるとどうですか? 右のほうが情報が伝 わるような気がしま す。
84.
SKILLHUB コントラスト:Contrast 84 上と下を比べるとどうですか? …
85.
SKILLHUB コントラスト:Contrast 85 上と下を比べるとどうですか? 下のほうがすぐに意 味が伝わります
86.
コントラストをつけることで 情報が分離され 役割がはっきりする 86
87.
SKILLHUB コントラスト:Contrast 87 異なる要素は大きさを変える 大胆に違いをつける 臆病にならないこと!
88.
SKILLHUB コントラスト:Contrast 88 大胆に違いをつける 臆病にならないこと! 大きさと色でコントラストをつける
89.
5秒ルール ランディングページは5秒で 情報を伝えなければならない 89
90.
SKILLHUB コントラスト:Contrast 90 キャッチフレーズでコンテクス トを理解させる カードの画像で情報を明確化 赤ボタンでCTA コントラストをうまく使い情報をコントロールする
91.
SKILLHUB コントラスト:Contrast 91 異なる要素は大きさを変える 大胆に違いをつける 臆病にならないこと!
92.
SKILLHUB コントラスト:Contrast 92 異なる要素は大きさを変える 大胆に違いをつける 臆病にならないこと!
93.
実習:反復 93
94.
SKILLHUB コントラスト実習 94 ビッグイメージにコントラストをつけてみましょう
95.
SKILLHUB コントラスト実習 95 第3階層にコントラストをつけてみましょう
96.
SKILLHUB コントラストまとめ 96 見出し文字は大きいか 見出しの文字はびっくりするくらい大きくて大丈夫です。そのほうが目を 引くし拾い読みができるようになります。例外は論文など読ませるコンテ ンツになります。それらは見出しが小さくてもOKです。 異なる要素で分けられているか 同じ要素にコントラストをつけると意味が分離してしまいます。なので、 コントラストをつけるべきものは異なる要素ということになります。 色使いが適当か?
白抜きや補色などでコントラストをつけることができます。クリックさせ たいボタンなどは、そのような色使いになっているかが重要です。 レイアウトの中でコントラストが あるか? ページをパッと見た時にすぐに内容が理解できるか。チェックする方法と して遠くから見るとか、薄目で見るなどを試みる。 臆病になっていないか? 重要なことは「ハッキリとした違い」をつくること。そのためには勇敢に なる必要があります。見出しと本文の文字サイズや線の使い方などでは 「ええーい、これだ、文句あるか!」と覚悟を決めて大胆に行いましょ う。
97.
SKILLHUB コントラスト 97 模範解答は以下になります
98.
まとめ 98
99.
SKILLHUB まとめ 99 目的を達成できるWebページを実現する 情報を正確・効果的に伝える クリック率を高める 申し込みや販売などのコンバージョンを達成する デザインの4原則で結果の出るWebサイトを
100.
SKILLHUB ありがとうございました http://skillhub.jp 100