Progateの次、何すればいい？学習の”中だるみ”を乗り越える、初めてのポートフォリオサイト制作3ステップ

こんにちは。「大学生のためのIT活用ラボ」へようこそ。このブログを運営している、現役大学生のえいとです。

この記事を読んでいるあなたは、もしかしてこんな状態ではないでしょうか？

「ProgateでHTML/CSSコースを一通り終えたけれど、次に何をすればいいのだろう…？」

「復習を続けてはいるものの、同じことの繰り返しで少しモチベーションが落ちてきた…」

その気持ち、とてもよくわかります。それは、プログラミングを学ぶ多くの人が経験する「学習の中だるみ」という段階かもしれません。

地図のない冒険は、道に迷いやすい

チュートリアル教材をクリアした直後は、RPGで最初のダンジョンをクリアした時のような達成感があります。しかし、次にどこへ行けばいいのか、教材が示してくれなくなった途端、広大なフィールドに一人で立っているような感覚に陥ります。

明確なゴールがないままインプット学習だけを続けるのは、レベル上げだけを繰り返す単調な作業にも似ていて、いずれ飽きてしまうのも無理はありません。

その冒険に「宝の地図（＝ポートフォリオ）」というゴールを掲げましょう

もし、そんなあなたの冒険に「伝説の武器が眠る宝の地図」があったらどうでしょうか。次に向かうべき場所が明確になり、目標を達成した後の自分を想像すれば、自然と学習にも身が入るはずです。

プログラミング学習において、その宝の地図に当たるのが、今回提案する「ポートフォリオサイト（自分の作品集サイト）」の作成です。

この記事を読めば、学習の迷子状態から抜け出し、制作を通して楽しくスキルアップでき、さらには就職活動の武器まで手に入る、効果的な学習の進め方がわかります。

なぜ「ポートフォリ作り」が最強のモチベーション維持法なのか？

「いきなりサイト制作はハードルが高い」と感じるかもしれません。しかし、実はこれこそが、挫折を乗り越えるための近道になり得るのです。

理由1：日々の学習が”ゴール”に直結するから

ポートフォリオ作りを始めると、学習の目的が非常に明確になります。「なんとなくCSSを勉強する」のではなく、「サイトのヘッダーをおしゃれに配置するために、Flexboxの知識を習得する」というように、全ての学習が「サイトの完成」というゴールに繋がります。目的意識を持つだけで、知識の吸収率は格段に向上します。

理由2：自分の”レベルアップ”が目に見えるから

プログラミング学習でモチベーションを維持するのが難しい一因は、成長が実感しにくいことです。しかし、ポートフォリオを制作していると、自分のレベルアップがはっきりと目に見える形で現れます。

昨日までただのコードの羅列だったものが、ブラウザ上でおしゃれなボタンとして機能する。自分で書いたコードが、Webページという「作品」の一部になっていく。この「自分の手で何かを生み出している」という感覚は、何よりも強力なモチベーションになるでしょう。

理由3：強力な”ガクチカ”が手に入るから

特に大学生の皆さんにとって、これは非常に大きなメリットになります。面接で「学生時代に力を入れたことは何ですか？」と質問された場面を想像してみてください。

「プログラミングを3ヶ月間勉強しました」と答える学生と、「プログラミングを学び、自分のスキルや制作物をまとめた、こちらのポートフォリオサイトを自力で作成しました」と言って実際のサイトを見せられる学生とでは、どちらの言葉に説得力があるでしょうか。ポートフォリオは、あなたの努力とスキルを客観的に証明してくれる、最高の自己紹介ツールになるのです。

【3ステップで完成】初めてのポートフォリオサイト制作ロードマップ

それでは、早速ポートフォリオサイト制作という冒険の進め方を見ていきましょう。初めてでも問題ありません。この3つのステップに沿って進めてみてください。

ステップ1：設計図を描きましょう（企画・構成）

家を建てる際に、いきなり木材を組み立て始めないのと同じで、まずはサイトの設計図を描くことから始めます。

誰に、何を伝えたいか考える:
- 「採用担当者の方に、自分のスキルと意欲を伝えたい」
- 「同じ分野に興味がある学内外の仲間に、自分を知ってもらいたい」
掲載する内容を決める:
- 自己紹介: あなたがどんな人物で、何に興味があるのか。
- スキル: 使用できる言語やツール（HTML/CSS, C言語, AIツールなど）。「勉強中」でも全く問題ありません。
- 制作物: これから作る作品を掲載するためのスペースです。
- 連絡先: SNSアカウント（X, GitHubなど）へのリンク。
構成案を作る: どんな配置にするか、手書きでラフに描いてみるだけでも十分です。 【Tips】 ChatGPTに「大学生向けのポートフォリオサイトの構成案を、ヘッダー、メイン、フッターの要素に分けて提案してください」のように依頼すると、参考になるたたき台を作ってくれるので、ぜひ試してみてください。

ステップ2：素材を集めて組み立てましょう（実装）

設計図ができたら、いよいよ実装に移ります。

HTMLで骨組みを作る: まずはheader（頭部）、main（胴体）、footer（脚部）のように、サイト全体の骨格をHTMLで作ります。
CSSで見た目を整える: 文字の色や大きさ、背景色、レイアウトなどをCSSでデザインしていきます。ここは創造性を発揮できる、とても楽しい工程です。
【重要】完璧を目指さない: 最初からプロのような完璧なサイトは作れません。まずは「60点の完成度でいいので、一度公開する」ことを目指しましょう。拙くても、まずは「完成させた」という事実が自信に繋がります。
無料で世界に公開する: 「GitHub Pages」というサービスを利用すれば、無料で自分のサイトをインターネット上に公開できます。方法はインターネットで検索すれば、多くの解説記事が見つかりますので、ぜひ挑戦してみてください。

ステップ3：仲間や先輩に見せて”フィードバック”をもらいましょう（改善）

サイトが公開できたら、ぜひ勇気を出して周りの人に見せてみましょう。

大学の友人や先輩、サークルの仲間、SNSの学習コミュニティなどで「ポートフォリオサイトを作ってみました。もしよければ感想を聞かせてください」と伝えてみるのです。「ここの文字が、少し読みにくいかもしれない」「スマートフォンで表示した際に、少しレイアウトが崩れているようだ」といった客観的なフィードバックは、あなたを成長させてくれる貴重な経験値になります。そして、「すごいね！」という一言が、次の改善への大きなモチベーションになることは言うまでもありません。

【コラム】載せる制作物がない？それなら”好き”を形にしてみましょう

「ポートフォリオに載せる制作物がない」と悩むのは当然です。なぜなら、これから作っていくのですから。最初の制作物は、難しく考える必要はありません。自分が「好き」なことをテーマにするのが、楽しみながら続ける一番のコツです。

好きなゲームのキャラクター図鑑サイト
今まで見たアニメの感想まとめサイト
自分のおすすめ楽曲を紹介するプレイリスト風ページ
お気に入りのカフェのレビューサイト

自分の熱量を注ぎ込めるテーマであれば、デザインを考えたり文章を書いたりする作業も、きっと楽しめるはずです。

ポートフォリオ作りを加速させる”便利ツール”リスト

あなたの冒険に役立つ便利なツール（サイト）も紹介します。

デザインの参考資料: Pinterestや、Webデザインのギャラリーサイト（例: SANKOU!）で「ポートフォリオサイト」と検索すると、洗練されたデザインが多数見つかります。
無料で使える高品質な素材: Unsplashでは美しい写真が、ICOOON MONOではシンプルなアイコンが手に入ります。これらを活用するだけで、サイトの印象はぐっとプロフェッショナルになります。
より豊かな表現を可能にする学習サービス: サイトに動きをつけたい場合は、JavaScriptを学ぶのがおすすめです。Udemyなどの動画教材サービスでは、作りたい機能に合わせてピンポイントで学ぶことができます。