見出し画像

個人的に実践しているWebデザインガイドライン⑥ デザインカンプ編

TAK / Web Creator.

あくまで個人的に実践しているデザインガイドラインです。

記事一覧はこちら↓

# 基本事項

必ずWeb用設定で作成する。

カラーモード → RGB
単位 → 定規・文字ともピクセル(px)
基本解像度 → 72dpi

解像度については以下の記事が分かりやすいと思った。

僕は現在はXDでデザインカンプを作ってますが最近までPhotoshopでした。そのため、Photoshopでの作業環境を意識したデザインガイドラインになると思います…。

# レイヤー名は必ず整理する

レイヤー名を必ず設定し、整理する。コーダーやフロントエンドエンジニアが理解できるカンプを作成する。

レイヤーの階層が整っていると素材の書き出しもスムーズに行える。

レイヤーやグループには第三者が理解できる名前を付ける。「名称未設定」「レイヤー 2」などの命名のままで放置したりとか絶対ダメ。

グループはHTML要素やセクション、コンポーネントごとにまとめる。HTMLの要素構造（header / main / aside / footer / section など）に合わせたグループ化が一般的。

不要なレイヤーは必ず削除する。コーダーやフロントエンドエンジニアが混乱しないように第三者がわかるようにしておく。

レイヤーを非表示にしておく場合はその理由を明確にしておく。

個人的にはLIGのPSDルールがめっちゃ参考になると思った。

# 12カラムのグリッドレイアウトで制作する

グリッドベースのレイアウトは要素の頭を揃えやすく、自然と整ったデザインを作りやすい。

レスポンシブ化する場合の目安にもなるメリットもある。

カラム数は12を推奨。BootstrapなどのグリッドベースのCSSフレームワークを使う案件では必須。

# サイズは基本的に整数で指定する

要素の幅やフォントサイズは整数で指定する。小数点以下の値はにじみの原因になり、コーディングの時にとても困る。

Retina対応などでカンプを倍サイズで作る際は掛けた数で必ず割り切れる数値にする。2倍で作るなら偶数といったように。

# テキストの流し込みは段落テキストボックスで作成する

テキストを流し込むボックスは段落テキストボックスで作成。

ブロック要素内の自動改行を再現するのにポイントテキストで任意改行を入れたりはしない。

# ブレンドモードは非推奨

現在はmix-blend-modeやbackground-blend-modeといったCSSプロパティで乗算などのブレンドモードは実現可能だが、まだブラウザが出揃っていない。

ブレンドモードが必要ならコーダーやフロントエンドエンジニアに渡す前にデザイナー側で透過画像として適宜加工し書き出してしておく。もしくは対応していないブラウザでの表示方法も考慮しておく。

# プリミティブな図形はなるべくベクター素材で作成する

ロゴやアイコンなどのシンプルなプリミティブ図形は後々の更新も考慮して可能な限りベクター素材で作成する。

ベクター素材のピクセルはスナップさせて1px未満のにじみを発生させない。

Photoshopの場合は編集 → 環境設定 → ツール → ベクトルツールと変形をピクセルグリッドにスナップにチェックを入れる。

# リピートする背景画像はパターン素材を用意する

模様がリピートする背景画像はパターン素材を用意してリピート配置できるデザインにする。

パターンなのに大きな1枚画像とかはNG。できる限り最小サイズで。

# その他留意点

共通モジュールはコンポーネント化する。

他の作業環境でリンク切れになるのでスマートオブジェクトのCreative Cloudライブラリ化、ファイルの外部リンクなどには注意を払う。

後々の修正や変更に対応しやすいようにベクターシェイプやスマートオブジェクトなどを優先的に利用する。

シャドウ・エンボス・グラデーション・光彩は値を控えめに設定する。デザインツールは効果が分かりやすいようにデフォルトの値が強めに設定されている場合があるので注意。

ドロップシャドウなどの陰影は包括光源90度を推奨。光源は全要素で統一する。

# 参考記事

# 参考スライド

# 参考書籍

---

次回「その他の重要事項編」はこちら↓


愛と平和