はじめに
本資料の目的
本資料はWeb制作で画像を適切に扱うための情報を整理したガイドです。検索意図を分析し、実務で役立つ項目に絞って解説します。主に「デザイン・制作プロセスの理解」「画像編集・加工技術の習得」「画像の最適化・実装方法」の3つの観点で整理しました。
対象読者
Webデザインや制作に携わる方、これから学ぶ方、サイト内の画像をより良く扱いたい運用担当者に向けています。専門用語は最小限にし、具体例を交えて丁寧に説明します。
本資料で学べること
- Photoshopを使ったWebデザインの手順と実務的なコツ
- Canvaを使った素早いモックアップ作成術
- HTMLのimageタグを用いた実装と最適化の基本
読み方のポイント
各章は実務で使える手順と注意点を優先してまとめました。まず第2章のデザイン、次に第3章でモックアップ、第4章で実装と順に読むと理解が深まります。実例を試しながら進めると効果的です。
PhotoshopでWebサイトのデザインをしよう
はじめに
ここではPhotoshopを使って実寸のWebデザインを一から作る手順をやさしく説明します。実際に手を動かしながら、HTML/CSSで使う画像素材まで準備します。
新規ファイル作成（1200×1200px）
ファイル→新規で幅1200px、高さ1200px、解像度72ppiを指定します。これは作業領域を確保するための目安です。
コンテンツ幅設定（960px）とガイド作成
表示→新規ガイドで左右に120pxずつ置き、中央の960pxをコンテンツエリアとします。ヘッダーや余白の基準にガイドを追加しておきます。
切手風デコレーションの作り方
長方形ツールで小さな矩形を作り、ブラシや消しゴムでギザギザを作ります。複数を並べて角に配置するとアクセントになります。
メイン画像エリア（960×400px）
中央に960×400pxの長方形を作ります。レイヤースタイルで白い境界線（2〜4px）とドロップシャドウを付けて浮き上がらせます。
サムネイル配置（210×140px、間隔20px）
下部に210×140pxのサムネイルを横並びに配置します。レイヤーを複製して間隔20pxを揃えると素早く並べられます。各サムネイルに同じ白枠を付けて統一感を出します。
スライスと書き出し（HTML/CSS用素材準備）
スライスツールでメイン画像、各サムネイル、ロゴなどを個別に切り出します。ファイル→書き出し→Web用に保存（または書き出し形式）でPNGやJPEGを出力し、HTML/CSSで扱える素材を準備します。
Canvaを使った簡単モックアップ画像作成術
背景と目的
Webサイトのモックアップは、完成イメージを共有したり仕様確認をしたりするのに役立ちます。Canvaなら初心者でも操作が簡単で、短時間で見栄えのよいモックアップを作れます。
テンプレートの選び方
Canvaを開き「モックアップ」「ウェブサイト」などで検索します。多くのテンプレートが出るので、用途（ランディングページ、ブログ、EC）に合うものを選んでください。マルチデバイス表示のテンプレートを選ぶと、レスポンシブ確認が楽です。
画像ファイルのアップロード（PNG/JPEG推奨）
自分の画面キャプチャやパーツ画像をアップロードします。PNGやJPEGが扱いやすく、透明が必要ならPNGを使います。画像をドラッグしてテンプレートに配置します。
画像の幅調整と配置
画像はキャンバスに合わせて幅を調整します。角をドラッグして拡大縮小し、位置はドラッグで微調整します。ガイド線やグリッドを表示すると揃えやすくなります。
保存とダウンロード（PNG形式）
準備ができたら右上の「ダウンロード」からPNGを選んで保存します。高解像度が必要なら「サイズを変更」や2倍でエクスポートする設定を使ってください。
レスポンシブ確認のコツ
マルチデバイスのテンプレートでスマホ・タブレット・PC表示を切り替え、要素の崩れを確認します。必要なら各ビューでレイアウトを微調整してください。これで実際の実装時のイメージがつかみやすくなります。
HTMLにおけるimageタグの使い方
基本
HTMLで画像を表示するにはタグを使います。最小限の例:
<img src="images/photo.jpg" alt="公園の風景">
src属性に画像のパスを指定すると表示できます。タグは自己終了形式で、必ずalt属性を入れてください。
srcに指定するパス
- 相対パス:
images/photo.jpg（同じサイト内の画像） - 絶対URL:
https://example.com/photo.jpg（外部の画像）
相対パスはファイル構成に沿って指定します。開発時は相対パスをよく使います。
alt属性とアクセシビリティ
altは画像が表示できないときに代替テキストを示します。視覚障害のある方が読み上げるため、内容を簡潔に書いてください。装飾だけの画像は空文字（alt=""）にします。
サイズ指定とレスポンシブ
width/height属性で固定サイズを指定できますが、CSSで制御するほうが柔軟です。例:
img { max-width:100%; height:auto; }
テキスト回り込み（float）の例
画像の左にテキストを回り込ませるにはfloatを使います。
<img src="images/photo.jpg" class="left" alt="景色">
<p>ここに本文が続きます。画像の横にテキストが回り込みます。</p>
.left { float:left; margin:0 1em 1em 0; width:200px; }
floatを使うとレイアウトが崩れることがあるため、必要に応じて親要素のクリアを行ってください。
高解像度（Retina）対応
srcset属性を使うと画面解像度に応じた画像を選べます。簡単な例:
<img src="photo-1x.jpg" srcset="photo-2x.jpg 2x" alt="商品写真">
以上が基本的な使い方です。実際のページで試しながら調整してみてください。
