矢印や説明文を入れて、使い方などを説明する画像のことです。

私はPhotoshopやillustratorなどの有料ツールをもっていないので、PhotoScape(フォトスケープ)で画像を加工して解説用画像を作成しています。

この「フォトスケープ」がとっても使いやすい！

無料のソフトなのに！

使いたい機能がまとまっている上に、初めて使う人でもパッと見たらわかる作りになっているので初心者にもやさしい画像編集加工ソフトだと思います。

今回はそんな「フォトスケープ」の便利機能と解説画像の作り方をお伝えします。

フォトスケープは解説ブログの画像加工にぴったり

わかりやすいブログやサイトだと、画像に矢印をつけて「ここをクリック」と文字が入れてある加工された画像をよく目にします。

なにかを説明するときに画像が添えてあるとわかりやすいですよね。

そんな解説画像を「フォトスケープ」で簡単に作成することができます。

PhotoScape - 無料・ダウンロード

PhotoScape 無料ダウンロード。 PhotoScape 3.7: Un excelente editor de imágenes gratis apto para todo tipo de usuario優れた無料の画像編集ソフト、...

photoscape.softonic.jp

では、実際に作り方を説明していきます。

フォトスケープで解説画像を作成する

私がよく利用する機能は「スクリーンキャプチャ」と「画像編集」です。

スクリーンキャプチャ機能

スクリーンキャプチャ機能では、パソコンの「全画面」「ウインドウ」「領域(指定した範囲)」とスクリーンキャプチャする範囲を選ぶことができます。

パソコンのスクリーンショットボタンでもできますが、「領域 (指定した範囲)」だけを切り取るように保存したいときは「フォトスケープ」が便利です。

また、スクリーンキャプチャした瞬間に画像編集画面へ移動するので、とても楽。

自分の画像フォルダへ画像を探しにいかずに、すぐ画像加工に取りかかることができるのです。

「スクリーンキャプチャ」は下の点線丸部分から。

文字入れなどの加工編集は、矢印部分の「画像編集」で行います。

画像編集機能

「画像編集」の画面は右側が画像編集のスクリーンになっています。

左側にPCのフォルダが並んでいるので、ピクチャなどから自分の写真などを取り込んで加工できます。

スクリーン下に編集ボタンが並んでいます。

赤枠の「ホーム」タブから見ていきましょう。

「ホーム」タブ

たとえば、「ホーム」でよく利用する機能は、リサイズ。

画像の横幅を縦横比はそのままで縮小することができます。

大きすぎる画像はリサイズで適切なサイズにしましょう。

また、フレームも色々な種類があります。

フォトフレーム風・クリップやテープでとめてる風・木枠・お花・ハート形など画像を装飾することができます。

また「フィルム効果」「フィルター」では画像をセピア色にしたり、アンティーク加工をほどこしたり、おしゃれな雰囲気にすることも可能です。

こんな感じで「ホーム」「オブジェクト」「トリミング」「ツール」タブを押していくと、だいたい必要な機能がそろっています。

つづいて「オブジェクト」タブで色々書きこみましょう。

「オブジェクト」タブ

「オブジェクト」では文字入れや矢印を入れることができます。

ごちゃごちゃした画像になってしまいました…

ほぼ、この「オブジェクト」タブの機能でやりたいことが完了するので、ここが使いこなせたらとっても便利です！

もちろん文字色や文字の縁取り、吹き出しの色、フォントも選べます(日本語フォントは少なめ)

「トリミング」タブ

「トリミング」タブでは、画像を四角や丸くトリミング(切り取り)ができます。

「ツール」タブ

「ツール」タブでは、モザイクが使えます。

隠したいものも多々出てきますからね。ブログを運営する上で、必須の便利機能です。

保存する

保存はJPEG形式やPNG形式などから選ぶことができます。
※透過PNG保存はできません。

またJPEG形式だと画質を落として保存することができます。

JPEG品質バーで調節して保存することで、画像の容量を軽くすることができます。

品質を落としすぎると「ぼやっ」とした画像になってしまうので、やりすぎ注意です。

私はよく「ぼやっ」となってしまいます。

またExif情報保持のチェックを外すと、Exif情報を消してくれます。

まとめ

画像加工・編集のフリーソフトは、他にも色々ありますが「フォトスケープ」が圧倒的にわかりやすかったです。

画像系フリーソフトの中では、初心者に一番やさしい使いごこちではないでしょうか。

インストールしてから一度も使い方をググったことがないくらい感覚で使い方がわかります。

私はブログの解説画像を作成するばかりで、紹介した機能しか使っていませんが他にも色々と機能があります。

Gifアニメもできるみたいなので、ちょっとチャレンジしてみたらこのようなものができあがりました…

う、動いたっ！

なんということでしょう！

なにかと便利で使い勝手が良いので、おすすめの画像加工用ツールです。

ちなみにアイキャッチ画像はCanvaを利用しています。かわいいフォントがたくさんある！

【画像作成】ブログの文字入りアイキャッチならCanvaが使える！！

いい感じのブログに貼ってあるような、それっぽいアイキャッチ画像を作りたい！illustratorもPhotoshopも持っていないけど作りたい！そんな時に出会ったのがCanva(キャンバ)でした。Canvaを使うと、わたしのようにセンスなし...

yomlog.xyz

こちらの記事でも画像関係ツールを紹介しています

ブログ画像のサイズから圧縮まで！初心者が知っておきたい情報まとめ

今回はブログをはじめた2ヶ月前の自分に教えたい、ブログ画像のアレコレについてまとめていきます。超初心者だったわたしは、ブログの画像に関して全く知識がありませんでした。様々な情報を調べて試行錯誤してきた中で、やっとたどりついた画像サイズ・圧縮...

yomlog.xyz

最後までお読みいただき、ありがとうございました。

illustratorもPhotoshopも持っていないけど作りたい！

そんな時に出会ったのがCanva(キャンバ)でした。

Canvaを使うと、わたしのようにセンスなしでも今っぽいアイキャッチ画像が数分で作れるようになります。

そんな便利なものがあるの！？

そんなわけで、今回はアイキャッチ画像の作り方・Canva(キャンバ)の利用方法について解説していきます。

Canva(キャンバ)は画像編集サイト

Canvaは、オーストラリア生まれのクラウド上で使える画像編集ツールです。

Canva

www.canva.com

利用登録をすれば、無料で簡単に画像編集ができます。しかも商用利用も可能です。

有料会員になると使える機能が増えますが、今のところ無料で充分に使えるのでかなりオススメです。

私は、もうこれなしではアイキャッチを作ることができません。

最初に作ったのは、ブログをはじめて12記事ほど投稿していた時期でした。
あまりに使い勝手が良くて、１記事目からアイキャッチ画像を一気に作り直した思い出。

サイト上で作業をするので、パソコンが重いからソフトを入れたくない人も利用しやすいですね。

しかも操作感も抜群です！

Canva…！これは、すごそうなサイトだ！！

Canvaでアイキャッチ画像を作成する

利用する前に、登録が必要です。

サイトへ行くと分かりますが、FacebookのカバーやTwitter用・YouTubeのサムネイル用など、そのまま使えるおしゃれなデザインテンプレートがたくさんあります。

アイキャッチ画像だけでなく、ポストカードや宣伝用広告など使い方は無限大です。

おしゃれなテンプレートを使うのもいいですが、今回はオリジナルのアイキャッチ画像を作成していきましょう。

画像サイズを指定する

画像のサイズを自分で決めた数値にすることができます。

サイトの右上、カスタムサイズをクリックしてサイズを入力しましょう。

私はアイキャッチ画像を「800px×450px」と決めていますので、800・450と数字を入力します。緑の「新しいデザインを作成」ボタンをクリック。

画面の右側に指定したサイズのキャンバスが表示されます。
(Canva(キャンバ)はキャンバスが由来だと思っているので、こう呼んでみる)

画像をアップロードする

Canvaに画像をアップロードしましょう。

左端のアップロードボタンをクリック
↓
「画像をアップロード」をクリック

Canvaっぽい青い写真をアップロードしました。ここから自分の撮った写真でも、お気に入りの画像でもサイト上にアップロードすることができます。

自分がアップロードした画像をクリックすると、キャンバスに移動します。

写真の角を引っ張ってサイズを調整したり、配置を好みの場所に動かしましょう。

Canvaの無料画像も利用できる

アップロードが面倒くさいなら左端にある「素材」ボタンをクリックして、Canvaの画像を使うこともできますよ。

欲しい素材を検索窓から検索することもできます。

素材には無料素材と有料素材があるので、表示を見て使いましょう。「無料」や「＄1.00」と表示されています。

素材の下部に表示されていますよ

画像に文字を入れる

このフィルター機能で画像を白黒にしたり、夏っぽくしたり、ニュアンスを１クリックで変更することができます。

図形を追加する

文字を入れてみました。青い海の写真に水色の文字は見にくいですね。

写真と重なって、文字が見えにくい場合は左の「素材」クリック。検索窓に「図形」と入力してください。

枠なしの四角や〇などを選び、写真の上に追加します。今回は吹き出し型にしてみました。

「配置」ボタンをクリックして、図形を文字の背面に移動しましょう。

これで文字が読みやすくなりました。

画像の上に素材を重ねる

ちょっとワンポイント、イラストを重ねてみましょうか。

左の「素材」から、「ペン」を検索。赤枠の「グラフィック」を押します

「グラフィック」にはCanvaに備えてあるイラストが置いてあります。

無料素材のシンプルなペンシルエットを選びました。クリックするとキャンバスに移動します。大きすぎる。

追加したら、大きさや色を変えて調節しましょう。

イラストも好みの色に変更できます。反転もできますよ。今回は白でまとめました。

これで、この記事のアイキャッチ画像が出来上がり！

簡単なのに、それなりに出来てる！

作成画像をダウンロードする

作成した画像をダウンロードしましょう。右上にダウンロードボタンがあります。

ファイルの形式を選ぶことができます。

また、サイト上にも自分が作成した画像を保存してくれます。

左上の「ファイル」からサイト上に保存。自動保存もしてくれているようです。

また、右の赤枠Uターンしてる矢印は、作業をひとつ戻してくれる便利なボタンですよ！

簡単にデザインを変更できる

作ったデザインがちょっと違うかも…と思ったら、簡単にデザインを変更できます。

たとえば、先ほどのアイキャッチ画像の背景写真と図形を変更してみました。

図形は「吹き出し」から、ただの「四角」に変更。

背面の図形を黒など濃い色にして、白字にすると読みやすいですね。

雰囲気がガラッと変わったね。

図形を半透明にするにはキャンバス右上にあるボタンをクリックしてください。「配置」ボタンの右側にあるグラデーションマークです。

デザインの参考に

わたしはデザインのことがさっぱりわからないので、ウェブデザインのトレンドはこちらの記事を参考にしました。

2019年に流行するWebデザインの最新トレンド18個まとめ | Web Design Trends

そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか...

webdesign-trends.net

知識がないのでサイトを書きかえたりはできないけれど、アイキャッチ画像にトレンドを足すことはできそうです。

フラットデザインや太くて読みやすい字、「ブロークングリッドレイアウト」という写真や文字をずらして重ねるデザインなどが最近のウェブ業界のトレンドとのこと。

とりあえず、素人でも取り入れやすい太字を意識してアイキャッチにとりいれてます。

「ブロークングリッドレイアウト」(文字ずらし)は、この記事のアイキャッチで挑戦してみました。出来ているのだろうか、今見ると枠の色がビビッドすぎる…。↓

非正規職で手取り１０万！？貧困女子の定義と私の実体験

貧困女子って、どういう人のことを言うのでしょう？わたしが非正規職員で手取り１０～１１万円、ボーナスもなし、一人暮らしだったころの生活をもとに、貧困女子の年収・定義から、カツカツの生活費内訳までまとめていきます。

yomlog.xyz

フラットデザイン風にもチャレンジしてます。↓

福田監督の吉野家CMが面白すぎる！ガンダムや北の国からパロディも

「勇者ヨシヒコ」や「今日から俺は‼」「銀魂」でおなじみ福田雄一監督の作品を推している当ブログですが、ドラマ「今日から俺は‼」４話を見て、以前YouTubeで見た、とあるCMを思い出しました。それは、福田雄一氏が監督した吉野家のCMです。もう...

yomlog.xyz

完全に自己満足ですが、考えるだけでも楽しい。

こういうことをしているから、アイキャッチ画像の統一感が皆無なんです。

Canvaの気に入っているところ

今のところ無料素材しか使っていませんが、無料なのが申し訳ないくらい便利で使い勝手がいいです。

使ってみると分かりますが、配置を考えながら文字ボックスなどを動かすと「カクカクッ、ビビビッ」とバランスの良いポイントを教えてくれます。

この機能がすごく気に入っています。

別の画像編集ツールを使っていた時は、中心もおおよそこのあたりだろうと目星をつけて作成していました。その目星が大きくてズレてしまうので、バランスが悪かったのです。

(そのツールを使いこなせていなかった可能性もありますが、)　Canvaは何も考えなくても「カクカクッ、ビビビッ」とバランスをとってくれて、ズレが気になりません。

また、前に作った画像を保存して一覧表示してくれるところも便利。↓

前と似た雰囲気のアイキャッチ画像にしたいと思ったら、過去作品の右上「・・・」をクリックしてコピーを作成できます。

効率的にアイキャッチ作成ができて重宝してます。

Canvaは操作感がとってもわかりやすいので、もう手放せません。

慣れると一瞬でアイキャッチ作成が出来るようになります。

良ければ参考にしてください。

ブログの画像に使えるツールや情報をまとめた記事もあります。↓(初心者用)

ブログ画像のサイズから圧縮まで！初心者が知っておきたい情報まとめ

今回はブログをはじめた2ヶ月前の自分に教えたい、ブログ画像のアレコレについてまとめていきます。超初心者だったわたしは、ブログの画像に関して全く知識がありませんでした。様々な情報を調べて試行錯誤してきた中で、やっとたどりついた画像サイズ・圧縮...

yomlog.xyz

ここまで読んでいただき、ありがとうございました。

超初心者だったわたしは、ブログの画像に関して全く知識がありませんでした。

様々な情報を調べて試行錯誤してきた中で、やっとたどりついた画像サイズ・圧縮方法・アイキャッチ作成方法や挿入画像についてまで。使えるツールや身につけた知識を大放出します。

「ブログを始めるときにまとめて知りたかった画像関係情報」を1ページに詰め込みました。

どなたかの参考になれば幸いです。

アイキャッチ画像

アイを

キャッチ！！

記事の冒頭やサムネイルのアイキャッチ画像は、読者の「目」つまり視線をとらえるために必要な要素です。

文字しかない読み物よりも、画像が入っている方が読みやすく、ビジュアル化されているためイメージが伝わりやすいのです。

またSNSでシェアする際にも、画像があると目を引いて気になりますよね。

この画像で、記事が見られる確率が変わってくるので設定しておきましょう。

アイキャッチの縦横比(アスペクト比)とサイズ

ちまたに出回っている画像は、縦横の長さがちゃんと考えられているんです。

昔からの定番の縦横比率(アスペクト比)はこんな感じです。

こちらのアスペクト比計算ツールで定番の比率をチェックすることができます。

アスペクト比計算ツール

赤枠に横幅サイズを入れると自動で計算されます。

ブログによって推奨サイズが違う

利用しているブログやWordPressテーマによっては、推奨サイズが決められている場合もあるので公式サイトやテーマ作成者のサイトなどで確認してみてください。

たとえば、このブログはWordPressで作成し、無料テーマのcocoonを利用しています。(2018年12月現在)

cocoonでは、デフォルトのメインカラムの横幅が800px。関連記事やブログカードに使われるサムネイル画像のデフォルト縦横比が16:9です。

変更可能ですが、私はデフォルトサイズに合わせて16:9になるように【横800px：縦450px】のアイキャッチサイズに落ち着きました。

また、有料テーマのJINでは【横760px：縦428pxの16:9】がキレイに表示されると案内しています。

なぜ、16:9が多いのかというとYouTube等でも利用されている比率のため、ネットとの親和性が高いと言われているからです。

SNSでシェアするなら1：1.91

Facebook や Twitter でシェアされた時に表示される画像は、1：1.91です。どちらも同じ比率で揃えているようです。

これを受けてnoteでも、見出し画像比率が1：1.91に変更されました。↓(これがブログカードです。外部サイトに飛びます)

見出し画像の比率を変更いたしました｜note公式

いつもnoteをご利用いただき、ありがとうございます。 2018年6月14日 より、記事を作成する際に設定する見出し画像の表示比率を変更し、TwitterやFacebookでシェアした際に表示されるカードの画像サイズと互換性がある比率となり...

note.com

1.91:1　=　横1200 px: 縦628px　などですね。

調べてみると先ほどご紹介した16:9でもSNSとの相性は悪くないようです。結構すすめてる人がいます。

画像サイズを変更(リサイズ)するときにも、16:9の方が世間に浸透しているので、ツールがサイズに適応していたりと便利な気がします。

ちなみにInstagram画像の推奨サイズは正方形1,080 × 1,080px。

正方形も並ぶとかわいいです。

Facebookなどを多用しているなら、ブログのアイキャッチも縦横比 1：1.91 がいいかもしれません。

▼アイキャッチ画像サイズチェッカー

アイキャッチ画像サイズチェッカー｜TwitterやFacebookでシェアされた時の表示を確認

TwitterやFacebookでシェアされたときにアイキャッチ画像がどう表示されるかをまとめて確認できるツールです。はてなブログやライブドアブログにも対応。

saruwakakun.com

TwitterやFacebookなどでシェアされたときに、アイキャッチ（サムネイル画像）がどのように表示されるかをチェックすることができる便利なサイトです。

小まとめ

推奨サイズや好みのサイトデザイン、SNSのことなど総合的に考えてサイズを決めてください。あまりに大きい画像だとブログが重くなるので、その辺りも頭に入れておきましょう。

画像素材は無料でゲット

ブログや商用利用可のフリー画像サイトはたくさんあります。

定番・おしゃれ・かわいい…などサイトによって特色があるので探すのが楽しくて、いつまでも画像をあさっている…なんてことも。

選ぶ画像の傾向で、ブログの雰囲気も変わってきます。

画像選びはサイトデザインに関わってくる、けっこう重要な要素ですよね。

いくつかフリー画像サイトをご紹介しますので、自分の好きなサイトを見つけてください。

定番と思われる画像サイト

写真AC

会員登録者数が圧倒的な日本の定番画像サイト。

写真素材なら「写真AC」無料（フリー）ダウンロードOK

無料写真素材を提供する「写真AC」のフリー写真素材は、個人、商用を問わず無料でお使いいただけます。クレジット表記やリンクは一切不要です。Web、DTP、動画などの写真素材としてお使いください。

www.photo-ac.com

ぱくたそ

この人見たことありませんか。日本一インターネットで顔写真が使われている(自称)、ぱくたそのフリー素材モデルさんです。

フリー素材ぱくたそ - 登録不要の無料写真素材・AI素材

登録不要で使えるフリー素材サイト。日本の人物・風景・テクスチャーなどの写真素材と、背景・エフェクト・テクスチャー向けのAI素材を60,947枚以上掲載。商用利用も無料でダウンロードできます。

www.pakutaso.com

Pixabay

日本語にも対応していますが、世界中で使われているサイトなので英単語で検索するとたくさんヒットします。

Just a moment...

pixabay.com

おしゃれ＆ハイセンス画像サイト

girlydrop

かわいい。女の子らしい。女性向けのサイトにはぴったりな画像サイト。

おしゃれなフリー写真素材｜GIRLY DROP(ガーリードロップ) - GIRLY DROP(ガーリードロップ)

女性カメラマン2人が撮影したおしゃれ・かわいい無料写真素材。スマホ壁紙や誕生日、InstagramやCanvaにも！会員登録不要・商用利用OKのフリー素材サイト「がりどろ」。

girlydrop.com

以下、海外サイト

unsplash

海外サイトですが、よくブロガーが紹介しているセンスの良い画像サイトです。素敵。

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock p...

unsplash.com

picjumbo

ここも、おしゃれでセンス良しの画像が見つかります。

Free Images, Backgrounds and Photos • picjumbo

Free images, free photos, backgrounds and wallpapers. Download the best images for your websites, templates, blogs or de...

picjumbo.com

gratisography

ちょっと個性的でユニーク、シュールな画像もある海外画像サイト

Gratisography - Free High-Resolution Photos

Hundreds of free high-resolution pictures you can use on your personal and commercial projects, free of copyright restri...

gratisography.com

イラスト画像サイト

イラストAC

写真ACのイラスト版。これも定番でしょう。

無料イラスト・フリー素材なら「イラストAC」

イラストACは、無料でおしゃれなかわいい季節のイベント・人物・動物・フレーム・子供などのイラストがAI・JPEG・PNGでダウンロードできる素材サイトです。

www.ac-illust.com

いらすとや

ぜったい見たことのある絵柄。ネット上だけじゃなく、日常生活でも目にするくらい定番のイラストサイト。

かわいいフリー素材集

いらすとやは季節のイベント・動物・子供などのかわいいイラストが沢山見つかるフリー素材サイトです。

www.irasutoya.com

フラットアイコンデザイン

あわい色合いでかわいい。最近よく見るトレンドイラストです。

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

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

flat-icon-design.com

Town illust

こちらも上のデザインに似ているテイスト。街と建物に特化しています。

街、建物系イラスト専門サイト「TOWN illust」 – 無料で使える街、建物のイラスト素材サイト

ビル、マンションや観光地などのベクター素材や街並みのイラストを無料で配布するデザインサイト

town-illust.com

ヒューマンピクトグラム2.0

ピクトグラムって使い勝手がいいですよね。

human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)

人間ピクトグラム素材のギャラリー

pictogram2.com

JPEG（JPG）とPNGの違い

好みのフリー画像サイトは見つかったでしょうか。

いいな！と思った画像をダウンロードするときに、JPEG（JPG）で保存するかPNGで保存するか保存形式を選べる場合があります。

いったい何が違うのか。ざっくりとした説明しかできませんがイラストなどはPNG、複雑な画像（写真など）はJPEGが向いていると言われています。

場合にもよりますがPNGの方が画質が良く、JPEGの方が圧縮するときに圧縮率が高いとか。

私は、保存形式を選べるならファイルサイズを軽くしたいのでJPEGで保存しています。

小まとめ

画像サイトをたくさん紹介しましたが、まだまだフリー素材のサイトはあります。満足しなかった人は探せばもっとありますが、これだけ知っていれば十分に事足りますよ。

JPEG（JPG）・PNGも選べないのなら保存可能な形式でダウンロードすればOK！そんなに気にする必要はありません。

画像を加工編集する

最近のブログでは、アイキャッチに文字入れ加工がしてありパッと目を引きますよね。

IllustratorやPhotoshopのような画像編集ソフトがなくても無料でサクッときれいなアイキャッチが作れます。

Phot Scape(フォトスケープ)

フリー画像をダウンロードすると、大きすぎることが多いですよね。

PhotoScape - 無料・ダウンロード

PhotoScape 無料ダウンロード。 PhotoScape 3.7: Un excelente editor de imágenes gratis apto para todo tipo de usuario優れた無料の画像編集ソフト、...

photoscape.softonic.jp

このフリーソフトは、初心者にもわかりやすい画像編集ソフトです。

リサイズや指定サイズでの切り取り(トリミング)などなど他にも多機能なので、スクリーンショットをとるときや説明画像をつくるときに多用しています。

使い方の解説↓

解説ブログの画像加工に！フリーソフト「フォトスケープ」が有能すぎ

当ブログでは、解説画像をよく使います。矢印や説明文を入れて、使い方などを説明する画像のことです。私はPhotoshopやillustratorなどの有料ツールをもっていないので、PhotoScape(フォトスケープ)で画像を加工して解説用画...

yomlog.xyz

フォトスケープは画像編集後の保存時に、Exif情報を削除してくれるのが気に入っています。※保存するときに「Exif情報を保持する」のチェックを外してください。

とにかくPhot Scape(フォトスケープ)は、感覚的で使いやすいです。

このツールに関しては使い方をググったことがありません。初見でもなんとなく使いこなせました。おそらく同様の画像編集ツールとしてGIMPも有名です。

Phot Scape(フォトスケープ)でも、十分アイキャッチ画像を作れます。作っていたのですが日本語フォントが少なくて、アイキャッチ画像作成は次に紹介するCanvaにくら替えしました。

Canva（キャンバ）

Canva

www.canva.com

サイト上で画像の編集ができます。

もう、こればかり使っています。

これも感覚的に使いやすく、中心線やバランスのよいポイントをビビビッと教えてくれるので、センスがなくとも整った画像ができあがります。

使い方はこちら↓

【画像作成】ブログの文字入りアイキャッチならCanvaが使える！！

いい感じのブログに貼ってあるような、それっぽいアイキャッチ画像を作りたい！illustratorもPhotoshopも持っていないけど作りたい！そんな時に出会ったのがCanva(キャンバ)でした。Canvaを使うと、わたしのようにセンスなし...

yomlog.xyz

ibisPaint X(アイビスペイントX)

こちらは無料のお絵かきアプリです。

▽ ibisPaint X［iOS：無料版］

アイビスペイントXアプリ - App Store

ibis inc.の「アイビスペイントX」をApp Storeでダウンロードしてください。スクリーンショット、評価とレビュー、ユーザのヒント、「アイビスペイントX」に似たゲームを見ることなどができます。

apps.apple.com

▽ ibisPaint X［Android：無料版］

ibis Paint X - Apps on Google Play

An intuitive, high-performance painting app that lets you focus on creating

play.google.com

お絵かき好きには有名なアプリ。高機能で、なんでもできます。ラインスタンプを作ることも、アイキャッチやロゴも作ることができます。使いこなすには勉強が必要かもしれません。

なんといっても、透過PNG（背景が透明な形式）で保存・ダウンロードができるので、ロゴ・キャラクターを作りたい人におすすめのアプリです。

先に紹介したcanvaやPhot Scape(フォトスケープ)は、透過PNGで保存できないのです。(canvaは有料会員なら可能)

この吹き出しの絵は、イラストACのフリー画像をアイビスペイントで加工したものですよ。

使えるフォントも色々あります！

画像サイズを一括変更する

わたしは主に画像編集のときに合わせてサイズ調整をしていますが、画像を一気に何枚もリサイズできる便利なツールもあります。

Easy Picture Resizer

画像サイズを一括でリサイズする時短ツールEasy Picture Resizer(イージーピクチャーリサイザー)。

https://freesoft-100.com/review/easypictureresizer.html

freesoft-100.com

一括リサイズのツールは、たいてい画像の縦横の比率を保持してリサイズする仕様になっています。

Easy Picture Resizerも同様です。サイズ指定(横幅だけを選ぶ)と一括リサイズしてくれます。

フリーソフトなので、ダウンロードさえすれば無料で使えます。

画像の横幅だけ統一できたらいいから一気にリサイズしたい、という方にオススメです。

画像を圧縮して軽くしよう

画像をアップする前に、その画像がどのくらいの容量なのか見てみてください。

美しい写真の画像だと、けっこう重たいと思います。数百KBとかあるんじゃないですか。圧縮した方がいいですよ。上の猫ちゃん写真は15KBまで圧縮されました。

重たい画像をサイトに使っていると、積み重なってどんどん激重サイトになってしまいます。

Googleは、サイトの評価にページ速度も重要だと見ていますから、Google様に嫌われないように対策しましょう。

画像圧縮プラグイン

ワードプレスの利用者は画像をアップロードしたら、勝手に圧縮してくれるプラグインを入れているかと思います。

EWWW Image Optimizer

どこで調べてもオススメされている画像圧縮プラグインですね。いまだに読み方がわかりませんが、とても有名です。

TinyPNG

こちらの方が圧縮率が高いと聞いて、私はこのtinypng利用しています。かなりギュギュギュっと圧縮してくれております。

アップロード前に画像を圧縮する

画像をアップロードする前にも、簡単に圧縮をしてくれるサイトやツールがあります。

TinyPNG

先ほど紹介したプラグインと同じところですが、これはプラグインではなくサイトです。このサイトにアクセスして、画像をドラックアンドドロップで圧縮できます。

TinyPNG – Compress AVIF, WebP, PNG and JPEG images

Free online image optimizer for faster websites! Reduce the file size of your AVIF, WEBP, JPEG and PNG images while pres...

tinypng.com

JPEGmini

こちらはパソコンにダウンロードして使う無料ツールです。圧縮できるのはJPEG形式のみ。パソコン上で画像をドラックアンドドロップするだけ一瞬で圧縮してくれます。私はこちらを利用しています。

https://freesoft-100.com/review/jpegmini.html

freesoft-100.com

私はアップする前と後(プラグイン)で二重に圧縮しているので、字の小さい説明画像は画質が落ちて字が読みにくくなります。圧縮のし過ぎも考えものですね。

字の小さい画像は、アップ前の圧縮が不要だと感じている今日この頃です。

まとめ

今回はこんな感じで画像のイロハをご紹介してきました。

今回、紹介したツールがあればサイトロゴもアイキャッチ画像も説明画像も独自キャラクターもなんだって作れてしまうと思います。

すべて無料なのに使い勝手も良くて、本当に便利な世の中ですよ。

この記事は、2ヶ月前の私が目にしていたら楽だっただろうなと思えるような記事を目指して書きました。

同じようなブログ初心者へ届けっ！！

最後までお読みいただき、ありがとうございました。