ポートフォリオどういう風に作ったら良いのか、正直良くわからない。。
foriioみたいなサービスでサクッと作れば良いって聞いたよ！
勉強が終わったらポートフォリオを作成しましょう！
って良く言われますが、ポートフォリオと言ってもいろいろあって、、どのようなものを作れば良いのか、、
迷子になりがちです。
ポートフォリオを作成する目的は？
まず、ポートフォリオを作成する目的を考えてみよう！
どんなことにも通じることですが、何かを始めるなら目的を明確にすることがとても重要です。
何のためにポートフォリオを作成するのか？
まず、ここを考えましょう。
なぜ、ポートフォリオを作ろうと思ったのか？
ただ、勉強後には作った方がいいよ〜と言われたから。。
なんて理由で作成で作るぐらいなら作る時間が勿体無いので他の勉強に充てた方が良いです。
自分の実力を示す為なら
一番多いのが、習得した技量を示す為にポートフォリオを作成することです。
この場合は、必ず１から自分で作成しましょう。
・サイト構成
・余白の扱い
・デザイン力（表現力、あしらい、トンマナ等）
・訴求力（webデザイナーの場合）
・コーディング力（レスポンシブ対応力）
・アニメーション実装力（JavaScriptなどの技術力）
・WordPress構築力
などなどポートフォリオを作成するだけで、自分の実力を示すことができます。
デザイナーがコーディングできないので、STUDIOやWix等のノーコードを使用するのは別に悪くないと思います。
実績を示したいなら
こちらは先輩からのアドバイスで、
foriioとかのサービスでポートフォリオ作成したらすぐだよ！
とアドバイスしてくれる方もいると思いますが、この場合はすでに実績がある方のみ有効だと思います。
そういう方は実力はすでにあり、経験もある上で次の仕事を得る為に今までの経歴を示す為にポートフォリオを作成しています。
主にデザイナーさんに多いと思いますが、外部サービスを利用してポートフォリオを作成するのも良いと思います！
簡単に素敵なポートフォリオサイトを作成できるサービスはたくさんありますね！
外部サービスは別にデザイン性があるものではなくても、notionとかでも良いですね！
ちなみに、エンジニアはWord形式で職務経歴書を作成することがほとんどです。。。（なんか古い。。）
ポートフォリオを見せる相手は誰？
これは非常に重要だと思います。
良く初心者にありがちな誰に見せたいのか良くわからなくなっているケース
ペルソナ設定は最重要
サイト制作を勉強したならすでにご存知かと思いますが、ペルソナ設定はとても大切です。
このポートフォリオを見せる相手は誰なのか？
制作会社の担当者なのか？
エンドクライアントさんなのか？
両者では全く違うポートフォリオが出来上がるはずです。
ですが、勉強し終わったばかりの人は良く両方に営業したいからと言って、両者に見せるような内容を一緒に載せている方が多いですが、どちらかに絞った内容にするべきです。
二兎を追う者は一兎をも得ずでどちらの担当者にも刺さらない内容となってしまいがちです。
正直、エンドクライアントさん向けのポートフォリオには習得技術を載せる意味はあまりないです。
なぜなら、普通のお店やビジネスをしている人に
HTML、CSS、JQueryできます！
HTML、CSS、JQueryってなんだ？？
そんなことより、
・エンドクライアントさんはなぜ、サイトが欲しいと思っているのか？
→ それに対してどう対応できるのか？
・あなたにサイト作成してもらったらどんな未来が待っているのか？
などが書かれたコンテンツを載せた方が良いです。
逆に制作会社の担当者に見せるポートフォリオで例えば、私はコーダー志望であったなら、、
あなたのビジネスに寄り添います〜
とかよりも、技術力をアピールできるコンテンツを載せないと評価してもらえないと思います。
誰に、どんな内容を見て欲しいのか？
サイト制作の基本となることをポートフォリオにも適応させることはとても重要！
もしどうしても両者用に作成したいのであれば、せめてページを分けましょう！
どうしても幅広く見て欲しいなら
TOP:入口ページ
下層１：エンドユーザー向け
下層２：制作会社向け
などページとして別にしたら良いと思います。もしくはサイトを２つ作成する。
良くエージェント会社のサイトを見ると、求職者向けページと採用したい会社向けページに別れていますよね？
決して同じページに２つが一緒になっていることはないと思います。
それと同じです。
それぐらい誰に見せるものなのか？
を考えて構成を検討することは大切です！
目的別の具体例
ここからは少し踏み込んだ内容を書いてみます。
制作会社向けコーダー志望の場合
この場合は必ず、html,CSSかできればWordPressでオリジナルテーマで作成しましょう！
以下示すことを意識したものを作成すると良いと思います。
・レスポンシブ対応ができる
・フォームのコーディングがきちんとできる（テキスト、チェックボックス、ラジオボタン、セレクトボックス等の全ての種類を網羅する）
・テーブルのコーディングができる
・タブ、アコーディオン等のJSがないと実装が難しいものの実装ができる
・アニメーションの実装ができる（必須ではない）
フォームですが、たまに面倒なのか？googleフォームやSNSのDMを使用する人がいますが、
もしフォームが動く状態にできない（PHPの組み込みができない）としてでも、フォームのコーディングだけはしておきましょう。
フォームのカスタマイズしたCSSは結構面倒です。
ここがきちんと出来ないとコーダーとしては命とりです。
私が最初に仕事した会社の社長はフォームの実装ができているかどうかは、必ず見ると言ってました。
もし静的サイト（ WordPress以外）でサイト制作してフォームを動かしたいのであれば、PHP工房とか割と簡単にフォームの実装できるものがあります。
但し、PHPを一部修正したりしないといけなかったりしますが、いろいろ記事があるので参考にしながら実装するのも良いかもです。
アニメーションの実装は付加価値です。
なのでできなくても良いと思いますが、もしチャレンジできるならアピール材料となると思うので是非取り入れてみて下さい！
アニメーション
アニメーションは付加価値と書きましたが、、、できれば実装できることに違いありません。
昨今コーダーが溢れている時代です。
少しでも差をつけたいなら是非アニメーションにもチャレンジしよう！
スライダー
一番多いのはスライドではないでしょうか？
メインビジュアル等で使用するケースは非常に多いですね！
有名なのはSwiper
Slick
上記2個は良く使用されているので一度は使ってみると実務にも役に立つことがありそうです！
フェードイン、フェードアウト
良くあるフェードイン、アウトぐらいであれば、以下のAOSとかとても簡単に実装できます。
高度なアニメーション
最近流行りの高度なアニメーションと言えば、GSAP
(埋め込みが上手く出来てないですが、押せばgsap.comへ飛びます。。）
こちらはいろいろなカスタマイズができて複雑なアニメーションの実装が可能となる便利なライブラリーです。
もし自分のアピールはアニメーション実装に強いことにしたい人がいたらオススメです！
コーダーからフロントエンド志望の場合
この場合は上記はできることが大前提です。
その上でヘッドレスCMSで実装したものにしよう！
CMSはWordPressでも、MicroCMSでも何でも構いません。
フロント側もVueでもReactでも構いません。
ポイント
・バックエンド（CMS）からAPIを使用して取得して表示させる → fetch関数等、非同期処理の知識
・取得したデータを加工して表示もできる → JS力（filter,findなど）
ここを示すことが最低条件です。
私は最初にフロンドエンド寄りの仕事をもらう為にWordPressとVueでポートフォリオ作成しました！
コーダーからフロントエンドへ具体的にどのような取り組みをしたか知りたい方はこちらも読んでみて下さい。
フロントエンド志望
もう少しレベルアップして完全にアプリ開発を勉強した人であれば、何か一つアプリを制作することです。
・サイト設計
・DB設計
・バックエンド実装
・フロントエンド実装
上記をしっかり盛り込んだものを一つ作成できるとエンジニアへの道も大きく広がります！
私はフロントエンド職をgetする為にLaravel.Vueでアプリ作成しました！
こちらの詳しくはこちらの記事で書いてます！
まとめ
どんな目的で、誰にポートフォリオを見せるのか？
これをハッキリさせた上で作成すると迷走したポートフォリオではなく、きちんと相手に刺さるものになると思います。
私はコーダーからフロントエンドになる際にポートフォリオサイト作成しましたが、
・技術力がわかるもの
（習得内容、勉強で作成したものなど紹介、ヘッドレスCMSで構築してSPA実装できることを証明）
・コーダーとしての経歴や実績がわかるもの
・人となりがわかるもの（自己紹介的なもの）
上記三点に絞って作成しました。
このポートフォリオがあったおかげで私はフロントエンドの仕事を得ることができました。
ポートフォリオは未経験の人にとって、自分の実力を示すことができるとても良いツールだと思います！
是非、自分に合うポートフォリオを作成しこれからの仕事に繋げていきましょう！
