ブログ関係

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

投稿日:2018年5月9日 更新日:

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」が自分の好み

 

ブログのテーマカラーと合わせることについては、現在少しだけズレているかもしれません。

2018年6月に「はてなブログ」から「WordPress」へ移行してテーマをかえたからです。

 

  • 旧カラー:ブルー系
  • 現カラー:パープル系

 

強調文字のブルーは、違和感が強くないと思うのでこのまま続けるつもりです。

以前のアイキャッチを全部かえるのはすごく大変なので…。

 

 

スポンサーリンク

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は便利なアプリなので、良かったら使ってみてください。

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

 

 

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

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

人気記事

1

(出典:ユニクロ)   「え、ユニクロのTシャツにあのゴンさんが!?」 「うそ、ヤムチャしやがってまであるの・・」   そうなんです。あるんです。 ユニクロと週間少年ジャンプのスペ ...

2

  本の処分って意外と困りますよね。 とくに大量の本を処分するときは、とても困ります。 1冊なら全然軽いんですけど、数十冊単位となるとそれなりの重さに…   大量の本を売る(処分す ...

3

  「少し肌寒いから、上に1枚だけ服を着たいんだけど…」 「でも、厚手の服を着ると、逆に暑くなりそうだし…」   このような感じで、洋服選びに困るシーンがありませんか? 『寒くて困 ...

4

  「Tシャツもいいけど、やっぱり襟があるポロシャツってカッコいいよね」 「でもポロシャツだと汗をかいたときにベッタリしない?」   襟のあるポロシャツは僕も大好きです。 でもカッ ...

5

  「暑いときって何も履きたくないよね」 「でも何も履いてないと怒られるんだよね…」   その気持ちよく分かります。 僕もできれば何も履きたくないので、暑いときは下着1枚でぶらぶら ...

6

  「裁判を見てみたいけどよくわからない」 でも大丈夫です。難しそうなイメージがする裁判ですが意外と身近なんです。   実は裁判は誰でも無料で見学できることをご存知ですか。 例外と ...

7

  シューズ選びは『足裏の長さ』を合わせるだけでは不十分です。 ①足裏の長さ ②足の横幅 ③足の甲の高さ をしっかり合わせるとシューズがしっかりフィットして一日履いていても痛くなりにくいです ...

-ブログ関係

Copyright© ろんぶり , 2018 All Rights Reserved.