今回はInstagramの基本的な画像の作り方について、お話しします。SNSのなかでもInstagramは、画像の投稿がメインとなるメディアです。テキストも記載できるものの、ユーザーは基本的に画像や動画を楽しむためのツールと考えてください。
SNSマーケティングでInstagramを作成する際には、投稿した画像の内容でユーザーのリアクションも変わってきます。今回は実演付きで画像の作り方について解説しますので、皆さんも一緒に画像を作ってみてください。
Instagramで画像を作成する3つのポイント
早速Instagramで画像を作っていきたいと思います。今回は以下で紹介する3つのポイントに絞って、画像の作り方について解説していきます。
- 商品紹介
- 実績・お客様の声
- ご自身の発信・思い
こちらの順番にしたがって、画像の作り方を見ていきたいと思います。画像を作るために、Canvaを起動して準備してください。まず今回の講座では、商品を紹介するための画像制作のポイントについて、見ていきます。
商品紹介用画像の作り方
まずは商品紹介用画像の作り方における注意点を、実演付きで紹介していきます。この段階で押さえておいてほしいポイントは、以下のとおりです。
- テンプレートを選ぶ
- 自分の商品画像をアップロードする
- 色を変更する
- テキストの色を変更する
- 一つのデザインでカラーは3色までが目安
- 画像のカラートーンを調整する
- イラストを入れてみる
- 透明度を変更する
以上のポイントを順番に実演付きで紹介します。Canvaを使いこなすために、皆さんも実際に手を動かしてみましょう。
テンプレートを選ぶ
今回はInstagram用の画像投稿になるので、以下のスクショのようにまずは「SNS」を選択してください。するといくつかのメディア用の素材が出てくるので、「Instagram投稿（4：5）」を選択しましょう。
Instagram投稿をクリックすると、縦横比4：5のサイズの画面が以下のスクショのように表示されます。左側のところにテンプレートがいろいろと出てきました。今回は商品紹介のための画像作りなので、上部の検索機能で「商品」と入力してみました。
上のスクショのように、商品紹介にマッチするテンプレートがいろいろと出てきました。自身の提供する商品にマッチするテンプレートを探して、使用してください。
自分の商品画像をアップロードする
私は今回、上のスクショのテンプレートを使ってみたいと思います。はちみつを紹介するようなデザインのテンプレートですね。実は私のお客さんのなかに、このようなはちみつを売っている方がいるのでこちらを使います。
こちらのテンプレートだけでも、ほぼ完成しているといっても過言ではないと思います。しかしちょっとオリジナルのものになるようにアレンジしていきます。以下のスクショのように今回は紫で囲まれた、メイン画像になる部分に手を加えたいと思います。
まず元の画像を消しましょう。もしすでに商品の画像データがあれば、左側のメニューのところに「アップロード」という項目があるでしょう。こちらをクリックしてください。
すると上のスクショのように、左側にアップロードに関するメニューがいろいろと表示されます。上部に「ファイルをアップロード」という項目があるので、こちらをクリックしましょう。
そしてアップロードしたい画像ファイルを選択してください。今回、私ははちみつに関する画像を持っていないので、Canvaに入っている素材を使いたいと思います。左端のメニューのなかにある「素材」をクリックしてください。
上部に「画像を検索」という項目があるので、こちらに「はちみつ」と入力してみます。はちみつに関する素材がいろいろと出てきました。この中で自分のイメージに合うものがないか、チェックしてみましょう。私の場合、以下のスクショのような画像を選んでみました。
ここでもう一つ前のスクショをご覧ください。元々テンプレートにあった画像を消去すると、緑色の丘のようなものと青空のイメージが表示されていますね。これは画像を収納するための箱のようなものだと思ってください。
適当な画像が見つかったら、その画像をそのままドラッグします。すると上のスクショのように空白になった画像スペースに選択したイメージが表示されます。
ドラッグしたときに、少し画像の位置がずれてしまうこともあるでしょう。その場合には画像のところにカーソルを持ってきて、ダブルクリックしてください。するとまたドラッグで画像を自由自在に動かせるようになります。適切な場所に移動させましょう。
画像の大きさも変えられます。画像の端の部分にカーソルを合わせると、上のスクショのようにカーソルのマークが変わります。マークが変わったところでドラッグさせると大きくも小さくもできますし、横長や縦長など形状も変更できます。
中には先ほど紹介した緑色の丘のようなものと青空のイメージが、テンプレートによっては表示されないものもあるかもしれません。その場合、該当する画像をクリックするとテンプレートの方に反映されます。そのうえで先ほど紹介した方法で、画像のサイズや形状を調整してください。
イメージ通りに画像をアップロードできたら、左下にある「完了」をクリックしてください。そうすれば、画像のアレンジは完了です。
上のスクショをご覧ください。アップロードした画像の左上のところに、ピカっと光るような演出がありますよね。もしこのまま画像を左に広げていくと、この演出部分が画像で隠れてしまいます。
もしこの演出部分を反映させたければ、素材の部分にカーソルを持ってきます。そして右クリックすると、さまざまなメニューが表示されます。その中に「レイヤー」という項目があるはずです。こちらにカーソルを合わせると、右側にいくつかメニューが表示されます。そのなかの「最前面に移動」を選択すると、対象の素材がほかに隠れることなく表示されるので利用してみてください。
色を変更する
上のスクショをご覧ください。先ほどアップロードした画像は緑ベースのものですよね。この緑に右上の素材もバランスを取るために合わせたいと思ったとしましょう。
この場合、対象の素材にカーソルを合わせてクリックしてください。すると上のスクショのように、画面の左上のところに丸に囲まれて色の表示されている箇所があるでしょう。スクショでカーソルの指し示している部分です。こちらをクリックすると、以下のように画面の左側が変化します。
このように左側にいろいろなカラーのメニューが表示されました。ちなみに素材で現在使用されているカラーは、紫色で囲まれています。この中から適当と思われる色を選択してください。
上のスクショの左下の部分に注目してください。「写真の色」という項目がありますね。こちらは写真の色から、勝手にカラーを抽出してくれる機能です。今回はオレンジなどが表示されています。緑とのバランスも決して悪くありません。もし表示されているオレンジのトーンが少しイメージと違った場合、カラーの画面上部に「新しいカラーを追加」という項目があるので、こちらをクリックしてみましょう。
上のスクショの左上のところに注目してください。このようにカラーパレットが表示されます。すると同じオレンジでも、いろいろなテイストのオレンジにアレンジできます。
ほかにも「スポイト」と呼ばれる機能を使って、色の指定を行う方法もあります。先ほどのカラーパレットの下部、カラーコードの書かれている右隣に鉛筆のようなアイコンがあるでしょう。こちらをクリックすると、白い丸が表示されます。
このカーソルを画像に移動させると、カーソルの指し示している部分の色を忠実に再現できます。上のスクショの場合、カーソルをバックの緑に合わせると円の部分も緑になっていますね。例えば商品のラベルの色に統一させたいときなどは、このスポット機能を使ってみるとよいでしょう。
もしほかの素材も同じ色で統一させたければ、対象の素材のところにカーソルを持ってきてクリックします。そして先ほど紹介したカラーアイコンをクリックすると、同じように左側にメニューが表示されます。この一番上部に「文書で使用中のカラー」という項目があり、該当の色が表示されます。この部分をクリックすれば、複数の素材を同じカラーで統一できます。
テキストの色を変更する
画像以外の素材の色を調整した結果、上のスクショのようになりました。ここで右上のカーソルの示している部分に注目してください。実はこの部分にテキストがあるのですが、カラーを調整した結果、目立たなくなってしまいました。この場合、テキストの色を変更することも可能です。
テキストの部分をクリックすると、画面上部に「A」というアルファベットに下線の引かれたアイコンがあるでしょう。こちらがテキストの色を変更するアイコンです。こちらをクリックすると、上のスクショのように左側にカラーのメニューがいろいろと出てきます。
今回は白に変更してみました。すると以下のスクショのように、テキストがはっきりと見えるようになりました。
一つのデザインでカラーは3色までが目安
画像をデザインする際に気をつけてほしいのは、何色使用するかです。一般的に一つのデザインあたり、3色までになるようにレイアウトを調整してみるのがおすすめです。今回は黒と緑、赤、オレンジと4色になってしまったので少し多すぎます。その場合には、テキストの色を揃えてみるとよいでしょう。
今回の場合、「新商品入荷」と「大切な方への贈り物に」の黒の部分を赤くすることで、3色に抑えられます。このようにあまりさまざまな色を使いすぎないように注意するのも、画像作成時のポイントです。
また上のスクショのデザイン部分の左上のところをご覧ください。線のようなデザインがありますね。こちらもCanvaのなかでよく見られる特徴的なデザインです。
このデザイン素材の色も自由に変更できます。この部分もほかの素材と同じ赤系のカラーに変更してみました。するとさらに整ったデザインに仕上がります。
画像のカラートーンを調整する
写真の色の調整を行うことも可能です。今回紹介しているデザインの場合、少し色が濃すぎて鮮明すぎるように感じるかもしれません。その場合、以下のスクショのように画像素材の部分にカーソルを合わせてクリックします。すると上部に「編集」と呼ばれるメニューがあるでしょう。
「編集」タブをクリックすると以下のスクショのように、左側にいろいろなメニューが表示されます。このメニューを活用すれば、基本的なデザインはそのままで印象やテイストを変更できます。例えば「フィルター」というメニューのなかの「ノルディック」を選択すると、以下のスクショのように画像が変わりました。
一つ前の画像と比較してみてください。変更前はビビッドな色合いでしたが、だいぶ淡く落ち着いた色になりました。色合いが変わると、レイアウトの印象が変わるかもしれません。その場合にはレイアウトやサイズなども微調整してみて、しっくりくるように試行錯誤してみましょう。
イラストを入れてみる
色味やサイズを調整したものが、上のスクショです。落ち着いた雰囲気で、バランスよくまとまりました。
今回はハチミツの写真素材を使って、デザイン作成してみました。しかし上の画像のように素材には写真のほかにも、イラストのものもあります。写真でイメージに合致するものが見つからなければ、イラストでめぼしいものがないか探してみましょう。
上のスクショのように写真だけでなく、イラストも追加できます。キュートさがプラスされてませんか？
この講座ではデザイン作成用のソフトとして、Canvaをおすすめしています。Canvaがおすすめの理由として、画像やイラストの色を自由自在に変えられる点は見逃せません。
透明度を変更する
Canvaの機能として、ここでもう一つ紹介しておきたい特徴があります。それは「透明度」と呼ばれる機能です。上のスクショの上部のメニューのなかに、アニメーションの左隣に格子状のアイコンがあるでしょう。こちらが透明度のアイコンです。
透明度を低くすると、対象の素材が薄くなります。背景になじみやすくなります。逆にくっきり表示させたければ、透明度を高くしていきましょう。もし素材をレイアウトしてもしっくりこないようであれば、透明度を調整してみるとよいでしょう。
先ほど使ったイラストも活かして透明度を調整し、イラストを2つに増やして、一方を右下に持っていきました。また右下のイラストを「レイヤー」→「背面に移動」を選択した結果が、以下のスクショです。
だいぶバランスよく、いい感じでまとまったのではないでしょうか？冒頭のテンプレートのスクショと比較してみてください。だいぶ印象が変わったのではありませんか。このようにCanvaのテンプレートをもとにして、アレンジをいろいろと変えれば自分オリジナルのデザインになると思います。
まとめ
いかがでしたか？今回はInstagram用の画像のなかでも、商品紹介の作り方についてお話ししました。商品紹介用の画像を作成するとなると、専門知識のない方からすればハードルが高いように感じられるかもしれません。
しかしCanvaを使用すれば、テンプレートが豊富にラインナップされています。皆さんのイメージに合致するものがきっと見つかるでしょう。テンプレートをベースに、後は自分なりにアレンジを加えるだけです。
今回紹介したように、色やサイズを変えるのもそれほど難しくありません。直感的に操作できるので、デザインに関する専門知識やスキルがない方でも簡単に制作できます。今回解説した内容を思い出しつつ、自分オリジナルの商品デザインを作成してみてください。
次回は実績紹介とお客様の声の作り方について、紹介します。