ろんぶり

ユニクロ商品レビュー、スポーツ・趣味 などを書いたブログ

アイキャッチはPhontoとFoodieを使えばスマホで簡単にサクッと作れる

f:id:longestwoodenbridge:20180511080139j:plain

アイキャッチを作るのは楽しいんですけど、なかなか難しいですよね。

僕は『Phonto』と『Foodie』という2つのアプリを使ってアイキャッチを作っています。


この記事では、

アイキャッチをもっと簡単に見やすく作りたい

文字の背景を透かしてみたい

文字の色をかえたり、大きさをかえたいけどやり方が分からない

という方のために、自分なりのアイキャッチの作り方をわかりやすくまとめようと思います。


僕はスマホだけでアイキャッチを作っています。

なのでスマホで作業をすることが多い方にも、参考になる部分があるかもしれません。

記事中の説明やスクショはすべてスマホです。


というわけで、

『アイキャッチはPhontoとFoodieを使えばスマホで簡単にサクッと作れる』

をご紹介します。

自分なりのアイキャッチのパターン

f:id:longestwoodenbridge:20180509062822j:plain

ようやく自分なりのアイキャッチのパターンが決まってきました。

①基本は白文字に黒のストローク(縁取り)
②文字の背景は白の透かし
強調文字は水色


だいたいこのパターンで作っています。

最近作ったアイキャッチは上の写真です。


Foodieのフィルターを使うと、写真の雰囲気がガラっとかわってオシャレになります。

Phontoは文字入れに使っています。

Phontoの使い方

Phontoの使い方は次のとおりです。

①白字に黒のストローク(縁取り)
②文字の背景は白の透かし
③文字の色をかえるときは切り貼り
④文字のサイズをかえるときも切り貼り
⑤2行や3行でもやることは同じ
⑥最後の配置調整は手動で微調整


白字に黒のストローク

f:id:longestwoodenbridge:20180509074403j:plainf:id:longestwoodenbridge:20180509074415j:plain

①文字を入力します(上の写真は例として「washable」)
②文字の色はデフォルトの白色
③スタイル→ストローク(縁取り)を選択


f:id:longestwoodenbridge:20180509074615j:plainf:id:longestwoodenbridge:20180509074641j:plain

④ストロークの色は黒色を選択
⑤幅を大きくしたいので「+」ボタンで大きくする
⑥僕の場合は「005」まで大きくしています

文字の背景は白の透かし

f:id:longestwoodenbridge:20180509074859j:plainf:id:longestwoodenbridge:20180509075003j:plain

①スタイル→背景を選択


f:id:longestwoodenbridge:20180509075134j:plainf:id:longestwoodenbridge:20180509075147j:plain

②背景の色は白色を選択
③透明度がデフォルトでは「255」
④僕の場合は「110」にします
⑤真ん中の丸い水色マークを左へ動かしてざっくり調整
⑥細かい微調整は右の「―」(「+」)ボタンで

※上にある見本(↑マークの先)で透明度の感じが分かります


f:id:longestwoodenbridge:20180509075730j:plainf:id:longestwoodenbridge:20180509075746j:plain

⑦背景の幅を大きくします
⑧僕の場合は最大の「300」まで広げます
(画面の両端まで背景の白の透かしを伸ばしたいからです)

⑨背景の高さは基本的にそのまま「000」


f:id:longestwoodenbridge:20180509075937j:plainf:id:longestwoodenbridge:20180509075949j:plain

背景の幅が大きすぎて位置がズレている場合は、センタリングをすれば文字が真ん中にきます。

・移動を選択
・「→A←」ボタンを押せば左右のセンタリング
・「↓A↑」ボタンを押せば上下のセンタリング


※背景の幅は入力した文字数が少ないときは、最大の300まで大きくしても両端まで届かないことがあります。

そのときは、最初に入力した文字の前後にスペースを入れておきます。

そうすると、前後のスペースで広がった分だけ、背景の幅も同じように広がります。


スペースを入れるときは、前後で同じ数のスペースを入れてそろえてください。

入れたスペースの数がそろっていないと、センタリングをしたときにズレてしまいます。

途中で文字の色をかえるときは切り貼り

f:id:longestwoodenbridge:20180509073630j:plainf:id:longestwoodenbridge:20180509073642j:plain

上の左の写真が修正前、右の写真が修正後です。

「タグ」の2文字を白色から水色にかえました。


色の設定は最初に指定した1色なので、違う色にしたいときは「切り貼り」をしています(ほかにもやり方があるかもしれません)


f:id:longestwoodenbridge:20180509073533j:plainf:id:longestwoodenbridge:20180509073545j:plain

やることは色をかえたい文字の「タグ」を切り貼りします。

まず最初に入力した「タグの位置」から一度「タグ」を消します。


その上で消した2文字分のスペースを入れます(右の写真)

スペースを入れる理由は、あとでセンタリングをしたときにズレないようにするためです。


f:id:longestwoodenbridge:20180509085311j:plainf:id:longestwoodenbridge:20180509085318j:plain

「タグ」の2文字を新しく入力します。

左の写真は最初に入力した「タグ」を消す前の状態です。

分かりやすいように、新しく入力した「タグ」をその上に配置してみました。


右の写真は最初に入力した「タグ」を消した状態で、その上に新しく入力した「タグ」(水色にしてある)を配置してあります。

これから「タグ」の位置を微調整します。

なるべく最初に入力してあった「タグ」の位置に重なるようなイメージで調整します。


f:id:longestwoodenbridge:20180509085433j:plainf:id:longestwoodenbridge:20180509085447j:plain

微調整の方法は4方向の矢印ボタンでポチポチと地味に動かしていきます。 

上下をそろえるコツは、最初に入力した文字にワザと重ねて、文字の下のラインを合わせることです。

上の写真の場合だと、新しく入力した水色の「タグ」の2文字を、最初に入力してある「位置」の2文字に重ねるイメージです。


重ねて上下を合わせてから、「タグ」の2文字を左にズラして位置を合わせます。

完成した状態は右の写真です。

途中で文字の大きさをかえるときも切り貼り

f:id:longestwoodenbridge:20180509094830j:plainf:id:longestwoodenbridge:20180509094843j:plain

上の左の写真が修正前、右の写真が修正後です。

「の」を小さくして水色にかえました。

比較しやすいように、「の」をかなり小さめにしてみましたがバランスが悪いですね…


やることは小さくしたい文字の「の」を切り貼りします。


f:id:longestwoodenbridge:20180509095005j:plainf:id:longestwoodenbridge:20180509095019j:plain

まず最初に入力してある「の」を一度消します。

その上で消した1文字分のスペースを入れます(右の写真)


f:id:longestwoodenbridge:20180509095150j:plainf:id:longestwoodenbridge:20180509095204j:plain

新しく入力した小さな「の」の位置を調整します。

上の写真の場合だと、“ど真ん中”に合わせるだけだったのですごく簡単でした。


上下のセンタリングと左右のセンタリングのボタンを押せば、ピタッとセンターへいきます。

4方向の矢印ボタンで微調整してもOkです。

センタリングが使えるときは使った方が便利ですけど。

2行でもやることは同じ

f:id:longestwoodenbridge:20180509103804j:plainf:id:longestwoodenbridge:20180509110650j:plain

上の左の写真が修正前、右の写真が修正後です。

「タグ」「有効」を水色にして、「の」「を」を小さくしました。


やることは「タグ」「有効」「の」「を」の4文字を切り貼りします。


f:id:longestwoodenbridge:20180509103843j:plainf:id:longestwoodenbridge:20180509110845j:plain

まず最初に入力した文字(左の写真)から、「タグ」「有効」「の」「を」を消します。

消した部分に同じ分のスペースを入れます(右の写真)


f:id:longestwoodenbridge:20180509111030j:plainf:id:longestwoodenbridge:20180509111009j:plain

新しく入力した「タグ」「有効」「の」「を」の4文字を加工しておきます。

「タグ」「有効」は水色へ、「の」「を」は小さく(左の写真)


順番に位置を調整します。

まずは「タグ」から合わせます(右の写真)

別に「タグ」から合わせなくても大丈夫です。


f:id:longestwoodenbridge:20180509111124j:plainf:id:longestwoodenbridge:20180509111138j:plain

「有効」の位置を合わせます(左の写真)

「の」の位置を合わせます(右の写真)


f:id:longestwoodenbridge:20180509111235j:plainf:id:longestwoodenbridge:20180509110650j:plain

最後に「を」の位置を合わせます(左の写真)

完成です(右の写真)

文字の配置を調整するときの注意点

f:id:longestwoodenbridge:20180509112301j:plainf:id:longestwoodenbridge:20180509110650j:plain

文字の配置調整に関して1つだけ注意点があります。

それはベースになる最初に入力した文字の位置を最初に決めて、そのあとはさわらない(動かさない)ことです。


文字を重ねていく途中で、ベースになる文字にさわると(動かすと)、重ねた文字がボヤけます(左の写真)

ボヤけるというか、背景の白い透明部分の下に入ってしまう感じです。


文字を重ねているときに、うっかりベースの文字をさわるとダメになるので気をつけてください。

また最初からやり直しになってしまいます…

自分なりに気をつけていること

Phontoで加工するときに、気をつけていることは次のとおりです。

あまり色を使いすぎない

文字サイズを極端に小さく(大きく)しない

ブログのテーマカラーと合わせる

ストローク(縁取り)は太すぎると文字がぼやける

背景の透明度は濃すぎず薄すぎない「110」が自分の好み


Foodieの使い方

Foodieを使うと写真の雰囲気がガラっとかわります。

フィルターもたくさんあるので、いろいろな写真加工がすぐにできるんです。

使用例:食べ物

f:id:longestwoodenbridge:20180509123016j:plainf:id:longestwoodenbridge:20180509123042j:plain

桜えびの海鮮丼をFoodieを使って加工してみました。

上の左の写真が何もしていない状態です。

右の写真がFoodieで加工したものです。


明るくなって透明感がでて、新鮮で美味しそうな感じにかわったと思います。


f:id:longestwoodenbridge:20180509123137j:plainf:id:longestwoodenbridge:20180509123158j:plain

別のフィルターを使うと、また違う雰囲気が出ます。

写真を選んで、フィルターを選ぶだけなのでとても簡単です。

使用例:洋服

f:id:longestwoodenbridge:20180509124703j:plainf:id:longestwoodenbridge:20180509124716j:plain

Foodieを洋服に使ってみるのも楽しいです。

上の左の写真が何もしていない状態です。

右の写真がFoodieで加工したものです。


f:id:longestwoodenbridge:20180509124753j:plainf:id:longestwoodenbridge:20180509124806j:plain

同じように別のアングルの写真を試してみました。


僕はユニクロの商品をブログで紹介しています。

そのときのアイキャッチは、Foodieで明るくキレイに加工しています。


ブログの記事中にのせる写真については、基本的にFoodieで加工をしていません。

洋服の雰囲気が結構かわってしまうので、読者の方に間違った誤解をあたえないためです。


今はアイキャッチに限定してFoodieを使っています。

アイキャッチでアピールしないと、読んでもらえないですからね…

撮ったあとの写真にも使える

Foodieは以前撮った写真にも使えるのが大きな特徴です。

ネットでダウンロードした写真にも使えます。

地味ですが、すごく使い勝手が良いポイントです。

Foodieマークは簡単に消せる

f:id:longestwoodenbridge:20180509122013j:plain

Foodieを使って加工をすると、上の写真のように右下に「Foodieマーク」が表示されます。

このFoodieマークは設定で簡単に消すことができるんです。


f:id:longestwoodenbridge:20180509121457j:plainf:id:longestwoodenbridge:20180509121514j:plain

上の左の写真にある、左上の「・が横に3つ並んだボタン」を押してから、右上の「設定ボタン」を押します。

次に上の右の写真にある「Foodieマーク」の右側のスライド式のボタンを解除すればOKです。


つい忘れていることがあるので、Foodieマークを表示したくないときは設定の解除をしておきましょう。

PhontoとFoodieでスマホでサクッとアイキャッチ

アイキャッチは記事にとって、とても大事な部分ですよね。

アイキャッチを作るのは時間がかかります。

でも慣れてくると、意外と簡単に作れるようになります。


PhontoとFoodieは便利なアプリなので、良かったら使ってみてください。

スマホだけでもサクっとアイキャッチが作れますよ。



あわせて読みたい!

>>>フリー写真素材サイト PIXELES|簡単で便利な【類似の写真】をお忘れなく

www.ronburi.com

>>>読みやすいブログの文章のリズムはタン・タン・タタタン・ターン!?【売る文章51の技】読書案内

www.ronburi.com


『アイキャッチはPhontoとFoodieを使えばスマホで簡単にサクッと作れる』を最後まで読んでいただき、ありがとうございます。

>>>当ブログの【ブログ関係】の一覧ページへ