Soumettre la recherche
Mettre en ligne
コーディングを考慮したWebデザインガイドライン
•
406 j'aime
•
188,438 vues
Hiroyuki Makishita
Suivre
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 44
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
Recommandé
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
UIデザインの基本
UIデザインの基本
Roy Kim
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
witstudio
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
Yoshiki Hayama
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
schoowebcampus
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
第ⅲ部:Clean architecture 設計の原則
第ⅲ部:Clean architecture 設計の原則
tak
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
これからはじめるサービスデザイン
これからはじめるサービスデザイン
Concent, Inc.
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
スマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイント
Tetsuya Kimura
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
UXデザインの理論・プロセス・手法の体系とポイント
UXデザインの理論・プロセス・手法の体系とポイント
Masaya Ando
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
Takehisa Gokaichi
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
hamko ig
いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門
Yuki Ishikawa
Contenu connexe
Tendances
UIデザインの基本
UIデザインの基本
Roy Kim
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
witstudio
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
Yoshiki Hayama
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
schoowebcampus
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
第ⅲ部:Clean architecture 設計の原則
第ⅲ部:Clean architecture 設計の原則
tak
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
これからはじめるサービスデザイン
これからはじめるサービスデザイン
Concent, Inc.
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
スマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイント
Tetsuya Kimura
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
UXデザインの理論・プロセス・手法の体系とポイント
UXデザインの理論・プロセス・手法の体系とポイント
Masaya Ando
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
Takehisa Gokaichi
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
Tendances
(20)
UIデザインの基本
UIデザインの基本
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
第ⅲ部:Clean architecture 設計の原則
第ⅲ部:Clean architecture 設計の原則
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
これからはじめるサービスデザイン
これからはじめるサービスデザイン
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
スマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイント
UX / UIデザインって何?
UX / UIデザインって何?
UXデザインの理論・プロセス・手法の体系とポイント
UXデザインの理論・プロセス・手法の体系とポイント
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
En vedette
イラスト制作のための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
色彩センスのいらない配色講座
色彩センスのいらない配色講座
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
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
schoowebcampus
En vedette
(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のイマ
色彩センスのいらない配色講座
色彩センスのいらない配色講座
UXの考え方とアプローチ
UXの考え方とアプローチ
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
いますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィ2〜書体のはなし
いますぐ使えるタイポグラフィ2〜書体のはなし
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
Similaire à コーディングを考慮した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(株式会社インフォバーン)
Similaire à コーディングを考慮した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.
☺ ご清聴ありがとうございました!
Télécharger maintenant