DTPデザイナーさんが作成したaiカンプを、コーディングするときに知っておきたいこと

この記事はこんな方向け
・DTPデザイナーさんのaiカンプコーディングのコツを知りたい
・細部にこだわったコーディングを求められている
・コーダーさんに詳細な指示を出したい

元記事（以前私が投稿したもの）：https://qiita.com/cawmate_hitomi/items/7901dcae2f5a8adf7ffd

DTPデザイナーさんからのaiデータをコーディングする機会がありました。
WebとDTPでは知識やこだわりが違うので、だいぶ衝突・・・・・

ブラウザや端末によって、数ピクセルずつずれるのでデザインカンプぴったりにはできないよ！（めっちゃがんばればできるかもしれんが果てしない）ということをわかってもらった上で、できる限りDTPデザイナーさんのご要望をかなえる方法と、事前にお伝えしたほうがよかったことをまとめておきます。

（当時）環境はこちらがWindows、DTPデザイナーさんがMac。
サイトはレスポンシブです。

aiでカンプを作るときに設定していただくこと

webは基本1px単位です。
要素に%など指定して20.2pxと計測されることもありますが、デザインする際は整数pxで作っていただきましょう。

▼最初に設定していただくこと

1.「ファイル＞ドキュメントのカラーモード＞RGB」に設定。
2.「環境設定＞単位・表示パフォーマンス」をピクセルに設定。
3.「環境設定＞ガイド・グリッド」の中にある「グリッド」を10pxに設定。
その下にある「分割数」を10に設定。これでグリッドが1マス1px × 1pxになります。
4.「ウィンドウ＞ワークスペース＞web」に設定。
5.「表示＞グリッドにスナップ」をチェック。
オブジェクトの移動が1pxごとされて、0.000単位でずれることはなくなります。
6.「効果＞ドキュメントのラスタライズ効果設定」を「スクリーン72dpi」に設定。
7.「表示＞ピクセルプレビュー」にチェック

以上のことを設定しても、絶対に1px単位のデータを作れる、とは約束できません。
が、やらないよりやっていただいたほうが絶対よいのでお願いしましょう！

制作時に気を付けていただきたいこと

・要素に小数点が出ないようにする。
・線は線ツールではなく、【塗りの高さ1px単位のパス】で配置する。ピクセルのマス目を塗るイメージ。

aiデータを納品するときに行ってもらいたいこと

1.オブジェクトを「ピクセル整合」して小数点がでないようにしてもらう。
>Web ワークフローのピクセル整合パスの描画
https://helpx.adobe.com/jp/illustrator/using/drawing-pixel-aligned-paths-web.html

2.納品いただくデータは2種類、上記1をした後
・テキストをそのまま打ったもの
・テキストをすべてアウトライン化したもの（ファイル末尾に_ol付加）

リンクを埋め込むとリンク切れの心配がなくなるが、データ自体が重くなります。
臨機応変に判断を。

DTPデザイナーさんに確認しておくこと

aiデータ内のマージンが33px, 57px, 102pxと、なかなか刻んでたりします。
同じようなコンテンツだけど1px違うなど。
それをそのまま設定するか、四捨五入や揃えるかなど聞いたほうがベター。

[実装]フォントサイズ

Chromeではフォントサイズを9px以下に設定しても10pxにきりあげられてしまいます。
最小テキストサイズは10pxにしてね、と伝えても8pxにしてることもあるかもしれません。
そういうときは小さくしたいテキストをspanで囲って変形させます。

<p class="fz10"><span class="fz08">おすすめ！</span></p>

.fz08 {
 transform:scale(0.8);
}

spanの親要素にfont-size: 10px;を設定しておいて、transform:scaleで80%の大きさにします。
このspanになにか装飾（ボーダーとか）をつけると変形してしまうので、フォントサイズ調整だけにとどめます。

[実装]テキストの右端ぞろえ

紙面では、テキストブロックの右端に文字を揃えます。
それをwebで再現するため、text-align: justify;を使います。

text-align-last: left;も同じ効果ですが対応ブラウザがまちまちみたいです。

[実装]行間

aiとwebでは行間のかかり方が違います

▼ai

▼web

aiでは行間が増加すると文字が下にずれていきますが、webでは文字のベースラインから上下に行間がつくので、最初の行上部にもだんだんマージンがでてしまいます。

最初の行上部のマージンをなくそうとすると、ネガティブマージンなどつけたりと対応工数がかかります。事前にここの認識を合わせておきましょう。

[実装]インデント

「【（　などの括弧は通常の文字よりちょっと右寄りです。
先頭を揃えるよう調整します。
最初の文字が括弧の文章をspanで囲って、以下の様なスタイルをつけるだけ。

<span class="id">「インデントしてるよ」</span>

.id {
 display: inline-block;
 text-indent: -0.8em;
}

[実装]カーニングでメトリクス、オプティカル

便利なプロパティがあります。

font-feature-settings: "palt";
letter-spacing: .5em;

参考記事
https://ics.media/entry/14087/

[実装]レイヤーの効果

レイヤーが乗算やオーバーレイになっている場合は、mix-blend-modeプロパティが使えます。

mix-blend-mode: multiply;

現状ほぼ全てのブラウザで使用可能です。
※IEはサポートなし
https://caniuse.com/?search=mix-blend-mode

[実装]画像が若干にじんで見える

原寸で配置した画像がにじんで見えるとご指摘がありました。
（当時）環境はこちらがWindows、DTPデザイナーさんがMacです。
MacはRetinaディスプレイなので、画面サイズx2のピクセル数です。
なので画像も2倍でサイズでつくらないと鮮明に見えません。

グラフィック重視ならRetina対応はマストです。

<img src="images/photo.jpg" srcset="images/photo.jpg 1x, images/photo@2x.jpg 2x" alt="PHOTO">