ホームページ用の画像を作るツールの選び方｜Photoshop・Illustrator・Adobe Express・Canva

結論：写真はPhotoshop、ロゴや図解はIllustrator、手早く作るならテンプレート型

写真の明るさや色の補正、背景の切り抜きのように、元の写真を加工する作業はPhotoshopが向いています。ロゴや図解のように、拡大しても線がぼやけない画像を作る作業はIllustratorが向いています。SNS用の画像や簡単なバナーをすぐ作りたい場合は、テンプレートから作れるAdobe ExpressやCanvaが手早く使えます。

どのツールで作っても、Webに載せる前に画像のサイズと容量を小さくすることが大切です。

用途ごとのツールの違い

表は横にスクロールできます。

Adobe ExpressとCanvaには、どちらも無料で使えるプランがあります（Adobe Express 料金プラン、Canva 料金プラン、いずれも2026年10月15日確認）。料金や、どのプランでどの素材・機能が使えるかは変わることがあるため、使う前に公式ページで確認してください。

1. 作る画像を、用途ごとに書き出す

まず、ホームページで使う画像を一覧にします。トップの大きな写真、サービス紹介の写真、ロゴ、図解、お知らせ用のバナー、SNSで告知する画像など、用途ごとに分けると、どのツールが必要かが見えてきます。写真の加工がほとんどなく、バナーやSNS画像が中心なら、テンプレート型のツールだけで足りることもあります。

2. Webに載せる前に、サイズと容量を小さくする

スマホで撮った写真や、ツールから書き出したままの画像は、Webには大きすぎることがよくあります。表示する大きさに合わせて縦横のサイズを縮め、容量を小さくしてから載せます。画像が重いと、ページの表示が遅くなり、読み込み中に文章がずれる原因にもなります。

WordPressでの画像の扱いはWordPress画像をWebPへ変える手順、表示のずれは画像の読み込みで文章がずれる原因と直し方で解説しています。

3. 画像に合った説明（alt）を付ける

画像には、内容を説明する代替テキスト（alt）を付けます。画像が表示されないときや、読み上げソフトを使う人に、画像の内容を伝えるためです。飾りだけの画像なら空にする、図解なら伝えたい要点を書く、のように使い分けます。書き方は記事画像のaltに何を書くかで紹介しています。

ファイル形式の選び方

表は横にスクロールできます。

WebPへの変換の手順はWebP画像の作り方と確認でまとめています。

表示される大きさに合わせて作る

画像は、ページの上で表示される大きさに合わせて作ります。たとえば、記事の横幅が800ピクセル程度なら、スマホの高精細な画面も考えて、その2倍くらいまでの幅にしておけば十分なことが多いです。カメラで撮った数千ピクセルの写真をそのまま載せると、表示が遅くなる原因になります。

よくある失敗

• 元の画像を上書きしてしまう：小さくした画像で上書きすると、あとで大きな画像が必要になったときに使えません。元の画像は別のフォルダに残します。
• 画像の中の文字が小さすぎる：パソコンで作ったバナーは、スマホでは文字が読めないことがあります。スマホの大きさで表示して確認します。
• 使ってよい素材か確認していない：テンプレートや素材は、商用で使えるか、クレジット表記が必要かを、それぞれの利用条件で確認します。

画像を載せる前の確認表

表は横にスクロールできます。