セカヤサブログ世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。2024.05.08みなさんこんにちは。商品を宣伝し購入を促したい時、LP(ランディングページ)を作りますよね。リスティング広告やSNS広告などのWEB広告をクリックしたときの遷移先ページとして使われることが多いLPですが、制作時に工数やデザインの再現難易度の問題で画像でコーディングしたい時ってありますよね。「本当に画像でコーディングして大丈夫かな?」「コンバージョンに悪影響がないかな?」と不安なポイントもあります。そこで今回はLPを画像でコーディングすることのメリット・デメリットを徹底的に考えていきます。LP自体にあまり詳しくない方は、こちらの記事で考え方を学んでみてください。これを読めばあなたもWebマーケティングマスター!?毎月数千万円売り上げるLP構築・運用の考え方こんにちは。最近LP(ランディングページ)を制作する案件が多く、実際に毎月4桁万円程度を安定して売り上げるLPも出てくるようになりました。それは打ち出した商材や環境が良かったということも大いにあると思います。画像コーディングのデメリット読み込み速度低下による離脱率上昇SEO効果が見込めなくなるクリック単価の高騰どちらとも言えないもの画像コーディングしつつ、リスクをできるだけ抑える方法ファーストビューだけコーディングしてユーザーに読み込みの遅さを感じさせない可能な限り画像を圧縮するページ上部の画像を優先して読み込むalt属性を詳細に書いてクローラーにページの内容を伝えるコーディングするに越したことはないので、コーディング力を磨こうコーディング速度アップデザイン再現力アップLPを画像だけでコーディングをしても良いのか?状況によりますが、出来ればやらない方が良さそうです。確かに世の中には画像でコーディングされているLPは数多くありますから絶対にダメだということはありません。工数や予算の関係でやむを得ない場合もあるでしょうし、高速でA/Bテストを回したいなど改善サイクル上の都合もあります。画像コーディングには「ユーザーの離脱率の上昇」「クリック単価の上昇リスク」など、そんなところにまで影響するの!?というような意外なリスクが潜んでいるのです。あなたがコーダーならそういったリスクを把握した上でどちらにするか決めましょう。記事の後ろに「画像コーディングしつつ、リスクをできるだけ抑える方法」を載せていますので参考にしてください。シリーズ累計500部突破!/今すぐ購入して、Web制作で自由を手にいれる!画像コーディングのメリットそれでは、まずメリットから考えていきます。通常のコーディングよりも圧倒的に短時間でページを完成させられるのが画像コーディングにおける一番のメリットではないでしょうか。LPの構成は一般的に、ユーザーに訴求するための文章、画像(場合によって動画やアニメーションも)が縦に並ぶ購入ボタンや申し込みボタン、あるいは問い合わせフォームが間に入っている(総じてコンバージョンポイントと呼ぶ)という形です。ユーザーがクリックしたり入力する部分以外はデザインファイルから画像を書き出してimgタグで設置するだけで済みますから非常に短時間で済みます。文字の改行位置のような微妙な調整も一切必要なくなるのも大きいですね。いえコーダー側の努力でコーディング速度はかなり改善できます。ツールを使って爆速でコーディングできるようになりたい方はこちらをご覧ください。セカヤサBooksこの本ではコーディングの速度について考えていこうと思います。Web制作、ことHTML/CSSのコーディングを仕事にする上でそのスピードは必ず問われます。同じクオリティなら早い方がいいですからね(どんな仕事もそうですが)。コーディン...zenn.dev商品訴求のための大胆なデザインも可能Webデザインにおいては、HTMLとCSSで表現するという都合上やりやすいデザインとやりにくいデザインが生まれてしまいます。長方形以外の形状はHTML要素で表現するのがやや難しかったり、デザインによってレスポンシブ時にうまく要素を配置するのが難しかったりする場面が出てきます。画像で書き出してしまえばそういった問題もかなり軽減されます。アニメーションが絡む場合に限っては別です。動かしたい部分はどうしてもCSSやJavaScriptから制御する必要があるためHTML上に個別の要素として存在している必要があります。ちなみに、最近はCSSも随分進化しています。画像に頼らず完璧にレスポンシブに対応する方法もありますので、気になる方は読んでみてください。皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらず仕方なくブレイクポイントを追加して対応したことはありませんか?僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。大枠で言えば工数削減につながるのですが、画像でコーディングした場合は各種ブラウザやデバイスによる差分が出にくいためクロスブラウザテストが非常に楽になります。どのブラウザ、デバイスでも画像は同じように表示できますから見た目が崩れる可能性は非常に低いです。画像コーディングにおける一番の懸念点と言えるのが、離脱率への影響です。近年はインターネット回線、Wi-Fiなどの発達によりひと昔前に比べれば画像の読み込みもかなりスムーズになりました。離脱率は1秒未満の単位で争う世界なのでほんの少しの待ち時間も致命的になる可能性があります。古いですが、Googleの調査によると表示にかかる秒数と離脱率には以下のような関係があるようです。Google画像を圧縮したり、読み込み順を調整するなど対策はいくらかありますが、サイトのほぼ全部が画像となると対策の効果も限界があります。ユーザー全員の通信環境やデバイスのスペックが十分とも限りません。作ったLPも、見てもらえなければ意味がありませんから慎重に考えましょう。SEO効果が見込めなくなる普通のマークアップをしない以上、ページにテキストデータがほぼない状態になります。するとGoogleなどの検索エンジンのクローラーがページの内容を正しく把握することが難しくなり、検索にヒットする可能性が非常に低くなります。いえLPは通常何らかの広告の遷移先として利用されます。自然検索流入は最初から期待しないケースが多いですから、そこまで問題ではない・・・と言われていますがどうやらそれは大間違いのようです。理由は次のセクションで解説します。クリック単価の高騰Web広告を併用している場合、画像コーディングではなんとクリック単価が高騰する可能性があるようです。Googleのリスティング広告において、クリック単価が決まる要素に「品質スコア」という概念があります。クリック単価の計算式は次のとおりです。1計算式の内容はさておき、分母である品質スコアが大きいほどクリック単価が下がるということです。この品質スコアは以下の3つの要素で決定されます。推定クリック率:特定のキーワードに対して広告が表示されたとき、その広告がクリックされる確率をGoogleが推定したものキーワードと広告文の関連性:ユーザーが検索したワードと広告文がどのくらい関連しているかを評価したものランディングページの利便性:LPがユーザーにとって使いやすく、情報を簡単に見つけられるかどうかを評価したものこの「ランディングページの利便性」において、LPの内容が評価されるわけですね。したがって、記事の内容を正しく理解してもらうにはやはり正しくマークアップした方が望ましいわけです。読み込み速度も評価対象ですから、HTMLをしっかり組むことが品質スコアに大きく貢献すると言えます。品質スコアについては次の記事も参考にしてください。シリーズ累計500部突破!/今すぐ購入して、Web制作で自由を手にいれる!どちらとも言えないもの画像コーディングのメリットとして、よく「管理・更新コストが低い」と言われることがあります。確かにデザインの変更があった時、コーディングするよりは画像を書き出して差し替えた方が早い場合が多いでしょう。場合によってはそうならないことがあります。HTMLでコーディングしていた場合に、文言や色の修正が入ったとします。この場合はデザインに手戻りする必要がなく、コード上で差し替えた方が早く反映できます。コーダーとデザイナーが分業していた場合はなおさらです。したがって画像コーディングの方がコストが低いかはそのプロジェクトのLP改善方針やメンバー編成次第と言えます。画像コーディングしつつ、リスクをできるだけ抑える方法さて、メリットとデメリットについて詳しく考えてきました。総合的に見てもやはり可能であればきちんとコーディングした方が良いでしょう。様々な都合で画像コーディングで済ませたい場面はあります。そこで画像コーディングによって工数を低く抑えつつリスクを抑える方法を紹介します。ファーストビューだけコーディングしてユーザーに読み込みの遅さを感じさせない画像コーディングのデメリット、読み込みの遅さを回避する策の1つです。ユーザーは最初の数秒で離脱するかどうかを決めるわけですが、裏を返せばアクセスしてから始めの数秒間さえ読み込みの遅さを感じさせなければ良いのです。そこでファーストビューだけをコーディングし、最初の表示を早めてみましょう。テキストやHTML要素は画像に比べて圧倒的に早く表示されます。いえファーストビューはインパクトのある表現を持ってくることが多く、結局画像中心になるケースも多いのでデザインを見てコーディングするかどうかを決めてください。可能な限り画像を圧縮するこれも読み込み速度の改善です。画像はどうしても容量が大きくなります。LPで使いたくなるような派手な表現ほど重くなりやすいです。圧縮してから使いましょう。圧縮ですが、最もおすすめなのがsquooshというGoogle製のツールです。bro...squoosh.appアクセスして画像を読み込ませると圧縮の設定画面に移ります。画像のサイズフォーマット圧縮具合を設定できます(下画像)。フォーマットではWebpを選択するのがおすすめで、最も画質を落とさず圧縮ができます。pngやjpegから圧縮すると、画像にもよりますが大体70%〜90%もの大幅な容量削減が可能です。圧縮具合は画像を見つつ調整してください。右側が圧縮後のプレビューになります。Qualityは概ね75〜90の間で設定するのがおすすめです。他にもimgタグは記述次第で読み込み速度を改善できます。詳しくは次の記事をご覧ください。【2024年最新版】imgタグとは何か+正しい指定方法を徹底解説【コピペ可】こんにちは。サイト制作において、使わないことはほぼないであろうimgタグ。近年はHTMLの発展によって実は記述すべき属性がいくつかあります。具体的な記述と、それぞれが何のためのものでどんな効果があるかを解説していきます。imgタグをもっ...itokoba.com2023.05.30ページ上部の画像を優先して読み込むこれも読み込み速度に関係します。HTMLにおける画像は、imgタグかbackground-imageかなど、指定方法によって実は読み込まれる順番が変わることがあります。imgタグだけで実装していれば基本的には上から順番に読み込まれますが、そうでなければ例えばファーストビューの画像が遅れて読み込まれるといったことが発生します。そこで、以下のようなコードをheadタグに追加してください。/></head>linkタグのrel属性をpreloadにすると、特定のファイルを優先して読み込むように指示ができます。これでファーストビューの画像を必ず最初に読み込ませることができます。実際に画像が読み込まれている順番を確認する方法など、より詳しいことは次の記事でご覧ください。一行でサイトの読み込み速度を実質10倍以上にする方法ホームページはできれば読み込みが速い方が良いですよね。LPのようにユーザーに直接商品を訴求するようなページではなるべく離脱率を下げる工夫がしたいところです。その一つとして読み込み速度はとても重要です。LPは使われる画像の数が多く...itokoba.com2023.04.20alt属性を詳細に書いてクローラーにページの内容を伝えるこれはランディングページの利便性に関連します。品質スコアを上げるには、SEO同様LPの内容をGoogleのクローラーに伝える必要があります。画像コーディングしつつそれを満たすには、alt属性になるべく画像の内容を詳細に書くのが望ましいです。次のような画像を考えます。この場合なら、最低限画像に含まれているテキストを順序よく載せましょう。すればある程度テキストデータの代わりになります。これを全ての画像について行えば、ページの内容をクローラーに伝えることができます。これでもコーディングするよりはかなり楽ですね。alt属性について詳しく知りたい方はこちら。【徹底解説】imgタグのalt属性はほぼ絶対に指定した方が良いこんにちは。今回はimgタグのalt属性の適切な指定方法とその効果について解説していきます。各属性の仕様、使い方などの基本に加え、サイズの決まり方やおすすめのCSSなど実践で使えるテクも紹介!...itokoba.com2023.05.30コーディングするに越したことはないので、コーディング力を磨こうさて、ここまでLPの画像コーディングについて詳しく解説しました。内容をよーく見ると、メリットは「制作側が楽をできる」、デメリットは「広告主が損をする」という話で、実は作り手側の横着という見方もできます。コーディング速度も、高難度デザインの再現も、コーダーに能力があれば解決する側面もあったりします。あなたがコーダーならぜひスキルアアップを目指してください。おすすめの教材を紹介しておきます。コーディング速度アップツールを駆使して爆速コーダーになるためのガイドブックです。セカヤサBooksこの本ではコーディングの速度について考えていこうと思います。Web制作、ことHTML/CSSのコーディングを仕事にする上でそのスピードは必ず問われます。同じクオリティなら早い方がいいですからね(どんな仕事もそうですが)。関連記事Web制作の考え方を学ぶ【世界一シンプルなWeb制作ロードマップ】もうWeb制作初心者はHTML/CSS/JavaScript以外やるなこんにちは。最近Web制作を学んでいる人の投稿などを見て「余計なもの学びすぎでは?」と思っています。中には「最短で稼ぐにはピクセルパーフェクトをやれ」と言っているアカウントもいて「いやいや一番いらねーだろ・・・」と思ったりしています。(参考...2023.12.04Web制作の考え方を学ぶWeb制作の考え方を学ぶgulpはもういらないこんにちは。プログラミングスクールとか、いろんな教材見ているとやたらにgulpをやらせているように見受けられます。実際の現場でgulpが効力を発揮している場面ってもうあまり多くないのでは?と感じています。少なくとも初心者がgu...2024.07.31Web制作の考え方を学ぶWeb制作の考え方を学ぶ【フリーランス8年目が語る】Web制作とWeb開発は似て非なるものであるこんにちは。この2つは非常に似た言葉ですが、全く違うものを指しています。これらを混同してしまうと、間違ったものを学んでしまう可能性があります。こんにちは、小林です。3/2〜3/10にかけて、13名の方に無料面談をさせていただきました。Twitterでbosyuを使って募集したところ1日で10名以上の方から応募がありまして、それだけ困っている方がいるんだと実感しました。(...2019.03.10Web制作の考え方を学ぶWeb制作の考え方を学ぶ【ChatGPTにも有効】世界一上手な質問の仕方こんにちは。Twitterなどで時々発信はしていたのですが、僕が思う上手な質問の仕方を記事としても残しておこうと思います。基本的にはプログラミングの質問時の形式ですが、それ以外の場面でも応用できると思います。以前Web制作とWeb開発は似ているが違うものであるという記事を書きました。違うかはかなり詳しく書いたのですが、なぜそのような違いになるのかを本記事にて解説していこうと思います。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。秀樹フリーランス8年目|「世界一初心者に優しい」→セカヤサ。初心者が5年後も10年後も仕事を奪われない人になるための発信中。最新情報まとめWeb制作役立ちツールホーム検索トップサイドバータイトルとURLをコピーしました。