コーディングを考慮した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

‣ レスポンシブデザインでは、厳密なピクセル指定よりも比率が重要になってくるが、ベースとなるデザインを考案するに際には、グリッドシステムの考え方はそのまま活用できる。位置マージンレイアウトグリッドよりも細かい単位で、さまざまな要素をレイアウトする際に使用するマージンも、因数を使用してバリエーションを用意しておく。 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デザインガイドライン」

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

https://twitter.com	45
http://b.hatena.ne.jp	2
http://twicli.neocat.jp	1
https://tweetdeck.twitter.com	1

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

by Hiroyuki Makishita, 代表取締役 at 株式会社Plankton Design

on Aug 04, 2014

Statistics

Views

Actions

4 Embeds 45

Accessibility

Categories

Upload Details

Usage Rights

Report content

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