ここでは画像を最適なサイズに加工してブログに掲載する方法をお伝えします。
画像はご自身で撮影したものが一番良いのですが、そんな都合の良い画像はなかなかありませんね。
そこで利用するのは「無料の素材集」です。
素材集には色んな種類があるのですが、私がお勧めしているのは、「pexel」というサービスです。
無料で使えてしかも商用利用OKなので安心です。
試しにやってみますね。
まずはpexelにアクセスします。
こちらがpexelのトップページです。
赤枠にキーワードを入れると画像を検索することができます。
キーワードを入れて実行ボタンをクリック。
するとそのキーワードに沿った画像がいくつか表示されます。
ダウンロードしたい画像が見つかったらカーソルを合わせて「ダウンロード」をクリック。
これでパソコンのダウンロードフォルダに保存されました。
このままの状態で記事に掲載することも不可能ではありませんが、実はこの画像はサイズや容量が大きすぎます。
左がサイズ（横幅×高さ）で右が容量を表しています。
記事に使用する画像は、横幅が「1200px以内」であることが推奨されています。しかしこの画像の横幅は「6720px」と大幅に超過しています。
また、推奨される容量は「200キロバイト以内」ですが、この画像は1.9MBなのでキロバイトになおすと「1900キロバイト」です。
なんと約10倍の大きさです。
このままアップロードすると、ページの表示が非常に重くなり、読者が離脱する原因になります。
さらに、検索エンジンからの評価も下がり、検索順位も徐々に低下していきます。その結果、せっかく書いたブログ記事が誰にも読まれない状態になる可能性もあります。
これはスマホで撮影した画像も同じことが言えます。
下記は私のiPhoneで撮影した画像です。
横幅「4032px」で容量は2.5MB（2500キロバイト）です。
大きすぎますね。。
そこで次は、画質をできるだけ保ちながら、サイズと容量を小さくする方法をお伝えします。
画像のサイズと容量を小さくする方法
画像の加工をするのにCanvaというサービスがおすすめです。
無料で使えて、ログインをすれば他のパソコンやスマホ・タブレットからでも利用することができます。
本当に簡単なのでぜひCanvaで進めていきましょう。
まずはCanvaに登録します。
下記よりアクセスしてください。
右上の「登録」をクリック。
「メールアドレスで続行」をクリック。
※GoogleかFacebookのアカウントを持っている人はすぐに登録できます。その場合は下記手順を飛ばして下さい。
メールアドレスを入力して「続行」をクリック。
名前など画面の指示に従って入力していけば登録完了です。
※「Canva Pro」という有料版の宣伝をされる場合がありますが、ブログで使う分には無料のままでOKです。
登録できたら下記ページが表示されます。
これがCanvaのトップ画面です。
Canvaを使ってやれることは無限大なので、全部覚えると何百時間とかかってしまいます。
ですから、「これだけ覚えたらよい」という機能だけを厳選してお伝えするのでぜひ一緒にやってみましょう。
画像のサイズを決めよう
まず一番最初にやるのが、画像のサイズを決めましょう。
私の場合、ブログで使うサイズはある程度決まっています。
- 1,000×563（幅×高さ）
- 1,000×667（幅×高さ）
- 1,000×618（幅×高さ）
上記3パターンのうち、いずれか使うことが多いです。
これらはWEBで美しいと言われるサイズの比率でYoutubeやPCモニターなどで使われています。
つまり、「ふだん見慣れている比率」なので違和感なく読者さんに診てもらうことができます。
ですから、難しく考えずに以下のいずれかのサイズを選びましょう。
- 1,000×563（幅×高さ）
- 1,000×667（幅×高さ）
- 1,000×618（幅×高さ）
「カスタムサイズ」をクリックします。
今回は「1000×618」にします。「新しいデザインを作成」をクリック。
これが画像の編集画面です。赤枠部分の白いキャンバスで画像を加工したり、文字を入れたりすることができます。
まずは、先ほどダウンロードした画像をCanvaに入れましょう。
メニューから「アップロード」→「ファイルをアップロード」の順でクリック。
このようにファイルを選択する画面が表示ます。
先ほどダウンロードした画像を選択して「開く」をクリック。
画像リストの中にダウンロードした画像加わります。編集したい画像をクリックしましょう。
すると右側の白紙のキャンバスに画像が追加されました。
ちょっと四隅に空白があるので修正します。
画像をクリックすると、外側にマークが表示されます。これを外側に引っ張って画像のサイズを大きくすることができます。
コツとしては、①②③④の順で、それぞれを端まで引っ張るとバランスよくまとまりやすいです。
※失敗したら画像の上で「Delete」を押せば画像は消えます。もう一度、画像リストから選択すればキャンバスに表示されます。
このゆに四隅の空白が無くなったらOKです。
画像に文字を入れてみよう
次はこの画像に文字を入れてみましょう。
※時間のない時は無理に入れなくても大丈夫です。
メニューから「テキスト」→「見出しを追加」をクリック。
するとこのように画像の中に「見出しを追加」というテキストが表示されます。
この部分をクリックしてテキストを変更しましょう。
今回は「カレーの美味しい作り方」にしました。
このままだと見えにくいので文字の色を変えてみましょう。
テキストを全選択した状態で赤枠の「A」というマークをクリック。
するとこのようにカラーパレットが表示されるので色を選択します。
今回は「ホワイト」を選びます。
このようにテキストが白くなりました。
でもまだテキストが読みにくいので縁取りをします。
テキストをクリックして「エフェクト」をクリック。
テキストのスタイルの変更ができます。今回は「袋文字」を選択します。
このようにグレーの縁取りがされました。この縁取りの色も変更することができます。
次は縁取りの色を選択します。グレーの円をクリック。
カラーパレットが表示されるので色を選択します。今回は「ブラック」を選びます。
かなり見やすくなりましたね。
もう少し縁取りを太くしてみましょう。
先ほどと同じように、テキストをクリックして「エフェクト」をクリックします。
上記メーターを右にひっぱって太さを調整しましょう。
今回は太さメーターを「150」にしました。なかなかいい感じですね＾＾
次はテキストのサイズを大きくしてみます。
テキストをクリックして上部の「＋」で大きさを調整します。
今回は文字サイズを「60」にしました。かなり見やすくなりました。
次はテキストの位置を変更しましょう。
テキストをクリックしたまま上に移動させます。
これで画像は完成です。
作成した画像をダウンロードする方法
では、ブログで使うために作成した画像をダウンロードしましょう。
画面右上の「共有」をクリック。
「ダウンロード」をクリック。
ファイルの種類を変更できますが、ブログに使うには「PNG」がおすすめです。
「ダウンロード」をクリック。
これでパソコンのダウンロードフォルダに保存されました。
次は実際にブログに画像を掲載してみましょう。