画像コーディングのみでLPを制作するデメリットとは？効果を高めるポイントを解説

LPのコーディング手法は2種類

そもそもLPのコーディング手法は、次の2種類に分けられます。

• 画像コーディング
• テキストコーディング

それぞれの特徴について、詳しく見ていきましょう。

画像コーディング

画像コーディングとは、LPとして表示したい要素を1枚または複数の画像で作成し、それをHTML上に貼り付けて表示させる手法です。

Adobe Illustratorなどで作成したデザインをPNGなどの画像データで書き出して設置するだけで、テキスト・見出しなどもすべて画像内に含まれるため、非常に簡単にLPを制作できます。

テキストコーディング

一方、テキスト要素・ボタン・レイアウトなどLPを構成する要素を、HTML・CSSなどのコードで構築するのがテキストコーディングです。一般的にLPをコーディングするといえば、このテキストコーディングのことを指します。

専門知識が必要なため専門のコーダーでなければLPを作れず、画像コーディングよりも制作工数がかかることは事実です。

LPのコーディング代行依頼はこちら

画像コーディングのみでLPを制作するメリット

画像メインのLPのイメージ画像

画像コーディングのみでLPを制作するメリットとしては、次の3点が挙げられます。

• コーディング工数を削減できる
• 大胆なデザインも実現できる
• 大規模修正にすぐ対応できる

それぞれのメリットについて紹介します。

コーディング工数を削減できる

画像コーディングの場合、LPの全ての要素をデザインツールで制作すれば、後は画像を設置するだけでLPが完成します。画像1枚あたりの設置工数は、多く見積もっても数分です。複数枚の画像を使うとしても、30分程度で公開できる状態になります。

一方、テキストコーディングでLPを制作するとなれば、どれだけ急いでも1日以上はかかります。公開期日が迫っている場合は、画像コーディングでの制作を検討すべきといえるでしょう。

また、コーディング工数が少ないため、コーダーへの外注費削減効果も期待できます。

大胆なデザインも実現できる

画像コーディングなら、HTML・CSSでは再現が難しい複雑なグラデーションデザインや装飾、変則的なレイアウトなど、大胆なデザインも自由に実現できます。

デザイナーの意図をそのままWeb上で表現できるため、ビジュアル重視のLPを制作したい場合にはおすすめです。

大規模修正にすぐ対応できる

テキストコーディングで制作したLPを修正する場合、HTMLやCSSの調整が必要なため、ある程度の時間が必要です。

一方、画像コーディングで制作したLPは、デザインファイルを更新する（画像を差し替える）だけで修正が完了します。そのため大規模な修正にもすぐに対応でき、複数箇所のデザイン変更も容易です。LP公開後、頻繁にデザイン修正が発生しそうな場合は、画像コーディングを活用するといいでしょう。

また、画像を差し替えるだけでページ内の要素を簡単に修正できるため、PDCAを回しやすい点も画像コーディングならではの特徴です。そのためメルマガ用のLPなど、掲載内容を頻繁に変えテストをしたい場合にも活用してみてください。

（ただし軽微な修正、たとえば文字の色を変えるだけなら、画像コーディングよりもテキストコーディングのほうが早いです）

画像コーディングのみでLPを制作するデメリット

画像コーディングはLP制作の工数を減らせる点が魅力ですが、実はデメリットもいくつか存在します。

• SEO対策は難しい
• Web広告からの集客単価が高騰する可能性がある
• ページが重くなりやすい
• PC・スマートフォン用の画像を用意しなければならない
• 画像だけで実現できない要素もある

これらのデメリットがネックになる場合は、たとえ工数がかかったとしてもテキストコーディングを選ぶべきでしょう。それぞれのデメリットについて詳しく紹介します。

SEO対策は難しい

画像コーディングしたLPは、テキスト情報がすべて画像に含まれているため、Googleなどの検索エンジンがコンテンツの中身を正しく読み取れません。見出しや本文テキストが画像化されていると、検索エンジンはそれを「画像」としてしか認識できず、SEO評価が大幅に下がってしまうのです。

昨今は画像内の文字データを読み取る技術も進歩していますが、それでもテキストコーディングに比べると、画像コーディングは検索エンジンにとっては不親切なコンテンツだといえます。

そのため自然検索からの流入を狙いたい場合には、テキストコーディングを選ぶべきでしょう。

Web広告からの集客単価が高騰する可能性がある

SEOが期待できない以上、LPへの集客は広告頼みになります。しかし、画像コーディングしたLPをWeb広告からの遷移先とする場合、集客単価が高騰する可能性があるのです。

実はWeb広告の単価は、『品質スコア』によって変動します。これはその名のとおり、広告品質がどのくらい優れているかを示す指標で、たとえばGoogleリスティング広告の場合、『クリック率』や『ユーザーの検索意図と広告の関連性』とあわせて、『ランディングページの利便性』も評価対象です。

このランディングページの利便性は、広告をクリックしたユーザーにとって、LPの内容がどのくらい関連性があり有用であるかが判断されます。しかし画像コーディングのみのLPにはテキスト情報がないため低評価となり、結果として品質スコアが下がってしまう可能性が高いです。

品質スコアが下がるとクリック単価（CPC）が高騰し、広告費がかさみやすいため、広告用のLPはテキストコーディングで構築すべきといえるでしょう。

ページが重くなりやすい

Webページ内の画像ファイルの容量が大きいと、ページの読み込み速度が遅くなります。とくにスマートフォンで閲覧する場合、容量の大きなページはなかなか表示されません。

画像コーディングは画像を大量に使うためページが重くなりやすく、表示速度対策をしないと不便なページになってしまうことは覚えておきましょう。

PC・スマートフォン用の画像を用意しなければならない

昨今はさまざまなデバイスが普及しており、ユーザーがPCとスマートフォンのどちらでLPにアクセスするかはわかりません。

そのためテキストコーディングをする場合は、一つのHTMLで複数のデバイスサイズに適応するよう、レスポンシブデザイン（レスポンシブコーディング）で制作します。

関連記事：レスポンシブ対応サイトのコーディングは代行会社がおすすめ！費用相場も解説

しかし画像コーディングの場合、1枚の画像で複数のデバイスサイズに対応できません。そのためレスポンシブ対応するためには、PC用・スマートフォン用・タブレット用の画像を、それぞれ別々にデザイン・書き出し・実装する必要があります。

コーディング工数は少ないものの、画像制作工数が相応に必要なことも知っておきましょう。

画像だけで実現できない要素もある

LPのほとんどの要素は画像だけで実現できますが、テキストリンクや問い合わせフォームなどはテキストコーディングでなければ実装できません。

CTAとなるボタンも、画像で簡単なボタンを表現することは可能ですが、マウスオーバーすると色が変わるなどのインタラクティブ機能を実装したい場合はテキストコーディングが不可欠です。

テキストコーディングをまったく用いないと不便なLPになってしまうため、現実的にはテキストコーディングが一部必要になる点も留意してください。

画像コーディングのみのLPを利用できるシーン

ここまで紹介した特徴をふまえると、画像コーディングのみのLPを利用できるシーンとしては次のような例が挙げられます。

• メルマガ・LINE・SNSと連動したLP
• 紙媒体（チラシ・DM）と連動したLP
• 展示会・イベントなどの短期キャンペーン用LP

それぞれの活用方法について見ていきましょう。

メルマガ・LINE・SNSと連動したLP

まず最初に考えられるのが、メールマガジンやLINE配信、SNSからの誘導先として画像コーディングLPを利用するケースです。

これらの媒体はすでに購読者やフォロワーとつながっており、SEO流入が目的ではないため、検索エンジンからの評価を気にする必要がありません。また、広告品質スコアも関係ないため、画像のみのLPでも問題なく機能します。

紙媒体（チラシ・DM）と連動したLP

次に考えられるのが、チラシやダイレクトメールにQRコードを掲載し、そこから画像コーディングのLPに誘導する方法です。

これもSEO対策・広告品質スコア対策の必要がないため、画像コーディングのデメリットを気にする必要がありません。

紙面と同時にLPもデザインすれば、工数を削減しつつ、ブランドの世界観を統一させられます。

展示会・イベントなどの短期キャンペーン用LP

展示会・イベントなどの短期キャンペーンで活用するLPは、スピード重視で用意する必要があります。このような場合は、デメリットの影響を多少受けるとしても、画像コーディングで素早くLPを公開するのも選択肢の一つです。

ただしSEO流入は期待できないため、広告予算を増やしたり、イベント会場にQRコードを設置したり、アクセスを集める工夫をする必要はあります。

画像コーディングのみのLPの効果を高める6つのポイント

画像コーディングにはいくつかデメリット・機能制限がありますが、それらを克服してLPの効果を高めるポイントとしては、次の6つが挙げられます。

1. 画像は可能なかぎり圧縮する
2. 次世代画像フォーマットを活用する
3. スマートフォンでも読みやすいデザインにする
4. alt属性を活用する
5. ページ上部の画像から優先して読み込む
6. 必要に応じてテキストコーディングも取り入れる

それぞれ詳しく解説します。

1.画像は可能なかぎり圧縮する

画像コーディングのデメリットで紹介したとおり、ファイル容量があまりにも大きいとページの読み込み速度が低下してしまいます。

ユーザーの利便性を保つためには圧縮ツールを用い、画質を落としすぎない範囲でサイズを軽量化しましょう。

2.次世代画像フォーマットを活用する

さらに表示速度を早くするためには、WebPなどの次世代画像フォーマットを活用するのもおすすめです。

そもそもWebサイトで使用される一般的な画像フォーマットは、次の3種類に分けられます。

• JPEG（JPG）
• GIF
• PNG

これらフォーマットも圧縮することは可能ですが、軽量化には限度があります。

一方、従来フォーマットと比較して表示速度に優れるのが次世代画像フォーマットで、圧縮能力が高く、画像品質も保ちやすいことが特徴です。Webページのパフォーマンスを最適化するためのツール「Google PageSpeed Insights」では、次の3種類のフォーマットが推奨されています。

• WebP
• JPEG 2000
• JPEG XR

このうちWebPはGoogleが開発したフォーマットで、現行ブラウザのほとんどに対応しています。さらに透過処理にもアニメーションにも対応しているため、使い勝手が非常に良いことが特徴です。

比較項目	WebP	JPEG（JPG）	PNG	GIF
容量	非常に軽量	比較的軽量	大きい	軽量
色の数	1,677万	1,677万	1,677万	256
透過処理	対応	非対応	対応	対応
アニメーション	対応	非対応	非対応	対応

WebPは従来フォーマットそれぞれの優れた点を網羅し、なおかつ容量が軽いため、画像コーディングのみのLPには最適だといえます。

3.スマートフォンでも読みやすいデザインにする

PC向けの画像をスマートフォンで表示すると、文字が小さすぎて読めないケースが多いです。しかし昨今ではスマートフォンユーザーも非常に多いため、スマートフォンでも読みやすいデザインにすることは必須です。

デバイスごとにデザインを使い分けるのがもっとも望ましいですが、スマホ用に別デザインを用意するのが難しい場合は、文字サイズ・余白をスマートフォン向けにしたものをPCで表示してもいいでしょう。

4.alt属性を活用する

Googleなどの検索エンジンに画像内の文字情報を正しく読み取ってもらえないデメリットは、alt属性を活用することである程度対策できます。

alt属性（代替テキスト）とはWebページ内の画像内容を伝えるためのテキストのことで、画像が何らかの原因で表示されない場合や、視覚障害者が音声読み上げブラウザを使用する場合などに活用される機能です。

実はalt属性を指定しておくと、検索エンジンも画像内容を把握しやすくなります。直接的なSEO対策になるわけではありませんが、少しでも検索エンジンにページ情報を伝えるために、alt属性は必ず設定しておきましょう。

5.ページ上部の画像から優先して読み込む

ユーザビリティを高めるためには、ページ上部の画像から優先して読み込むことも重要です。

実はWebブラウザは、ページに含まれる画像をすべて一気に読み込ませようとします。そのため画像ファイルの容量が多いLPは、読み込みに時間がかかってしまうのです。結果としてファーストビューの画像読み込みも遅延し、離脱率が増加してしまいます。

ここで活用できるのが「Lazy Load（遅延読み込み）」という設定です。これは画面に表示されるタイミングに応じて画像を読み込む設計のことで、画面外の画像は読み込まれません。そのためファーストビューの画像をいち早く表示でき、ユーザビリティを改善できるのです。

ただしLazy Loadを実装するためには、JavaScriptの知識が求められます。

簡単な技術ではないため、プロのコーダーに依頼することをおすすめします。

6.必要に応じてテキストコーディングも取り入れる

ここまで画像コーディングのみのLPで使えるさまざまなテクニックを紹介してきましたが、画像だけで実装できる機能に限界があることも事実です。

そのため実装したい機能によっては、必要に応じてテキストコーディングを取り入れることも検討してみてください。

たとえばCTA部分だけでもテキストコーディングをすれば、インタラクティブなボタンやお問い合わせフォームを実装できます。情報を伝えるための部分は画像で用意し、ユーザーに操作してもらう要素はHTML＋CSSで組み立てるのが望ましいです。

画像コーディングでのLP制作ならコーディングアーミーがおすすめ

出典：コーディングアーミー

画像コーディングのみのLPは、テキストコーディングを制作するよりは簡単です。しかし必要に応じてテキストコーディングをしたり、alt属性やLazy Loadの設定をしたりすることを考えると、専門のコーダーに依頼するのが安心でしょう。

コーディング代行サービス「コーディングアーミー」でも、画像コーディングでのLP制作を承っております。次の特徴に魅力を感じる方は、ぜひコーディングアーミーにご相談ください。

• 案件ごとに最適なコーダーをアサイン
• 充実した品質管理体制
• alt属性の設定にも対応
• フォーム実装も可能
• 明確な料金体系

それぞれの特徴について詳しく紹介します。

案件ごとに最適なコーダーをアサイン

コーディングアーミーには200名を超えるコーダーが在籍しており、実力に応じて次のようにランク付けしています。

ランク	対応範囲
スチューデントクラス	標準仕様コーディング
アシスタントクラス	標準仕様コーディング
レギュラークラス	標準仕様コーディング CMS構築 アニメーション実装
プロクラス	標準仕様コーディング CMS構築 アニメーション実装 サーバー移転
マイスタークラス	標準仕様コーディング CMS構築 アニメーション実装 サーバー移転 ディレクション対応

画像のみのコーディングならそれほど高度な技術は必要ないため、安価に対応できるコーダーをアサインすることも可能です。一方、Lazy Loadの設定など高度な技術が必要な場合は、それら技術を有したコーダーをアサインいたします。

必要な技術に応じて最適なコーダーをアサインできるため、まずはご希望をお伝えください。

充実した品質管理体制

下位ランクのコーダーが記述したソースコードを、必ず最上位ランク（マイスタークラス）のコーダーがチェックしていることもコーディングアーミーの特徴です。

クラウドソーシングなどで安価なコーダーを手配するとコーディング品質に難があるケースもありますが、コーディングアーミーは品質管理を徹底しているため安心してお任せいただけます。

alt属性の設定にも対応

コーディングアーミーはalt属性の設定にも対応しています。

入稿データで指示いただければそのとおりに設定いたしますし、画像内容に基づきコーダー側で簡易的に記述することも可能です。

フォーム実装も可能

お問い合わせフォームをHTML＋CSSで実装する場合も、コーディングアーミーに一括してお任せいただけます。CTAのみはテキストコーディングにしたい場合は、入稿データでご指示ください。

明確な料金体系

コーディングアーミーでは事前に明確な料金をお伝えしており、後からいきなり追加費用を請求することはありません。テキストコーディングでLPを制作する場合の費用は50,000円／ページですが、画像コーディングの場合は状況によって費用が異なるため、ぜひお気軽にお問い合わせください。

なお、LP内にメールフォームの機能を実装する費用は30,000円～です。

まとめ

検索流入を重視しないLPや、短期間しか使用しないLPなら、画像コーディングのみで制作するのも一つの手段です。

ただしユーザビリティを考えると、次世代画像フォーマットを使用したり、Lazy Load（遅延読み込み）の設定をしたり、問い合わせフォームのみはテキストコーディングで実装したり、意識すべきポイントが多々あります。そのため画像のみでLPを制作するとしても、プロのコーダーに依頼することを検討してみてください。

コーディングアーミーはリーズナブルな価格で高品質なLPを制作しているコーディング代行サービスで、画像コーディングのみの依頼にも対応しています。画像をメインにしつつ利便性の高いLPを制作したい方は、ぜひ一度お問い合わせください。