誰のどんな課題を想定し、どの範囲を制作したかを明記します。
自主制作デモ
相談内容が定まっていない小規模事業者が、頼める内容を判断しにくい。
Web修正、ホームページ制作、AI・業務改善の3カテゴリと、直接問い合わせできる導線を整理する。
企画、文章、デザイン、HTML / CSS / JavaScriptによるレスポンシブ実装、SEO、構造化データ、アクセス解析・お問い合わせ導線の整備。
HTML / CSS / JavaScript / PHP / WordPress / Laravel
自主検証デモ
問い合わせを表にまとめる際、未記入や判断しにくい内容を見落とさず確認できるようにしたい。
固定の架空サンプルを画面内で整理し、語句による分類候補と確認事項を表に表示する。
合成データの分類候補、空欄・重複候補の表示、CSV出力を画面内で検証。AI、Googleフォーム・スプレッドシート連携、実際の送信・保存は未検証。
HTML / CSS / JavaScript / CSV
自主制作デモ・架空店舗
小規模店舗では、商品、営業時間、所在地、問い合わせ方法が分散すると、初めての方が来店や相談を判断しにくい。
焼き菓子、店のこだわり、店舗情報、問い合わせ導線を1ページ内で順番に確認できる構成へ整理する。
企画、文章、デザイン、HTML / CSS / JavaScriptによるレスポンシブ実装、店舗情報と問い合わせ導線の整備。
HTML / CSS / JavaScript / レスポンシブWebデザイン
自主制作デモ・架空企業
注文住宅とリフォームを扱う企業サイトでは、サービス、施工例、会社の考え方、相談方法が分散すると、初めての方が全体像をつかみにくい。
トップ、家づくり、施工事例、私たちについて、お問い合わせの5ページへ情報を分け、各ページから相談へ進める導線を整える。
5ページの情報設計、日本語コピー、デザイン、React / CSSによるレスポンシブ実装、共通ナビゲーション、問い合わせUIデモ、架空サイト告知。
React / CSS / レスポンシブWebデザイン / Codex Sites
自主制作デモ・架空イベント
アートイベントサイトでは、作品世界の印象と、展示内容・参加作家・開催情報を同時に伝えながら、動きが読みやすさや操作を妨げないようにする必要がある。
6つの場面を縦の物語として構成し、パララックス、Canvasの光粒、作品画像の奥行き表現を段階的に使いながら、スマートフォンと動きを減らす設定では読みやすさを優先する。
企画、日本語コピー、アートディレクション、Astro / CSS / JavaScriptによるレスポンシブ実装、Canvas 2D、スクロール連動演出、アクセシビリティ、外部送信を行わないチケットUIデモ、架空イベント告知。
Astro / CSS / JavaScript / Canvas 2D / パララックス / レスポンシブWebデザイン / Codex Sites
自主制作デモ・架空家具ブランド
家具ブランドのサイトでは、素材や職人の工程を説明するだけでなく、完成した家具が暮らしへ届くまでの価値を一続きの体験として伝える必要がある。
森、選木、成形、仕上げ、暮らしの5章を1本の連続動画と静的posterでつなぎ、通常の縦スクロールで物語を前後にたどれる構成にする。
ブランド設定、日本語コピー、アートディレクション、React / TypeScript / CSSによるレスポンシブ実装、連続動画のスクロール同期、posterフォールバック、reduced-motion対応、外部送信を行わない相談UIデモ、架空ブランド告知。
React / TypeScript / CSS / スクロール連動動画 / レスポンシブWebデザイン / Codex Sites
自主制作デモ・架空カフェ
店頭の紙のポスターから、メニューの雰囲気を立体と動きで伝える体験へつなげたい。
QRからWebページを開き、カメラを許可して同じポスターを認識する導線と、カメラなしで見られるプレビューを用意する。
架空店舗の設定、ポスターデザイン、Blenderでの3Dモデル制作、湯気とプリンのアニメーション、画像認識型WebAR、スマートフォン向け画面、A4印刷データ、公開プレビュー。
Blender / Three.js / MindAR / JavaScript / WebAR / ポスターデザイン
自主検証デモ
入力を終えてボタンを押しても表示が変わらず、相談が受け付けられたか分からない状態を想定する。
操作の再現、入力チェック、ボタンと受付処理の接続を順番に確認し、原因を絞って修正前後を比較する。
不具合の再現、HTMLの原因調査、ボタン設定の修正、入力チェックと画面内の受付表示の検証。メール送信・サーバー保存を含まない自主検証。
HTML / CSS / JavaScript / フォーム動作検証
自主検証デモ
スマホで案内カードの右側が見えず、内容を読むために横へ動かす必要がある状態を想定する。
固定幅が原因となる例を比較枠内で再現し、同じ内容が画面幅に収まる修正後と見比べる。
合成の案内カード1つで固定幅による横はみ出しを自主検証。実顧客サイトや別の原因は検証対象外。
HTML / CSS / レスポンシブ表示検証
自主制作デモ・架空店舗
焼き菓子の形やお店の雰囲気を、短い映像と動きで印象に残るよう伝えたい。
奥行きのあるショーケースと、商品が枠を覆う動きを組み合わせ、店名と色をそろえた10秒のループ動画にする。
演出設計、Blenderによるサブレとカップの3D制作、アニメーション、フルHD動画、Webページでの再生と観察方法の案内。
Blender / 3Dモデリング / アニメーション / HTML動画
