「ホームページ制作の牛丼」で、
自社のサービスLPを作った
AIを使って、どこまでクオリティを出せるか
「早い！上手い！安い！」を掲げる新サービス「ホームページ制作の牛丼」。その約束が本当に成り立つのかを、まず自分たちのLPで試しました。企画からデザイン、動きの指示、コーディング、WordPressへの公開まで、AIと一緒に進めた記録です。
BACKGROUNDやりたかったのは、約束の証明
「ホームページ制作の牛丼」は、打合せから5営業日で公開、テンプレートを使わない完全オリジナルデザイン、8ページ10万円（税別）というサービスです。速さと価格を打ち出すほど、「でも、品質は大丈夫？」と思われます。
だからこそ、最初の事例は自分たちのLPにしました。牛丼と同じ作り方で、牛丼のLPを作る。その出来が、そのままサービスの説明になります。
速く・安く作っても、「10万円でこのレベル？」と言ってもらえるクオリティは出せるのか。
PROCESS作り方は5ステップ
企画・競合の調査
オリジナルデザインで作る制作会社の料金・納期・保守を調べ、牛丼の立ち位置と、ページで伝えることを整理しました。
デザイン
セクションの構成から装飾まで、AIを使って短時間で組み上げます。人は方向性を判断し、修正点を伝えます。
動きの指示もデザインと一緒に
登場の順番、速さ、ループする装飾まで、メモ・注釈・試作で、デザインと一緒に残しました。
HTMLにして、WordPressへ
デザインと動きの指示をもとにコーディングし、スマホ表示まで整えてWordPressに載せました。
動きを詰めて、公開
実際の画面でMVの動きやボタンの見せ方を調整し、公開しました。
FINDING 01最初の案は「やりすぎ」だった
最初のデザインは、制作会社らしいインパクトを狙ったものでした。極太の書体、斜めの面、ステッカー風の枠、巨大な英字。装飾を重ねるほど「頑張っている」感じは出ますが、見直すと文字が詰まって読みにくく、情報が頭に入ってきません。
そこで方向を変え、「シンプルで読みやすく、印象に残る」サービスサイトを参考にしました。書体は読みやすいものに替えて字間を空け、装飾は文字にかからない端に寄せ、角丸と柔らかい影で整えています。
極太の書体・重なる装飾・黒い太枠と影。情報より装飾が先に目に入る。
読みやすい書体と余白、端に置いた線の装飾、グラデーションは要所だけ。
FINDING 02動きまで、デザインの段階で決めておく
デザインの段階で描けるのは「止まった画面」までです。そこで、各セクションの横に「どの要素が・何をきっかけに・どう動くか」を時間とイージングまで書いたメモを置き、要素ごとの注釈とプロトタイプも添えました。
「5営業日」を見せるブロックでは、数字が0から5まで数え上がり、5で縦に伸びて黄色に変わり、少し跳ねて着地する動きを、コマ送りの見本で指示しています。
FINDING 03写真がなくても、作り直せる
牛丼では、お手持ちの写真をAIで整えてサイトに使えるようにしています。LPでもその見本を用意しました。スマホで撮ったような暗く散らかった写真が、明るさ・構図・雰囲気を整えた1枚になります。
※LPの見本用にAIで作成したイメージです。
RESULT検証してわかったこと
構成と装飾は、AIが一気に組める。決めるのは人
セクション構成や装飾の作り込みは、AIを使うと短時間で形になります。一方で「やりすぎ」「読みにくい」と判断して方向を変えたのは人でした。速さは、判断の回数を増やすために使うのがいちばん効きます。
「高品質に見える」は、引き算でつくる
装飾を足すほど良くなるわけではありませんでした。書体・余白・装飾の置き場所を整理したほうが、読みやすく、印象にも残るページになりました。
動きは、数値で伝えれば再現できる
時間・遅れ・イージングまで書いた指示があれば、デザインでは描けない動きもコードで再現できます。スクロールに合わせて線が流れる演出も、参考サイトの仕組みを読み解いて取り入れました。
最後の落とし穴は、公開の工程にある
WordPressに載せると、本文の自動整形でCSSが崩れることがありました。公開前後に「送った内容」と「表示される内容」を突き合わせることで、見た目の崩れを防いでいます。
この作り方を、あなたのホームページに
打合せから5営業日で公開。完全オリジナルデザインを8ページ10万円（税別）で。原稿作成も、写真のAI加工も込みです。
ホームページ制作の牛丼を見る