やる夫がデザイナーの作ったPSDにお怒りのようですのまとめ

やる夫がデザイナーの作ったPSDにお怒りのようですのまとめ

元記事が削除されたのでまとめた

元記事削除後もキャッシュのほうはしばらく見ることができていたがキャッシュの方も削除されてしまったようだ。

PhotoshopでWebデザイン作成の際の注意点をわかりやすくまとめられていて非常に有用な内容だったので忘れないうちに復習も兼ねて要点まとめた。(一部改変・割愛・追記あり)

レイヤースタイルは統一する

レイヤースタイルは統一する

ドロップシャドーなどのレイヤースタイルは統一させる。場所によって色・長さ・方向などが意味なく異なってはいけない。

レイヤーは整理・整頓する

レイヤーは整理・整頓する

レイヤーは名前を付けてグループで分けて整理・整頓する。特に以下のことがないように注意する。

  • グループの階層を深くしすぎない
  • 使用されていないレイヤーを含めない
  • カンバスサイズの外側になるべく画像をはみ出さないようにする
  • スマートオブジェクトを使用する場合は階層を深くしない
  • 主要なレイヤーは複製して名前を○○のコピーのままにしない
  • レイヤー名を適切な名前にする
  • レイヤーは順序良く並べる

パネルオプションのコピーしたレイヤーとグループに「コピー」を追加のチェックをはずすとコピーした時に「コピー」が追加されない。
パネルオプションのコピーしたレイヤーとグループに「コピー」を追加のチェックをはずすとコピーした時に「コピー」が追加されない。

レイヤーパネルのサムネールの内容はデフォルトだとドキュメント全体を表示してしまうため「レイヤー範囲のみを表示」をオンにしてレイヤーのサムネールが縮小して表示されないようにする。

設定はWebサイト制作向けにする

Photoshopの初期設定は写真向けのものになっておりWebサイト制作には向かないので環境設定で以下の内容の変更をしておく。

1. 定規・文字の単位をpixelにする
1. 定規・文字の単位をpixelにする

2. 一般→オプションの「ベクトルツールと変形をピクセルグリッドにスナップ」にチェックを入れる
2. 一般→オプションの「ベクトルツールと変形をピクセルグリッドにスナップ」にチェックを入れる

3. Ilustratorから貼付けた図形がにじまないようにシェイプの「エッジに整列」をチェックする
3. Ilustratorから貼付けた図形がにじまないようにシェイプの「エッジに整列」をチェックする

ちなみにPhotoshopのシェイプを使用作成した図形は2.の「ベクトルツールと変形をピクセルグリッドにスナップ」にチェックを入れていれば「エッジに整列」がチェックされていなくてもにじまない。

4. グリッド線を10pixel、分割数を10に設定する
4. グリッド線を10pixel、分割数を10に設定する

Webサイト制作には10pixel/10の設定が一番グリッドが見やすく扱いやすい。

スライスの際にスライス番号が表示されているとレイヤーの一部が見えなくなるため「スライス番号を表示」のチェックをはずしておくと良い。

ちなみに環境設定にはガイドのピクセルにスナップの設定がないため普通に定規からドラッグすると小数点単位でガイドを配置してしまう。
ガイドはShiftキーを押しながら定規からドラッグすると小数点なしの整数で配置できる。

ガイドはShiftキーを押しながら定規からドラッグすると小数点なしの整数で配置できる。

また、4.の10pixel/10の設定がされていれば表示→スナップ先のグリッドをオンにすればガイドは整数の位置で配置される。

5. スライスを保存するとき自動生成されるimagesフォルダを無効にする

保存時にプリセット右横にあるメニューの出力設定の編集...を選択してファイルの保存の画像をフォルダーに保存のチェックをはずす。
5. スライスを保存するとき自動生成されるimagesフォルダを無効にする

出力設定の画像をフォルダーに保存をオフにする

Retina対応の場合は偶数サイズで作成

Retina対応の画像は倍のサイズで作成するが例えばボタンを横幅199px、高さ100pxで作成するとCSSなどでwidth:100px, height: 50pxを指定しても画像は計算上は横幅99.5px、高さ50pxとなってしまい、位置のずれや画像のにじみの原因になってしまうため必ず偶数サイズで作成する。

CSSスプライト用の画像を作成するときはRetina対応の際は計算上のずれを防ぐためにxとyの位置が偶数になるように注意する。

標準フォントはOSやブラウザで異なる

標準フォントはOSやブラウザで異なるため行間やコンテンツ内に入る文字数が基本的に異なる。

現在のシェアを考慮してデバイスフォントはPCサイトの場合は「メイリオ」、スマートフォンのサイトの場合は「ヒラギノ角ゴPro W3」のフォントを使用してデザインするのが望ましい。

最小フォントは10pxを基準に

最小フォントサイズはブラウザによって異なるが一番シェアの多いChromeの初期設定は10pxになっているため10pxを基準にしてデザインしたほうが良い。

Chromeでは9px以下のフォントは10pxで表示されるのだ。

ドロップシャドウの描画モードは通常で

レイヤー効果のドロップシャドウや光彩の描画モードで乗算やスクリーンなどを指定してもCSSで乗算やスクリーンと同じ効果を表現できるブラウザは限られているため、ドロップシャドウの描画モードは通常を指定する。

状態変化を用意する

ボタンの場合、通常時ボタンのほかにも必要に応じて以下のボタンを用意する。

  • マウスオーバーときのボタン
  • 押せないときのボタン
  • 押したとき(active時)のボタン

チェックボックス、ラジオボタンの場合はオンとオフのときのデザインが必要になる。

inputタグのテキストフォームの場合はフォーカス時のデザインが必要になることもある。

エラー時の表示も状態変化に含まれるためデザインを用意しておく。

リンク範囲は基本四角形

HTMLにおいてリンク範囲は基本四角形なので以下のように多角形のボタンを配置するとクリック範囲が重なって都合が悪い。
クリック範囲は基本四角形

CanvasやAreaタグを使用すれば円や多角形のリンク範囲を指定することができるがボタンのサイズに変更があった場合、リンク範囲の座標値も変更しなければならないため多用するのは好ましくない。

スマートオブジェクトの使い方

スマートオブジェクトは以下の3つを目的とした機能なのでグループ化やレイヤーリンクの代わりには使用しない。

スマートオブジェクトの本来の使い方

  1. データの劣化なしで変形させる
  2. データの劣化なしでフィルター適用(スマートフィルター)
  3. 1 つのスマートオブジェクトを編集した際にコピーしたスマートオブジェクトを自動更新させる

元記事は削除されてしまった

元記事は現在ではGoogleキャッシュも含めてサイバーエージェントの上長命令ですでに削除されており、魚拓も一部を除いて残っていないようだ。長い時間と労力をかけて作成されたこのような良記事を削除されてしまうのは非常にもったいない。

元記事の内容は閲覧可能

元記事、Googleキャッシュ、魚拓(一部を除く)は残っていないがarchive.isには元データがまだ残っているので閲覧したい場合はこれらのサイトを利用すると良い。

archive.is

その1 https://archive.is/UgTCg
その2 https://archive.is/OomTk
その3 https://archive.is/zCvU2
その4 https://archive.is/hvffB
その5 https://archive.is/Efrdb