Submit Search
Upload
コーディングを考慮したWebデザインガイドライン
•
406 likes
•
188,405 views
Hiroyuki Makishita
Follow
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。
Read less
Read more
Design
Report
Share
Report
Share
1 of 44
Download now
Download to read offline
Recommended
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら
Yoshiki Hayama
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
Yoshiki Hayama
Recommended
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら
Yoshiki Hayama
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
Yoshiki Hayama
UXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよ
Masaya Ando
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
kenji goto
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
Yoshiki Hayama
デザインのリファクタリング (慣れを大切に)
デザインのリファクタリング (慣れを大切に)
Yukio Andoh
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
Yoshiki Hayama
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
Yoshiki Hayama
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
コピーライターはせがわ てつじ
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
Kazumichi (Mario) Sakata
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
Yoshiki Hayama
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
Masaya Ando
UXとユーザビリティ計測
UXとユーザビリティ計測
Leonardo Ken Orihara
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
Yoshiki Hayama
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
典子 松本
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
hamko ig
いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門
Yuki Ishikawa
More Related Content
What's hot
UXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよ
Masaya Ando
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
kenji goto
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
Yoshiki Hayama
デザインのリファクタリング (慣れを大切に)
デザインのリファクタリング (慣れを大切に)
Yukio Andoh
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
Yoshiki Hayama
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
Yoshiki Hayama
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
コピーライターはせがわ てつじ
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
Kazumichi (Mario) Sakata
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
Yoshiki Hayama
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
Masaya Ando
UXとユーザビリティ計測
UXとユーザビリティ計測
Leonardo Ken Orihara
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
Yoshiki Hayama
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
典子 松本
What's hot
(20)
UXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよ
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
確実に良くするUI/UX設計
確実に良くするUI/UX設計
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
デザインのリファクタリング (慣れを大切に)
デザインのリファクタリング (慣れを大切に)
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXとユーザビリティ計測
UXとユーザビリティ計測
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
Viewers also liked
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
hamko ig
いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門
Yuki Ishikawa
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
玄 中野
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
Yahoo!デベロッパーネットワーク
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
Yasunobu Ikeda
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
swwwitch inc.
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Sasaki Kouhei
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Ryoji Fujishita
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
いますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィ
Shinichiro Yabu
いますぐ使えるタイポグラフィ2〜書体のはなし
いますぐ使えるタイポグラフィ2〜書体のはなし
Shinichiro Yabu
Viewers also liked
(20)
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
色彩センスのいらない配色講座
色彩センスのいらない配色講座
UXの考え方とアプローチ
UXの考え方とアプローチ
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
いますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィ2〜書体のはなし
いますぐ使えるタイポグラフィ2〜書体のはなし
Similar to コーディングを考慮したWebデザインガイドライン
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
信孝 柿沼
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
Yusuke Kojima
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Chihiro Tomita
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
Kazuma Sekiguchi
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
2015年のWebを考える
2015年のWebを考える
kenji goto
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
Daichi Aoki
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
2017年1月24日開催「App Talk Night」発表資料
2017年1月24日開催「App Talk Night」発表資料
LocoPartners
サイトリニューアル時のコンセプト設計
サイトリニューアル時のコンセプト設計
LIG inc.
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
Takeshiro Kani
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
Masayuki Abe
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
Similar to コーディングを考慮したWebデザインガイドライン
(20)
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
2015年のWebを考える
2015年のWebを考える
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
2017年1月24日開催「App Talk Night」発表資料
2017年1月24日開催「App Talk Night」発表資料
サイトリニューアル時のコンセプト設計
サイトリニューアル時のコンセプト設計
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
コーディングを考慮したWebデザインガイドライン
1.
コーディングを考慮した Webデザインガイドライン 2014/7/30 株式会社Plankton Design 牧下 浩之
2.
牧下 浩之 クリエイティブディレクター/デザイナー 印刷媒体のデザイン事務所に4年勤務後、独立 Web媒体を中心にフリーランスとして約10年活動 2011年に株式会社Plankton Design設立 株式会社 Plankton Design 代表取締役 Adobe Pinch
Inにて 記事連載中 東京造形大学 非常勤講師 デザイナー同士が プレゼンテーション を行うイベント DePre! 主催 コーヒーの 焙煎と抽出
3.
「コーディングを考慮したWebデザインガイドライン」 コーディング担当者が作業しやすいデザインカンプを作成するための デザインおよびデザインデータ制作のガイドライン。 ‣ デザインとコーディングを別々の担当者がおこなうことを想定。 ‣ Photoshop
CC 2014による制作を想定。 本セッションのねらい
4.
1) Webデザインの作法に則る。 2) 意図が明確で、一貫性のあるデザインを作成する。 3)
他者が見てもわかりやすいデータを作成する。 コーディング作業で困らない デザインとは?
5.
1Webデザインの作法に則る 初期設定や、やってはいけないことの回避
6.
カラーモードはRGBで Webはモニタで再現されるため、カラーモードはRGBとなる。 CMYKや特色などの指定は不可。 スマートオブジェクトなども同様にRGBで。
7.
寸法の単位はピクセルで Photoshopの環境設定から、「定規」「文字」の単位に「pixel」を指定。
8.
テキストのサイズは整数で指定 小数点以下の指定を反映することはできないため、整数値で指定する。
9.
ブロック要素内で自動改行されるテキスト を再現するために任意改行を入れない ブロック要素に複数行のテキストを流し込んだ状態を作成する際は、 テキストボックスを作成してテキストを流し込む。 ポイントテキストは使用しない。
10.
透過画像として書き出す必要のあるレイヤ ーに特殊な描画モードを指定しない ブラウザ上では描画モードは再現できない。 描画モード:焼き込みカラー 描画モード:通常 不当明度:60%
11.
ピクセル未満のにじみを発生させない 主にシェイプレイヤーにおいて、1ピクセル未満のにじみが発生しないようにする。 Photoshopの環境設定から、「ベクトルツールと変形をピクセルグリッドにスナップ」 にチェックを入れる。
12.
ピクセル未満のにじみを発生させない Illustratorで作成したパスを貼り付けるなどして作成したシェイプレイヤーの エッジがぼやけている場合は、「エッジを整列」にチェックを入れる。 パスは変化しないが見た目はくっきりとする。
13.
別々の画像に切り出す要素を重ねない 特にドロップシャドウなど。 ドロップシャドウの場合、画像で再現するのかCSSで再現するのかをあらかじめ 決めておくとよい。
14.
反復する画像はリピート可能なデザイン にする 継ぎ目なく繰り返されるパターン画像を実現させたい場合は、長方形でパターン要素を 抜き出せるようにしておく。
15.
2意図が明確で、 一貫性のあるデザインを作成する サイトのデザインルールを作成し、活用する
16.
デザインルール 位置 x位置やy位置。レイアウトに関すること。
17.
位置 レイアウトをおこなう際の最低単位=因数を決定する あらかじめレイアウトの因数を決めておき、 その因数の整数倍の値を使ってベースレイアウトや要素間のマージンを決定する。 私の場合、4、5、6を因数とすることが多い。 因数 5 因数 4 因数 6
18.
位置 レイアウトグリッド レイアウトの基準になるグリッドシステムのうち、いくつかの例を紹介。 これらもレイアウト上の因数を持っている。 940グリッドシステム:12カラム(1カラム=60px、マージン=20px) 60px 20px 因数 4
19.
位置 レイアウトグリッド レイアウトの基準になるグリッドシステムのうち、いくつかの例を紹介。 これらもレイアウト上の因数を持っている。 950グリッドシステム:12カラム(1カラム=70px、マージン=10px) 70px 10px 因数 5
20.
位置 レイアウトグリッド レイアウトの基準になるグリッドシステムのうち、いくつかの例を紹介。 これらもレイアウト上の因数を持っている。 978グリッドシステム:12カラム(1カラム=54px、マージン=30px) 54px 30px 因数 6
21.
‣ レスポンシブデザインでは、厳密なピクセル指定よりも比率が重要になってくるが、ベース となるデザインを考案するに際には、グリッドシステムの考え方はそのまま活用できる。 位置 マージン レイアウトグリッドよりも細かい単位で、さまざまな要素をレイアウトする際に使用するマー ジンも、因数を使用してバリエーションを用意しておく。 ex) 因数が4の場合:4、8、16、32、48、64 因数が5の場合:5、10、20、40、60、80 因数が6の場合:6、12、24、48、72、96
22.
規準を活かしてレイアウトする。 ガイドラインを引く レイアウトグリッドにしたがって、ガイドラインを引いておく。 位置
23.
レイヤーをレイアウトする Photoshop CC 2014よりスマートガイドが強化された。 レイヤーやレイヤーグループをフリーハンドでレイアウトする際に活用できる。 位置
24.
スマートガイド レイヤーやパスの移動距離 レイヤーをドラッグすると、レイヤーの元 の位置からの距離を表す参考測定ガイドが 表示される。パスの場合も同様。 水平・垂直・中心が他のオブジェクトに揃 っている場合、ガイドが表示される。 ‣ 移動ツール・パスコンポーネント選択ツール・パス選択ツール使用時に有効。 位置
25.
スマートガイド 移動中の複製レイヤーと元のレイヤーとの距離 Optionキーを押しながらレイヤーをドラッグ し、レイヤーを複製しつつ移動する際、 元のレイヤーと複製レイヤー間の距離を表す 参考測定ガイドが表示される。 ‣ 移動ツール・パスコンポーネント選択ツール・パス選択ツール使用時に有効。 位置
26.
スマートガイド レイヤーとキャンバスとの位置関係 任意のレイヤーを選択した状態で、 Cmdキーを押したまま 図形の外部にマウスオーバーすると、 キャンバスからの距離が表示される。 ‣ 移動ツール・パスコンポーネント選択ツール使用時に有効。 位置
27.
スマートガイド レイヤーと別レイヤーとの位置関係 任意のレイヤーを選択した状態で、 Cmdキーを押したまま 別のレイヤーにマウスオーバーすると、 そのレイヤーとの距離が表示される。 ‣ 移動ツール・パスコンポーネント選択ツール使用時に有効。 位置
28.
スマートガイド 一致スペース 配置された2つのレイヤーのうち1つの レイヤーを、Option+ドラッグで複製 しながら3つめのレイヤーを配置しよう とすると、選択中のレイヤーとそのレイヤーに隣接するレイヤーの間隔が すでに配置されているレイヤーと等間隔になった際に測定ガイドが表示される。 ‣ 移動ツール・パスコンポーネント選択ツール使用時に有効。 位置
29.
デザインルール 色 描画色や背景色、シェイプの塗りや線、 テキストカラー、レイヤースタイルで使用する色など。
30.
反復して使用する色はスウォッチで管理 色を選ぶ際はスウォッチから選択するようにする。 名前を付ける 無難な命名は色成分。ex)003366 使用範囲が限定されている場合は、その範囲を付記する。ex)planA_003366 順番に並べる プリセットマネージャーを使用して、色相順や用途順など、活用しやすい順番に並べておく。 ‣ プリセットマネージャー スウォッチやグラデーション、レイヤースタイルなどのプリセットの管理ができる。 名前変更、順番変更、削除、読み込みや書き出しが可能。 色
31.
スウォッチファイルの活用 スウォッチは外部ファイルとしての書き出しや読み込みができる。 aseファイル形式であれば、 PhotoshopやIllustrator(およびInDesign)で、 色見本の読み込み・書き出しが可能。 これを利用すれば、スウォッチの共有を図ることができる。 案件ごとに色見本を外部ファイル化しておけば、複数案件の対応やチームでの共有、 運用や修正対応にも便利。 ‣ aco Photoshop専用の色見本ファイルフォーマット。 ‣
ase 色見本交換用のファイルフォーマット。Adobe Swatch Exchange。 色
32.
デザインルール ディティール レイヤーそのものが持っている形と、 レイヤースタイルなどのアピアランス。
33.
レイヤーそのものが持っている形 形を持つレイヤーには、 ビットマップレイヤー、シェイプレイヤー、 テキストレイヤーがある。 プリミティブな形状はシェイプレイヤーで 長方形や楕円形などの形状はシェイプレイヤーで作成すると あつかいやすい。ライブシェイプ機能を活用すれば、 位置やサイズ、角丸などを編集できる。 ディティール
34.
レイヤースタイル グラデーションやドロップシャドウなどはレイヤースタイルで実現させる。 再編集可能であることや、コピー&ペーストできるなど汎用性が高い。 反復して使用するスタイルはスタイルパネルに登録 スウォッチと同様、スタイルパネルに登録しておけば、 すぐに呼び出すことができる。 外部ファイル化することもできる。 ディティール
35.
デザインルール テキスト フォント、文字サイズ、行送りなど
36.
反復して使用する文字設定・段落設定は 文字スタイル・段落スタイルパネルに登録 段落スタイルに文字サイズと行間、文字スタイルにフォントを登録して使用すると、 テキストの属性を吟味する際に便利。 文字スタイルや段落スタイル単独で外部ファイル化することはできないが、 他のpsdファイルの文字スタイルや段落スタイルを読み込むことは可能。 テキスト
37.
デザインルール エレメント 汎用的な要素 見出し、アイコン、ボタンなど
38.
反復して使用するエレメントをエレメントファイルにまとめる 見出しや箇条書き、テーブル、アイコン、ボタン、フォームなど 繰り返し使用するエレメントをまとめておく。 エレメントは適宜画像アセットとして書き出し、各ページのデザインで使用する。 エレメント リ ン ク を 配 置 画 像 ア セ ッ ト を 生 成
39.
3他者が見ても わかりやすいデータを作成する データやデータ内部を構造化する
40.
‣ Adobe Pinch
In「デザインをスムーズにするガイドライン」第1回参照 http://www.adobe.com/jp/jos/pinchin/article/design-and-guideline/ideas-for-smooth-production.html 1名前を付ける 2順番に並べる 3グルーピングする 基本的なガイドライン
41.
レイヤーを統合せず、編集可能な状態で残しておく。 レイヤーには名前を付ける レイヤーグループには構造・要素名 レイヤーには部位名(テキストレイヤーを除く) レイヤーを順番に並べる 奧、上、左にレイアウトされているレイヤーから順に。 レイヤーをグルーピングする HTML構造に沿ったレイヤーグループ構造に。 不要なレイヤーを削除 空白レイヤー・非表示レイヤー 解析しやすいデータにする
42.
ヘッダやフッタなど、複数のページで使用する共通モジュールは、 外部ファイル化しておき、各ページにはリンクを配置している状態にする。 ナビゲーションのカレント状態をリンクされたスマートオブジェクト内の レイヤーカンプで実現する。 共通モジュールの外部ファイル化 header.psb スマートオブジェクトに変換 リンクされたアイテムに変換 レイヤーカンプ:通常時(_up) レイヤーカンプ:menu1カレント時(_menu1_current) 属性パネルでレイヤーカンプの切り替えが可能
43.
1) Webデザインの作法に則る。 2) 意図が明確で、一貫性のあるデザインを作成する。 3)
他者が見てもわかりやすいデータを作成する。 「コーディングを考慮したWebデザインガイドライン」
44.
☺ ご清聴ありがとうございました!
Download now