コーディング時間を短縮するための、スライスで気をつけたいポイント
効率よくコーディングするための、画像書き出し(スライス)のポイントを解説します。

画像書き出しの段階で、コーディングを意識したスライスができていますか?
というのも。早い段階でコーディング部分までイメージしておかないと、後々 余分なCSSを書くことになったり、スライスをやり直すことになりかねません。
今回は、コーディングしやすいスライスのポイントをまとめてみます。
※フォトショップをベースに書いています。
スライス作業に入る前に
コーディングをするのは誰?
もし、他の方がコーディングをする場合は、自分とは違うコードの書き方かもしれません。スライスする前に要望など確認しましょう。
スライスツールかアセット書き出しか
アセット書き出しはとても便利ですよね!デザインが確定していて、アセット書き出しを想定して作られたデータならオススメです。
でも、例えば余白込みでスライスしたいとか、のちに写真差し替えがある場合などは、アセット書き出しを使わない方が効率が良い場合もあります。
それぞれのメリット・デメリットを確認しておくのがベストです。
画像書き出しするときのポイント!
同じ種類の画像は、「横幅」や「高さ」を揃える
例えば、ナビに使っているアイコンなど サイズが統一されているものは、高さだけ もしくは横幅だけ統一する。もしくは高さも横幅も両方揃えておくと、CSSで一括指定ができたり、画像が扱いやすくなります。
ファイル名はわかりやすく、規則性を持ってつける
ファイル名をみて、「メインビジュアルに使われている写真」、「メニューに使われいてる矢印」ということが、予測できるファイル名がおすすめです。
ファイル名のつけ方にルールを作っておくと、ファイル名をつける時に悩みませんし、画像が探しやすくなります。
例)nav_icn_home.png(画像が使われる場所+画像の種類+補足+拡張子)
ナビのホームのアイコン画像かな?と予想がつきますよね。このように、ルール化しておくのがオススメです。
ファイルの種類(jpg、png、svgなど)は正しく選ぶ
透過が必要な場合はpngを使う。写真はjpgにするなど、必要に応じて適したファイル形式を選びましょう。データ量の節約にもなります。
コーディングで実装する箇所を、事前に考えておく。
「ここの文字は画像だけど、この文字はデバイステキストで実装する。」という具合に、
矢印やハンバーガーボタン・角丸・シャドウ・グラデーションなども、CSSで実装するのか否か、事前確認しておきましょう。
リピートできるものは、リピートできる最小サイズで書きだす
大きな画像でリピートすると重くなるので、リピートできる最小サイズでスライスしましょう。
スライスしたデータ(PSD・AIなど)は残しておく
後から、修正や差し替えがあったり、再度書き出しが必要になることもあります。もとのスライスデータを流用できる場合もあるので、データは残しておくのがベストです。
レスポンシブやスマホ対応するときのポイント!
画像サイズは偶数にする
奇数になっていると、ブラウザによって画像の見え方が変わるため、例えば1px見切れたり、画像が滲む原因になります。割り切れるサイズ(偶数)にしておくのがオススメです。
画像の書き出しサイズを確認しておく
レティーナ対応で2倍、3倍サイズなどで書き出すのか?事前に確認しておきましょう。
最後に
いかかでしたか?
今回紹介したことが、スムーズにコーディングするためのヒントになれば幸いです。それでは、よきコーディングライフを♪