前回、ポートフォリオ作りで心が折れた理由を書きました。
そして思い切って、ポートフォリオを作り直す。つまり1からコーディングし直すと決めました。
そこで本記事では、私がポートフォリオ作りで詰んだ理由、「もうこれ以上は作れない」と思った具体的な理由を解説します。
結論、私がポートフォリオ制作で詰んだ理由は以下の4つ。
- トップページからコーディングしはじめたこと
- マルチクラスの使い方が下手
- 共通化が足りなかった
- PHPのインプットが足りなかったがゆえの拒否反応
今ポートフォリオを作っているという方、これから作るという方、そして私のように「作り直したい…」と思いつつ悩んでいる方にとっても役立つ失敗談になっています（笑）
この記事が、ポートフォリオに不安を抱えている方のお役に立てたら嬉しいです！
なぜポートフォリオを「作り直す」と決めたか
結論から言うと、
- ポートフォリオとして使っていくには運用がしにくい
- 今の技術では案件が取れたときに喜べない
と思ったからです。
ポートフォリオとして使っていくには運用がしにくい
今回の制作での問題は「デザインカンプを再現できていないから」ではなく、「コーディング前に十分な設計ができてなかったから」です。
ホームページというのは、作って終わりではありません。
その後も、長期的に運用していくものです。
ポートフォリオも同じ。
今後、
- 制作実績や下層ページが増える
- 逆に、掲載不要な実績や下層ページを削除する
- デザインやHTMLタグの変更
など、運用にあたって変更・追加・削除がつきもの。
設計が未熟な今の状態では、今後ポートフォリオとして使っていくには運用しにくいと判断しました。
今の技術では案件が取れたときに喜べない
さらに率直な気持ちとしては、今の自分の技術で仕事が取れたとして、喜びよりも不安が勝ってしまいます。
自信を持って貢献できると判断できないのに、お金を稼ぎたいがためだけに営業はできない。というのが、私の考えです。
これらのことから、「ポートフォリオを作り直す」のが、今の自分にとってベストだと判断しました。
自分がWordPressのポートフォリオで詰んだ具体的な理由4つ
では具体的に、私のポートフォリオ制作は何がダメだったのか。
ポートフォリオ作りで詰んだ理由としては、以下の4つ。
- トップページからコーディングしはじめたこと
- マルチクラスの使い方が下手
- 共通化が足りなかった
- PHPのインプットが足りなかったがゆえの拒否反応
順番に解説していきます。
詰んだ理由①：トップページからコーディングしはじめたこと
詰んだ理由の1つ目、これがいちばん大きかったです。
そもそも、下層ページではなくトップページからコーディングしたのが最大の間違いでした。
トップページというのは、「下層ページの寄せ集め」のような側面があります。
下層ページを先に作ることによって、トップページは下層ページをコピペするだけで作れちゃったりする。
私はトップページからコーディングしたことよって、「このitem、下層ページでも何回もでてきたのにトップページ独自のクラス名で作っちゃった…」と、共通化するべきところを見逃し、結局別のクラス名に書き換えて共通化…と無駄な手戻りが大量発生しました。
「下層ページを先に作る」というのは、1ページのLPしか作ったことがなかった私にとって最大の間違いであり最大の学びになりました。。。
詰んだ理由②：マルチクラスの使い方が下手
詰んだ理由2つ目、「マルチクラス」の使い方が下手だったこと。
そもそもマルチクラスというのは、1つのHTML要素に対して複数のクラスを当てること。
例えば、画像のような色違いのボタン。
マルチクラスでは、buttonとbutton—accent1のクラスを当てます。
- button
- → paddingやfont-size、border-radius等の共通のスタイル
- button—accent1
- → background等のボタンごとに変わる個別のスタイル
と、複数のクラスを当てることで、色違いのボタンでもbutton—accent2、button—accent3と2つ目のクラスを増やすだけでバリエーションを増やせます。
私の場合、「button—accent1」ではなく「contact__button」のようにセクション内でのクラスにスタイルを当てていました。
これではcontactセクションとaboutセクションで同じ色だったとしても、「about__button」「contact__button」でCSSに同じ記述をしないといけません。。。
「button—accent1」にすれば、HTMLにクラス名を足すだけでよかったのに！
詰んだ理由③：共通化が足りなかった
詰んだ理由3つ目は、共通化が足りなかったこと。
当たり前ですが、共通パーツを最初に作ってしまえば、その後のコーディングは圧倒的に速くなります。
私の場合、
- ボタン
- セクションタイトル
- ホバー時のopacity（リンク、ロゴなど）
- パンくずリスト
等を共通化しました。
が、共通パーツを洗い出す際、下層ページをあまり見ていませんでした…。
下層ページにこそ共通パーツが詰まっているのに、トップページだけを見ていた私。
詰んだ理由1つ目とも繋がりますが、私はコーディングを進めて初めて、トップページと下層ページに共通しているパーツがあると気付いたのです。
トップページをすでに作ってしまっているため、共通化したくても時間がかかる。めんどくさい。とパワーで静的コーディングを乗り切ったものの、結局動的コーディングでHTMLをPHPに移したら崩れた。
「でも共通化していないから原因がどこのコードなのか分からない…！」と、修正が難しい事態になってしまいました。
詰んだ理由④：PHPのインプットが足りなかったがゆえの拒否反応
詰んだ理由4つ目は、PHPのインプットが足りなかったこと。
それによって、「実装方法の検索」に大きな拒否反応が起きてしまいました。
コーディングする中で、実装法が分からないことが出てきた場合
- 分からないことは検索する
- サンプルコードを見つける
- VSCodeに貼ってみる
- 思った挙動にならなければ再検索
という流れで制作していきますよね。
私も静的コーディングは上記の流れで進めていましたが、PHPに関しては「自分が何が分かっていないのかが分からない」状態でした。
なので、検索しても「自分が調べたいのはこれじゃない気がする…」と、ひたすらGoogleを徘徊して1時間、2時間と時間が溶けていく。
タクソノミー？ターム情報？ID？と、「？」ばかり。
なんとなく調べてなんとなくコードを貼ってなんとなく実装できている気がする…と不確定要素ばかりのコーディングが本当にしんどい。
PHPに関するカリキュラムは1周したけど、とてもじゃないけど分からない。できない。
調べること、パソコンを開くこと自体が嫌になってしまいました。
まとめ
本記事をまとめると、以下のとおり。
- ポートフォリオを作り直すことにした
- コーディングは下層ページからやりましょう
- インプット不足でのアウトプットは挫折の原因
詰んだ理由は1つ目と4つ目が特に大事。
自分がうまくいかない理由を分解・言語化すると、その後何をするべきかが見えてきますね。
そして次の記事では、ポートフォリオを作り直すと決めた私の今後のアクションについて解説していきます。
今考えているのは、勇気を出して1ヶ月ぐらいインプットに時間を使うのが良いかな、と思っています。
- CSS設計
- WordPressテーマを作る流れ
- 共通パーツの洗い出し方を学ぶ
などなど。詳しくはまた次回。
この記事が、ポートフォリオ作りで悩んでいる方のお役に立てたら嬉しいです！