コーディングを考慮したWebデザインガイドライン

コーディングを考慮した
Webデザインガイドライン
2014/7/30
株式会社Plankton Design
牧下浩之

牧下浩之
クリエイティブディレクター／デザイナー
印刷媒体のデザイン事務所に4年勤務後、独立
Web媒体を中心にフリーランスとして約10年活動
2011年に株式会社Plankton Design設立
株式会社
Plankton
Design
代表取締役
Adobe
Pinch Inにて
記事連載中
東京造形大学
非常勤講師
デザイナー同士が
プレゼンテーション
を行うイベント
DePre!
主催
コーヒーの
焙煎と抽出

「コーディングを考慮したWebデザインガイドライン」
コーディング担当者が作業しやすいデザインカンプを作成するための
デザインおよびデザインデータ制作のガイドライン。
‣ デザインとコーディングを別々の担当者がおこなうことを想定。
‣ Photoshop CC 2014による制作を想定。
本セッションのねらい

1) Webデザインの作法に則る。
2) 意図が明確で、一貫性のあるデザインを作成する。
3) 他者が見てもわかりやすいデータを作成する。
コーディング作業で困らない
デザインとは？

1Webデザインの作法に則る
初期設定や、やってはいけないことの回避

カラーモードはRGBで
Webはモニタで再現されるため、カラーモードはRGBとなる。
CMYKや特色などの指定は不可。
スマートオブジェクトなども同様にRGBで。

寸法の単位はピクセルで
Photoshopの環境設定から、「定規」「文字」の単位に「pixel」を指定。

テキストのサイズは整数で指定
小数点以下の指定を反映することはできないため、整数値で指定する。

ブロック要素内で自動改行されるテキスト
を再現するために任意改行を入れない
ブロック要素に複数行のテキストを流し込んだ状態を作成する際は、
テキストボックスを作成してテキストを流し込む。
ポイントテキストは使用しない。

透過画像として書き出す必要のあるレイヤ
ーに特殊な描画モードを指定しない
ブラウザ上では描画モードは再現できない。
描画モード：焼き込みカラー
描画モード：通常
不当明度：60%

ピクセル未満のにじみを発生させない
主にシェイプレイヤーにおいて、１ピクセル未満のにじみが発生しないようにする。
Photoshopの環境設定から、「ベクトルツールと変形をピクセルグリッドにスナップ」
にチェックを入れる。

ピクセル未満のにじみを発生させない
Illustratorで作成したパスを貼り付けるなどして作成したシェイプレイヤーの
エッジがぼやけている場合は、「エッジを整列」にチェックを入れる。
パスは変化しないが見た目はくっきりとする。

別々の画像に切り出す要素を重ねない
特にドロップシャドウなど。
ドロップシャドウの場合、画像で再現するのかCSSで再現するのかをあらかじめ
決めておくとよい。

反復する画像はリピート可能なデザイン
にする
継ぎ目なく繰り返されるパターン画像を実現させたい場合は、長方形でパターン要素を
抜き出せるようにしておく。

2意図が明確で、
一貫性のあるデザインを作成する
サイトのデザインルールを作成し、活用する

デザインルール
位置
x位置やy位置。レイアウトに関すること。

位置
レイアウトをおこなう際の最低単位＝因数を決定する
あらかじめレイアウトの因数を決めておき、
その因数の整数倍の値を使ってベースレイアウトや要素間のマージンを決定する。
私の場合、4、5、6を因数とすることが多い。
因数
5
因数
4
因数
6

位置
レイアウトグリッド
レイアウトの基準になるグリッドシステムのうち、いくつかの例を紹介。
これらもレイアウト上の因数を持っている。
940グリッドシステム：12カラム（1カラム=60px、マージン=20px）
60px
20px
因数
4

位置
70px
10px
因数
5

位置
54px
30px
因数
6

‣ レスポンシブデザインでは、厳密なピクセル指定よりも比率が重要になってくるが、ベース
となるデザインを考案するに際には、グリッドシステムの考え方はそのまま活用できる。
位置
マージン
レイアウトグリッドよりも細かい単位で、さまざまな要素をレイアウトする際に使用するマー
ジンも、因数を使用してバリエーションを用意しておく。
ex）
因数が4の場合：4、8、16、32、48、64
因数が5の場合：5、10、20、40、60、80
因数が6の場合：6、12、24、48、72、96

規準を活かしてレイアウトする。
ガイドラインを引く
レイアウトグリッドにしたがって、ガイドラインを引いておく。
位置

レイヤーをレイアウトする
Photoshop CC 2014よりスマートガイドが強化された。
レイヤーやレイヤーグループをフリーハンドでレイアウトする際に活用できる。
位置

スマートガイド
レイヤーやパスの移動距離
レイヤーをドラッグすると、レイヤーの元
の位置からの距離を表す参考測定ガイドが
表示される。パスの場合も同様。
水平・垂直・中心が他のオブジェクトに揃
っている場合、ガイドが表示される。
‣ 移動ツール・パスコンポーネント選択ツール・パス選択ツール使用時に有効。
位置

移動中の複製レイヤーと元のレイヤーとの距離
Optionキーを押しながらレイヤーをドラッグ
し、レイヤーを複製しつつ移動する際、
元のレイヤーと複製レイヤー間の距離を表す
参考測定ガイドが表示される。
‣ 移動ツール・パスコンポーネント選択ツール・パス選択ツール使用時に有効。
位置

レイヤーとキャンバスとの位置関係
任意のレイヤーを選択した状態で、
Cmdキーを押したまま
図形の外部にマウスオーバーすると、
キャンバスからの距離が表示される。
‣ 移動ツール・パスコンポーネント選択ツール使用時に有効。
位置

レイヤーと別レイヤーとの位置関係
任意のレイヤーを選択した状態で、
Cmdキーを押したまま
別のレイヤーにマウスオーバーすると、
そのレイヤーとの距離が表示される。
位置

一致スペース
配置された２つのレイヤーのうち１つの
レイヤーを、Option+ドラッグで複製
しながら3つめのレイヤーを配置しよう
とすると、選択中のレイヤーとそのレイヤーに隣接するレイヤーの間隔が
すでに配置されているレイヤーと等間隔になった際に測定ガイドが表示される。
位置

色
描画色や背景色、シェイプの塗りや線、
テキストカラー、レイヤースタイルで使用する色など。

反復して使用する色はスウォッチで管理
色を選ぶ際はスウォッチから選択するようにする。
名前を付ける
無難な命名は色成分。ex）003366
使用範囲が限定されている場合は、その範囲を付記する。ex）planA_003366
順番に並べる
プリセットマネージャーを使用して、色相順や用途順など、活用しやすい順番に並べておく。
‣ プリセットマネージャー
スウォッチやグラデーション、レイヤースタイルなどのプリセットの管理ができる。
名前変更、順番変更、削除、読み込みや書き出しが可能。
色

スウォッチファイルの活用
スウォッチは外部ファイルとしての書き出しや読み込みができる。
aseファイル形式であれば、 PhotoshopやIllustrator（およびInDesign）で、
色見本の読み込み・書き出しが可能。
これを利用すれば、スウォッチの共有を図ることができる。
案件ごとに色見本を外部ファイル化しておけば、複数案件の対応やチームでの共有、
運用や修正対応にも便利。
‣ aco
Photoshop専用の色見本ファイルフォーマット。
‣ ase
色見本交換用のファイルフォーマット。Adobe Swatch Exchange。
色

ディティール
レイヤーそのものが持っている形と、
レイヤースタイルなどのアピアランス。

レイヤーそのものが持っている形
形を持つレイヤーには、
ビットマップレイヤー、シェイプレイヤー、
テキストレイヤーがある。
プリミティブな形状はシェイプレイヤーで
長方形や楕円形などの形状はシェイプレイヤーで作成すると
あつかいやすい。ライブシェイプ機能を活用すれば、
位置やサイズ、角丸などを編集できる。
ディティール

レイヤースタイル
グラデーションやドロップシャドウなどはレイヤースタイルで実現させる。
再編集可能であることや、コピー＆ペーストできるなど汎用性が高い。
反復して使用するスタイルはスタイルパネルに登録
スウォッチと同様、スタイルパネルに登録しておけば、
すぐに呼び出すことができる。
外部ファイル化することもできる。
ディティール

テキスト
フォント、文字サイズ、行送りなど

反復して使用する文字設定・段落設定は
文字スタイル・段落スタイルパネルに登録
段落スタイルに文字サイズと行間、文字スタイルにフォントを登録して使用すると、
テキストの属性を吟味する際に便利。
文字スタイルや段落スタイル単独で外部ファイル化することはできないが、
他のpsdファイルの文字スタイルや段落スタイルを読み込むことは可能。
テキスト

エレメント
汎用的な要素
見出し、アイコン、ボタンなど

反復して使用するエレメントをエレメントファイルにまとめる
見出しや箇条書き、テーブル、アイコン、ボタン、フォームなど
繰り返し使用するエレメントをまとめておく。
エレメントは適宜画像アセットとして書き出し、各ページのデザインで使用する。
エレメント
リ
ン
ク
を
配
置
画
像
ア
セ
ッ
ト
を
生
成

3他者が見ても
わかりやすいデータを作成する
データやデータ内部を構造化する

‣ Adobe Pinch In「デザインをスムーズにするガイドライン」第1回参照
http://www.adobe.com/jp/jos/pinchin/article/design-and-guideline/ideas-for-smooth-production.html
1名前を付ける
2順番に並べる
3グルーピングする
基本的なガイドライン

レイヤーを統合せず、編集可能な状態で残しておく。
レイヤーには名前を付ける
レイヤーグループには構造・要素名
レイヤーには部位名（テキストレイヤーを除く）
レイヤーを順番に並べる
奧、上、左にレイアウトされているレイヤーから順に。
レイヤーをグルーピングする
HTML構造に沿ったレイヤーグループ構造に。
不要なレイヤーを削除
空白レイヤー・非表示レイヤー
解析しやすいデータにする

ヘッダやフッタなど、複数のページで使用する共通モジュールは、
外部ファイル化しておき、各ページにはリンクを配置している状態にする。
ナビゲーションのカレント状態をリンクされたスマートオブジェクト内の
レイヤーカンプで実現する。
共通モジュールの外部ファイル化
header.psb
スマートオブジェクトに変換
リンクされたアイテムに変換
レイヤーカンプ：通常時（_up）
レイヤーカンプ：menu1カレント時（_menu1_current）
属性パネルでレイヤーカンプの切り替えが可能

1) Webデザインの作法に則る。
2) 意図が明確で、一貫性のあるデザインを作成する。
3) 他者が見てもわかりやすいデータを作成する。
「コーディングを考慮したWebデザインガイドライン」

☺
ご清聴ありがとうございました！

コーディングを考慮したWebデザインガイドライン

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to コーディングを考慮したWebデザインガイドライン (20)

コーディングを考慮したWebデザインガイドライン