こんばんは。
伴走型デザイナー、しるべデザイン・ひかるです。
昨日は画像データの「拡張子」についてお話ししましたが、
実はホームページ（HP）やランディングページ（LP）の納品も、
その「形」は一つではありません。
「納品されました！」と言われてデータだけ届いても、
「え、これをどうやってネットに載せるの？」と戸惑ってしまうことも。
今日は、用途に合わせて使い分ける「3つの納品スタイル」を整理しました。
1. 【主流】Webページとして「直接構築」して納品
WordPressやShopify、Studioなどのツールを使い、
インターネット上で動く「お店」そのものを仕上げる方法です。
▼形
ファイルを渡すのではなく、
「サイトのログイン権限（IDとパスワード）」を制作前にお聞きして、
仕上がったら実際のサイトで確認していただく方法です。
▼拡張子との関係
サイト内に配置されている「写真」はJPG、
「ロゴ」は背景が透明なPNGとして、
私が裏側で適切に配置しています。
▼メリット
文字の修正が楽で、HPの場合SEO（検索エンジン）にも強く、
ボタンがパチパチ動く「本物のサイト」になります。
2. 【EC向け】「長い1枚の画像」として納品
楽天やAmazonの商品ページによくある、縦にすごーく長い画像形式です。
▼形
縦にすごーく長いJPG画像として納品します。
▼拡張子との関係
昨日の話に出てきた「JPG画像」としてお届けします。
全体を1枚の絵として書き出すので、
文字も写真もすべて「一つの画像データ」になります。
▼メリット
どんな環境で見てもデザインが崩れない（文字がズレない）。
画像の中に文字が書かれている状態を想像してください。
▼デメリット
Googleなどの検索エンジンが「文字」を読み取れないため、
（＝文字・文章情報として受け取ってもらえないため）
SEO、つまり検索対策には弱くなります。
3. 【制作のみ】「デザイン設計図」として納品
「デザインだけプロに頼んで、構築（コーディング）は自分や別の会社でやる」という場合です。
▼形
デザインツールであるFigma（フィグマ）やCanvaの共有リンク、
あるいはAdobe形式（AI/PSD）など編集できる形式での納品になります。
▼拡張子との関係
ここでAI（エーアイ）などの「設計図データ」が必要になります。
▼メリット
自分が使い慣れたツール（Canvaなど）で、
後から自由に文字を打ち替えられます。
プロが密かに使っている「第4の拡張子」の話
実は、最近のWeb制作ではJPGやPNGよりも
「WebP（ウェッピー）」という形式を使う場合も増えてきました。
▼特徴
「JPG並みの色表現」と「PNGのような透明化」を両立しつつ、
データが圧倒的に軽いのが特徴です。
▼なぜ使うか
見た目は綺麗なのに、データが圧倒的に軽い。
この「裏側の配慮」が、あなたのサイトの表示スピードを上げ、
お客様の離脱を防ぐことに繋がります。
あなたは「箱」が欲しいですか？「中身」が欲しいですか？
「ネット上の自分のお店」が欲しいなら、直接構築。
「楽天などの商品ページの一部」に貼りたいなら、画像形式
などなど。
「自分のやりたいことには、どの納品形式が合っているの？」と迷ったら、
そこから一緒に考えましょう。最適な「届け方」をご提案します！
