1.画像を用意する
コーディングをする前に、使用する画像をimageフォルダ等にまとめておきます。
切り出す必要が無い画像もあり
自分でデザインからコーディングまでを行った際など、デザインファイルに使われている元画像がある場合は、画像をスライスツールで切り出す必要はありません。
元画像のサイズが大きい場合はリサイズ・トリミングを行う、解像度を下げる、など重くなりすぎないよう調整すればOKです。
例えば、見本のヒーロー画像はフルワイド(画面幅いっぱい)に表示させる予定です。
便宜上1280pxのアートボードでデザインは作成しましたが、ブラウザ幅によってはそれよりも大きく表示される＝画像が引き伸ばされて汚く見えてしまう可能性があります。手間をかけてスライスしても逆効果になってしまいますよね。
スライスして切り出す画像は、切り出さないと用意できない画像のみで良いです。
●画像の軽量化方法
画像の解像度を下げて、サイズを小さくするにはphotoshpなどの画像編集ソフト、WEBツールを使用します。
photoshopの場合は下図のように「Web用に保存」を開き、設定ウィンドウを使うと細かく調整できます。
赤線の部分が画質の選択箇所、大まかな定義・任意の数値両方から選ぶことが出来ます。 青線の部分は設定した形式で保存した際のサイズが表示されています。 プレビューも設定に合わせて変化しますので、表示を見ながら画像が荒れすぎない程度に画質・サイズを落として行きましょう。
オンライン上で画像を軽量化してくれるツール（画像圧縮ツール）も多く公開されています。代表的なサービスとしてはGoogle Chrome Labsの画像圧縮サービス「Squoosh」があります。
使い方はとてもシンプルで、ピンク色の「Drop OR Paste」と書かれている所に、圧縮したい画像をドラッグします。すると自動的にエディター画面に変わります。
プレビューを見ながら赤線部分で画質を調整
→右下の青いダウンロードボタンを押せば完了です。
切り出し方に迷ったら…
デザインによっては、切り出しに迷う箇所も出てくると思います。
例えば、下記のようなデザインがあったとします。
左側の部分を作り方は、大きく３パターンあります。
1.枠・影までを１つの画像として切り出す 2.中ロゴとテキストを切り出し、枠線と影はcssで付ける 3.ロゴだけを切り出し、テキスト部分はデバイスフォントにする
どのタイプでコーディングするかによって、切り出し方も変わります。
どの方法で作成するかはケースバイケース、好みもあります。 * コーディングのしやすさ * ブラウザ幅が変わった時の表示 * 解像度による影響（画像が荒れたり、小さい文字が潰れたりしないか）
を考えて、どこまでを画像化するのかを決めると良いでしょう。
2.コーディングする
サイトの組み立てに使用する画像が揃ったら、HTMLとCSSファイルを作成してコーディングしていきます。
コーディングを行う際は、それぞれのパーツがどのようなブロックに分けられるかを考えると進めやすいです。
Webサイト制作実践講座（前編） で行ったように、この時点でID,Class名を決めておくと一気にコーディングできますね。
グリッドレイアウトベースであればBootstrapを使う 動きのあるページにしたい場合はjQueryやJavascriptを使う など、デザインに合わせてフレームワークやライブラリ等を活用すると作業時間短縮につながります。
完成したら、 * レイアウト崩れはないか * レスポンシブ対応になっているか
ブラウザ幅を変えて、表示を確認しましょう。
◆課題：htmlでページを作成する
作成したデザインをHTMLファイルとしてコーディングしてください。
自信がある方はこの課題を飛ばして、WordPressテーマ作成に進んでも構いません。