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

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

ブログ記事をアップする際、アイキャッチ画像の作成について「いつも無料素材を使ってしまう」「オリジナルのアイキャッチ画像を作るのは難しそう」とお困りのことでしょうか？

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

T部長 この記事は以下のような方におすすめです！

• Androidを使ってアイキャッチ画像を作成したい方
• スマホを使って手軽にアイキャッチ画像を制作したい方
• 画像編集ソフトをあまり使ったことがない方

「アイキャッチ画像をどうやって用意したらいいのか？」、「加工アプリを使ってみたけど、うまくいかなかった…」、「無料素材の使用は問題ないの？」といった疑問や不安を抱いたことがあるかもしれませんね。

今回は、当メディアのデザイナーと協力して、初心者向けに「スマホだけで手軽に作成できるアイキャッチ画像の制作方法」をまとめました。

なお、この記事はAndroidユーザー向けの情報となります。iPhoneユーザーの方には、以下の記事をご覧いただけます。

​¹​スマホアプリだけ！簡単アイキャッチ画像の作り方

スマホの使い方に慣れており、手軽にアイキャッチ画像を制作したい方は、以下で紹介するアプリを使って、ぜひ自分のアイキャッチ画像を作成してみてください！

それでは、さっそくご紹介いたします。

アイキャッチ画像を作成する方法、難しいと感じていませんか？

ボクも正直に言うと、「アイキャッチ画像って難しそうで、面倒くさそう…」「文字を入れる以外の編集って時間がかかるんじゃないかな？」と思っていました。

しかし、今回初めてアプリを使ってみて、「こんなに簡単にできるんだ！」と感じたので、その方法を図解してみました。

とっても簡単でしょう？

素材を探す必要もなく、「自分が撮影した写真に文字を追加するだけ」で、スマホの空き時間にアイキャッチ画像を作成できます！

このような簡単なアイキャッチ画像を作成したい方は、以下の方法をご覧ください。

ただし…

ボクは「もう少し凝ったデザインのアイキャッチ画像を作成したいな」と思い、アプリの使い方を相談しました。そこで、他のアプリも紹介してもらい、それを使って作成できるようになりました！

少し凝ったデザインに見えませんか？

初心者のボクでも、たった10分ほどで作成できたことに驚きました！

このようなちょっと凝ったアイキャッチ画像を作成したい方は、以下の方法をご覧ください。

​¹​

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

今回は、加工が簡単に行えるLINE Cameraを使用します。

LINE Cameraの基本的な使い方については、以下の記事で詳しく説明していますので、参考にしてください。

​²​写真加工のやり方を超初心者向けに解説

▼アプリをダウンロードする▼

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

文字を入れてアイキャッチ画像を作成する方法：

1. 画像の切り抜きと比率設定 使用したい画像を切り抜きます。LINE Cameraはデフォルトで16:9の比率が設定されていますが、必要に応じて比率を変更することも可能です（後述します）。アイキャッチ画像の最適なサイズや比率は、ブログやテンプレートによって異なりますが、このブログのアイキャッチ画像の場合、だいたい16:9の比率が適しています。そのまま切り抜いてみましょう。また、他の比率（例: 正方形）に変更したい場合は、左下の「FREE」をタップして比率を調整します。
2. フォントの変更 文字を追加したい場合、フォントの変更がおすすめです。フォントの選択画面に移動し、右上にある「Aa+」のボタンをタップします。ここには無料でダウンロードできるフォントが一覧表示されます。気に入ったフォントを選び、その右側に表示される「↓」ボタンをタップします。そこから「無料ダウンロード」を選びます。フォントが「ダウンロード済み」に表示されれば、そのフォントを使用できるようになります。
3. 完了 選んだフォントを使って、文字の大きさや色を調整して、作成を完了させます。この記事では「私の国のアリス」というフォントを使用しました。

T部長

文字を入れるだけでは物足りない！フレームを加えてみる

1. フレームを選択する このアイコンをタップします。
2. 好きなフレームを選ぶ 今回、私はこのフレームを選択しました。
3. 完了

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

T部長 【ブログを始めるなら「レンタルサーバー」から。おすすめは国内シェアNo.1のエックスサーバー】

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

ここからは「もう少し凝りたいけど、どうすればいいの？」と思われる方に向けての内容です。

まず、超簡単でそれっぽく見えるアイキャッチ画像のテンプレートを作成しましたので、一緒にご覧いただきましょう。

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

下の画像をご覧ください。 写真を加えるだけで、少し凝ったアイキャッチ画像に見えませんか？

えっ…ちょっと凝っているように見えるアイキャッチ画像ってこんなに簡単に作れるの！？と私は驚きました。

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

さっそく作り方を見てみましょう！

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

1. アプリをインストール 今回はメディバンペイントを使用します。以下からアプリをダウンロードできます。Google Playで手に入れよう App Storeで手に入れようメディバンペイントはお絵描きソフトとしても有名ですが、アイキャッチ画像作成にも非常に適しています。スマートフォンでもPCでも使用できる点が便利です。アプリを起動すると初回にログイン画面が表示されますが、無料でアプリを使用することができます。ただし、無料で使用する場合と会員登録（無料）をする場合があります。会員登録を行うと、無料で使用できるフォントが増えるのでおすすめです。
2. 新しいキャンバスを開く 「新しいキャンバス」をタップします。
3. キャンバスサイズを変更する 「変更」をタップします。
4. 数値を変更する 画像の通りに数値を変更します。ブログのアイキャッチ画像のサイズに合わせて調整しましょう。通常、dpiは印刷予定がない限り「72」で問題ありませんが、印刷予定の場合は「350」に設定します。
5. キャンバスの設定完了 数値を確認し、「作成する」をタップしてキャンバスの設定を完了します。この設定は保存されるため、次回以降は再度設定する必要はありません。

写真を読み込む

アイキャッチ画像にする写真を読み込みます。

1. いらないものを非表示にする 左にあるバーが必要ないので、「必要なときはもう一度タップするとバーが表示されます」として非表示にします。
2. 写真を読み込む ①、②、③の順にタップして写真を読み込みます。
3. 写真の大きさを調整する 下のバーで写真の大きさや角度を調整し、「確定」をタップします。小さくすることで白い余白ができ、これも一つのデザインアイデアです。
4. 写真の読み込み完了 確定を押すと線画を抽出するかどうかを尋ねられますので、「いいえ」をタップします。これで写真の読み込みが完了します。

レイヤーを追加する

1. レイヤーを追加する 先ほどと同じように「＋」ボタンをタップし、次に「カラーレイヤー」をタップします。
2. レイヤーとは？ レイヤーは、重ねて表示される紙のようなものです。現在、下から順に白い紙、読み込んだ写真、透明の紙の順で表示されているため、これから透明の紙に装飾をしてアイキャッチ画像を作成します。
3. レイヤーの追加完了 もう一度ボタンをタップすると、右側の画面に切り替わり、レイヤーの追加が完了します。

レイヤーを塗りつぶす

1. 塗りつぶしを選択する ①のバケツマークをタップし、②の「キャンバス」をタップします。
2. 塗りつぶす ①の「レイヤー」をタップし、②の写真をタップします。すると、右側の画像のように真っ黒に塗りつぶされます。
3. レイヤーの不透明度を選択 ①のマークをタップしてレイヤーを表示し、②の不透明度の「編集」をタップします。
4. レイヤーの不透明度を調整する 下のバーで不透明度を変更し、「確定」をタップします。
5. レイヤーの塗りつぶし完了 塗りつぶしの作業が完了しました。

文字を入れる

1. 文字入れを選択する ①の「Aa」アイコンをタップし、②の「キャンバス」を選択します。
2. 文字を打つ テキストを入力し、フォント、文字の色、サイズ、文字間隔、行間隔、フチの色と太さを調整してから、「確定」をタップします。
3. 調整する ここをタップすると、何度でも修正や調整が可能です。
4. 文字入れ完了 調整が終わったら、文字入れが完了です。

枠をつける

1. 新しいレイヤーを追加する カラーレイヤーを新しく追加します。
2. 枠の色や太さを調整する 枠の色と太さを調整します。
3. 枠をつける 枠を追加したい場所を選び、タップしたままスライドします。誤ってしまった場合でも左下の戻るボタンでやり直すことができます。
4. 枠完了 移動ツールを使用して枠の位置を調整し、枠の作成が完了です。

画像を保存する

1. 画像の保存を選ぶ 画面左下のメニューをタップし、その後「png/jpg形式でエクスポート」を選択します。
2. 好きな形式を選んで完了 好みの画像形式を選択し、「OK」をタップすると、画像がデバイスに保存されます。
3. 編集データも保存したい場合 編集データを保存したい場合は、一番上の「保存」をタップするとデバイスに保存されます。保存した編集データは「マイギャラリー」からいつでも編集できます。

番外編

塗りつぶされた四角を入れる

1. 四角を選択する 「■」のアイコンをタップします。
2. 四角を入れる スライド操作を使って四角を作成します。
3. 調整して完了 四角を任意の位置に移動させたり、レイヤーの不透明度を変更したり、文字を追加したりして、作業を完了します。
4. 参考アイキャッチ画像 四角、文字、枠を組み合わせて、魅力的なアイキャッチ画像を作成できます。

線を引く

1. 線を選択する ①、②の順でタップします。
2. 線を引く 線を引きたい場所をタップし、指をスライドさせます。
3. 調整して完了 線を移動させて調整し、作業が完了します。各線は個別のレイヤーに分けておくと、移動時に便利です。

写真を2枚読み込んでアイキャッチ画像を作成する

最後に、今まで説明した要素を組み合わせて、このアイキャッチ画像を作成しましょう！

T部長

1. 画像を2枚読み込む 今回、左の画像のように小さな写真を2枚読み込みました。2枚読み込むと、右の画像のように2枚の画像が重なるレイヤーができます。
2. 画像の大きさを調整する 画像を移動させると、微妙に隙間ができることがありますよね。そのため、①、②の順番で「拡大縮小ツール」を使います。画像の端の小さな四角をタップしながらスライドさせ、大きさを調整します。調整が完了したら、「確定」をタップします。両方の画像を調整したら、これで完了です。
3. 枠を入れる 新しいレイヤーを追加して、枠を入れます。
4. 四角を入れる また新しいレイヤーを追加し、四角を入れます。適切な大きさに調整するために、「自由変形ツール」を使用します。上下の中央にある四角を上下にスライドさせることで、縦幅だけを調整でき、非常に便利です。調整が完了したら、「確定」をタップして作業を終えます。
5. 文字を入れて完了 最後に文字を入力します。今回の設定で文字を入れましたが、文字の調整が完了したら、これで作業は完了です。

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

​¹​

まとめ 今回の記事では、アイキャッチ画像の制作手法と手順を、アイキャッチ画像を制作したことがない方にわかりやすく紹介しました。最初はデザイナーさんに教わりながらアプリを使ってみた経験もあり、最初はややこしいと感じることもありましたが、慣れてしまえば簡単に操作でき、通勤時間などの隙間時間にアイキャッチ画像を作成できるようになりました。

適当にスマートフォンで撮影した昔の写真も、少しの加工でアイキャッチ画像に使えます。アイキャッチ画像の作成経験がまだない方は、ぜひ一度挑戦してみてください！

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