ランディングページの画像制作にオススメの6つのツール
2022.3.15
ランディングページで成約率を高めるには、画像の使い方が重要です。まず印象的な画像でユーザーを引きつけます。成約まで持ち込むためには商品あるいはサービスの説明や使用感が十分に伝わる画像、さらに、その商品やサービスを購入するメリットがイメージできる画像があると効果的です。これらの画像を自分で加工できるGIMP、Paint.NETなどの無料ツール、Illustrator、Photoshopなどの有料ツールを紹介します。
目次
はじめに
ランディングページの設置で成約率が上がることはわかっているけれども、プロに頼むお金も時間も無い。
以前プロに頼んだけれども、納得がいかなかった。このような経験を持つサイト管理者は意外に多いものです。
ランディングページで大切なのは、最後まで読んで成約まで持ち込む「見せる工夫」です。
今回は、ランディングページを自作してみようという人にオススメの画像制作ツールを6つ紹介します。
以前プロに頼んだけれども、納得がいかなかった。このような経験を持つサイト管理者は意外に多いものです。
ランディングページで大切なのは、最後まで読んで成約まで持ち込む「見せる工夫」です。
今回は、ランディングページを自作してみようという人にオススメの画像制作ツールを6つ紹介します。
ランディングページを効果的に利用する方法とは?
1つ目は直接的なアクセス流入数を増加させることです。
ランディングページで最も早く成果を上げる方法は流入数を増加させることです。
一般的な方法として、リスティング広告の利用が考えられますが、SNSでのPRや、広告の二次元バーコードを利用して流入を増やす方法もあります。。
これらをうまく活用し、コストを抑えながらアクセスの数を増加させましょう。
一般的な方法として、リスティング広告の利用が考えられますが、SNSでのPRや、広告の二次元バーコードを利用して流入を増やす方法もあります。。
これらをうまく活用し、コストを抑えながらアクセスの数を増加させましょう。
2つ目は通常ページからランディングページへ誘導させることです。
効果的な施策として通常ページとランディングページを連携させることが挙げられます。
例えば、教育系のコンテンツは作成しやすく、検索結果上位を獲得しやすいとされています。
しかし、コンバージョン率が低いというデメリットも存在します。
そこで、それらのページにランディングページに誘導するバナー設置することをおすすめします。
そうすることで、より良い成果が期待できるでしょう。
また、コストパフォーマンスを高めるためには通常ページと連携させる必要があります。
SEOに強いページは集客に特化し、訪問者に行動させる部分はランディングページに任せるといったように、通常ページとランディングページをうまく組み合わせると良いでしょう。
バスケットボールで例えると、司令塔の選手が味方選手とパス交換やドリブルをしながらボールを運んでいきます。
ポジションの入れ替えなども行いながら、フリーになったゴール下の選手にゴールを決めてもらうといったイメージです。
つまり、通常ページとランディングページは密接に関わっている必要があるのです。
また、近年、ネット広告は価格が高騰しています。
ネット広告に頼ってばかりでは、なかなか効果が出ない時代になっています。
そのため、通常ページでSEOをうまく活用しながらランディングページの効果を引き出すと良いでしょう。
例えば、教育系のコンテンツは作成しやすく、検索結果上位を獲得しやすいとされています。
しかし、コンバージョン率が低いというデメリットも存在します。
そこで、それらのページにランディングページに誘導するバナー設置することをおすすめします。
そうすることで、より良い成果が期待できるでしょう。
また、コストパフォーマンスを高めるためには通常ページと連携させる必要があります。
SEOに強いページは集客に特化し、訪問者に行動させる部分はランディングページに任せるといったように、通常ページとランディングページをうまく組み合わせると良いでしょう。
バスケットボールで例えると、司令塔の選手が味方選手とパス交換やドリブルをしながらボールを運んでいきます。
ポジションの入れ替えなども行いながら、フリーになったゴール下の選手にゴールを決めてもらうといったイメージです。
つまり、通常ページとランディングページは密接に関わっている必要があるのです。
また、近年、ネット広告は価格が高騰しています。
ネット広告に頼ってばかりでは、なかなか効果が出ない時代になっています。
そのため、通常ページでSEOをうまく活用しながらランディングページの効果を引き出すと良いでしょう。
3つ目はスマートフォンでの閲覧に対応することです。
近年は、一人一台スマートフォンを持っているといっても過言ではありません。
そのため、以前はパソコンからのアクセスが大半を占めていましたが、現在はスマートフォンからのアクセスもかなり増加しているのです。
実際に、20パーセントから40パーセントはスマートフォンからのアクセスとなっています。
今後は、さらにこの数字が大きくなっていくことが予想されます。
そのため、ランディングページがスマートフォンに対応しているものでなければ、訪問者は記事を読みづらくなってしまいます。
その結果、多くの訪問者が途中で離脱し、コンバージョンを獲得するチャンスを逃してしまうのです。
今から、ランディングページを公開しようとしている場合は、スマートフォンに対応したデザインにする必要があります。
そのため、以前はパソコンからのアクセスが大半を占めていましたが、現在はスマートフォンからのアクセスもかなり増加しているのです。
実際に、20パーセントから40パーセントはスマートフォンからのアクセスとなっています。
今後は、さらにこの数字が大きくなっていくことが予想されます。
そのため、ランディングページがスマートフォンに対応しているものでなければ、訪問者は記事を読みづらくなってしまいます。
その結果、多くの訪問者が途中で離脱し、コンバージョンを獲得するチャンスを逃してしまうのです。
今から、ランディングページを公開しようとしている場合は、スマートフォンに対応したデザインにする必要があります。
4つ目はヒートマップを利用して改善することです。
訪問者のニーズに沿った構成でなければ、ランディングページの成果は出ません。
手当たり次第に広告費をつぎ込み、訪問者を増加させれば良いというわけではないのです。
ランディングページの情報が不十分だったり、ユーザーインタフェースに不備があったりするとコンバージョンにつながりません。
訪問者目線でランディングページの構成や、デザイン、ボタンの配置などを考えるようにしましょう。
実際の訪問者の動きや傾向を見ながら改善する際におすすめなのがヒートマップです。
ヒートマップでは、訪問者がどこを多くクリックしているかといった動きを読み取れます。
そのため、訪問者の関心が強い部分が一目で判断でき、関心が弱い部分は改善する必要があるということになります。
ヒートマップを利用して常に改善し効果的なランディングページを作成することが重要です。
手当たり次第に広告費をつぎ込み、訪問者を増加させれば良いというわけではないのです。
ランディングページの情報が不十分だったり、ユーザーインタフェースに不備があったりするとコンバージョンにつながりません。
訪問者目線でランディングページの構成や、デザイン、ボタンの配置などを考えるようにしましょう。
実際の訪問者の動きや傾向を見ながら改善する際におすすめなのがヒートマップです。
ヒートマップでは、訪問者がどこを多くクリックしているかといった動きを読み取れます。
そのため、訪問者の関心が強い部分が一目で判断でき、関心が弱い部分は改善する必要があるということになります。
ヒートマップを利用して常に改善し効果的なランディングページを作成することが重要です。
ランディングページで成約率を高める画像の使い方
ユーザーがランディングページに慣れてしまった現在では、クリックした先がランディングページとわかると、「平均3秒で直帰する」と言われています。
ユーザーの直帰率や離脱率を抑えるためには、画像の使い方が決め手と言われています。
ユーザーの直帰率や離脱率を抑えるためには、画像の使い方が決め手と言われています。
画像でユーザーを引きつける
成約以前に、ランディングページを最後まで読んでもらえるかどうか。うんざりしてランディングページを閉じてしまうユーザーを引き止めることが必要です。
SNSにおいては、画像のある投稿のほうが、文字のみの投稿よりもリアクションが増える傾向にあります。ランディンページでもまず、印象的な画像でユーザーを引きつけましょう。
ユーザーの目をひく画像は、芸術写真のようなクオリティの高さではなく、斬新性、躍動感、色使いなどのオリジナリティが求められると言われています。
SNSにおいては、画像のある投稿のほうが、文字のみの投稿よりもリアクションが増える傾向にあります。ランディンページでもまず、印象的な画像でユーザーを引きつけましょう。
ユーザーの目をひく画像は、芸術写真のようなクオリティの高さではなく、斬新性、躍動感、色使いなどのオリジナリティが求められると言われています。
効果的に画像を使って成約率を高める
無事ランディングページを読んでもらっても、成約に結びつかなければ意味がありません。販売したい商品やサービスについて効果的に説明している画像や、商品やサービスの魅力を十二分にアピールする画像の利用が求められています。
画像だけではなく、動画やアニメを使うのも効果的です。
画像だけではなく、動画やアニメを使うのも効果的です。
意外に大切なこと―—デバイスに適合した画像サイズに
せっかくの良い画像でも、サイズが大きすぎると表示時間が長くなり、それだけでユーザーは直帰・離脱してしまいます。スマートフォンでの閲覧が多い商品の場合は特に注意が必要です。画像はデバイスの画面で表示される大きさと同じサイズに加工しましょう。
画像制作ツールを使って自分で画像を加工する
「画像の加工は専門知識がないとできないのでは?」
「デザイナーでもないのにランディングページの画像をつくったりできるのだろうか?」
という心配はもっともです。しかし、プロに任せれば美しい出来栄えになるかもしれませんが、必ずしも思い通りに仕上がらない、納期に時間がかかってしまう、などの難点もあります。
思い切って自分で画像を加工してみてはいかがでしょうか。
「デザイナーでもないのにランディングページの画像をつくったりできるのだろうか?」
という心配はもっともです。しかし、プロに任せれば美しい出来栄えになるかもしれませんが、必ずしも思い通りに仕上がらない、納期に時間がかかってしまう、などの難点もあります。
思い切って自分で画像を加工してみてはいかがでしょうか。
無料の画像素材でも使用条件を確認してから
自分で画像を加工しようと決めたら、まず、使用する画像を探しましょう。
画像は、自分で撮影した写真や描いたイラストのほか、無料配布されている写真やイラスト素材、有料の素材など数多くあります。
無料配布されている画像を用いる際は、使用条件をよく確認してダウンロードしましょう。商用サイトの場合には使用できない場合もあります。
これらの素材画像は、そのままでは使えません。
少なくとも画像サイズをウェブサイトに適合した大きさにリサイズ、ファイル形式変更が必要となる場合もあります。
画像は、自分で撮影した写真や描いたイラストのほか、無料配布されている写真やイラスト素材、有料の素材など数多くあります。
無料配布されている画像を用いる際は、使用条件をよく確認してダウンロードしましょう。商用サイトの場合には使用できない場合もあります。
これらの素材画像は、そのままでは使えません。
少なくとも画像サイズをウェブサイトに適合した大きさにリサイズ、ファイル形式変更が必要となる場合もあります。
ランディングページの画像制作におすすめの6つのツール
画像の加工ができるツールは無料のソフトから有料のものまで数多く出回っています。今回はその中からランディングページの画像制作に挑戦するときに役に立つ、いくつかのツールを紹介します。
無料のツール
以下は代表的な無料ツールです。それぞれの特徴をふまえて、自分にあったツールを選んでください。
*GIMP
オープンソースで開発されている、定番の画像処理ツールです。画像のトーン等の変更のほか、切り抜きや、エディタ機能があり、モザイク編集、アニメーション合成も可能です。プラグインをインストールすることで、Photoshopのように使えます。難点は起動時の読み込み量が多く時間がかかることです。
動作OS:Windows/macOS/Linux ほか
*Paint.NET
Windowsのペイントツールのように直感的に操作できる初心者向けのツールです。ぼかし・モザイクなどの各種フィルター、色調・彩度・明るさ補正、ペイントブラシなどの基本機能のほか赤目補正、ヒストグラム補正などが可能です。プラグインを入れることで、PSDファイルが読み込めます。
動作OS:Windows 7以降
*Pixia
絵を描くことに特化したペイントツールで、イラスト作成、画像編集が可能。ペンタブを使って本格的なイラストが描けます。
動作OS:Windows 7以降
*Inkscape
オープンソースで開発されているベクターグラフィックソフトで、Illustratorのように使えます。画像の切り抜きやサイズ変更、テキストの挿入などが可能です。しかし、JPEG形式への書き出しができません。この他にも機能的にIllustratorには及ばない点がいくつかあります。
動作OS:Windows/macOSX/Linux
無料のツールは便利ですが、突然サービスが終わってしまう場合や、インストールの手順が難しい場合もあります。また、自宅での個人利用に限るなど、商用利用ができないものもあります。
*GIMP
オープンソースで開発されている、定番の画像処理ツールです。画像のトーン等の変更のほか、切り抜きや、エディタ機能があり、モザイク編集、アニメーション合成も可能です。プラグインをインストールすることで、Photoshopのように使えます。難点は起動時の読み込み量が多く時間がかかることです。
動作OS:Windows/macOS/Linux ほか
*Paint.NET
Windowsのペイントツールのように直感的に操作できる初心者向けのツールです。ぼかし・モザイクなどの各種フィルター、色調・彩度・明るさ補正、ペイントブラシなどの基本機能のほか赤目補正、ヒストグラム補正などが可能です。プラグインを入れることで、PSDファイルが読み込めます。
動作OS:Windows 7以降
*Pixia
絵を描くことに特化したペイントツールで、イラスト作成、画像編集が可能。ペンタブを使って本格的なイラストが描けます。
動作OS:Windows 7以降
*Inkscape
オープンソースで開発されているベクターグラフィックソフトで、Illustratorのように使えます。画像の切り抜きやサイズ変更、テキストの挿入などが可能です。しかし、JPEG形式への書き出しができません。この他にも機能的にIllustratorには及ばない点がいくつかあります。
動作OS:Windows/macOSX/Linux
無料のツールは便利ですが、突然サービスが終わってしまう場合や、インストールの手順が難しい場合もあります。また、自宅での個人利用に限るなど、商用利用ができないものもあります。
有料のツール
以下の有料ツールも無償体験版があります。一時的に無料ツールを利用してみたうえで、有料のツールに挑戦してみるのがいいかもしれません。
*Illustrator
Adobe社の画像作成加工ツールとして印刷業界やデザイナーが使う描画ツールの代表格です。Illustratorの機能が活かせる加工は、単純な線・正確な図形を使ったイラストの作成や素材を貼り、デザインをしていくレイアウト作業です。
Illustratorは、ベジェ曲線を用いて線と面でベクター画像という拡大縮小に強い画像を作成できます。
ロゴやイラストなど様々なサイズで使いたい場合はIllustratorによる加工が向いています。
*Photoshop
Adobe社の画像編集加工ツールです。Illustratorと並んでデザインに欠かせないツールで、あわせて使用する場合が大変多いです。Photoshopはビットマップ画像を扱うツールで、ドットでできている画像(写真など)の全体的な色味・描画作業・トーンの調節を得意としています。ブラシツールを使って動きのある画像に加工したり、HDR加工で奥行きのある画像にすることもできます。
写真素材を印象的な画像に加工したいときにはPhotoshopが向いているでしょう。
*Illustrator
Adobe社の画像作成加工ツールとして印刷業界やデザイナーが使う描画ツールの代表格です。Illustratorの機能が活かせる加工は、単純な線・正確な図形を使ったイラストの作成や素材を貼り、デザインをしていくレイアウト作業です。
Illustratorは、ベジェ曲線を用いて線と面でベクター画像という拡大縮小に強い画像を作成できます。
ロゴやイラストなど様々なサイズで使いたい場合はIllustratorによる加工が向いています。
*Photoshop
Adobe社の画像編集加工ツールです。Illustratorと並んでデザインに欠かせないツールで、あわせて使用する場合が大変多いです。Photoshopはビットマップ画像を扱うツールで、ドットでできている画像(写真など)の全体的な色味・描画作業・トーンの調節を得意としています。ブラシツールを使って動きのある画像に加工したり、HDR加工で奥行きのある画像にすることもできます。
写真素材を印象的な画像に加工したいときにはPhotoshopが向いているでしょう。
IllustratorとPhotoshopをお得に学ぶ
Adobe社は2013年からパッケージでの販売を終了し、クラウド版のみとなりました。かつては、すべてのパッケージを揃えるには50万円近く必要でしたが、2018年5月現在月額制コンプリートプランでは、4980円/月で、すべてのソフトが使用できます。
Adobe社の製品はクオリティの高い作業が可能な一方で、自由に使いこなすためには技能の習熟が必須でした。Adobe社はその点に着目して、製品の使い方を最初から学びたい初心者から、スキルを習得してキャリアアップを目指すユーザーまで、幅広い層に独自の教材とトレーニングサービスを提供するパートナープログラムを開発しました。
プログラム認定校の通信講座では、DVD等でIllustratorとPhotoshopをはじめ、Adobe社のクリエイティブソフトのクラウド版を学べます。
しかも、パートナー認定校の特典サービスとして、受講者は、学生・教職員個人版をトレーニングコースとパッケージにして購入可能。
ランディングページの画像をプロ顔負けに制作することも夢ではありませんね。
Adobe社の製品はクオリティの高い作業が可能な一方で、自由に使いこなすためには技能の習熟が必須でした。Adobe社はその点に着目して、製品の使い方を最初から学びたい初心者から、スキルを習得してキャリアアップを目指すユーザーまで、幅広い層に独自の教材とトレーニングサービスを提供するパートナープログラムを開発しました。
プログラム認定校の通信講座では、DVD等でIllustratorとPhotoshopをはじめ、Adobe社のクリエイティブソフトのクラウド版を学べます。
しかも、パートナー認定校の特典サービスとして、受講者は、学生・教職員個人版をトレーニングコースとパッケージにして購入可能。
ランディングページの画像をプロ顔負けに制作することも夢ではありませんね。
まとめ
ユーザーが直帰・離脱しない、「見せる」ランディングページに効果的な画像は必須。そんな画像を、有料、無料の加工ツールを使いこなして自作することも可能です。この機会に本格的に画像加工と制作を学んでみるのも一つの方法ですね。
アドビソフトウェア通販
ヒューマンアカデミーのオンライントレーニングの通信講座 + Adobe(アドビ)ソフトウェア通販










へのお問い合わせはこちらから
