業種別サンプル集講座を見る

制作3日目の成果物

12業種ぶんの
Webサイトサンプル集

バイブコーディングの公開講座で、実際に手を動かして作ったサンプルの一覧です。 業種ごとに「サイトで何を解決したいか」が違うので、ページ構成もレイアウトもそれぞれ変えています。同じ題材を1日目にも作っていて、そちらも公開しています。

サンプルを見る1日目に作った版を見る
掲載業種
12業種
想定ページ数
47ページ
制作期間
3日

サンプル一覧

それぞれのカードに、そのまま組めるレイアウトの型を載せています。 カードを開くと、なぜその並びにしたのかまで読めます。

12件を表示中

DAY 1 → DAY 3

2日ぶんで、ここが変わりました

1日目に作ったものを捨てずに、そのまま育てています。 作り直しではなく、足していく進め方です。

  • ページ数

    1ページ

    13ページ（一覧 ＋ 業種別12件）

  • 一覧の見せ方

    縦に並べただけの文字リスト

    カテゴリで絞り込めるカード一覧

  • 業種の説明

    ページ構成を文字で書く

    画面の型をそのまま図にする

  • 配色

    白地にアクセント1色

    明暗2テーマ＋業種ごとのアクセント

  • 文字

    端末に入っているフォント任せ

    本文と見出しのフォントを指定して読み込み

  • 動き

    なし

    スクロール連動・数え上げ・進捗バー

  • SNSで共有したとき

    URLの文字列だけ

    カード画像が自動で付く

1日目の版は こちら。見比べると、2日ぶんで足せる量がそのまま分かります。

よくあるご質問

  • プログラミングの経験がなくても受けられますか？

    はい。講座は「作りたいものを言葉にする」ところから始めます。コードは読めるようになりますが、書けるようになることは前提にしていません。

  • このサイトも講座と同じやり方で作られていますか？

    同じです。1日目に作ったシンプルな一覧ページを、2日目・3日目で作り替えていきました。1日目の版もそのまま公開しています。

  • 自分の会社のサイトを題材にできますか？

    できます。実際の業種で進めたほうが学びが残るので、お持ちの素材があれば当日ご持参ください。

  • 作ったサイトはそのまま公開できますか？

    できます。講座の最終日に、無料の範囲で使えるホスティングへ公開するところまで一緒にやります。

  • 必要なものはありますか？

    ノートPCをお持ちください。開発環境の用意も初日に行います。

3日で、公開まで終わらせる

初日に1ページ作って公開し、残りの2日で育てる。 このサイトで見てもらった流れを、そのまま自分の題材でやります。

まずはサンプルを見る

※ 掲載しているサンプルは、講座用に作成した架空のものです。