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