Zenn
👏

大学生向けプログラミングスクールの教材サイトをZennでゼロから作る話【プロジェクト始動】

に公開
Next.js
React
個人開発
idea

はじめに

皆さんはじめまして！あさひです。🌅
私は現在、GeekSalonという、大学生限定のプログラミングスクールでメンターをしています。日々、熱い思いを持った学生さんと一緒に、プログラミングの楽しさを伝えてるんですが…

最近、こんなことを思い始めました。

「もっと直感的に、分かりやすく学べる教材サイトがあればいいのにな〜」

って。

そこで今回、「自分たちで最強の教材サイトを作っちゃおう！」 ということで、ゼロから教材サイトを開発するプロジェクトを始動しました🔥

このZennでは、その開発のリアルな過程をゆるく・楽しく共有していきます！
「これから教材作ってみたい」とか「開発の裏側をのぞきたい」って人にも役立つと思うので、ぜひ気軽に読んでってください！

1. なぜ今、教材サイトを作るのか？ プロジェクトの背景と目的

メンターとして活動している中で、常にこんなことを考えてます。

「どうすれば、もっと楽しく・効率的に学べるんだろう？」

既存の教材もかなりブラッシュアップされてるんだけど、それでもまだ「もっとこうだったらいいのに…！」って場面がいくつかありました。

特に気になってたのが、この2つ👇

教材の改修・更新がしづらい

今の教材は、一度作ると修正とか追加がけっこう手間。
プログラミングって技術の移り変わりが早いので、常に最新に保つのって超重要なんですが、それがしづらいのが現状…。

受講生の学習進捗が可視化されづらい

受講生が「どこまでできてるのか」とか「どこでつまずいてるのか」が、今は正直つかみにくい…。
自分のペースを把握できないと、モチベも下がりがちだし、メンター側もサポートしづらくなる。

そんな背景から、

「柔軟に更新できて、進捗も見える、超わかりやすい教材サイトを作る！」

っていうのが今回の目的です。

常に最新かつ実践的な学習コンテンツの提供

教材の更新・改修が容易なシステムを構築することで、常に新しい技術や効果的な学習方法を取り入れ、学生に最適な学びの場を提供します。

学習進捗の「見える化」による自律学習の促進

学生が自身の学習進捗を一目で確認でき、達成感を味わいながら学習を継続できる仕組みを導入します。これにより、学生自身が学習計画を立てやすくなり、自律的に学ぶ力を育むことにも繋がります。
また、私たちメンターも学生の進捗状況を把握しやすくなるため、個別のサポートをより充実させることができます。

2. 使用予定の技術スタック

現時点で考えてる技術はこちら👇（変わる可能性もあるけど！）

  • React
  • TypeScript
  • Next.js
  • Tailwind CSS
  • Shadcn/ui
  • Supabase（DBと認証）
  • Vercel（デプロイ）

今のトレンド全開で構成してます！
Shadcn/ui が大好きなので、これを使ってバチバチに見やすいUIを組んでいきたいところ👀

3.今後のロードマップとZennでの発信計画

これからどのような流れで開発を進めていくのか、大まかなロードマップを提示します。

ロードマップ（仮）

  • 要件定義＆サイト設計
    → 必要な機能の洗い出し、ページ構成などを考える！

  • DB設計・API設計
    → Supabase使ってDBスキーマ設計、認証まわりもここで整える。

  • フロントエンド開発
    → UI/UXを実装。Tailwind & Shadcn/ui 大活躍の予定。

  • バックエンド開発
    → API実装やデータの取得、更新まわりをつくる。

  • テスト＆デプロイ
    → Vercelで公開、デバッグもがっつりやる。

  • 運用＆改善
    → 実際に使ってもらって、フィードバックベースで改善！

Zennでの発信予定

この開発の様子は、Zenn記事として随時公開していきます！

  • 各ステップでの学び
  • 詰まったポイントとその乗り越え方
  • UIデザインのこだわり etc…

「教材サイト開発の裏側、全部見せます！」くらいの気持ちで書いてく予定です📝
興味がある方は、ぜひフォローして追ってくれたら嬉しいです！

おわりに

ここまで読んでいただき、ありがとうございました！🙌
今回のプロジェクトでは、ただ教材サイトを開発するだけでなく、「より良い学びの体験とは何か？」 を考え抜きながら、形にしていきます。
その過程で得た気づきや技術的な挑戦は、同じように教育や開発に関心のある方々にとっても、何かヒントになればと思っています。

Zennでは今後も、開発のリアルな様子やノウハウを発信していきますので、ぜひフォローしていただけると嬉しいです。
また、記事を読んで感じたことやアイデアがあれば、コメントもお気軽にお寄せください！

Discussion