プロのようにブログに画像を簡単に追加する方法
公開: 2020-04-28あなたはこれまでで最高のブログ投稿を書きました。
真剣に、これは空腹の読者の群れでバイラルになっている素晴らしいものです。
うわー、シルバー！ まず、あなたは彼らの注意を引く必要があります。
誰かがあなたの素晴らしい作品を読む前に、彼らは最初に立ち止まって注意を払う必要があります。
そこで画像が登場します。
写真、ビデオ、スクリーンショット、図、およびイラストは、読者がクリックしないようにするための優れた方法です。 ブログに画像を追加すると、読者があなたの情報やアイデアを理解し、投稿を覚えておくのに役立ちます。
秘訣は、これらのブログ画像をすばやく効果的に作成して追加することです。
この投稿では、何時間も費やすことなくブログに画像を追加するためのすべての手順、ツール、およびトリックについて説明します。
画像が機能する理由
「私たちの脳は主に画像プロセッサであり、ワードプロセッサではありません。」 –今日の心理学
私たちは（文字通り）画像のために配線されています。 神経解剖学者RSFixotは、私たちの脳の活動の3分の2が視覚活動に捧げられていると推定しました。 そしてそれは理にかなっています…
歴史的に、私たちは視力を使って、捕食者からの厄介な攻撃に対して警告したり、狩りをして殺したり、選んで収穫したりできる食べ物を見つけました。
オンラインでも違いはありません…
あなたの読者は無意識のうちに関連性のあるコンテンツや面白いコンテンツ、あるいはその両方をスキャンしています。 実際、関連する画像を含む記事は、画像を含まない記事よりも合計視聴回数が94％多くなっています。
関連する画像を含む記事は、画像を含まない記事よりも合計視聴回数が94％多くなります。クリックしてツイートします。
そこで画像が役立ちます。 シンプルな写真からカスタム作成されたgifまで、読書体験がより面白くなり、読者が下にスクロールし続けることができます。
私たちの脳はテキストより60,000倍速く画像を処理できます
実際、上級マーケティングエグゼクティブの65％は、写真、ビデオ、イラスト、およびインフォグラフィックがブランドストーリーの伝達方法の中核であると述べています。
それで、画像がとても素晴らしい場合、より多くのトラフィックとより良い結果を得るために、どのようにブログに画像を追加する必要がありますか？
画像サイズから始めましょう。
ピクセル、フォーマット、サイズ、その他すべて
さまざまな画像サイズのオプションを理解しようとすると、かなり複雑になる可能性があります。 知っておくべき2つの基本的なことは、方向とサイズ/圧縮です。
オリエンテーション
ほとんどのブログでは、水平方向（高さよりも幅が長い）の方が適しています。 横向き/横向きの画像は画面上の占有面積が少なく、コンテンツが読者の目を引くことができます。 横長の画像は、Facebook、Twitter、LinkedInでブログを共有するのにも最適です。
ただし、垂直または正方形の画像はInstagramでパフォーマンスが向上し、Pinterestに固定される可能性が高くなります。 繰り返しになりますが、理由は単純です。InstagramとPinterestはすべて画像に関するものです。 縦向き/縦向きの画像は、より多くの画面領域を占めるため、目を引くものになります。
どの方向を選択するかは、ユーザーとユーザーが使用するソーシャルプラットフォームによって異なります。
Sprout Socialは、この投稿でさまざまなソーシャルメディアチャネルに最適な画像サイズの最新リストを維持しています。
使用する各プラットフォームの画像サイズの基本を知っておくと便利です。
サイズ/圧縮
画像サイズには、画像の物理サイズ（長さx幅）とファイルサイズ（バイト）の2つの意味があります。
カメラまたはストックフォトのWebサイトから直接取得したほとんどの画像は、Webに必要な解像度（ファイルサイズ）と物理サイズが高くなっています。 大きな画像ファイルの問題は、サイトの速度が低下することです。
デジタル写真は、ピクセル（px）–色の小さな正方形のタイルで構成されています。 私たちは一般的に、ピクセル数とピクセル密度の2つの方法でピクセルについて話します。 ピクセル数は、写真を構成するピクセル数です。 つまり、800x 600ピクセルの写真は、写真の幅が800ピクセル、高さが600ピクセルであることを意味します。
左の画像は3456×5184px、2.7Megです。 右の画像は800x1200と193kbに縮小されました。
ピクセル密度（dpi）は、1平方インチあたりのピクセル数です。 1平方インチあたりのピクセル数が多いほど、画像の解像度が高くなり、画像が鮮明になります。
印刷写真の場合、300dpi以上が理想的です。 ただし、Webの場合、適切な範囲は72〜150dpiです。
あなたのウェブサイトに最適なサイズ
あなたのウェブサイトの目標は、良い解像度（あいまいではない）と速度（大きくない）です。
画像はブログコンテンツの幅と同じ大きさにする必要があります。 最新のサイトはすべてレスポンシブデザインで構築されており（スマートフォン、ラップトップ、タブレット、デスクトップ画面のページのサイズを自動的に変更します）、画像を最大幅に設定します。
ファイルサイズと品質のバランスを見つける
画像のファイルサイズが小さいほど、リーダーの読み込みが速くなります。 ただし、サイズを小さくしすぎると、画像がぼやける可能性があります。 あなたの目標は、最小のファイルサイズと許容可能な品質の間のバランスを見つけることです。
画像サイズを150KBから300kbの間に保つようにしてください。 以下の例を見てください。 元の画像は7.6MB、幅5000pxでした。 左側の画像は幅860pxにサイズ変更され、高品質のjpegとして保存され、250KBのファイルが生成されました。
オンラインで見ると、この画像と元の画像の違いはほとんどわかりません。 ウェブに最適です。
右側の画像は幅860pxにサイズ変更されましたが、低品質の30KBjpegとして保存されました。 確かに、それはすぐにロードされますが、あいまいで、素人っぽく見えます。
最適な画像サイズは150〜300kbです。 小さくすると、画像がぼやけすぎます。
もちろん、ブログに画像を追加する場合、画像を300KB未満に保つことが常に可能であるとは限りません。 Retinaディスプレイでは、複雑な写真は300KBでぼやけて見える可能性があります。
持ち帰りの重要なアイデアは、特に投稿で多くの画像を使用している場合は、ファイルサイズをできるだけ小さくすることです。 ページの読み込み時間はGoogleのランキングに影響し、読者は読み込みに時間がかかるページをオフにする可能性があります。
PicResizeやTinyPNGなど、画像サイズを縮小するための無料サービスが多数あります。 または、CanvaやPicMonkeyなどの無料のデザインサイトを使用して、ソーシャルメディアサイトやWebサイトに適切なサイズと解像度を得ることができます（これらのツールの使用の詳細については、以下を参照してください）。
Pic Resizeなどのツールを使用すると、品質を犠牲にすることなく、画像の解像度を簡単に縮小できます。
JPG、GIF、PNG、SVGを使用しますか？
すべての画像タイプ（jpeg、gif…）と混同したことがある場合は、これが役立ちます。
ブログに画像を追加する場合、最適な形式は何ですか？
- •JPG/JPEG –小さなファイルサイズで高品質の画像を提供します。 写真を透明にしたり、アニメーション化したり、テキストをたくさん入れたりする必要がない限り、これは写真に最適なオプションです。
- •GIF–小さなグラフィックやアニメーションに最適で、背景を透明にすることができます。
- •PNG–詳細なグラフィック、テキストの多い画像、または透明な画像に最適です。 PNGファイルはJPGファイルよりも大きくなる傾向があります。
- •SVG–これはスケーラブルなベクター形式です。つまり、どの解像度でも鮮明でクリアな状態を保ちます。 それらはファイルサイズの点で大きくなる傾向がありますが、自動的にサイズ変更する必要がある複雑なグラフィックがある場合、および/またはロールオーバー効果やアニメーションがある場合は、SVGが最適です。
透明な背景が必要な場合を除いて、ほとんどの場合、すべての画像にjpegを使用します。
注：すべてのWebサイトがSVGファイルを自動的に処理するように設定されているわけではありません。 WordPressには役立つプラグインがあります。 WordPress以外のサイトの場合は、試してみてください。SVGファイルが表示されない場合は、Web開発者に確認してください。
画像をテストする
画像がオンラインでどのように表示されるかわかりませんか？ ほとんどのコンテンツ管理システム（WordPressなど）では、ブログ投稿の下書きを公開する前にプレビューできます。
注目の画像
すべてのブログ投稿には注目の画像が必要です。
注目の画像は、読者が最初に目にするものであり、ソーシャルメディアチャネルによって取得された画像です。 この記事では、ソーシャルチャネルによって画像が正しくプルされていない場合の対処方法について説明します。
注目の画像は写真の場合もあれば、少し余分な作業を加えて、画像に見出しを重ねる場合もあります。 いずれにせよ、それはいくつかの好奇心を生み出し、読者に読み続けさせたいと思わせる必要があります。
WordPressでは、WordPressメニューの右側に注目の画像を選択するためのリンクがあります。
自分のイメージを作る
ストック画像は素晴らしいですが、ストック画像にひねりを加えているだけでも、オリジナルの方が優れています。
独自の画像を作成するために、グラフィックアーティストや高価なソフトウェアを所有している必要はありません。 CanvaやPicmonkeyなどの無料ツールには、さまざまなテンプレート、画像、すぐに使用できるグラフィックやフォントがあります。 少し練習するだけで、画像に独自のスピンを追加したり、引用画像、ミーム、図、インフォグラフィックを作成したりできます。
これがCanvaでたった5分で作った画像です。
少し余分な努力をするだけで、画像に見出しを重ねることができます。
これらのツールに慣れたら、結果を創造的にすることができます。 画像のサイズ変更、画面の追加、切り抜きなどの簡単なテクニック–さらに興味深いフォントを選択することで、画像を目立たせることができます。
この投稿で、画像をポップにするためのより簡単なテクニックを学びましょう。
[画像を目立たせるためにドレスアップするのに、グラフィックデザイナーである必要はありません。]
法律を避ける
Webを検索し、完璧な画像を見つけて、ブログに追加しました。
2か月早送りすると、損害賠償を要求する「排除措置」の手紙が届きます。
WHAAAAAAAT？
アートワークと同じように、画像には所有権があります。 また、所有者の許可なしに一部の画像を使用することはできません。 この投稿では、クリエイティブ・コモンズが画像でどのように機能するかを説明します。
幸いなことに、ユーザー権利を購入するか、アーティストのクレジットを使用して使用できる素晴らしい画像を提供するサイトがこれまでになく増えています。
アーティストのクレジット
クリエイティブコモンズライセンスの下で画像を使用している場合は、写真家とソースをクレジットすることをお勧めします。 ほとんどのストックフォトのWebサイトでは、画像をダウンロードするときにリンクが提供されます。
Unsplashのようなサイトでは、アーティストのクレジットを簡単にコピーできるので、投稿の下部に貼り付けることができます
BlogWorksでは、画像に多くのサイトを使用しています。 私たちはクライアントのブログに依存しているAdobeStockのアカウントを持っています。さらに、Pixabay、Unsplash、Refe、Magdeleineをよく使用します。
アドビは、他のクリエイティブなソフトウェアパッケージとともに、高品質の画像ソースを提供しています。 画像を検索または作成するための簡単な新しい方法をお探しの場合は、こちらで製品を確認できます。
それでも必要なものが見つからない場合は、Librestockにアクセスして、40を超えるサイトの画像を集約して検索してください。 この投稿で素晴らしい写真を見つけるために7つのサイトをリストしました。
Googleを使用してブログに画像を追加することもできます。[ツール]で[再利用用にラベル付け]を選択してください。
Googleを使用して画像を検索する場合は、常に「再利用用にラベル付け」を検索してください
その「完璧な」画像を検索するための簡単なヒント：最初の5分間に見つけた画像よりもわずかに良い画像を見つけても、投稿が口コミで広まることはありません。 十分な画像を見つけるには、5分に制限してください。より良い画像が見つかった場合は、後でいつでも変更できます。
実在の人物の画像を使用する
人々の写真は、インターネット上で最も魅力的なコンテンツの1つです。
顔は独特であり、人間は顔を見つめるためのハードワイヤードの視覚的好みを持っています。 顔や人の画像が読者の注目を集めます。
ただし、画像はコンテンツに関連している必要があります。または、概念やポイントを説明するのに役立つ必要があります。調査によると、一般的な装飾的な画像である場合、読者は人々の写真を覆い隠します。
ソーシャルメディアに関しては、顔が私たちを魅了します。 顔のある写真は、より多くのコメントやいいねを集めます。
ブログに画像を追加する場合は、左の画像のような安っぽいストック画像を避け、右の画像のようなより独創的なものを探すようにしています。
ストックフォトは、クッキーカッター、オリジナルではない、退屈なもの（左）、またはより面白くてオリジナル（右）の場合があります。
スクリーンショットと図の追加
オンライン検索エンジンの使用方法や、最新の本を見つけるためにサイトのどこに行くか、さらにはオプトインメールがその人の「プロモーション」フォルダに入らないようにする方法を説明しようとしているとしましょう。 Gmail。
言葉で説明するのは難しいですよね？
スクリーンショットが非常に役立つのはそのためです。 数分以内に画像をキャプチャし、いくつかの矢印を追加しました。これで、画像は1000語の価値があります。さらに、より多くの人が適切な場所に行くようになります。
Snagitのようなツールは非常に貴重な投資です。 たった50ドルで、スクリーンショット、ビデオ、さらにはgifのすぐに使える主力製品を手に入れることができます（この投稿で使用されているすべてのスクリーンショットはSnagitで作成されています）。
これは、Snagitを使用してスクリーンショットを編集するためにSnagitで作成したビデオです（これがメタです！）。
カスタムグラフィックと図は、複雑な概念を説明したり、投稿に楽しみを追加したりするためのもう1つの優れた方法です。 OmniGraffleとLucidchartは、楽しい図を作成するために使用できるフローチャートツールを提供します。 Piktochartには、インフォグラフィックとデータ駆動型グラフィックを作成するための無料バージョンがあります。
いくつかの情報を説明するのに役立つチャートが必要ですか？ Excel、Googleスプレッドシート、またはWordから直接取得できます。 グラフをコピーしてテキストエディタに貼り付けるか、スクリーンショットを撮ります。
そして、鉛筆やペンを手に取るのを恐れないでください！ アイデアをスケッチして写真を撮ります。 あなたが芸術家でなくても関係ありません-あなたの読者はあなたが彼らのようであるのを見るのを楽しむでしょう！
ビデオとGIFの追加
テキストだけでは不十分な場合があります。 そこで、ビデオとアニメーションが登場します。
GiphyとTenorは、アニメーションGIFの優れたリソースです。 Sitepointには、クリエイティブコモンズの画像、動画、その他のメディアを見つけるための優れたリソースリストがあります。
ブログに動画を追加する方法を何度も尋ねられました。 私は確かに専門家ではありませんが、技術的な匂いがするものに関しては、「完了は完璧よりも優れている」ことを思い出し、シンプルに保ちます。 最初から最後まで、簡単なビデオで15分もかからないはずです。
これが私が行ったステップの図です。
ビデオをどこかにホストする必要があります。 私たちは長年Vimeoを使用しており、価格とその使用の速さとシンプルさが気に入っています。 YouTubeまたはWistiaを使用することもできます。
ブログにビデオを追加する手順は、数回練習すれば非常に簡単ですが、Webサイトやビデオをホストしている場所によって異なります。
YouTubeからWordPressにビデオを挿入する方法は次のとおりです。
- このプロセスは非常に簡単になりました。 YouTubeで必要なビデオを見つけることから始めます。
- 次に、そのビデオのURLをコピーします（https://www.youtube.com/watch?v=JKrPz6JHwYwのようになります）
- WordPress Webサイトにログインし、ブログ投稿を開いて編集し、ビデオを配置する場所にカーソルを置き、URLを貼り付けます。
この無料のツールを使用すると、YouTubeビデオの外観をカスタマイズしたり、迷惑な「関連する」ビデオをオフにするなどの操作を行うことができます。
VimeoからWordPressにビデオを挿入する方法は次のとおりです。
- •ビデオの埋め込みコードを取得するには、Vimeoのページに移動し、[共有]ボタンをクリックします。
- •[+オプションの表示]リンクをクリックして、埋め込みコードをコピーします。
- •WordPressWebサイトにログインし、ブログ投稿を開いて編集し、テキストエディターの[テキスト]タブをクリックします。
- •ビデオが必要な場所にカーソルを置き、埋め込みコードを貼り付けます。
Vimeoのようなツールを使用すると、プロのようにブログに動画を簡単に挿入できます。
注：投稿をGoogleなどの検索エンジンで取得する場合は、動画の投稿にテキストを含める必要があります。 Wynnのtravelvlogを使用すると、Goneでどのように実行されるかを確認できます。 すべてのブログ投稿には、読者の関心を維持し、SEOの目的で使用できるように、多くのテキスト、画像、およびビデオがあります。
一貫したテーマの使用
画像やフォントを選択するときは、サイトやブログのテーマと一致させることをお勧めします。
一貫性のあるフォント（私はHelvetica Neue、Marker Felt、Yellowtail、Bebas Neueのファンです）、配色、またはアイコンスタイルを使用するのと同じくらい簡単です。
カスタマーサービスアプリであるHelpScoutは、ブログで一貫性のあるデザイン要素を使用して、軽くてモダンで風変わりな素晴らしい仕事をしています。
適切なファイル名の選択
画像SEOはファイル名で始まります。 ブログの投稿で画像を使用するときは、画像を見なくても、画像が何であるかをGoogleに知らせてください。
新しい画像をアップロードする前に、画像の名前を確認してください。 画像には、画像や記事のコンテンツに関連する名前を付ける必要があります。 また、可能な限りキーワードを含める必要があります。 画像にキーワードが豊富な名前を選択すると、検索エンジンがページをランク付けしやすくなります。
たとえば、子犬に最適な噛むおもちゃを選択する方法に関する記事を書いている場合は、画像に「best-chew-toy-for-puppies.jpg」という名前を付けます。 画像がタイのサムイ島のビーチに沈む夕日を示している場合は、「thailand-koh-samui-beach-sunset.jpg」という名前を付けます。
スペース、アンダースコア、またはすべての単語をまとめて実行するのではなく、単語の間にダッシュを使用します。
この推奨事項は、Googleから直接提供されています。 Googleは、マジシャンがトリックを守るよりも検索エンジンアルゴリズムがどのように機能するかを守っているため、この正確な理由はわかりません。 しかし、グーグルのウェブマスターは、単語間のダッシュがグーグルがあなたの画像を見つけるのを助けると言います！
代替テキスト
画像、ビデオ、またはその他のメディアをアップロードするときに、ALTテキストを含めるオプションがあります。 できる限りこれを行う必要があります。
ALTテキストは、検索エンジンに画像について通知します。これは、ランキングに役立ちます。 さらに、スクリーンリーダーがALTテキストを読み上げるので、コンテンツにアクセスしやすくなります。
画像の代替テキストは、画像の内容を説明しています
ALTテキストは、画像や説明しようとしているポイントを説明するのに役立ちます。 ファイル名を選択するのと同様に、ALTテキストは記事のコンテンツまたはキーワードに関連している必要があります。
キャプションとヘッドライン
通常、画像のキャプションは画像の下に表示されます。 多くの読者が記事をスキャンし、あなたの画像のキャプションが彼らの注意を引き、あなたのコンテンツに興味を持ってもらうことができます。
BlogWorksでは、書かれたコンテンツに追加するキャプションを書こうとしています。 読者がキャプションだけを読むなら、彼らは記事が何であるかについての良い考えを得るだろうという考えです。
毎月の犬用ビスケットサブスクリプションBarkBoxの発明者であるBarkPostは、犬の愛好家（私のような）を、ハリウッドのタブロイド紙スタイルの見出しと一致する間抜けで楽しい画像で魅了します。
- •あなたの犬の目の鼻くそが危険な何かによって引き起こされている5つの兆候
- •あなたが「バスタイム」と呼ぶこの水拷問を承認しない18匹の犬
- •犬をデンタルケアボックスに登録しました。これが何が起こったのかです。
最終チェックリスト
ブログに画像を追加すると、読者のエクスペリエンスが向上します。 そして、記事を読むように彼らを誘惑します–つまり、彼らはあなたのサイトに長く滞在することを意味します。
最後のチェックとして、次の2つの質問を自問してください。
- この画像は、読者をページに長くとどめますか？
- この画像は、読者が私のメッセージをよりよく理解するのに役立ちますか？
画像を見つけてブログに追加するために余分な労力を費やすと、大きな見返りが得られます。 渡される代わりに、あなたの投稿は何千人もの読者と共有され、独自の人生を歩むことができます。
結局のところ、私たちの目標は、ブログを読んで共有し、愛されるようにすることです。 右？
この記事を楽しんだ？ 画像、動画、ブログを口コミで広める方法について、さらに3つ紹介します。
ブログにYouTube動画を追加するための究極のガイド。
あなたのブログのための無料の画像：7つの素晴らしい情報源
ブログ画像をポップにする4つの方法
脚注：
- 1. American Journal ofOphthalmologyの神経解剖学者RSFixotに掲載された論文では、神経組織の50％が直接的または間接的に視覚に関連しており、脳の電気的活動の3分の2が視覚処理に使用されていると推定しています。
- 2. eMarketerによるある調査では、写真は世界中のFacebookページによって投稿されたコンテンツの75％を占め、ファンからのインタラクション率は87％でした（他の投稿タイプの10％未満と比較して）。
- 3.ジョージア工科大学とYahooLabsでの調査では、Instagramの110万件の投稿を調べ、顔のない写真よりも人間の顔のある写真の方がいいねを受け取る可能性が38％高いことがわかりました。 また、コメントを引き付ける可能性が32％高くなっています。
UnsplashのLinkedInSalesNavigatorによる写真