【Web開発】「ガクチカがない」と震える夜を終わらせる。AIと15分で作る「ポートフォリオ」が、最強の精神安定剤になる話

web開発

「エントリーシートに書けることが何もない…」

「周りはインターンや留学ですごい実績を作っているのに、自分はバイトしかしていない」

就活や将来のことを考えると、胸がギュッと締め付けられるような不安に襲われませんか?

自分だけが、何者でもない透明人間になったような感覚…。

その不安の正体は、能力不足ではありません。

自分という人間が、社会から見えていない(可視化されていない)」という恐怖です。

今回は、その透明人間の恐怖を、たった15分で消し去る方法を教えます。

それは、「自分だけのポートフォリオサイト(Web名刺)」を持つことです。

「実績がないのにサイトなんて作れないよ!」と思いましたか? 逆です。

実績がないからこそ、先に「箱」を作るのです。

今回はAIを使って、コード知識ゼロで「世界に一つだけの自分の拠点」を作る手順を解説します。 これは就活対策ではありません。あなたの自尊心を取り戻すための「Web開発」です。

なぜ、HPを作ると「自信」が湧くのか?

心理学的に、不安は「コントロールできないもの」に対して発生します。

  • 「面接官にどう思われるか」
  • 「不景気で採用が減るか」…

これらはコントロールできません。

しかし、「自分のWebサイト」は違います。

背景の色も、フォントも、載せる文章も、すべてあなたが支配できます。 この「自分だけの城を持っている」という全能感が、折れそうな心を支える最強の柱になるのです。

実践:AIに「自分だけの城」を設計させる

今回も、黒い画面は使いません。 ChatGPT(またはClaude)に、以下の「設計図」を渡してください。

今回は、あえて「実績」を書く欄を排除し、「これからやりたいこと」にフォーカスしたデザインにします。

あなたは洗練されたWebデザイナーです。 以下の要件で、私の「自己紹介ポートフォリオサイト」を1つのHTMLファイルで作ってください。

【コンセプト】 ・「実績」ではなく「好奇心」を展示するサイト ・ミニマリストで、余白を活かした美術館のようなデザイン

【構成要素】

ヘッダー:自分の名前(英語でおしゃれに)

ヒーローセクション:「I am a Learner(私は学ぶ人です)」というキャッチコピー

My Interest(興味):今勉強していること(例:Python, 読書, 筋トレ)をアイコン付きで3つ並べる

Footer:SNSリンク

【技術指定】 ・Google Fontsを使って、高級感のあるフォントにする ・PCでもスマホでも崩れないレスポンシブデザイン ・色は「モノトーン」で統一

ポイントは、

「過去の実績(Past)」ではなく「現在の興味(Present)」を表示させることです。

これなら、何も成し遂げていない今のあなたでも、堂々と公開できます。

手順:15分で「Web上の自分」を誕生させる

AIがコードを書いてくれたら、いつもの手順で具現化しましょう。

  • STEP1
    コードをコピーする AIが出力した英語のコードを全文コピーします。

  • STEP2
    メモ帳に貼り付けて保存 ファイル名を「portfolio.html」にして、デスクトップに保存します。拡張子を「.html」にするのを忘れずに。
  • STEP3
    ブラウザで開いてニヤニヤする ファイルをダブルクリックしてください。そこに、プロが作ったような洗練されたサイトが現れます。あなたの名前が入った、あなただけのサイトです。

中身がない? それでいいんです

画面に映ったサイトを見て、こう思うかもしれません。

「デザインはいいけど、中身がスカスカだな…」

それが狙いです。

綺麗な「空っぽの箱」が手に入ると、人間の脳は不思議なことに、「ここを埋めたい!」とポジティブに動き出します。

「Interestの欄に『Python』って書いちゃったから、ちょっと勉強してみようかな」 「読書の感想をここに書き溜めていこうかな」

「実績ができたら作る」のではなく、

「作ったから実績が生まれる」のです。

順番を間違えてはいけません。

【応用編】「何者でもない」を「未知数の大物」に見せる魔法

先ほどのシンプルなHTMLでも十分ですが、クオリティを引き上げてみました!

名付けて、「Futurestream Portfolio(フューチャーストリーム・ポートフォリオ)」です。

このポートフォリオの「すごい」仕掛け

  1. “Learning”の可視化: 実績(過去)の代わりに「今勉強している言語や本」をタグとして美しく並べることで、「成長性」をアピールします。
  2. スクロール・リベール(出現)アニメーション: 画面をスクロールすると、ふわっと要素が浮き上がります。これだけで「Webに詳しい学生」という演出が可能です。
  3. 没入感のあるダークモード: あえて背景を暗くすることで、情報の少なさを隠しつつ、「知的でクール」な印象を相手に植え付けます。

まとめ:あなたはもう「透明人間」ではない

Webサイトを持っている大学生や若手社会人は、

全体の1%もいません。

この「portfolio.html」というファイルを持っているだけで、あなたはもう上位1%の「クリエイター」です。

面接で「ガクチカは?」と聞かれたら、スマホを取り出してこのサイトを見せてください。 「実績はまだありません。でも、Webの仕組みを理解するために、AIを使って自分でサイトを構築し、現在進行形で学習記録をつけています」

そう言える学生を、企業が放っておくはずがありません。

まずは騙されたと思って、箱だけ作ってみてください。 その箱が、あなたの未来を勝手に引き寄せてくれます。

もし、「自分の作品をどう見せればいいか分からない」「クリエイティブな自信をつけたい」という人は、この本が特効薬になります

「作品」なんて大層なものじゃなくていい、「過程」を見せればいいんだ

と気づかせてくれる名著です。

さあ、今すぐAIに話しかけて、あなたの城を建てましょう!

コメント

タイトルとURLをコピーしました