Skip to content

Instantly share code, notes, and snippets.

@manabuyasuda
Last active September 12, 2022 06:33
Show Gist options
  • Save manabuyasuda/c96b2dbc093f5b6fd0e4afcc0f29177e to your computer and use it in GitHub Desktop.
Save manabuyasuda/c96b2dbc093f5b6fd0e4afcc0f29177e to your computer and use it in GitHub Desktop.
エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。

エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。

デザインカンプをコーディングするときに困りがちなことや、こうしてもらえると助かることなどをまとめています。デザイナーが他のデザイナーのデザインカンプを引き継ぐこともあるので、誰にとっても使いやすいデザインカンプを作ることは大切なことだと思います。

このドキュメントは指示ではなく、エンジニア目線の提案です。必ずしも正しいとは考えていませんし、このドキュメントをもとに意見を出し合えたらと思っています。

基本的にデザインカンプに残して欲しいとしていますが、共有されているのであればデザインカンプ以外でも構いません。デザイナーの頭の中にだけある状態はさけたいと考えているので、ストックしておく場所としてデザインカンプを選んでいます。

ツーツはPhotoshopを想定しています。これは単純にPhotoshopで作られることが多いからです。違うツールを使っている場合は、読み替えるか、読み飛ばしてください。

全体編

デザインの全体像を知るためにしてほしいことです。
デザインを作っているときに考えていることをデザインカンプに残しておいてもらえると、その考えに沿ってコーディングをすることができます。デザインの意図に合致したコードは良いコードになります。

サイト共通のサイズや色などをわかるようにしてください。

なぜそうするのか?

デザインカンプを作っていない人がデザインカンプを見ると、どれが同じで、どれが違うのかを判断するのに時間がかかってしまいます。
サイト共通の値をコーディング開始時から知っていることで、効率的に、修正に強いコードが書きやすくなります。
デザインカンプでは伝えきれないことは文章で伝わるようにしておいてください。

どうやってするのか?

デザインのレイヤーとは別にサイト共通の値を確認できるレイヤーを作ってください。「どういうときに使うのか」が分かるのがベストです。

参考リンク:

場所やUIごとにレイヤーを分けてください。

なぜそうするのか?

適切にレイヤーがわかれていないと、全体像を把握するのが大変になります。
書き出し設定(例えば、余白を含んだ画像アセットの書き出し)などもやりにくくなってしまいます。

どうやってするのか?

場所、UI、小さなパーツの順でレイヤーを整理してみてください。色分けなどもしてもらえると、よりわかりやすくなります。
よく使うクラス名をまとめているので参考にしてください。

CSS クラス名リスト

例えば、このようになります。

  • header/logo/logo_header.svg
  • header/navigation/TOP
  • contents/about/title
  • contents/news/text
  • footer/navigation/contact
  • footer/copyrights

参考リンク:

デザインカンプにない状態のデザインを教えてください。

なぜそうするのか?

通常、スマホとPCの2つのデザインカンプを作ることが多いですが、その中に含まれていない状態がある場合があります。例えば、以下のようなことです。

  • タブレット表示のときはどんな見せ方になりますか?
  • 文章が長くなったときはどんな見せ方になりますか?
  • アニメーションはどんな速度や動き方をしますか?
  • 画面幅が広がったときはサイズは固定ですか?同じように広がりますか?

どうやってするのか?

デザイン作成時に想定している動きがあれば、文章や参考リンクなどでデザインカンプ内に残しておいてください。その動きを想定したコードを書くことができるようになります。

参考リンク:

データ編

画像やアイコンのようなデータの扱いや、保存形式についてです。
デザインの作成中にしかできないこともありますし、デザインを作っている人にしてもらったほうが早くて確実なこともあります。

画像アセットを準備した状態でデータを渡してください。

なぜそうするのか?

画像アセットで書き出しをすることで、サイト制作全体の工数削減が見込めます。そのデザインツールに慣れていて、そのデザインを作った本人がセットをしたほうが効率的です。
本来なら一緒に書き出される想定だったパーツが含まれないまま書き出されてしまうといった、ケアレスミスを防ぐこともできます。

どうやってするのか?

データを開いてすぐに画像が書き出せるように、適切なレイヤーにファイル名と拡張子をつけてください。
レイヤー名は以下のようにしてください。おそらくレイヤー名を変更することになるので、大雑把に分かれば十分です。

  • logo_header.svg(ヘッダーにあるサイトロゴ)
  • image_contents01.jpg(コンテンツの1つ目の画像)
  • image_contents02_sp.jpg(コンテンツの2つ目のSP用の画像)

参考リンク:

なるべくベクターデータで渡してください。

なぜそうするのか?

高解像度ディスプレイや、レスポンシブウェブデザインに柔軟に対応するためです(IE9以上の対応なら使えます)。
いつでも綺麗な状態で表示させることもできるので、デザインとコード双方にとってメリットが大きいです。

どうやってするのか?

アイコンをパスとして作成したり、フォントはアウトライン化しておいてください(フォントがインストールされていないとベクターデータとして書き出せない)。Illustratorから貼り付ける場合は「シェイプレイヤー」にしておいてください。
Photoshopで完結しなくても、 Illustratorの画像アセットで書き出せるようにしておいても大丈夫です。

参考リンク:

テキスト編

コーディングをするときに地味に面倒なのが、文字と文字の間の余白を知ることです。
Photoshop上では1つの余白ですが、コーディングをする場合はline-heightmarginに分けて考えないとデザイン通りの余白にすることができません。
上手に余白を計測する方法は見つかっていませんが、Photoshopの機能をうまく使うことで計測する数を減らすことはできそうです。

慣れていないと作りにくいということもあると思うので、テキスト周りは「できれば」で大丈夫です。ただ、使い回しが出来るのはデザインの作業的にもメリットがあると思うので、ぜひ試してみてください。

段落ウィンドウでマージンを指定してください。

なぜそうするのか?

文字と文字の間の余白を正確に再現するには以下のような計算が必要で、とても時間がかかってしまいます。

文字同士の余白 - ((行送り1 - フォントサイズ1) ÷ 2) + ((行送り2 - フォントサイズ2) ÷ 2) 

どうやってするのか?

段落ウィンドウの「段落後のアキ」にmargin-bottomに当たる数値を指定してください。line-heigth(行送り)を考慮した状態での余白をPhotoshopの表示で知ることができます。
後述する「段落スタイル」を併用するのがベストです。

参考リンク:

段落スタイルを設定して、フォントのパターンを作ってください。

なぜそうするのか?

同じような見た目でも、作っていない人には同じかどうかの判断に時間がかかりますし、微妙に違う場合に気づけないかもしれません。
いくつか段落スタイルを作っておけば、パターンにあるフォントなのかそうでないのかが判断しやすくなります。

どうやってするのか?

「新規段落スタイルを作成」を選択して、フォントファミリーやフォントサイズ、段落後のアキなどを指定してください。 名前はどんなときに使うのかが分かるのがベストです。

参考リンク:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment