画像化する部分・CSSで再現する部分を考える

コーディングを行う際、最初にデザインをみて「画像として書き出すべきパーツ」を決める必要があります。そのためにはCSSの知識や発想力も必要になりますよ。

• コーディングのお仕事で最初にすること
• 画像かCSSかを考える
• CSSで出来ることを知る
• 実習
• まとめ

コーディングのお仕事で最初にすること

コーディングの仕事の中には、デザインデータからWebページを構成するのに必要な画像を書き出すことも含まれています。

なので、デザインデータを頂いて最初に行うのは、下記の２つです。

1. 構成を考える（どこまでが画像、どこまでCSSで再現するか）
2. 画像が必要な部分を書き出す

今回はデザインデータにある様々なパーツを「CSSで再現する部分」「画像として書き出して使う部分」にどう分けるかを考えていきましょう。

画像かCSSかを考える

結論から言うと、CSSで再現できる部分はCSSで作るべきです。
理由は２つあります。

• ページの容量が軽くなる（読み込みが早くなる）
• ブラウザ幅が大きくなっても荒れない（画質低下による見えにくさがない）

例えば、下図のようなグラデーションがかった文字があるとします。

下はCSSでグラデーションを再現したものです。

SAMPLE TEXT

JPGなど画像化した場合、元の画像よりも大きくなると画質が荒れて見にくいですよね。
Retinaディスプレイ（高画素密度）の場合も、フチがモヤッとして汚く見えてしまう危険性があります。

対して、CSSで設定したものは大きく表示しても荒れません。

SAMPLE

画像できれいに見せるためには高解像度にする必要があるので、どうしてもファイル容量が大きくなってしまいます。CSSで構成したほうが、見え方も安定して綺麗、かつ軽量なのです。

文字だけではなく円などの図形でも、同じことが起こります。 このため画像を使わなくても作れる部分は、CSSで作ることが望ましいです。

ただし、難易度が跳ね上がる、レイアウトが不安定になるなどの場合は画像として書き出す部分もあります。そのあたりは先のレッスンでも紹介します。

CSSで出来ることを知る

CSSで再現するか、画像として書き出すかを判断するためには、まず「CSSで何が出来るのか」を知る必要があります。

とは言え、CSSで出来ることは非常に幅広いです。 こういうものが作れる、という例を挙げていてはきりがないほど。 その中から、よく使われるものをいくつか紹介します。

こうしたCSSプロパティを組み合わせることで、様々な表現が作られています。 例えば、上のグラデーション文字は「グラデーション（背景）を、文字で切り抜く」という設定をして、文字にグラデーションがかかったように見せています。

.sample{
  font-size: 60px;
  font-weight:700;
  color: #DA8E00;
  background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

こうしたCSSの組み合わせは覚えて使うというよりも、デザインに応じて考える必要があります。だからこそ「基礎力」と「検索力」が必要になるのです。

CSSプロパティ、もしくはその組み合わせで何が出来るのかを知るには、日々意識するしかありません。全レッスン【コーディングお役立ちツール】で紹介した逆引きリファレンスを読んだり、色々なジェネレーターやスニペットを見てみたりするのも知識の収集になるでしょう。

実習

このデザインデータ（ _design.zip ）をダウンロードして下さい。 スマホ・PC幅でのデザインが入っています。

_design.zip をダウンロード

トップページ（下図、赤線で囲ったページ）のコーディングをするために、画像として書き出す必要がある部分を考えてみましょう。

次回のレッスンで書き出し方法やポイントを紹介します。 今回の実習で、書き出しを行う必要はありません。

素材ファイルの構成

まとめ

コーディングの仕事初めは、画像として受け取ったデザインを、どうHTMLページとして構築するか考えるところから始まります。

「どこまで画像扱いにするのか（書き出しが必要か）」を考えるために、CSSを使った表現方法の知識などを日頃から収集しておきましょう。

即座にスタイル指定等を書き出せるよう覚える必要はありません。 「CSSで出来た気がするなぁ」と頭の片隅にあれば大丈夫です。 取っ掛かりさえ思い出せれば、あとは検索して作り方を見つければ良いのです。