OVERVIEW
作品概要
架空のオンライン英会話スクールを題材に、LP・A4チラシ・Webバナーをセットで制作した作品です。
制作にあたり、参考にする英会話スクールのWebサイトを選び、Google キーワード プランナーで関連キーワードを確認しました。選んだサイトの構成やデザイン要素をChatGPTで整理し、その内容をもとにClaudeでLPを実装。生成された文章・画像・レイアウトを確認し、読みやすさや媒体間の統一、レスポンシブ表示などについて修正を重ねています。
Webと紙媒体で同じサービスを展開することで、掲載面積や閲覧時間に応じて情報量と見せ方を変える制作を経験しました。
制作情報
| 制作期間 | 約2日 |
| 制作形態 | 自主制作（架空サービス） |
| 本人担当 | 参考サイトの選定 / 関連キーワードの確認 / 生成内容の確認 / 修正点の整理・指示 / 媒体間の統一確認 / PC・スマートフォンでの表示確認 |
| 使用ツール | Google キーワード プランナー / ChatGPT / Claude |
| 使用技術 | HTML / CSS / JavaScript |
| 制作物 | LP / A4チラシ / Webバナー |
| 対応 | レスポンシブ対応 |
CROSS-MEDIA
媒体に合わせた情報の見せ方
LP・A4チラシ・Webバナーでは、同じスクール名、配色、人物写真、キャッチコピーを使用しながら、それぞれの用途に合わせて情報量を調整しています。
LPではサービス内容から無料体験までの流れ、チラシでは1枚の紙面で特徴や料金を把握できる構成、Webバナーでは短時間で訴求内容が伝わる視認性を重視。生成された案を確認し、文字サイズ、文章量、画像とのバランス、CTAの見え方について修正を指示しました。
LP
サービス内容から無料体験までを順番に確認できる構成
A4チラシ
特徴、料金、申込情報を1枚で把握できる情報量
Webバナー
キャッチコピーとCTAを短時間で認識できる見せ方
REVIEW
確認と修正で意識したこと
主に担当したのは、AIによって生成された内容の確認と修正指示です。
LPでは、PCとスマートフォンの両方で文字や画像が読みやすいか、余白や配置に不自然な点がないかを確認しました。また、チラシとWebバナーも並べて確認し、スクール名、配色、写真、キャッチコピーなどの表現にずれがないよう調整しています。
AI WORKFLOW
AIを活用した制作の進め方
1. 制作の準備
参考サイトを選び、Google キーワード プランナーで関連キーワードを確認
2. デザイン整理と実装
ChatGPTで参考サイトを分析してdesign.mdを作成し、ClaudeでLPを実装
3. 確認と修正
生成内容とPC・モバイル表示を確認し、必要な修正を指示
※本作品は架空サービスを題材とした自主制作であり、掲載している料金・実績・口コミなどは制作上の設定です。