背景

・私はWEB系エンジニア（WEB開発企業）への就職に向けて転職活動中の身
・フロントエンドエンジニアを志望
・自身がポートフォリオを作成にあたって失敗してしまった事柄を共有
　どなたかのご参考になればと思います！

結果

結論としてこのポートフォリオ開発の失敗によって、出戻りが発生し１か月も遅れをとってしまっています…

自分の失敗

まず自分が犯した失敗は2項目です
１.ポートフォリオを開発するにあたり、模倣としたサイトが曖昧だったこと
２.外部設計がおろそかになっていたこと

自分が作ろうとしたポートフォリオ

・自分が「邦楽ロック」が大好きであるので、邦楽ロックがさらに多くの方に広まってほしいという思いがあります！
・そこで「邦楽ロックに興味持ち始めた方」「フェス・ライブに興味がある方」をターゲットに邦楽ロック初心者が欲しい情報をまとめたアプリを開発しています。

反省点

１.
・開発を進める前に、現在すでに存在するサイトやアプリのＵＩ／ＵＸを参考に進めようと思ったため複数のサイトを漁りました。
　⇒そこで「Ａ社のサイトのこのボタンのデザイン参考にしよう！」「ヘッダー・フッターはＢ社のサイトを参考にしよう！」と方々のサイトのいいとこどりをした結果、ＵＩ／ＵＸ的にまとまりのないポートフォリオが出来上がってしまいました…

・まとまりのないポートフォリオになってしまった理由はもう１点あり、それは開発を進めているうちに私見が大きく影響してしまったことです。
「ここのボタン角丸くした方が雰囲気よくない？」「この背景のデザインはこっちのがかっこいい！」と漁ったサイトで拾った情報をバンバン投入した結果、小学生が作る図工の成果物よろしく、見栄えの悪いポートフォリオが出来上がりました。
※僕がデザイナーであればこれでもいいのですが、ド素人の意見を反映させたら当然の結果ですね…

２.
外部設計とは、簡単に言うと「ページのレイアウト／機能の概要が書いてある設計図」を作ることです。

尚、当初作成した設計図はこちら。

この外部設計図の反省点は本当に外観図のみしか作っておらず、これでは必要な機能が明確になっていない…
この結果、
「フリーワード検索で検索」⇒「検索結果をクリック」⇒「詳細表示」
という流れをポートフォリオに作っているのですが、グレーハッチング部分の機能が必要だと後々判明し、jsファイルの記法を変更する、という出戻りが発生しました…

今後に活かす事

１.
・一つのサイトは統一感あるデザインの元成り立っているので、なるべく一つのサイトからＵＩ／ＵＸを参考にすべきかと！
・参考サイト決めたら私見はほぼ不要です！変えるとしても少し色を変えたりとか小変更です！
　素人（自分）の感覚を当てにしてはいけないです！

２.
・各ページに必要な機能は何か、明確にするべきです。
　そのうえでコードも書いていくので、後々「あの機能が必要じゃん！」となると僕のように出戻りが発生してしまい、計画通りにポートフォリオ作成、ひいては転職活動ができなくなってしまいます。
尚、修正後の外部設計書がこちら。
１枚目(上半分)

２枚目(下半分)

きちんとページの下に必要な機能を記載することにしました。

最後に

冒頭でも書かせていただきました通り、自分の失敗がどなたかのお役に立てば幸いです。
最後までお読みいただきありがとうございました。m(__)m