AIを活用したUI/UXポートフォリオ (&&&) 「ヤバい」と言わせたポートフォリオの方向性

面接を受けてきた学生の感想 ' AIと二人で楽しく7ヶ月間、商用教室管理アプリ「Crowny Class」を作り、実際に使っています。この講義は、その過程で私が挫折したこと、試行錯誤したこと、そして最後に成果を手にした方法をそのままお見せします。理解しにくいGitHubやAIを活用した制作方法も、授業についてくれば、プレイ可能なゲームの高度化や、URLを持つ自分のウェブポートフォリオの高度化まで完成させることができます。

5名 が受講中です。

難易度 入門

受講期間 無制限

HTML/CSS
HTML/CSS
GitHub
GitHub
Portfolio
Portfolio
AI Agent
AI Agent
Vibe Coding
Vibe Coding
HTML/CSS
HTML/CSS
GitHub
GitHub
Portfolio
Portfolio
AI Agent
AI Agent
Vibe Coding
Vibe Coding

受講後に得られること

  • AIの可能性の範囲

  • GitHub の簡単な理解

  • インターネットアドレス(URL)が生成されるマイウェブポートフォリオ

  • AIの種類と活用方法

  • 「ヤバい」と言わせるポートフォリオの方向性

この講義は「コーディングマスターになってください」とは言いません。

代わりにこう問いかけます。何を?なぜ?どのように作りたいのか

ですので、この講義は知識を積み上げる代わりに完成を経験することを目的としています。

AIというツールを傍らに置き、何を考えるべきか、どこに集中すべきかを知ることになります。



講師紹介

他の先生方より実力が優れているのではなく、

他の人が見落とす部分に気づき、自分ならではのスタイルでクラスをケアすることで

現在5年間、全国の国費デジタルデザイン1位の講師を務めております。


なぜ2つの例を両方お見せするのか

この講義には2種類の成果物が登場します。

一つ、私が制作した商用アプリでの運営 — Crowny Class。
これは「講師が実際にどこまで作り上げたことがあるか」という証拠です。

講師の経験は、学生にとっても貴重な財産になります。


何を作りたかったのか(意図) → どのようにアプローチしたのか(過程) → どこで詰まったのか(問題) → 結局どのように解決したのか(結果)、このストーリーで解き明かします。

講義で伝えている手法が実戦で通用することを、実際に運営されているアプリでお見せします。


二つ目、受講生が制作したポートフォリオ — ジウォン、ミンジュ学生の作品。
FANCIVE, LUNA, ONVINYL, MathHub…

デザイン非専攻者とコーディング非専攻者だった学生が、AIと共に作り上げたUI/UXポートフォリオです。

ですが正直なところ、講師のアプリだけをお見せすると、こんな風に思われるでしょう。「まあ、講師だからできたんでしょ。私は違うし」その通りです。その疑念は当然ですし、誰でも抱くものです。だからこそ、受講生の事例も併せてお見せします。講師だからできたのではなく、普通に始めた人もできたということを証明するものが必要だからです。

講師が作ったアプリと学生のポートフォリオ — この両方が揃ってこそ、ようやく「自分もやってみようか」と思えるようになります。片方だけでは不十分です。だから、両方を公開します。


この講義の目標

この講義を最後まで進めると、あなたの手元にはこのようなものが残ります。

  • 直接プレイできるゲーム — 実際に動作する成果物

  • URL付きのウェブポートフォリオ — GitHub Pagesでデプロイし、他人にリンクで見せることができる本物のウェブサイト

  • 動作するアプリ — 実際に実行されるプログラム

3つとも「講義を受けた」ではなく「自分が作った」と言えるものばかりです。

そして、結果物よりも長く残るものが一つあります。AIに仕事をさせる方法 — 細分化し、文脈を与え、エラーをフィードバックするこの流れは、ゲームであれアプリであれ、今後何を作るにしても同様に通用します。

3つの成果物は証拠であり、本当に手に入れるべきはこの手法です。


これからの準備

ただし、いくつか注意点(準備すべきこと)を確認してください。

  • 有料版Claude AI推奨 — 無料でも始められますが、行き詰まった際に行き止まることなく最後まで進めるには、有料版AIの方がはるかに心強いです。迷う時間を節約してくれます。AI時代にAIを無料で使うということは、弾丸のない銃を持って戦場に行くようなものです。

  • GitHubアカウント — デプロイするために必要です。作成方法も講義の中で一緒に扱います。

  • HTML、変数…といった単語を聞いたことがある程度 — 深く知る必要はありません。「そんなものがあるらしい」というレベルで十分です。普段から勘が鋭い方なら、なお良いです。



メンター申請

私の教え子たちも、今やAIの専門家です。

必要な場合、メンターをお繋ぎすることもできます。同じ学生の立場としてのメンターなので、大きな助けになると思います。



こんな方に
おすすめです

学習対象は
誰でしょう?

  • AIに興味がある方々

  • 講義はたくさん受けたけれど、いざ「自分の手元に残る成果物」が一つもない方

  • AIに「コードを書いて」と頼んでみたものの、その次どこに貼り付けてどう動かせばいいのか分からず、止まってしまった方

  • コーディングを少し聞いたことはあるけれど、最後まで一つを完成させたことがない方

前提知識、
必要でしょうか?

  • デザインとHTMLの基礎知識があれば望ましいですが、なくても可能です。

  • 有料AIの使用を推奨します。

こんにちは
dunopiです。

1,421

受講生

21

受講レビュー

24

回答

4.7

講座評価

10

講座

ウェブデザイン技能士実技

全国平均合格率60%で

私たちのクラスは90%合格中ですよ〜ん!

カリキュラム

全体

18件 ∙ (3時間 46分)

講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

dunopiの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!

期間限定セール、あと2日日で終了

¥23

70%

¥12,826