コーディングを考慮したWebデザインガイドライン
•
406 likes•188,921 views
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。
コーディングを考慮したWebデザインガイドライン
- 2. 牧下 浩之 クリエイティブディレクター／デザイナー 印刷媒体のデザイン事務所に4年勤務後、独立 Web媒体を中心にフリーランスとして約10年活動 2011年に株式会社Plankton Design設立 株式会社 Plankton Design 代表取締役 Adobe Pinch Inにて 記事連載中 東京造形大学 非常勤講師 デザイナー同士が プレゼンテーション を行うイベント DePre! 主催 コーヒーの 焙煎と抽出
- 3. 「コーディングを考慮したWebデザインガイドライン」 コーディング担当者が作業しやすいデザインカンプを作成するための デザインおよびデザインデータ制作のガイドライン。 ‣ デザインとコーディングを別々の担当者がおこなうことを想定。 ‣ Photoshop CC 2014による制作を想定。 本セッションのねらい
- 4. 1) Webデザインの作法に則る。 2) 意図が明確で、一貫性のあるデザインを作成する。 3) 他者が見てもわかりやすいデータを作成する。 コーディング作業で困らない デザインとは？
- 31. スウォッチファイルの活用 スウォッチは外部ファイルとしての書き出しや読み込みができる。 aseファイル形式であれば、 PhotoshopやIllustrator（およびInDesign）で、 色見本の読み込み・書き出しが可能。 これを利用すれば、スウォッチの共有を図ることができる。 案件ごとに色見本を外部ファイル化しておけば、複数案件の対応やチームでの共有、 運用や修正対応にも便利。 ‣ aco Photoshop専用の色見本ファイルフォーマット。 ‣ ase 色見本交換用のファイルフォーマット。Adobe Swatch Exchange。 色
- 40. ‣ Adobe Pinch In「デザインをスムーズにするガイドライン」第1回参照 http://www.adobe.com/jp/jos/pinchin/article/design-and-guideline/ideas-for-smooth-production.html 1名前を付ける 2順番に並べる 3グルーピングする 基本的なガイドライン
- 43. 1) Webデザインの作法に則る。 2) 意図が明確で、一貫性のあるデザインを作成する。 3) 他者が見てもわかりやすいデータを作成する。 「コーディングを考慮したWebデザインガイドライン」