JUNKBRANDING
制作デモ一覧

制作デモサイト

LPから企業サイト、Webアプリまで。学習内容を活かした制作例をご紹介します。

公開中のデモは、実際に操作してご覧いただけます。掲載作品は、架空のブランドやサービスを題材にした学習用デモです。

レベルは、扱う課題と表現の複雑さの目安です。就職・受注やアワード受賞を保証するものではありません。

14作品

作品 01 · レベル 1

SHIJIMA｜香水ブランドのLP

JUNKBRANDING

香りの魅力と商品情報を伝えるLP。

• HTML
• CSS
• Vanilla JS

学習できる内容

• 香りの世界観から素材・容量・価格へと読み進められるよう、LPの見出しと情報の順序を組み立てる。
• 縦組みのコピーと商品写真をCSSで配置し、PCとスマートフォンで構図と文字の読みやすさを調整する。
• picture・srcsetで画像形式と解像度を切り替え、写真の見え方と読み込み量を両立させる。
• 容量の選択に価格・品番・ボトルのラベルを連動させ、JavaScriptのイベントと表示更新を実装する。
• メニューとデモ購入ダイアログをキーボードでも操作できるようにし、動きを減らす設定での表示を確認する。

完成デモを見る ↗詳細・ケーススタディ →

作品 02 · レベル 1

クリエイティブコンサルティングのLP

JUNKBRANDING

相談までの判断を支えるコンサルティングLP。

• HTML
• CSS
• Vanilla JS
• GSAP

学習できる内容

• サービス・強み・実績・FAQを相談までの流れに沿って並べ、訪問者の疑問に答えるLPを設計する。
• GSAPとScrollTriggerで見出しや横スクロールを制御し、画面幅と動きの設定に応じて演出を切り替える。
• 事例カードから詳細ダイアログを開き、閉じた後に元のカードへ操作を戻す処理を実装する。
• フォームの未入力・メール形式・文字数を検証し、エラーの場所と直し方を伝える表示を作る。デモでは送信しない。
• FAQやメニューを操作し、外部ライブラリが読み込めない場合にも本文を読めるか、主要機能を使えるかを検証する。

完成デモを見る ↗詳細・ケーススタディ →

作品 03 · レベル 2

建築設計事務所のコーポレートサイト

JUNKBRANDING

事務所紹介・業務案内・6件の設計事例を掲載した、建築設計事務所の企業サイト。

• HTML
• CSS
• Vanilla JS

学習できる内容

• 事業紹介・会社情報・実績一覧・実績詳細の役割を分け、複数ページを行き来できるサイトマップを作る。
• 建築写真の縦横比と余白を揃え、一覧の比較しやすさと詳細ページでの写真の見せ方を設計する。
• 所在地・用途・竣工年などの実績情報を共通の項目に整理し、物件が増えても使えるページ構成を作る。
• ヘッダー・フッター・現在地表示を各ページで揃え、実績から問い合わせへ進める導線を実装する。
• ページごとの見出し・メタ情報・画像代替文を整え、リンク切れとスマートフォンでの読みやすさを点検する。

完成デモを見る ↗詳細・ケーススタディ →

作品 04 · レベル 2

クリエイティブスタジオのコーポレートサイト

JUNKBRANDING

制作姿勢と仕事を伝えるスタジオの企業サイト。

• HTML
• CSS
• Vanilla JS
• GSAP

学習できる内容

• スタジオの強みと仕事の進め方を整理し、作品紹介だけでは伝わらない依頼する理由をページ構成に落とし込む。
• 文字サイズ・余白・色・ボタンのルールを定め、トップ・実績・会社紹介に共通するデザインを作る。
• GSAPで見出しや作品の出現タイミングを制御し、読む順序を助ける動きと装飾の動きを使い分ける。
• 事例を課題・提案・制作範囲の順に紹介し、サービス案内から関連事例、相談へつながる導線を設計する。
• 動きの低減、キーボード操作、長いタイトルへの対応を確認し、演出を止めても情報が伝わる状態を作る。

完成デモを見る ↗詳細・ケーススタディ →

作品 05 · レベル 2

Recruitment

JUNKBRANDING

仕事と組織を知り、応募を検討する採用サイト。

• HTML
• CSS
• JavaScript
• JSON

学習できる内容

• 仕事内容・働く環境・募集要項・応募方法を整理し、応募者が必要な条件を比較できる採用サイトを設計する。
• 職種・勤務地・雇用形態などをJSONの項目として定義し、データから募集一覧と詳細を表示する。
• 募集条件の絞り込みを実装し、該当する求人がない状態と条件を解除する操作も用意する。
• 募集終了や情報変更を想定し、表示処理と求人データを分けて、更新箇所を限定できる構造にする。
• 必須項目・未入力時の表示・更新担当者の手順を整理し、将来CMSへ移す際に必要な項目と運用を説明する。

完成デモを見る ↗詳細・ケーススタディ →

作品 06 · レベル 2

Fashion Brand

JUNKBRANDING

コレクションの世界観を伝えるブランドサイト。

• HTML
• CSS
• JavaScript
• GSAP
• Canvas

学習できる内容

• コレクションのコンセプトを写真の順序・文字組み・配色へ展開し、一貫したブランドの見せ方を作る。
• 縦長・横長のルック写真を組み合わせ、画面幅が変わっても服や人物の見せたい部分が残る配置を設計する。
• GSAPで写真とコピーの切り替えを組み立て、スクロールと演出の速度を調整する。
• Canvasで型紙を描画し、表示サイズとピクセル密度に合わせた寸法調整、描画できない場合の代替を確認する。
• 演出を減らした表示と静止画の代替を用意し、コレクションの閲覧や商品情報への移動を妨げないか確認する。

完成デモを見る ↗詳細・ケーススタディ →

作品 07-01 · レベル 2

WordPress｜エディトリアルメディア

JUNKBRANDING

記事を編集・更新して届けるメディアサイト。

• WordPress
• PHP
• MariaDB

学習できる内容

• 記事・カテゴリ・著者の関係を整理し、トップ、記事一覧、記事詳細、検索結果の情報構成を作る。
• WordPressのテンプレート階層に沿ってPHPファイルを分け、共通部分とページ固有の表示を実装する。
• 投稿データを一覧と詳細へ出力し、ページ送り、検索結果なし、画像未設定などの状態を作る。
• 下書き・プレビュー・公開・更新の編集手順を試し、編集者が迷わず記事を追加できる入力ルールを整える。
• 出力のエスケープ、権限、バックアップを確認し、テーマ変更や更新の後も記事を読める状態を維持する。

完成デモを見る ↗詳細・ケーススタディ →

07-02WordPress Site

作品 07-02 · レベル 2 · 準備中

WordPress｜別デザイン・別構成

JUNKBRANDING

制作予定：目的に合わせてデザインと情報構成を組み立てるWordPressサイト。

• WordPress
• PHP

学習できる内容（予定）

• サイトの目的と読者を決め、既存のメディアサイトとは異なる情報構成を設計する。
• ページごとの役割を整理し、WordPressのテンプレートへ分けて実装する。
• 更新担当者が編集する文章・画像・項目と、テーマで管理する表示を分ける。
• 画面幅に合わせて文字組みや画像の配置を調整する。
• 下書き・公開・画像更新の手順と、公開後の表示を確認する。

準備中・デモは未公開

07-03Headless WordPress

作品 07-03 · レベル 3 · 準備中

WordPress｜ヘッドレスAPI

JUNKBRANDING

制作予定：WordPressを記事管理に使い、APIでつないだ別の画面へ表示するサイト。

• WordPress
• REST API
• JavaScript

学習できる内容（予定）

• WordPressで管理する情報と、閲覧画面がAPIから受け取る項目を整理する。
• 記事・カテゴリー・画像をAPIで取得し、一覧と詳細へ表示する。
• 読み込み中・取得失敗・記事なしの状態と、再試行の操作を設計する。
• 公開記事と下書きを区別し、認証が必要な情報の扱いを確認する。
• 記事更新を表示へ反映する方法と、ページのURL・SEOを設計する。

準備中・デモは未公開

08Global Architecture

作品 08 · レベル 2 · 準備中

Global Architecture

JUNKBRANDING

制作予定：日本語・英語で事業を紹介する建築企業サイト。

• HTML
• CSS
• JavaScript
• i18n

学習できる内容（予定）

• 日本語と英語のページ対応を定め、言語を切り替えても同じ事業・実績を見られるURL構成を設計する。
• 見出し・ナビゲーション・説明文を翻訳用データに分け、表示処理と文章の管理を切り離す。
• 英訳で文字数が増えた場合の折り返し、ボタン幅、写真との配置を調整し、両言語でレイアウトを確認する。
• lang・hreflang・canonicalをページの対応関係に合わせて設定し、言語別の見出しやメタ情報を整える。
• 翻訳が未完成のページや存在しないURLの扱いを決め、言語切替・直接アクセス・戻る操作を検証する。

準備中・デモは未公開

09Interactive Studio

作品 09 · レベル 3 · 準備中

Interactive Studio

JUNKBRANDING

制作予定：操作を通じて表現を体験するスタジオサイト。

• Vanilla JS
• Canvas
• GSAP

学習できる内容（予定）

• 作品を探す、詳細を見る、一覧へ戻るという基本操作を先に設計し、その流れにCanvas表現を組み合わせる。
• ポインター・タッチ・キーボードの入力を扱い、マウスを使わない環境でも作品へ進める操作を実装する。
• Canvasの描画をrequestAnimationFrameで更新し、画面外や非表示タブで処理を止める仕組みを作る。
• 画面幅とピクセル密度に応じて描画サイズを調整し、滑らかさと端末への負荷を測って比較する。
• モーション低減時や描画機能が使えない場合の代替表示を用意し、演出がなくても作品情報へ到達できるか確認する。

準備中・デモは未公開

103D Audio Product

作品 10 · レベル 3 · 準備中

3D Audio Product

JUNKBRANDING

制作予定：音響製品の構造を3Dで伝えるプロダクトサイト。

• Three.js
• WebGL
• GLSL
• Vite

学習できる内容（予定）

• Three.jsのシーン・カメラ・ライトを組み立て、音響製品の形状と素材が伝わる3D表示を作る。
• モデルとテクスチャを読み込み、待ち時間・読み込み失敗・静止画の代替を含む表示状態を設計する。
• スクロールやボタン操作を視点移動や部品の説明に結び付け、製品を理解するための操作を実装する。
• GLSLで光や素材の表現を調整し、モデル容量・描画解像度・フレームレートの関係を計測する。
• WebGLが使えない環境や低性能端末でも商品情報を読めるようにし、Viteのビルドと公開先でのアセット参照を検証する。

準備中・デモは未公開

11SPA Portfolio

作品 11 · レベル 3 · 準備中

SPA Portfolio

JUNKBRANDING

制作予定：作品を行き来できるSPAポートフォリオ。

• React
• TypeScript
• Vite
• React Router

学習できる内容（予定）

• Reactで作品カード・絞り込み・詳細画面をコンポーネントに分け、TypeScriptで作品データと受け渡す値の型を定義する。
• React Routerで一覧と詳細のURLを設計し、作品への直接アクセスとブラウザーの戻る・進むに対応する。
• 検索条件や選択中のカテゴリをURLと同期し、再読み込みやURL共有で同じ一覧を再現できるようにする。
• 読み込み中・エラー・該当作品なしの画面を作り、画面切替時のタイトルやフォーカスの移動も扱う。
• Viteのbase設定と配信側のルーティングを揃え、サブディレクトリ公開と詳細URLの再読み込みを検証する。

準備中・デモは未公開

12Award Challenge

作品 12 · レベル 4 · 準備中

Award Challenge

JUNKBRANDING

制作予定：独創性と使いやすさを磨く総合制作サイト。

• HTML
• CSS
• JavaScript
• Three.js
• WebGL
• GSAP
• Vite

学習できる内容（予定）

• 誰に何を伝える作品かを言葉にし、コンセプト・閲覧体験・技術選定を結び付けた企画とプロトタイプを作る。
• 写真・タイポグラフィ・3D・モーションの役割を決め、各表現を一つの閲覧体験として組み合わせる。
• ローディングからページ移動までの操作を設計し、キーボード操作・モーション低減・代替表示も完成させる。
• 画像や3Dデータの容量、描画負荷、読み込み時間を計測し、表現の効果を保ちながら改善する。
• 第三者の操作観察から課題を見つけて修正し、制作意図・担当範囲・検証結果・素材の出典をケーススタディにまとめる。

準備中・デモは未公開

この条件に合う作品はありません。条件をリセットしてお試しください。