スマホアプリだけでブログのバナー画像を作る方法

この記事は約7分で読めます

近年のスマホアプリの充実は驚くべきものがあります。

特に画像系のソフトの発展は著しく、従来パソコンでしか行えなかった高度な編集作業が、スマホだけで完結できるようになっています。

今回はスマホの画像アプリを使って、ブログ用の画像素材を作成する方法を解説します。

スマホアプリからブログの画像編集を行う

ブログでは記事内に画像を掲載することが多く、その画像を編集する作業にはパソコン用ソフトを使うのが一般的でしたが、最近は高機能なスマホ用の画像編集アプリが次々と登場。

パソコン用ソフトと性能面でほぼ遜色ないこともあって、画像のスマホアプリでの編集は、ごく当たり前になりつつあります。

スマホの画像編集アプリの具体的な活用シーンを挙げてみましょう。

記事に掲載する画像を補正する

スマホで撮影した写真をブログの記事内に掲載する際、スマホの画像編集アプリを使って、写真の明るさや色味を調整することで、写真全体の印象を良くすることができます。

失敗気味の写真をリカバリーするといった使い方も可能です。

ブログのアイキャッチ用バナーを作成する

ブログの記事には、読者の目を惹き付けるバナーが必要ですが、スマホの画像編集アプリはバナーの作成にも対応

写真の中にデザインされたタイトルを追加したり、画像に演出を加えたりといった処理が行えます。

写真のバナーサイズへの切り抜きにも対応し、バナー制作をスマホアプリだけで完結させることができます。

スマホアプリでの画像編集には、スマホの特性を活かしたメリットがいくつもあります。

例えば、スマホで撮影した写真をブログに掲載する場合、スマホアプリなら撮ったデータをそのまま加工できるので、パソコンへの移動がない分、工数を削減できます。

また写真を撮影したら、その場でスマホアプリを使ってバナーを試作、頭の中にあるイメージを実際に形にして確かめることも可能です。

今回は画像編集アプリの定番のひとつである「ibis Paint」のAndroid版を使って、ブログの記事内に掲載する画像と、アイキャッチ用のバナーを作成する方法を解説しましょう。

スマホで撮った写真を編集する準備をする

さっそく「ibis Paint」での画像の編集方法について解説していきましょう。「ibis Paint」の操作画面は、「マイギャラリー」と「編集」に分かれています。

マイギャラリーは編集前や編集後の画像を一覧表示したり、ファイル形式を変換したりするための画面で、「編集」は、画像の加工作業を行うための画面となります。

まずは、スマホで撮影した写真を「ibis Paint」の「マイギャラリー」に登録して、いつでも編集できる状態にするところまでの手順を説明しましょう。

「ibis Paint」をインストールして起動し、トップ画面の「マイギャラリー」をクリックしましょう。

初期状態ではマイギャラリーには何も表示されませんので、左下の「+」をクリックします。

「新規キャンバス」の画面が開いたら、「写真読み込み」をタップしましょう。

スマホ内に保存されている写真の中から加工したいものを選択、Dropboxなどのオンラインストレージ内の写真を選択することも可能です。

写真を選択すると、キャンバスサイズのダイアログが表示されますが、スマホの処理が重くなるのを避けるために、「推奨」のサイズを選択しましょう。

「線画抽出」のダイアログですが、今回は利用しない機能なので「キャンセル」を選択します。

マイギャラリーに選択した写真が追加されたのを確認します。

記事に掲載する写真の明るさと色味を調整する

加工したい写真をマイギャラリーに登録したら、いよいよ画像編集を始めます。

ブログに掲載する写真は、無加工のまま載せている人も多いと思いますが、一手間加えてディテールの調整を行うと、写真の印象が大きく変わります。

特に重要なのが、明るさと鮮やかさの調整で、最近のスマホ搭載のカメラは高性能化が進み、光量が少ないロケーションでも鮮明な写真が撮れますが、背景が白いウェブページに表示すると、どうしても暗く見えてしまいがちです。

ウェブに掲載する写真は、やや明るすぎるくらいに補正した方が印象は良くなりますので、ここでは「明るさ・コントラスト」と「彩度」を変更していきます。

あまり加工しすぎると人工的で不自然な色彩になるので、各設定の数字を変更しながら、最適なバランスを探してみてください。

写真の色調を調整する

マイギャラリーで編集したい写真が表示された状態で、右下の「編集」をタップします。

背景がグレーになり、画像編集用の画面が起動したのを確認します。

下部メニューの左から2番目のアイコンをタップして開き、「フィルター」をタップしましょう。

様々なフィルターが表示されますが、今回はより画面を明るく鮮やかにしたいので、「明るさ・コントラスト」のフィルターをタップします。

「明るさ」と「コントラスト」のバーを動かし、写真の変化を確認しながら調整しましょう。

次に「色相・彩度・明度」のフィルターをタップし、それぞれのバーを調整します。

写真の画像補正が完了したら、下部メニューの左端の「←」をタップして「マイギャラリーに戻る」を選択しましょう。

マイギャラリーの画面に戻ったら、下部メニューの「︙」をタップし、「画像を保存(JPEG)」を選択しましょう。

これでスマホのギャラリーに編集した写真が保存されます。

写真に文字と囲みを追加してバナーを作成する

続いて、スマホから取り込んだ写真を素材に、バナーを作ってみましょう。バナーの制作には2段階の工程が必要となります。

ひとつ目は写真をバナーのサイズに切り抜く作業ですが、ブログの冒頭部分にアイキャッチとして使われる画像のアスペクト比は16対9が一般的なので、この比率で「キャンバスサイズ」か「トリミング」の機能を使って写真を切り抜きましょう。

もうひとつの工程は、バナーの中にタイトルロゴを設定する作業ですが、「ibis Paint」では、多数のフォントを収録しており、多彩な表情のタイトルロゴの作成が可能です。今回はロゴらしくなるようにフォントの外側に枠線も追加しています。

さっそく実際の作業手順を見ていきましょう。

写真をバナーのアスペクト比で切り抜く

編集画面で下部メニューの左から2番目のボタンから、「キャンバス」をタップしましょう。

メニューから「キャンバスサイズ」をタップします。

キャンバスサイズの設定が表示されますが、ここでは標準的な16対9のバナーを作成するので、「縦横比維持」を無効にし、「縦(px)」と「高さ(px)」にサイズを入力します。

もしも、切り抜く位置を中心からずらしたい場合は、下の矢印で設定しましょう。

キャンバスサイズのアスペクト比が16対9に変更されました。

囲みのあるタイトルロゴを作成する

今度はタイトルロゴの枠線を作成してみましょう。下部メニューの左から2番目のボタンをタップして、「コマ割り」を選択します。

写真をタップすると「枠追加」ボタンが表示されるので、ボタンをタップします。

枠は画面いっぱいの状態で表示されますので、「左右余白」と「上下余白」のバーを操作して、適切なサイズにしましょう。尚、「枠太さ」では枠線の太さを変更できます。

今度は枠線の中に文字を入れます。下部メニューの左から2番目のボタンをタップし、「文字入れ」を選択しましょう。

写真をタップすると「文字追加」ボタンが表示されるので、タップしましょう。

文字の入力画面が表示されますので、表示させたい文字を入力しましょう。また、フォントを変更したい場合は「フォント」をタップしていきます。

フォントが一覧で表示されるので選択しましょう。

最初からインストールされている「プリインストール」だけでなく、追加のフォントをオンラインからダウンロードして利用することも可能です。

下部メニューの「サイズ」を開くと、フォントの大きさを調整できますので、写真を見ながらバーを動かしましょう。

「スタイル」では「文字色」と「ふちどり色」を調整できます。文字が背景に埋もれて見えにくい場合は、ふちどり色を設定しましょう。

黒だと文字が浮き上がり過ぎるので、グレーなどの中間色を選択するのが基本で、ふちどり線の太さも目立ちすぎない程度に設定しましょう。

バナーが完成したら、下部メニューの左端の「←」をタップして「マイギャラリーに戻る」をタップします。

マイギャラリーで、完成したバナーを確認していきます。

下部メニューの「︙」をタップして、「画像を保存(JPEG)」を選択し、スマホのギャラリーに作成したバナーを保存しましょう。

まとめ

今回は、スマホの画像編集アプリを使って、ブログの記事で使う写真やアイキャッチ用のバナーを作成する手順を解説しました。

「ibis Paint」は、スマホの画像編集アプリの中ではトップクラスの完成度を誇ります。

パソコン用の画像編集ソフトとしてはAdobe社のPhotoshopが有名ですが、「ibis Paint」はそれに匹敵する機能を備えており、今回紹介したようなバナーの作成であれば、ほとんど遜色のないクオリティのものを作成できます。

今回紹介した機能のほかにもレイヤーブラシスポイト自動選択といった画像編集ソフトでお馴染みの機能にはすべて対応しています。

インタフェースがコンパクトにまとまっている分、パソコンの画像編集ソフトよりも使いやすく感じる人もいるでしょう。

スマホでの画像編集で可能なことはほぼ網羅したアプリなので、写真撮影を多用している人は、積極的に活用していきましょう。

誰でも10分!WordPressブログの始め方

ブログを始めるには、ライブドアブログやはてなブログといった無料ブログを使う方法、
あるいはWordPressなどを使用する方法があります。

まだWordPressを持っていない人でも、簡単に準備できる方法を以下の記事で解説してます。
初心者でもわずか10分で始められるので、参考にしてみてください。

合わせて読みたい

【完全ガイド】誰でも10分!WordPressブログの始め方

アフィリエイトブログを始めるなら「お名前.com」

「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。

アフィリエイトに挑戦してみようと考えている方は、以下のリンクから、ぜひご利用ください!

お名前.comで
アフィリエイトブログを
はじめる

Facebookシェア Twitterシェア LINEシェア はてなブックマークシェア

このサイトの管理人
知るくま先生

国内最大級のドメイン公式登録サービス お名前.comの担当者。Webの制作から運用までのハウツーを初心者にも分かりやすく解説します!

WEB学園をご覧になった方限定

ブログ作成なら独自ドメインがオススメ
[.info]0円クーポン適用中

クーポンをもらう

 

\ 今なら無料 /ブログを始めるなら
「お名前.com」

「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインとあわせてWordPress対応のレンタルサーバーも利用できるので、初めての方でもスムーズに始められます。

\ 3分でできる /内容を確認してみる