• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

コーディング時間を短縮するための、スライスで気をつけたいポイント

投稿者アイコン
2019/05/09
書いた人:
rurippa!
カテゴリ:
Web制作
7,030 views

効率よくコーディングするための、画像書き出し(スライス)のポイントを解説します。

コーディング時間を短縮するための、スライスで気をつけたいポイント

画像書き出しの段階で、コーディングを意識したスライスができていますか?

というのも。早い段階でコーディング部分までイメージしておかないと、後々 余分なCSSを書くことになったり、スライスをやり直すことになりかねません。
今回は、コーディングしやすいスライスのポイントをまとめてみます。
※フォトショップをベースに書いています。

スライス作業に入る前に

コーディングをするのは誰?

もし、他の方がコーディングをする場合は、自分とは違うコードの書き方かもしれません。スライスする前に要望など確認しましょう。

スライスツールかアセット書き出しか

アセット書き出しはとても便利ですよね!デザインが確定していて、アセット書き出しを想定して作られたデータならオススメです。

でも、例えば余白込みでスライスしたいとか、のちに写真差し替えがある場合などは、アセット書き出しを使わない方が効率が良い場合もあります。

それぞれのメリット・デメリットを確認しておくのがベストです。

画像書き出しするときのポイント!

同じ種類の画像は、「横幅」や「高さ」を揃える

例えば、ナビに使っているアイコンなど サイズが統一されているものは、高さだけ もしくは横幅だけ統一する。もしくは高さも横幅も両方揃えておくと、CSSで一括指定ができたり、画像が扱いやすくなります。

slice_img01

ファイル名はわかりやすく、規則性を持ってつける

ファイル名をみて、「メインビジュアルに使われている写真」、「メニューに使われいてる矢印」ということが、予測できるファイル名がおすすめです。
ファイル名のつけ方にルールを作っておくと、ファイル名をつける時に悩みませんし、画像が探しやすくなります。

例)nav_icn_home.png(画像が使われる場所+画像の種類+補足+拡張子)
ナビのホームのアイコン画像かな?と予想がつきますよね。このように、ルール化しておくのがオススメです。

ファイルの種類(jpg、png、svgなど)は正しく選ぶ

透過が必要な場合はpngを使う。写真はjpgにするなど、必要に応じて適したファイル形式を選びましょう。データ量の節約にもなります。

コーディングで実装する箇所を、事前に考えておく。

「ここの文字は画像だけど、この文字はデバイステキストで実装する。」という具合に、
矢印やハンバーガーボタン・角丸・シャドウ・グラデーションなども、CSSで実装するのか否か、事前確認しておきましょう。

リピートできるものは、リピートできる最小サイズで書きだす

大きな画像でリピートすると重くなるので、リピートできる最小サイズでスライスしましょう。

slice_img02

スライスしたデータ(PSD・AIなど)は残しておく

後から、修正や差し替えがあったり、再度書き出しが必要になることもあります。もとのスライスデータを流用できる場合もあるので、データは残しておくのがベストです。

レスポンシブやスマホ対応するときのポイント!

画像サイズは偶数にする

奇数になっていると、ブラウザによって画像の見え方が変わるため、例えば1px見切れたり、画像が滲む原因になります。割り切れるサイズ(偶数)にしておくのがオススメです。

画像の書き出しサイズを確認しておく

レティーナ対応で2倍、3倍サイズなどで書き出すのか?事前に確認しておきましょう。

最後に

いかかでしたか?
今回紹介したことが、スムーズにコーディングするためのヒントになれば幸いです。それでは、よきコーディングライフを♪


この記事を読んだ人はこんな記事も読んでいます