これは、Web制作（コーディング）でポートフォリオを作ろうとして挫折しかけている人の話です。
こんにちは。はじめまして。
現在スクールでWeb制作を学んでいる、りこと申します。
私はフリーランスを目指し、2025年の6月からスクールでWebコーディングを学んでいます。
これまでにHTML・CSS・JavaScript・PHP等を学び、制作会社向けの営業の準備として、今年の1月からポートフォリオ作成を始めました。
当初は1月中に完成予定だったものの、2月上旬の現在、まだ完成していません。
私の失敗経験が、これからポートフォリオを作る方の参考になれば幸いです。
ポートフォリオ作りで心が折れた瞬間
どこで心が折れたのか。
それは、下層ページをHTMLからPHPに移行した瞬間、めっちゃ崩れた。ということ。
しかも、全部が崩れた（HTML構造のままでそもそも全体にCSSが当たってない）のではなく、一部だけ崩れている（一部のクラスにだけCSSが当たっていない）という状態でした。
検証ツールで探しても、SCSSやHTMLをいくら見返しても、原因が分からない。
普段だったら、チャッピーにコードを貼って原因を探してもらったり、検証ツールを細かく見るなどとにかく「仮説＆検証」で原因を特定します。
しかし、静的コーディングの時点で自分のコードがぐちゃぐちゃなことに疲弊していた私。これまで張り詰めていた糸がプツンと切れるように、その日からVSCodeを開くことが嫌になってしまいました。
ポートフォリオ作りから立ち止まって気付いた課題
スクール受講以来、初めて、ちゃんと立ち止まって自分のコーディングについて見直しました。
そして見えてきた、3つの課題。
ポートフォリオ作りで気付いた課題①：HTMLもCSSも設計が甘かった
まず何よりも第一に、設計が甘かった！！！
どういうことかというと、1ページのサイトと、複数ページのサイトでは求められる設計基準が違う！ということ。
コーディングし始める前に、
- 共通パーツの洗い出し
- クラス名の付け方
- SCSSファイルの分け方
をもっとしっかり整理するべきでした。
ボタンを例に挙げると、
ベースとなる「.button」と、色が違うパターン「.button–accent1」「.button–accent2」を作ってマルチクラスにすればよかった。
トップページの真ん中ぐらいまで作ってから、「ボタン、結構いろんなパターンあるじゃん…」と気付きました＾＾;
「セクションごとにボタンに直接colorとかbackgroudとか当ててしまった～～～修正…」とたくさんの手戻りが発生してしまいました。
ポートフォリオ作りで気付いた課題②：インプットが少なすぎた
2つ目は、インプットが少なすぎたということ。
私はポートフォリオを作る直前に、3週間ほどでサラッとPHPを学習しました。
「インプットしているだけでは稼げない」という想いから、
「PHPも2割理解ぐらいでインプット→ポートフォリオでアウトプットしながら分からないところは調べて補う！」といった進め方をしました。
しかし、実際ポートフォリオを作り始めてみると「ヘッダーとフッターはheader.phpとfooter.phpに分ける」ぐらいしか知識がないことに気付きました＾＾;
要は、インプットが少なすぎたのです。
以前簿記を学んでいた際に「インプット4割・アウトプット6割ぐらいがちょうどいいな」と感じた私にとって、2割理解レベルのインプットでPHPを書くことはストレスが大きすぎたのです。
※ただ、インプットとアウトプットの割合は人によって異なると思います。自分にあった配分にしないと挫折の原因になるということです。
ポートフォリオ作りで気付いた課題③：時間をかけることを恐れすぎた
3つ目は、時間をかけることへの恐れ。つまり「早く終わらせようとしすぎた」ということです。
ポートフォリオを作るにあたって、私は「3週間で完成させる！！」という、自分にとってなかなか無謀な計画を立てました。
サイトは
- トップページ
- 制作実績一覧ページ
- └制作実績詳細ページ
- お問い合わせページ
- サンクスページ
- 404
- プライバシーポリシー
という構成。
スケジュールとしては、静的コーディング10日、動的コーディング6日、最終調整5日、みたいな計画でした。
私は、とにかく早く営業しはじめたい。早く稼ぎ始めたい。と、結果を焦るあまり「ぐちゃぐちゃでもいいからとにかく早く完成させる」ことを目的にしていました。
自分に合っていない進め方をすると、最後の修正がとんでもなく大変になります。
私は1セクションずつ丁寧に・ゆっくり作って、最後の修正は軽微に済ませたいタイプ。
なのに、早く完成させたいばかりに、すべてのセクションが中途半端。最後の修正量がとんでもない、という状態になってしまいました。
もっとゆっくり、確実に、1セクションずつ丁寧に作ればよかった。この後悔が残る結果となりました。
これからポートフォリオを作るコーダー志望の方へ
本記事を3行でまとめると、以下のとおりです。
- 最初のHTML・CSSの設計は丁寧すぎるぐらいでちょうどいい
- 「インプット不足でのアウトプット」はストレス大・時間もかかる
- 「早く」より「自分のペースで焦らず」
これからポートフォリオを作る方は、私のように未経験からフリーランスを目指されているケースが多いのではないでしょうか。
これは初めて複数ページのコーディングをして、失敗した例だと言えます＾＾
ただ、未経験からフリーランスを目指しているからこそ、ポートフォリオで失敗経験をし、実務での成功に結びつけられる。
読者のみなさんが私の経験を参考に、ポートフォリオを作り、フリーランスに近づく第一歩を踏み出せたらとても嬉しいです！読んでいただき、ありがとうございました。