無料デザインツール完全ガイド｜Canva・デザインAC・Convertioでサイト制作を効率化する

はじめに

前回の記事ではポートフォリオサイトのSEO対策としてmetaタグ・OGP・サイトマップの設定方法を解説しました。OGP画像の作成パートでCanvaを紹介しましたが、サイト制作では他にも画像素材を準備する場面が数多くあります。今回は無料で使えるデザインツール・画像加工ツールをまとめて紹介します。Canva・デザインAC・リサイズツール・背景透過ツール・Convertio（拡張子変換）・ファビコン作成まで、それぞれをどんな場面で使うのかを中心に解説します。

1. サイト制作で必要になる画像素材の場面

コーディングのスキルだけでは、サイトに必要な画像素材はすべて揃いません。ポートフォリオサイトを作る過程で必要になる画像素材を整理します。

用途必要なサイズ・形式の例関連する記事
OGP画像1200×630px・PNG/JPG第二十八弾（SEO対策）
ファビコン32×32px・48×48px・ICO/PNG今回
アイキャッチ画像各サイトの規定サイズ第十三弾（画像最適化）
プロフィール画像正方形・背景透過今回
ロゴSVGまたは背景透過PNG今回
ヒーロー画像・装飾画像各セクションのデザインに応じる今回

これらの素材を作る・加工するための代表的なツールを、用途別に見ていきましょう。

2. Canva：万能デザインツール

2.1 Canvaとは

Canvaはブラウザ上で動作する無料のデザインツールです。プロが作ったテンプレートが豊富に用意されており、ドラッグ&ドロップで誰でもデザインを編集できます。

項目内容
料金無料プランあり（有料素材は一部制限）
URLcanva.com
得意なことOGP画像・SNS用バナー・プレゼン資料・ロゴ
出力形式PNG・JPG・PDF・SVGなど

2.2 OGP画像をCanvaで作る手順

  1. Canvaにログインし、「デザインを作成」→「カスタムサイズ」をクリックします。
  2. 幅 1200px・高さ 630px を入力して「作成」をクリックします。
  3. 左メニューの「テンプレート」から「OGP画像」「ブログバナー」などで検索します。
  4. テンプレートを選んで名前・職種・サイトのテーマカラーに合わせて編集します。
  5. 右上の「共有」→「ダウンロード」→ファイル形式「PNG」を選択してダウンロードします。

💡 自分のブランドカラーをCanvaに登録しておきましょう： 「ブランド」機能でメインカラー・サブカラー・フォントを登録しておくと、OGP画像・アイキャッチ・SNSバナーすべてで配色とフォントの統一感が出せます。

2.3 Canvaが向いている場面

場面理由
OGP画像・アイキャッチを作りたいテンプレートが豊富で初心者でも整ったデザインになる
SNS投稿用の画像が欲しいX・Instagram・LINEなど各SNSのサイズテンプレートがある
プレゼン資料・名刺を作りたいデザイン全般に対応している

3. デザインAC：商用利用可能な素材・テンプレート

3.1 デザインACとは

デザインACは「ACワークス」が運営する無料デザインテンプレート・素材サイトです。Canvaほど知名度はありませんが、チラシ・名刺・ロゴ・バナーなどのテンプレートを直接ダウンロードして編集できる点が特徴です。

項目内容
料金無料（会員登録が必要）
URLdesignac.net
得意なこと名刺・チラシ・ロゴ・バナーのテンプレート素材
出力形式AI・PSD・PNG・JPGなど（ソフトによって異なる）

3.2 CanvaとデザインACの違い

CanvaデザインAC
編集方法ブラウザ上で直接編集ブラウザ上で直接編集
必要なソフト不要（ブラウザのみ）AI/PSD形式の場合は対応ソフトが必要
向いている人デザインソフトを持っていない人Canvaにないテンプレートや機能を使いたい人
ロゴ素材テンプレートありロゴテンプレートが充実

⚠️ 商用利用の範囲を必ず確認しましょう： 無料素材サイトはサイトごとに「商用利用可能」「クレジット表記必須」「会員登録が必要」などの利用規約が異なります。ダウンロード前に必ず利用規約のページを確認してください。

3.3 デザインACが向いている場面

場面理由
背景色をCanvaにはない色にしたいフィルターボタンを押すと背景色が変えられる
ロゴのベースを探したいロゴテンプレートのカテゴリーが豊富
Canvaのテンプレートに飽きた別の系統のデザインの選択肢が増える

4. リサイズツール：画像サイズを揃える

4.1 リサイズが必要な理由

第十三弾の画像最適化でも触れましたが、用途によって最適な画像サイズは異なります。サイズが合っていない画像をそのまま使うと、表示が崩れたり読み込みが遅くなったりします。

用途推奨サイズ
OGP画像1200×630px
ファビコン32×32px・48×48px・180×180px（複数サイズ）
プロフィール画像（円形表示）400×400px程度の正方形
ブログ記事のアイキャッチ1280×720px（16:9）

4.2 おすすめのリサイズツール

ツールURL特徴
Squooshsquoosh.appリサイズ＋圧縮＋WebP変換が同時にできる（第十三弾で紹介済み）
iLoveIMGiloveimg.com複数枚の画像を一括でリサイズできる
Photopeaphotopea.comブラウザ上で動くPhotoshop風エディター。細かいリサイズ・トリミングが可能

4.3 iLoveIMGで一括リサイズする手順

  1. iloveimg.com の「画像のリサイズ」を開きます。
  2. リサイズしたい画像を複数枚アップロードします。
  3. 「ピクセル」または「パーセント」で目的のサイズを指定します。
  4. 「画像をリサイズ」をクリックして一括でダウンロードします。

💡 アスペクト比を保持するチェックを確認しましょう： 「縦横比を維持する」のチェックを外し忘れると画像が縦や横に伸びて歪んでしまいます。OGP画像のように決まった比率（1200×630px = 約1.9:1）が必要な場合は、先にPhotopeaやCanvaでトリミングしてから正確なサイズにリサイズするのが安全です。

5. 背景透過ツール：ロゴ・プロフィール画像を加工する

5.1 背景透過が必要な場面

場面理由
ロゴをヘッダーに配置する背景色が違うセクションでも自然に表示できる
プロフィール画像を円形にするCSSの border-radius: 50% と組み合わせる際に背景が透明だと綺麗に見える
ファビコンを作る背景が透明な状態でアイコンを作る
アイキャッチ内に人物・物体だけ配置したいデザインの自由度が上がる

5.2 おすすめの背景透過ツール

ツールURL特徴
remove.bgremove.bgAIが自動で背景を検出して透過。人物写真の精度が高い
Photopeaphotopea.com自分で範囲を選択して手動で透過。複雑な画像に向く
Canvacanva.com「背景リムーバー」機能（一部有料プランで利用可）

5.3 remove.bgの使い方

  1. remove.bg にアクセスします。
  2. 画像をアップロードまたはドラッグ&ドロップします。
  3. 数秒で背景が自動的に透過されます。
  4. 「ダウンロード」をクリックします（無料版は解像度に制限があります）。

⚠️ 背景透過した画像は必ずPNG形式で保存してください： JPG形式は透明度（アルファチャンネル）を保持できません。透過情報を保ったまま保存する場合は必ずPNGを選びましょう。

6. Convertio：ファイル形式の変換

6.1 Convertioとは

Convertioは画像・音声・動画・文書など300種類以上のファイル形式に対応した無料のオンライン変換ツールです。「このツールで作った画像をPNGで保存したけど、サイトではWebPにしたい」といった場面で活躍します。

項目内容
料金無料（1日の変換容量に制限あり）
URLconvertio.co
対応形式PNG・JPG・WebP・SVG・ICO・PDFなど

6.2 Convertioが活躍する場面

場面変換例
デザインACでAI形式の素材をダウンロードしたがブラウザで開けないAI → PNG/JPG/SVG
PNG画像をWebPに変換して表示速度を改善したい（第十三弾）PNG/JPG → WebP
favicon用にPNGをICO形式にしたいPNG → ICO
PDFの資料から画像を抜き出したいPDF → JPG/PNG

6.3 Convertioの使い方

  1. convertio.co にアクセスします。
  2. 変換したいファイルをアップロードします。
  3. 変換先の形式を選択します（例：「to WEBP」）。
  4. 「変換」をクリックしてダウンロードします。

💡 SquooshでもWebP変換は可能です： PNG・JPGからWebPへの変換は第十三弾で紹介したSquooshでも行えます。Convertioは「AIファイルをPNGにしたい」「ICOに変換したい」といった、Squooshが対応していない形式の変換で特に役立ちます。

7. ファビコンを作成・設置する

7.1 ファビコンとは

**ファビコン（favicon）**はブラウザのタブ・ブックマーク・スマートフォンのホーム画面に表示される小さなアイコンです。設定されていないと汎用的なアイコン（白紙のページなど）が表示され、サイトの印象が薄くなってしまいます。

7.2 ファビコンに必要なサイズ・形式

ファイル名サイズ用途
favicon.ico16×16px・32×32px（複数含む）ブラウザタブ（従来形式）
favicon-32×32.png32×32pxブラウザタブ（高解像度）
favicon-16×16.png16×16pxブラウザタブ（標準解像度）
apple-touch-icon.png180×180pxiOSのホーム画面
android-chrome-192×192.png192×192pxAndroidのホーム画面

7.3 ファビコン作成の流れ

  1. 元画像を用意する：ロゴやイニシャルなど正方形のシンプルな画像を用意します。背景透過が必要な場合はremove.bgやPhotopeaで加工します。
  2. ファビコン生成ツールでサイズ展開する：以下のツールを使うと必要なサイズをまとめて生成できます。
ツールURL特徴
favicon.iofavicon.io画像・テキスト・絵文字からファビコンを生成できる
RealFaviconGeneratorrealfavicongenerator.net各デバイス向けの詳細な設定が可能
  1. 生成されたファイルをサイトのルートフォルダに配置する
portfolio/
  ├── index.html
  ├── favicon.ico
  ├── favicon-32x32.png
  ├── favicon-16x16.png
  ├── apple-touch-icon.png
  └── ...

7.4 HTMLへの設置方法

<head>
    <!-- 省略 -->

    <!-- ===== ファビコン設定 ===== -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>

💡 テキストやイニシャルだけでもファビコンは作れます： ロゴ画像を持っていない場合、favicon.ioの「Text」機能で自分のイニシャル（例：「Y」）を背景色付きの正方形アイコンとして簡単に作成できます。シンプルなポートフォリオサイトには十分です。

⚠️ ファビコンの反映にはキャッシュクリアが必要な場合があります： ファビコンを設置・変更してもブラウザにキャッシュが残っていると古いアイコンが表示され続けることがあります。Ctrl + Shift + R（Mac：Command + Shift + R）で強制リロードして確認しましょう。

8. 場面別ツール早見表

これまで紹介したツールを、目的別に整理します。

やりたいこと使うツール
OGP画像をテンプレートから作りたいCanva
ロゴ・名刺などのテンプレート素材を編集したいCanva、デザインAC
画像のサイズを目的のピクセル数に揃えたいSquoosh・iLoveIMG
人物・ロゴの背景を透明にしたいremove.bg・Photopea
画像の拡張子を変換したい（AI→PNG・PNG→ICOなど）Convertio
画像を圧縮してWebPに変換したいSquoosh（第十三弾）
ファビコンを作成したいfavicon.io・RealFaviconGenerator

9. 利用前のチェックリスト

✓ 無料プランの範囲（解像度・透かし・商用利用）を確認したか

✓ 商用利用可能な素材かどうかをライセンス規約で確認したか

✓ 背景透過した画像はPNG形式で保存したか

✓ OGP画像は1200×630pxで作成・書き出ししたか

✓ ファビコンは複数サイズ（16px・32px・180px・192px）を用意したか

✓ ファビコンをルートフォルダに配置してHTMLの <head> にlinkタグを設置したか

✓ 変更後はブラウザのキャッシュをクリアして表示を確認したか

まとめ

今回はサイト制作に役立つ無料デザインツールをまとめて紹介しました。ポイントをまとめると：

  • Canvaはテンプレートが豊富でOGP画像・SNSバナー作成に最適
  • デザインACはCanvaにないテンプレート素材が充実している
  • リサイズはSquoosh・iLoveIMGで用途に合わせたピクセルサイズに揃える
  • 背景透過はremove.bgで自動・Photopeaで手動加工ができる
  • Convertioは画像形式の変換（AI→PNG、PNG→ICOなど）で活躍する
  • ファビコンは複数サイズを用意してルートフォルダに配置し、HTMLにlinkタグを設置する
  • どのツールも商用利用の範囲とライセンスを必ず確認する

次の記事では、ポートフォリオサイトのアクセシビリティ対応について解説します。スクリーンリーダーへの対応・キーボード操作のサポート・色のコントラストなど、すべてのユーザーが使いやすいサイトにするための基本的な考え方と実装方法をお届けします。お楽しみに！

スポンサーリンク

コメント

タイトルとURLをコピーしました