#ポートフォリオを作って気づいた、デザインより大変だったこと

ポートフォリオを作り始めたときは、正直「まずは見た目をいい感じにできれば十分かな」と思っていました。

レイアウトを整えて、画像を入れて、余白を調整して、全体の雰囲気をそれっぽくする。最初はそういう部分ばかり気になります。実際、自分もまずそこにかなり意識が向いていました。

でも、作業を進めるうちに思ったのは、本当に大変なのはデザインそのものじゃなかったということです。

むしろ大変だったのは、裏側の整理でした。

構造を整えること、コンポーネントを分けること、使っていない変数や古いコードを消すこと、全体の統一感を保つこと。見た目を作るより、そっちのほうがずっと時間がかかりました。

今回は、ポートフォリオ制作を通して「デザインより大変だったこと」を振り返ってみます。

#1. 見た目は直せても、構造が汚いとすぐ苦しくなる

最初のころは、とにかく画面をそれっぽく見せるのを優先していました。

クラスを足して、余白をいじって、必要ならその場でコードを書き足す。これで一旦は見た目が整います。実際、短期的にはそのやり方で進められます。

でも、このやり方はあとからかなり苦しくなりました。

一箇所を直したら別の場所がズレる。

ブログ一覧を整えたら詳細ページとの雰囲気が合わない。

少し修正しただけなのに、他のコンポーネントまで見直しが必要になる。

そんなことが何度も起きました。

結局、見た目だけ先に整えても、構造がぐちゃっとしていると修正のたびにしんどくなります。

その場では早く見えても、あとで何倍にもなって返ってくる感じでした。

「とりあえず動く」「とりあえず見える」は大事だけど、それだけだと後半がかなりきつい。これは実際に作ってみてかなり実感したことです。

#2. コンポーネント分割は、見やすさのためだけじゃなかった

最初は、コンポーネント分割って「コードをきれいに見せるためのもの」くらいに思っていました。

もちろんそれもあるんですが、実際に触ってみると一番大きいのはそこじゃなかったです。

本当は、修正しやすくするために必要なんだと気づきました。

たとえばブログ機能だけでも、一覧カード、記事ページ、目次、関連記事みたいに役割がいろいろあります。

これが一つの大きなファイルにまとまっていたり、責務が曖昧だったりすると、少し触るだけでも「どこまで影響するんだろう」と不安になります。

逆に役割ごとにちゃんと分かれていると、かなり楽になります。

どこを直せばいいか分かりやすいし、他の部分を壊しにくいし、あとで見返したときも迷いにくいです。

個人開発だと「自分しか触らないし、まあいいか」となりがちなんですが、自分で作ったコードでも、数日後には普通に読みにくくなるんですよね。

その意味でも、コンポーネント分割はかなり大事でした。

#3. 不要な変数や古いコードは、残ってるだけで地味にしんどい

開発中って、とりあえず前に進みたいので、使わなくなった変数や古いコードをそのまま残しがちです。

自分もかなりありました。

「あとで消そう」と思って残したものが、そのまま居座ることが多かったです。

でも、これが地味にきついです。

もう使っていない変数がある。

前の設計の名残みたいな関数が残っている。

props を受け取ってるのに実際は使っていない。

似たような処理が少しずつ違う名前で存在している。

こういうのがあるだけで、コードを読むたびに「これって必要だっけ？」と確認する時間が発生します。

しかも厄介なのは、不要なものがあるとコード全体の見通しが悪くなることです。

動いているかどうかとは別で、読みやすさとか判断のしやすさがかなり落ちます。

見た目には出ない部分だけど、開発しやすさにはかなり影響していました。

作るだけじゃなくて、消して整えるところまでやってようやく一段落、という感覚が強かったです。

#4. デザインを再現するより、全体を揃えるほうが難しかった

参考にしたいデザインに近づけること自体は、頑張れば少しずつできます。

余白を調整して、文字サイズを変えて、カードの形や雰囲気を合わせていく。そういう作業は分かりやすいですし、進んでいる感じもあります。

でも、実際に難しかったのはそこから先でした。

一つのページだけ整っていても、別のページに移動したときに急に雰囲気が変わると、全体としてちぐはぐに見えます。

ブログ一覧だけ良くても、記事ページや関連記事、細かいパーツのトーンがズレていたら、思ったよりまとまりません。

つまり難しいのは、1画面をきれいにすることより、サイト全体で同じ空気感を保つことでした。

これが意外と大変でした。

1つ直すと他も気になるし、1ページだけ完成しても終わりにならない。個人開発だと特に、気づいたらずっと微調整している感じになります。

でも、その積み重ねでようやく「それっぽい」ではなく「ちゃんとまとまって見える」に近づくんだなと思いました。

#5. 一番の学びは、「作れる」と「整えられる」は別だったこと

今回いちばん大きかった学びはこれでした。

コードを書いて、画面を作って、ちゃんと表示させる。そこまではできるようになってきたと思います。

でも、その先にある「整える力」はまた別だと感じました。

構造を分かりやすくする。

あとから修正しやすくする。

いらないものを消す。

全体の統一感を保つ。

見た目だけじゃなく、中身も整理された状態にする。

こういうところまでできて、やっとちゃんと作れたと言える気がします。

最初は「ページを作れたら十分」と思っていたけど、実際にはその後の整理のほうがずっと大事でした。

そしてたぶん、そこにその人の実力が出るんだろうなとも思いました。

#まとめ

ポートフォリオを作る前は、デザインを作ることが一番大変だと思っていました。

でも実際にやってみると、もっと大変だったのはその裏側でした。

構造を整理すること。

コンポーネントを分けること。

不要なコードを消すこと。

ページごとの雰囲気を揃えること。

こういう部分は目立たないけど、作業を続けるほど重要さがよく分かります。

見た目を整えるだけでも楽しいですが、それだけだと途中で限界が来ます。

今回ポートフォリオを作ってみて、見える部分だけじゃなく、見えない部分まで整えることの大切さをかなり実感しました。

これからも、ただ作るだけじゃなくて、あとで見ても直しやすいコードを意識していきたいです。