こんにちは、kraftの岡田です。

コロナの影響で副業などでコーディングを始める方も非常に増えた印象です。
私もちょうどコロナが騒がれ始めた2020年から、独立をしてWeb業界へ入りました。
学習を進めていき、実際に案件へ応募する際にポートフォリオサイトが必要になります。
その際に「何を書いたらいいか・どのように作ればいいか」と悩む方も多いでしょう。

今回はこれまでの私の経験をもとに作る際のポイントなどをご紹介できたらと思います。
ぜひ参考にしてみてください。

ポートフォリオサイトを作る意味

もう理解できている方も多いと思いますが、応募先の担当者に「自分の経歴・スキルなどを伝える」ために作成します。
要するに履歴書のようなイメージと考えてもらえるとわかりやすいです。

基本は全ての案件に応募する・制作会社のパートナー応募をする際は、ポートフォリオサイトを求められます。

作成する際に抑えるべきポイント

必ずコードを自分で書く

デザイナーの場合は、ノーコードツールやその他のプラットフォームで作成しても問題ないのですが、コーダーに限っては必ずコードを書いて作成しましょう。
コーダーの本分はコードを書く事です。

したがって、HTML.CSS.JavaScriptなどを使って1つのサイトとして完成させましょう。

可能な限り自分らしさを出す

これは賛否あるところかもしれませんが、私は自分らしさを出すことは重要だと考えています。
今まで多くの駆け出しコーダーのポートフォリオを見てきましたが、やはり似たようなものが多いのが正直な感想です。
オリジナル性のある内容や作り方をしているだけで、目を惹きます。

エラーや不必要なものを残さない

ウェブサイトは、検証ツールからコードを確認する事ができます。
エラーがある場合は、コンソール上にエラーメッセージが出てます。
コメントアウトもHTML上に見えてしまいます。

エラーに関しては絶対にないようにしましょう。
コメントアウトに関しては必要な箇所には残しておいても問題はないと思います。

サーバーにアップロードする

レンタルサーバー・独自ドメインを取得してそこにアップロードするようにしましょう。
Netlify・Vercel・firebaseサーバーを使うのでも問題はないと思いますが、必ず独自ドメインにしておくことをお勧めします。

独自ドメインを使わない = 手抜き　ということではないのですが、あまり良い印象は受けないです。
できることは全て取りこぼしなく行うことを心がけましょう。

ポートフォリオサイトに載せる項目

スキルセット

自分が担当できる領域を掲載しましょう。
よく★を使って評価を載せている方がいますが、これは絶対にやめましょう。

掲載する時は、1つの項目に対して細かく何ができるかを書いていきましょう。
------------
例) CSSの場合
FLOCSSベースの記述でスタイリングをしています。
検索に引っ掛かるようにあまりネストは多用せずに記述を行っています。
最終的には圧縮したCSSを読み込ませています。 ...など
------------

上記は例ですが、自分がどのような事ができるのか・どんなことを意識して記述しているのかを明確にしましょう。

制作事例

ポートフォリオ以外の制作物を確認してもらう為に制作事例を掲載しましょう。
駆け出しの方は、実案件の事例は少ないと思うので、その場合はサンプル案件を掲載しましょう。

自己紹介・経歴

名前・年齢・出身などの情報を掲載しましょう。
可能な方は、貴方のイメージが寄りつきやすいので自分の顔写真も一緒に載せられるとよいです。

制作する上で心がけていること

制作に対しての向き合い方やクライアントとどのようにコミュニケーションをとっているのかを掲載しましょう。
実際の面談でも「何か心がけていることはありますか？」のような質問をさせる事が多々あります。
適切に回答できるようにする側面からポートフォリオ作成段階でしっかりと考えていけると良いと思います。

デザインは自分で考えるべき？

結論から言うと「デザインができれば自分で行えばいい、できなければデザイナーに頼む」となります。
サイトを作ると言うことはある程度のデザイン要素も含まれてきます。
デザインに興味があり、自分で作る事ができる人であれば全て一貫して行うとよいでしょう。

しかし、反対にデザインに関して全くできない人はデザイナーに必ず依頼をして作成してもらいましょう。
デザインに悩んでいる時間が非常に勿体ないです。
同じ駆け出しのデザイナーと協力して作成するのも1つの手でしょう。

まとめ

今回は、コーダーがポートフォリオサイト作成するポイントなどをメインテーマにご紹介しました。
ポートフォリオは自分の履歴書・名刺となるものになります。細かく情報を掲載して無駄になることはありません。
１つ１つこだわりをもって作成するようにしてみましょう！