8. 移行イメージ(トップページ)
いまのサイトの文章と写真をそのまま使い、組み方だけを作り直した見本です。原稿を書き直す必要はありません。文章の追加・書き換えはしていません。
必ずしも今と同じサイトにはなりませんが、極力同じような形に近づけて、あとからご自身で編集できるようにします。載っている内容・アドレス(URL)・導線・配色はそのまま引き継ぎます。形が変わるのは、画像の中に文字が入っているところだけです。その文字は検索エンジンとAIに読めないため、画像の外に出す必要があります。
いまの画面と、作るもの
見本は、HTMLから取り出した文字だけで組んだものではありません。先にいまの画面をパソコン幅とスマートフォン幅で撮り、そこに何が置いてあるかを数えたうえで、おおよそ同じ構成のまま組み直しています。スマートフォン幅は、画面の幅そのものを390pxにして描画しています(窓を小さくして切り取ったものではありません)。
トップページはスマートフォン幅(390px)で、7箇所が画面の外へ出ています。
ページ全体は横スクロールしませんが、これらは画面の外に隠れて読めません。
見本は、幅にあわせて自動で組み替わる作りにしているため、同じはみ出しは起きません。
いまの画面/パソコン(幅1440px)
いまの画面/スマートフォン(幅390px)
選んだ理由
入口(トップ): サイトの入口です。
売り物(サービス等): 実績・事例のうち、サイト内から最も多くリンクされ(30件)、メニューにも入っているページです。
読み物(記事等): 実績・事例のうち、本文量(556字)と更新の新しさから選びました(最終更新 2026-06-24)。
サービス紹介にあたるページが見つからなかったため、実績・事例のページを使いました。
アクセス解析を繋いでいないため、「実際によく見られているページ」ではなく、外から確かめられる材料(サイト内リンク数・メニュー掲載・本文量・更新日)で選んでいます。主力ページが別にある場合は、お知らせいただければそちらで作り直します。
配色 #067abc(既存サイトのCSSから引き継ぎ)/見本で使った画像 14点
見本の画像は、いずれも元の画像の実寸を超えて引き伸ばしていません。実寸はHTMLに書かれた値ではなく、画像ファイルそのものから測っています。
解像度が足りず、見本では使わなかった画像が 3点あります。
元の写真データ(撮影時のサイズ)をご提供いただければ、そのまま使えます。