スライス（書き出し）前の注意点

スライス（書き出し）前の注意点を書きます！

あ！これは初歩的なことなのですが、各種ソフトで作業する時は頻繁に上書き保存（command+S）しておくことをお勧めします！もしソフトが急におちたらデータが保存されてなかったなんてことになるので・・・

画像の書き出し

• はじめにPCとSPのデザインを確認して、2倍サイズで比べた時大きい方の画像をスライスする（レイアウトによってはSPの方が大きい時もある）
• 角丸がついている場合は外して書き出す（CSSで実装：border-radius）
• ボーダーがついている場合は外して書き出す（CSSで実装：border）
• 画像の上にレイヤー（薄黒色が多い）が被っている時は外して書き出す（CSSで実装：擬似要素）
• サイズがほぼ同じ画像同士はサイズを合わせて書き出す（大体揃えるのは横幅だがデザインによっては縦揃いもある　臨機応変に）→コーディングが楽になる
• 位置（X・Y）の小数点は消す（小数点があると画像サイズが1px大きくなってフチに白い線がついたりする）
• 幅・高さ（W・H）の小数点は繰り上げで消す（理由は上と同じ）
• 画像にレイヤー効果（レタッチ処理など）がかかっていることがあるので知らぬ間に外さないように注意する

JPG形式：写真など色数が多いもの
PNG形式：イラスト・ロゴなど色数が少ないもの・背景を透明にする必要があるとき（JPGより綺麗だが容量は重くなりがち）
PNGの種類についてわかりやすい記事があったので貼っておきます。
SVG形式：テキスト（下に注意点書いています）・ロゴ・アイコン

テキストの書き出し

• パソコンにフォントが入っていない場合はアウトライン化データをもらわないと書き出せない
• 基本はSVG形式で、レイヤー効果（光彩など）がついている場合はPNG形式で（SVGだと崩れる可能性あり）
• SVG形式で文字を書き出す時は事前にアウトライン化するのを忘れずに！