エンジニア向けポートフォリオのすすめ

初めまして。MilkBlankのまさやまえだと申します。
MilkBlankは現在チームとして活動しており、
メインは私、その他の方は非常勤的な状態でチームというか個人というか。。。。
といった少し変わった形で業務を行なっております。

早速ですが、我々はポートフォリオサイトとして、
h ttps://www.milkblank.com/
↑を用意しております。
まだまださっぱりしたサイトですが、大事な情報だけはしっかりと抑えています！

では、エンジニアのポートフォリオにおける「大事な情報」とは何を指すのでしょうか？
私は多くのポートフォリオサイトを確認し、ポートフォリオのセオリーとなる部分を調査いたしました。
この記事では、その調査結果を書き記します。
※ どちらかというとWebエンジニア向きになります。ご了承くださいませ。

デザイン
記載事項
技術力
- 必要最低限の技術
- もっとこういうのもあればいいな
最後に

デザイン

Webサイトにとって、デザインは一番大きく見る人に影響を与える要因となります。
なぜこう言えるのか。
それは、サイトを開いたときに一番に目に付くのは内部のシステムでも、今までに行なった実績でもなく、「サイトの見た目」だからです！

Webデザイナーとして活動をしたい方は、奇抜でダイナミックなデザインにすると一目置かれるポートフォリオとなり、非常に効果的となるでしょう。
そうでない方は、無難かつシンプルでもいいので、見辛いデザインにはしないことを心がけましょう。

記載事項

ポートフォリオに何を書こう！？
と思っていませんか？

何も書くことが決まっていないと、中身がカッスカスのひどいものになります。

初期段階で必要な項目としては、

about
（サイト主について）
service
（何を提供するか、何ができるか）
works
（実績）

以上、3点のみです！
それでは一つ一つ説明いたします。

about

ご自身についてです。
個人の場合は経歴だったり、技術レベルだったりを記載している人が多いですね。
「〇〇〇〇という経緯でWebエンジニアをやっている。」など始めたきっかけなどを載せてもいいかもしれませんね。

ここで、連絡先を載せることは忘れないようにしましょう！

service

あなたはお客様に何を提供しますか？
Webエンジニアをやっている方なら、Webサイト構築やLP開発だと思います。
それでは、以下テンプレートを参考にご自身のservice部分を考えてみましょう！

Webエンジニアテンプレート

青文字を自分なりに変えたり、さらに良さが伝わるように文章を追加しよう！

Webアプリケーション開発

TwitterのようなSNSを作成いたします。
使用技術：HTML/CSS、JS、PHP、Laravel、Vue

LPサイト開発

商品販売を促進するサイトを作成いたします。
使用技術：HTML/CSS、JS、PHP、Shopify

コーディング作業

静的なサイトの開発をします。
使用技術：HTML/CSS、JS

WordPress

ブログのデザインを作成いたします。
使用技術：HTML/CSS、JS、PHP、WordPress

といった感じでしょうか。
ちなみにMilkBlankはというと、

このようになっており、aboutとは比べ物にならないくらい、ぎっしりコンテンツを埋め込んでおります。

提供する予定のサービスは全て、詳細に記載しましょう！

works

実績を紹介しましょう！
実際に動くもののリンクがあることが望ましいですが、ローカルで開発したもののアップロードはしなかったや、途中でクライアント様とご連絡が取れなくなった。など、せっかく作ったサービスをサイトの閲覧者は見れない状態にある場合もございます。

そこで、スクリーンショットを載せるだけでも構いません。

技術力

技術はぱっと見では見えないかもしれません。
しかし、あればしっかりとWebサイトを作っていることがわかるため、
必要最低限の技術は盛り込むようにしましょう。

必要最低限の技術

レスポンシブ
（PCだけでなくタブレット、スマホと全ての環境において自然に見える仕組みです。）

「トップページへ」ボタン

お問い合わせフォーム

もっとこういうのもあればいいな

ハンバーガーメニュー

アニメーション

要素がフェードインしてきたり、右から流れてきたりすると動きがあって面白いかも。

ワッと驚くような要素

マウスホバーで画像が動いたり、文字が一文字ずつ表示されたり。
閲覧者が見入ってしまう要素があると、「すごい」と思われます。

最後に

さあ、完成したら早速公開し、SNS等で宣伝しましょう！
余裕があれば、MilkBlankのようにblogディレクトリを作ってWordPressをインストールしてみるのもいいかもしれません。

皆様が作ったポートフォリオは我々も参考にしたい為、この記事のコメント欄で教えてください！