こんにちは、T部長です。
ブログ記事をアップするとき「アイキャッチ画像がいつも無料素材」「オリジナルのアイキャッチ画像はハードルが高い」とお悩みではないでしょうか?
今回の記事では「スマホだけでできる初心者向けのアイキャッチ画像の作り方」を紹介します。
T部長
この記事は以下のような人におすすめ!
- iPhoneでアイキャッチ画像を作ってみたい!
- スマホで簡単に作りたい!
- 画像ソフトを使ったことがない人
「アイキャッチ画像ってどうやって準備するの?」「加工アプリで文字は入れられるけど何か違う…」「無料素材ってアイキャッチに使っていいの?」と思った経験はないでしょうか?
今回は当メディア運営を手伝ってくれているデザイナーと、初心者向けに「スマホだけで簡単にできるアイキャッチ画像の作り方」をまとめました。
今回はiPhoneの方向けの記事なので、Androidの方は下記の記事をどうぞ!
【Android版】スマホアプリだけ!簡単アイキャッチ画像の作り方使い慣れているスマホで作りたい!空いた時間に作りたい!という方は、これから紹介するアプリを使ってアイキャッチ画像を作ってみましょう!
それでは、どうぞ!
目次
アイキャッチ画像を作る方法とは?
アイキャッチ画像を作るのって難しそうと思っていませんか?
ボクは正直「難しそうだしめんどくさそう…」「文字を入れる以外の加工って時間かかるでしょ?」「空き時間にできたらな~」と思っていました。
今回はじめてアプリで作ってみて「こんなに簡単にできるんだ!」と思ったので、図解してみました。
とっても簡単じゃないですか?
素材を探さなくても「自分で撮った写真に文字を入れるだけ」で空き時間にスマホでアイキャッチ画像が作れます!
こういう簡単なアイキャッチ画像が作りたい方はこちらから作り方へどうぞ
ただ…
ボクは「もうちょっと凝ったものを作ってみたい!簡単に作れる方法はないかな?」と相談したところ、他のアプリを紹介してもらい、ここまで作ることができました!
さっきよりちょっと凝ってるように見えませんか?
初心者のボクでもたった10分ほどで作ることができ、驚きました!
こういうちょっと凝ったアイキャッチ画像が作りたい方はこちらから作り方へどうぞ
文字を入れるだけ!LINEcameraで超簡単アイキャッチ画像作成!
今回は加工が簡単にできるLINEcameraを使っていきます。
LINE Cameraの基本的な使い方は以下の記事で説明していますので、合わせてご確認ください。
【スマホだけでできる】写真加工のやり方を超初心者向けに解説▼アプリをこちらからダウンロード▼
文字を入れてそれっぽいアイキャッチ画像作成
1.画像の切り抜きと比率
使いたい画像を切り抜きます。
LINEcameraは切り抜きに16:9の比率が設定されています。(正方形など他の比率への変更の仕方は後述します)
アイキャッチ画像はそれぞれのブログやテンプレートなどによってベストなサイズや比率が違いますが、このブログのアイキャッチ画像の場合はだいたい16:9の比率なので、設定を変更せずにそのまま切り抜きます。
正方形など他の比率にしたい場合は左下の「16:9」をタップして比率を変更します。
2.フォントを変更する
前回の記事のように文字を入れると、何か物足りない…というようなことはありませんか?
そういうときはフォントを変更してみましょう!
テキストを打ってフォントを選ぶ画面に行くと、右上に「Aa+」のボタンがあるのでタップします。
これは無料でダウンロードして使えるフォント一覧です。
気に入ったフォントの右にある「↓」をタップします。
「無料ダウンロード」というボタンが出てくるのでタップします。
一番上の「ダウンロード済み」に追加されていれば使用できるようになります。
3.完成
好きなフォントを選んで大きさや色を調整して完成です。
今回は「私の国のアリス」というフォントを使用しました。
フォントを変えただけでも随分印象が変わりますよね!
T部長
文字を入れだけじゃ物足りない!フレームをいれてみる
1.フレームを選択する
このマークをタップします。
2.好きなフレームを選ぶ
今回ボクはこのフレームにすることにしました。
3.完成
とても簡単にアイキャッチ画像が完成しました!
T部長
もっと凝りたい!メディバンペイントで簡単にアイキャッチ画像作成!
ここからは「もうちょっと凝りたいけどどうすればいいの?」という方向けです。
まずは、超簡単なのにそれっぽく見えるアイキャッチ画像のテンプレートを作ってもらったので一緒に見てみましょう。
上の白黒画像を見て「ありきたり!」「四角と文字しかないけど…」「こんなんで本当に大丈夫?」と思われた方…
下の画像を見てください。
写真を入れてみると、それっぽく見えませんか?
ただ写真に文字と四角形を組み合わせただけで、ちょっと凝ったアイキャッチ画像に見えてきませんか?
えっ…ちょっと凝ってるように見えるアイキャッチ画像ってこんなに簡単に作れるの!?とボクは衝撃を受けました。
T部長
今回はこの画像の作り方を説明していきます。
さっそく作り方を見ていきましょう!
アプリをインストールしてキャンバスの設定をする
1.アプリをインストール
今回はメディバンペイントを使用します。
▼アプリをこちらからダウンロード▼
メディバンペイントはお絵描きソフトやアプリとして有名ですが、アイキャッチ画像を作るのにとってもおすすめのアプリです。
PC版のフリーソフトもあるので、スマホでもPCでも使えていいですよね。
アプリを開きます。
会員登録(無料)をしてもしなくてもアプリを使用することができますが、会員登録をしていると無料で使えるフォントが増えるので登録することをおすすめします。
2.新しいキャンバスを開く
「新しいキャンバス」をタップして、「新規作成」をタップします。
3.数値を変更する
画像の通りに数値を変更します。
※このブログのいつものアイキャッチ画像のサイズに合わせています。ご自身のブログのアイキャッチ画像のサイズがわかる場合はそちらの数値を入力にしてください
dpiは印刷予定がない限り「72」で大丈夫です。印刷予定の場合は「350」にしてください。
数値の変更ができたら右上の「完了」をタップして、キャンバスの設定が完了です。
写真を読み込む
アイキャッチ画像にする写真を読み込んでいきます。
1.いらないものを非表示にする
左にあるバーが必要ないので非表示にします。
必要なときはもう一度タップするとバーが表示されます。
2.写真を読み込む
①②の順にタップし、「画像を選択して追加」をタップします。
3.写真の大きさを調整する
好きな写真を読み込んで 下のバーで写真の大きさや角度などを調整し、「完了」を押します。
あえて小さくすると白い淵がついたみたいで、これもいいかもしれないですね。
4.写真の読み込み完了
確定を押すと線画抽出しますか?と表示されるので「線画抽出をしない」をタップします。
これで写真の読み込みは完了です。
レイヤーを追加する
1.レイヤーを追加する
先ほどと同じ「+」ボタンをタップし、次は「カラーレイヤー」をタップします。
2.レイヤーとは?
レイヤーとは「重ねられた紙」ようなものです。
今は下から順番に白い紙・読み込んだ写真・透明の紙の順になっているため、現在は写真が表示されています。
今から透明の紙に装飾をしてアイキャッチ画像を作っていきます。
3.レイヤーの追加完了
もう一度このボタンをタップすると、右側の画像の画面になります。 これでレイヤーの追加は完了です。
レイヤーを塗りつぶす
1.バケツツールを選択する
①をタップし、②の「バケツツール」をタップします。
2.レイヤーを選択する
「隙間閉じ」のところ右にスライドし、「レイヤー」をタップします。
3.塗りつぶす
写真をタップします。すると真っ黒になります。
4.不透明度を調整して塗りつぶし完了
①をタップし、②の「不透明度」で黒さを調節します。
調節ができたら塗りつぶしの完成です。
文字を入れる
1.文字入れを選択する
①をタップし、②の「テキスト」をタップします。
③の写真をタップして文字を入れていきます。。
2.文字を打つ
文字を打って「完了」をタップし、右側の画像のマークをタップします。
3.文字を調整する
今回はこのような設定しました。
4.移動させて文字入れ完了
Tマークをタップし、「移動ツール」をタップします。
文字を好きな位置に移動させたら完了です。
枠をつける
1.新しいレイヤーを追加する
レイヤーを追加するで紹介したのと同じようにカラーレイヤーを新しく追加します。
2.図形ツールを選択する
①をタップし、②の「図形ツール」をタップします。
③の「矩形」が四角形になります。
3.枠の色や太さを決める
枠のいろや太さを決めます。
4.枠を入れる
枠をつけたいところをタップし、タップしたまま斜め下にスライドします。
失敗しても何回でも左下の戻るボタンでやり直すことができます。
5.移動させて枠完了
①をタップし、②の「移動ツール」をタップして、枠を移動させたら完了です。
画像を保存する
1.メニューをタップする
左下のメニューをタップします。
2.png/jpg形式を選択する
「png/jpg形式でエクスポート」をタップし、好きな形式をタップします。
3.画像を保存する
「画像を保存」をタップすると作成した画像が保存されます。
4.編集データも保存したい場合
「新規保存」をタップし、「端末に保存」をタップすると編集したデータを保存できます。
メディバンペイントを開いて「マイギャラリー」をタップすると右側の画像ようにデータが保存されているので、いつでも編集ができます。
番外編
ここからは他の装飾の仕方などを紹介します。
塗りつぶされた四角を入れる
1.塗りつぶしツールを選択する
①をタップし、②の「塗りつぶしツール」をタップします。
2.四角を入れて完成
3.参考アイキャッチ画像
四角と文字と枠を組み合わせることによってこういうアイキャッチ画像なども作ることができます。
線を引く
1.線を選択する
①をタップし、②の「図形ツール」をタップします。
③の「直線」で線を引くことができます。
2.線を引く
線を引きたい場所をタップし、タップしたまま指をスライドさせます。
3.調整して完成
好きな位置に線を移動させて完成です。
※線それぞれレイヤーを分けておくと移動させるときに便利です。
写真を2枚読み込んでアイキャッチ画像を作成する
最後に、今まで説明したものを組み合わせてこのアイキャッチ画像を作っていきます!
T部長
1.画像を2枚読み込む
今回は小さめに写真を読み込みました。
2枚読み込むと2枚画像のレイヤーができます。
2.画像の大きさを調整する
画像を移動させると微妙に隙間が空いてしまうことがありますよね…
そこで①をタップし、②の「変形」をタップします。
端の小さい四角をタップしながらスライドさせて大きさを調整します。
調節ができたら「完了」をタップします。
両方の画像を調整したら完了です。
3.枠を入れる
新しいレイヤーを追加して枠を入れます。
5.文字を入れて完成
まとめ
今回の記事ではアイキャッチ画像の手法や手順について、アイキャッチ画像を作ったことがない人向けにわかりやすく紹介しました。
ボクもデザイナーさんに教わりながらアプリを使ってみて、最初はややこしいな…と思うこともありましたが、一度慣れると簡単に操作ができて、通勤時間などのスキマ時間アイキャッチ画像が作れるようになりました!
スマホでぽちぽち、サムネ画像作ってたらこんな時間に。 pic.twitter.com/pCTDxKYZPz
— T部長@エックスサーバーの中の人 (@tbcho_xsv) September 29, 2020
適当にスマホで撮った昔の写真も、ちょっと加工するだけでアイキャッチ画像にも使えますので、まだアイキャッチ画像を作多ことがないという方は、一度チャレンジしてみてはいかがでしょうか?
以上、最後までお読みいただき、ありがとうございました!
ブログの始め方を知りたい!実際に始めたい方へ
国内シェアNo.1※レンタルサーバー「エックスサーバー」では2025年1月7日(火)17時まで、サーバー利用料金が最大30%オフになる期間限定キャンペーンを開催中です!
今なら月額693円~とお得にWordPressブログが始められます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にWordPressブログをご検討ください!
※ 2024年10月時点、W3Techs調べ。
当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています!
WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています!
ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください!
【初心者向け】ブログの始め方完全ガイド!立ち上げから収入を得る方法までまた、初心者の方向けにWordPressでのブログ立ち上げがたった10分できる方法も紹介しています!
【たった10分】WordPressブログの始め方|初心者でも簡単に開設できる!ブログの始め方・立ち上げに関する、ご質問・ご相談はボクのツイッターDM( @tbcho_xsv )までお気軽にどうぞ!