国内シェアNo1サービスの「中の人」がブログ運営に役立つ情報をわかりやすくお届け!

【iPhone版】スマホアプリだけ!簡単アイキャッチ画像の作り方

この記事のレベル
初心者
(4.0)
重要度
(3.5)
難しさ
(1.5)

こんにちは、T部長です。

ブログ記事をアップするとき「アイキャッチ画像がいつも無料素材」「オリジナルのアイキャッチ画像はハードルが高い」とお悩みではないでしょうか?

今回の記事では「スマホだけでできる初心者向けのアイキャッチ画像の作り方」を紹介します。

T部長

この記事は以下のような人におすすめ!

  • iPhoneでアイキャッチ画像を作ってみたい!
  • スマホで簡単に作りたい!
  • 画像ソフトを使ったことがない人

「アイキャッチ画像ってどうやって準備するの?」「加工アプリで文字は入れられるけど何か違う…」「無料素材ってアイキャッチに使っていいの?」と思った経験はないでしょうか?

今回は当メディア運営を手伝ってくれているデザイナーと、初心者向けに「スマホだけで簡単にできるアイキャッチ画像の作り方」をまとめました。

今回はiPhoneの方向けの記事なので、Androidの方は下記の記事をどうぞ!

【Android版】スマホアプリだけ!簡単アイキャッチ画像の作り方

使い慣れているスマホで作りたい!空いた時間に作りたい!という方は、これから紹介するアプリを使ってアイキャッチ画像を作ってみましょう!

それでは、どうぞ!

目次

アイキャッチ画像を作る方法とは?

アイキャッチ画像を作るのって難しそうと思っていませんか?

ボクは正直「難しそうだしめんどくさそう…」「文字を入れる以外の加工って時間かかるでしょ?」「空き時間にできたらな~」と思っていました。

今回はじめてアプリで作ってみて「こんなに簡単にできるんだ!」と思ったので、図解してみました。

とっても簡単じゃないですか?

素材を探さなくても「自分で撮った写真に文字を入れるだけ」で空き時間にスマホでアイキャッチ画像が作れます!

▼こういう簡単なアイキャッチ画像が作りたい方はこちらから作り方へどうぞ▼


ただ…
ボクは「もうちょっと凝ったものを作ってみたい!簡単に作れる方法はないかな?」と相談したところ、他のアプリを紹介してもらい、ここまで作ることができました!


さっきよりちょっと凝ってるように見えませんか?

初心者のボクでもたった10分ほどで作ることができ、驚きました!

▼こういうちょっと凝ったアイキャッチ画像が作りたい方はこちらから作り方へどうぞ▼

文字を入れるだけ!LINEcameraで超簡単アイキャッチ画像作成!

今回は加工が簡単にできるLINEcameraを使っていきます。

LINE Cameraの基本的な使い方は以下の記事で説明していますので、合わせてご確認ください。

【スマホのみ】他人に見せるための映え写真!加工アプリの超基本的使い方

▼アプリをこちらからダウンロード▼

Google Play で手に入れよう  App Store で手に入れよう

文字を入れてそれっぽいアイキャッチ画像作成

1.画像の切り抜きと比率

使いたい画像を切り抜きます。
LINEcameraは切り抜きに16:9の比率が設定されています。(正方形など他の比率への変更の仕方は後述します)

アイキャッチ画像はそれぞれのブログやテンプレートなどによってベストなサイズや比率が違いますが、このブログのアイキャッチ画像の場合はだいたい16:9の比率なので、設定を変更せずにそのまま切り抜きます。

正方形など他の比率にしたい場合は左下の「16:9」をタップして比率を変更します。

2.フォントを変更する

前回の記事のように文字を入れると、何か物足りない…というようなことはありませんか?

そういうときはフォントを変更してみましょう!

テキストを打ってフォントを選ぶ画面に行くと、右上に「Aa+」のボタンがあるのでタップします。
これは無料でダウンロードして使えるフォント一覧です。
気に入ったフォントの右にある「↓」をタップします。

「無料ダウンロード」というボタンが出てくるのでタップします。

一番上の「ダウンロード済み」に追加されていれば使用できるようになります。

3.完成

好きなフォントを選んで大きさや色を調整して完成です。
今回は「私の国のアリス」というフォントを使用しました。

フォントを変えただけでも随分印象が変わりますよね!

T部長

文字を入れだけじゃ物足りない!フレームをいれてみる

1.フレームを選択する

このマークをタップします。

2.好きなフレームを選ぶ

今回ボクはこのフレームにすることにしました。

3.完成

とても簡単にアイキャッチ画像が完成しました!

T部長

もっと凝りたい!メディバンペイントで簡単にアイキャッチ画像作成!

ここからは「もうちょっと凝りたいけどどうすればいいの?」という方向けです。

まずは、超簡単なのにそれっぽく見えるアイキャッチ画像のテンプレートを作ってもらったので一緒に見てみましょう。

上の白黒画像を見て「ありきたり!」「四角と文字しかないけど…」「こんなんで本当に大丈夫?」と思われた方…

下の画像を見てください。
写真を入れてみると、それっぽく見えませんか?

ただ写真に文字と四角形を組み合わせただけで、ちょっと凝ったアイキャッチ画像に見えてきませんか?

えっ…ちょっと凝ってるように見えるアイキャッチ画像ってこんなに簡単に作れるの!?とボクは衝撃を受けました。

T部長

今回はこの画像の作り方を説明していきます。

さっそく作り方を見ていきましょう!

アプリをインストールしてキャンバスの設定をする

1.アプリをインストール

今回はメディバンペイントを使用します。

▼アプリをこちらからダウンロード▼

Google Play で手に入れよう  App Store で手に入れよう

メディバンペイントはお絵描きソフトやアプリとして有名ですが、アイキャッチ画像を作るのにとってもおすすめのアプリです。
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.枠を入れる

新しいレイヤーを追加してを入れます。

4.四角を入れる

新しいレイヤーを追加して四角を入れ、変形移動をして形を整えます。

5.文字を入れて完成

文字を入れます。
今回はこの設定で入れています。

文字を調整して完成です。

今回作成したデータのレイヤーはこんな風になりました。

まとめ

今回の記事ではアイキャッチ画像の手法や手順について、アイキャッチ画像を作ったことがない人向けにわかりやすく紹介しました。

ボクもデザイナーさんに教わりながらアプリを使ってみて、最初はややこしいな…と思うこともありましたが、一度慣れると簡単に操作ができて、通勤時間などのスキマ時間アイキャッチ画像が作れるようになりました!

適当にスマホで撮った昔の写真も、ちょっと加工するだけでアイキャッチ画像にも使えますので、まだアイキャッチ画像を作多ことがないという方は、一度チャレンジしてみてはいかがでしょうか?

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

ブログの始め方を知りたい!実際に始めたい方へ

キャンペーン開催中

ボクが中の人を務める国内シェアNo1レンタルサーバー「エックスサーバー」では、
2020年12月3日まで【ドメイン永久無料】&【初期設定費無料】になる超お得なキャンペーンを開催中です。

 
.comなど大人気ドメインが永久無料&通常3,000円(税抜)の初期設定費が無料になる過去最大級にお得なキャンペーンなので、ぜひこの機会にご利用をご検討ください!

期間中のお申込ならサーバー料金だけで独自ドメインのWordPressブログが作れます。

 
サービスお申し込み、キャンペーンの詳細は、以下のリンクからご確認ください。

⇒ドメイン永久無料&初期設定費無料キャンペーン

当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています!

WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています!

ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください!

【初心者向け】ブログの始め方完全ガイド!立ち上げから収入を得る方法まで

また、初心者の方でも超定番のWordPressでのブログ立ち上げがたった10分できる方法も紹介しています!

【初心者でも安心】たった10分で出来るWordPressブログの始め方

ブログの始め方・立ち上げに関する、ご質問・ご相談はボクのツイッターDM( @tbcho_xsv )までお気軽にどうぞ!