【WordPress】ブログに必要な画像の種類とサイズ・画像編集方法をわかりやすく解説|無料ソフトCanvaとおすすめフリー素材サイト3選

【WordPress】ブログに必要な画像の種類とサイズ・画像編集方法をわかりやすく解説無料ソフトCanvaとおすすめフリー素材サイト3選 ブログの始め方

このページでは、WordPressブログに必要なトップページやアイキャッチなどの画像サイズの種類、その画像編集に便利な無料で使えるWebツールCanvaの始め方をまとめています。画像編集に利用できるおすすめフリー素材サイトも紹介しています。

前回は『WordPressブログの始め方』を解説しました、このページではインストールしたWordPressブログのデザイン設定を進めるために用意が必要な画像サイズの種類、画像を誰でもかんたんに編集できるCanvaという無料のWebツールでかんたんに『ブログ画像を用意する方法』をわかりやすく解説します。

WordPressブログに必要な画像の種類とサイズがわからない・・・。

画像編集のスキルがなくて不安・・・。

ブログの画像ってどうやって作成するんだろう・・・。

ブログを始めるにあたってこういった悩みを持っている人向けに、高度なデザインをするのではなく、かんたんに一定水準のデザインの画像を用意するのに向いている方法を記載します。

ぼんやま
ぼんやま

このブログの画像も全部Canvaで作成しているよ!下の画像のようなアイキャッチがかんたんにつくれるよ!(※猫のイラスト以外!)

【Canva】ブログの画像編集をする方法|サンプル

ブログに必要な画像の種類とサイズ

WordPressブログをインストールした初期状態ではまだ画像がアップロードされていないため、テキストだけのシンプルな状態です。利用者の多いWordPressテーマCocoonをベースに汎用的に使えるサイズをまとめています。

トップページ画像(1,200×260px)

ブログ画像の種類とサイズ|トップページ画像

サイトの上部に表示されるトップページの画像です。解像度の高い画面で表示しても画像がぼやけることなく、また高さを抑えることでトップ画像以下が見えなくならないようにするサイズです。スマホなどの端末で表示したときも、トップ画像を固定表示しても視認性を保ちつつ、邪魔にならないようになっています。

ファビコン画像(256×256px)

ブログ画像の種類とサイズ|ファビコン

ブラウザのタブ、ブックマークした時などに表示されるサイトのアイコンです。OSによって必要とされる画像のサイズが異なるのですが、androidの256×256が最大サイズなので、このサイズを用意しておけば問題ありません。

アイキャッチ・記事内の画像(1,200×630px)

ブログ画像の種類とサイズ|アイキャッチ

記事の一覧や、各記事のページのトップに表示される画像です。アイキャッチはそのままSNS用の画像に使われることが多く、それを考慮して流用しやすいtwitterで推奨されている画像サイズに設定しています。

この画像サイズのままだと容量が大きく、GoogleのPagespeedInsightsのスコアを落とす可能性があると気にする方もいるかと思いますが、後で一括でアイキャッチ・投稿画像を縮小して最適化する方法があるため、用意する画像サイズとしてはこのサイズが適切だと考えています。

プロフィール・吹き出し画像(256×256px)

ブログ画像の種類とサイズ|プロフィール

この画像は使う人と使わない人がいるかもしれませんが、プロフィール欄に使うアイコンと、記事内で吹き出しを使いたい場合に用意する画像です。200×200サイズ以内で表示するのが一般的であることと、ファビコンとサイズを揃えて手間を省くメリットからこのサイズに設定しています。

画像編集の方法・Canvaの始め方

Canva」はブラウザ上で画像編集ができる無料のサービスです。具体的には「テンプレートから画像のデザインを選べる」、「図形や文字の入力ができる」、「画像をアップロードして素材として使うことができる」といった機能が備わっていて、ブログの画像を作成するのに適しています

ここに記載されている方法で、まずはブログ用の画像を作成するのに必要なポイントをおさえておくことができます。

【Canva】ブログの画像編集をする方法|Canvaのメリット

アカウント作成

Canvaを使うにはアカウント登録が必要なので、まずは登録を進めます。

Canvaの公式サイトを開くと以下のような画面が表示されるので、右上の「登録」をクリックします。

【Canva】ブログの画像編集をする方法|Canva登録

登録方法を選択する画面が表示されるので、好きな方法でアカウント登録を進めます。

【Canva】ブログの画像編集をする方法|Canvaで始める

Canvaの使い方

アカウント登録をしたらCanvaを自由に使うことができます。編集した画像プロジェクトはCanva上で保存しておくことができてとても便利です。新しいプロジェクトを作成し、そこで画像の編集を進めていきます。

プロジェクト作成

デザインを作成」をクリックすると、画像編集するためのプロジェクトを作成することができます。

【Canva】ブログの画像編集をする方法|デザインを作成

カスタムサイズ」を選択するとサイズを設定して画像編集を開始することができます、先ほど解説した各サイズを設定して画像編集を進めていきます。

【Canva】ブログの画像編集をする方法|新規作成

サイズを選択すると以下の画面が表示されます、これで編集を開始できます。

【Canva】ブログの画像編集をする方法|開始

テンプレートからデザインを選ぶ

Canvaではデザインが苦手という人でもかんたんに画像が作成できるよう、たくさんのテンプレートから好きなデザインを選んで編集できる機能がついています。

使い方はかんたんで、メニュー「テンプレート」をクリックするとテンプレートの一覧が表示されます。その中から使いたいテンプレートをドラッグ&ドロップで右側のキャンバスに配置するか、ダブルクリックすることでキャンバスにテンプレートを展開することができます。

【Canva】ブログの画像編集をする方法|テンプレート

展開したテンプレートの図形やテキストは配置を変えたり、内容を変更したりと自由に編集できます。写真のフリー素材を選んで使うこともできます。

【Canva】ブログの画像編集をする方法|写真

テキスト・図形

次によく使うテキストや図形の使い方です。テンプレートの時と同じようにメニュー「テキスト」、図形の場合は「素材」をクリックすることでテキストや図形のテンプレートの一覧を表示することができます。

テキストはフォントが充実、図形は四角や三角などのシンプルな図形から矢印、アイコンもあるのでいろいろなパターンの画像を作成することができます。

【Canva】ブログの画像編集をする方法|図形

テキストを入れてアイキャッチを作る時に、文字を白枠で縁取りしたいときは以下のページでやり方をまとめているので参考にしてください。

ファイルアップロード

Canvaにある素材以外の画像を使いたい場合は、持っているファイルをアップロードして使うことができます。フリーの写真やアイコンなどの素材を外部のサイトから持ってきて使うことができるので便利です。

【Canva】ブログの画像編集をする方法|ファイルアップロード

図形のサイズや色の変え方

配置した図形などはクリックすると枠が表示されます、表示された枠をクリックして動かすことでサイズを変えることができます。また、図形や文字の色はキャンバスの上部にあるパレットから変更することができます。

【Canva】ブログの画像編集をする方法|サイズの変え方

ページの追加

Canvaのプロジェクトは、複数のページを作成して編集することができます。ファイルを分けずに一括で編集することができるので、たくさんの画像を作成したいときに便利です。キャンバスの下にある「ページを追加」をクリックすると、新しいページを追加することができます。

【Canva】ブログの画像編集をする方法|ページ追加

画像のダウンロード

作成したファイルは右上の「ダウンロード」ボタンからダウンロードすることができます。ファイの種類や、ダウンロードするファイルのページ指定などができ、複数ページある場合は一括でダウンロードできます。

【Canva】ブログの画像編集をする方法|画像のダウンロード

無料画像素材サイトのおすすめ3選

Canvaで画像編集をするにあたって、フリー素材をアップロードして使うパターンでよく使われる3サイトを紹介します。Canva+この3サイトを抑えておけば、ブログの画像に困ることはほぼないかと思います。

FLAT ICON DESIGN -フラットアイコンデザイン-

こちらのサイトではカラフルでフラットなデザインのフリーアイコンが提供されています。シンプルで多くのブログのアイキャッチなどにも使われているサイトです。

FLAT ICON DESIGN -フラットアイコンデザイン-
フラットデザインに最適!WEBサイトやDTPですぐ使える商用利用可能なフラットアイコン素材がフリー(無料)ダウンロードできるサイト『FLAT ICON DESIGN』

アイコン素材ダウンロードサイト「icooon-mono」

こちらは白黒のアイコンを提供しているサイトです。種類が多く、いろいろな場面で使うことができるアイコンを探すことができます。

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

Town icon

前の二つのサイトではなかった「実在する建物」の画像を提供しているサイトです。横浜や浅草の風景など、実在する街並みや、イメージしやすいビルのアイコンなどが多く置いてあります。

街、建物系イラスト専門サイト「TOWN illust」 – 無料で使える街、建物のイラスト素材サイト
ビル、マンションや観光地などのベクター素材や街並みのイラストを無料で配布するデザインサイト

以上が無料で利用できるCanvaというツールでかんたんに『ブログ画像編集をする方法』の解説でした、前回の記事では素の状態のWordPressブログでしたが、トップ画像やアイキャッチを設定することで、ブログの雰囲気がいっきに変わるかと思います。

Canvaはアカウント作成もすぐできて無料で使うことができるので、まずは試しに使ってみることをおすすめします。

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