インターネットでニュースサイトやブログサイトで記事を読んでいると、冒頭に画像が挿入されている記事をよく見かけます。
当サイトmonlogでもブログ記事の冒頭に画像を挿入しています。
はじめの頃は「画像のサイズはどうしたらいいのか？適切なサイズはいくつなのか？」と迷いました。
本記事では、
- 記事に挿入する画像サイズの目安が知りたい人
- あらためて記事に挿入する画像サイズを見直そうと考えている人
- どんなツールで画像を作成したらいいのか知りたい人
のような人に向けて、記事の冒頭に画像を挿入するメリット、人気サイトの比較結果、私が使用している画像作成ツールと作成方法についてまとめました。
「こんな感じかー」と参考になれば幸いです。
■ 目次
ブログ記事の冒頭に画像を挿入するメリットとは？
記事を読む相手に対して興味や関心を与える
記事のタイトルをクリックした時点で、相手は記事を読もうとする気持ちはあります。
しかし、目を引く画像を挿入することで読者に対してインパクトを与えられます。
印象に残る記事を思い出すとき、何だかんだで記事に挿入されていた画像が思い浮かんできませんか。サイトを離れたあともまた訪問してもらうために、画像で読者に印象を与えられる画像を利用することがポイントです。
記事の内容が伝わりやすくなる
記事に挿入する画像は読者に対して、記事の内容やイメージが伝わる画像を利用することがポイントです。
注意すべきこととして、ただ目を引けばいいものでは効果が薄れてしまいます。
画像の内容によっては、むしろ印象が悪くなることもあります。
そのため、記事で読者に伝えたいことや記事の内容に関連している画像を準備します。
人気メディアサイトの画像サイズを比較した結果
レイアウトが１カラムサイトの場合
縦は約400px～570px、横は約620px～1000pxでした。
縦横の比率は「5：8」に近く、黄金比を意識した画像サイズと比率が目立ちました。
レイアウトが２カラムサイトの場合
縦は約300px～450px、横は約500px～680pxでした。
縦横の比率は「3：4」「5：8」に近く、パワーポイントで作成したときの比率や黄金比を意識した画像サイズと比率が多かったです。
レイアウトが３カラムサイトの場合
縦は約200px～450px、横は約400px～650pxでした。
縦横の比率は「3：4」に近く、パワーポイントで作成したときの比率を意識した画像サイズと比率が多かったです。
今回、合計40のメディアサイトを分析してみました。
分析した結果、まったく同じサイズまたは縦横の比率が同じサイトはなかったです。
しかし、ある程度、画像サイズや縦横比率は似ていることが分かりました。
画像サイズや縦横の比率に迷ったら、
・縦は600px～650px、横は360px～430px
・縦横比率は「3：4」または「5：8」
を目安に作成してみましょう。
ブログ記事の冒頭に挿入する画像の作成方法
はじめに私が画像を作成するときに利用しているツールを紹介します。
・ペイント
・PIXLR EDITOR
「ペイント」はWindowsに付属されているソフトです。写真にちょっとした文字を入れたいときは、シンプルな操作感で編集できるのでよく利用します。
「PIXLR EDITOR」はソフトをインストールしたり会員登録なしで、ブラウザ上で動かせるwebアプリです。PIXLR EDITORはレイヤー機能があるところが気に入っています。一から画像を作成するとき、あーでもないこーでもないと試行錯誤するのでレイヤー機能があるとすぐに後戻りできます。
今回は「PIXLR EDITOR」を利用して画像を作成します。
■ 作成手順
１.新規作成画面を開く
PIXLRのサイトにアクセスし、PIXLR EDITORの「LAUNCH WEB APP」をクリックします。
次に「新しい画像を作成」をクリックし、画像を新規作成します。
画像を新規作成するためのダイアログが表示されます。
画像のキャンパスサイズを指定し、OKボタンをクリックします。
２.背景画像を作成する
背景画像を作成します。
①画面左側に表示されたツールから「ペイントバケツツール」をクリックします。
②カラーを選択するためにカラーパレットの「Set main color」をクリックします。
③Color selectorダイアログで背景の色を指定し、OKボタンをクリックします。
④キャンパスの上で右クリックし、色を塗りつぶします。
３.背景画像に文字を入れる
２で作成した背景画像に文字を入れます。
①「レイヤー」メニューから「新しいレイヤー」をクリックします。
②新しくレイヤーを追加したらタイトルを入れます。
画面左側に表示されたツールから「タイプツール」をクリックします。
テキスト、フォント、サイズ、スタイル、文字の色を指定します。
③OKボタンをクリックします。
④②と③と同じ手順でタイトル以外に必要な文字を追加します。
４.画像に名前を付けて保存する
最後に作成した画像を保存します。
①「レイヤー」メニューから「新しいレイヤー」をクリックします。
②画像の名前、ファイル形式を指定し、OKボタンをクリックします。
以上で記事の冒頭に画像を挿入する目的、画像サイズの目安、画像作成ツールと作成方法となります。
挿入する画像を準備するとき、慣れないうちはどんな画像にするか悩むところです。
いろんなサイトを見て自分が印象に残った画像は何か、
何で印象に残っているのか理由を考える、
実際に自分でも画像を作成して練習することが大事かなと思います。
本記事で記事に挿入する画像について悩んでいる人が人が一人でもいなくなれば嬉しいです。
