未経験エンジニアのポートフォリオ事例11選!評価される特徴は?


こんな悩みを解決できる記事になっています!

今回紹介するポートフォリオの例は実際にエンジニアに転職された方の作品を紹介しますので、かなり参考になる部分が多いはず!

この記事を読み終わる頃には、ポートフォリオのレベル感や企業に評価されるポートフォリオを作れるイメージがつきます!

記事の前半では、ポートフォリオの実例を紹介しつつ後半ではプラス評価されるポートフォリオの特徴や、作り方を解説していきますのでじっくり読んでいってくださいね!

この記事の内容

エンジニアのポートフォリオとは?

エンジニアにとってポートフォリオとは、自分が携わった開発の作品集の事を言います。

もっというと自分の実績を証明する職務経歴書みたいなイメージを持っていただいてOKです!

なぜなら現在のエンジニア転職は「履歴書」「職務経歴書」「ポートフォリオ」の3つが必要になるからです。

良く「ポートフォリオを作らなくても大丈夫ですか?」こういった質問を受けますが、他の転職で例えると職務経歴書を作らないで転職活動に挑もうとしている状態です。

これではさすがに無謀すぎますよね…

なので、エンジニアのポートフォリオは転職活動で必要になる「書類」と同じ扱いで良いでしょう。

参考にしたいエンジニアのポートフォリオ11選!

それでは、早速エンジニア転職に成功されたポートフォリオの例を見ていきましょう!

  • 1:Zenに投稿した記事を自分のブログサイトとリンクしたシステム
  • 2:マイパレット
  • 3:個人開発のための技術記事
  • 4:口コミ型のリハビリ
  • 5:三ツ星トイレ
  • 6:漢文修験道
  • 7:ライブ出演バンド管理アプリ
  • 8:VSCODEのショートカットキーをゲーム感覚で学べるサービス
  • 9:音マップ
  • 10:vimate
  • 11:席替えメーカー

1:Zenに投稿した記事を自分のブログサイトとリンクしたシステム

こちらの作品は、Zenに投稿した記事を自分のブログサイトにも自動で反映されるシステムです。

Zenへのアウトプットや、自分の課題を解決できるシステムを構築しており、ポテンシャルをとても感じさせるポートフォリオですね!

扱っている言語

  • Python
  • Ruby
  • TypeScript
  • SCSS
Zenに投稿した記事を自分のブログサイトとリンクしたシステムはこちら

2:マイパレット

自分が理想とする色の組み合わせをweb上で知ることができるサービス。

Webサイトを構築する時に、色の組み合わせをテストし模索できるのが素晴らしいところですね!

扱っている言語

  • Ruby
  • Tailwind CSS
マイパレットはこちら

3:個人開発のための技術記事

個人で開発する時に、自分に合った技術情報を簡単に検索できるサービス。

モダンな技術を駆使して、UIが最適化されておりとても使いやすい印象です。さらに開発者向けに課題を解決しているとても良いサービスです。

扱っている言語

  • TypeScript
  • React
  • Ruby on Rails
  • TailwindCSS
個人開発のための技術記事はこちら

4:口コミ型のリハビリ施設検索サービス

リハビリ施設を口コミベースで検索できるサービス。

医療施設でのリハビリ対応を知りたい方に向けたサービスで、誰のどんな問題を解決できるのわかりやすい印象です!

扱っている言語

  • TypeScript
  • Next.js
口コミ型のリハビリ施設検索サービスはこちら

5:三ツ星トイレ

三ツ星トイレは日本各地の綺麗なトイレが検索できるサービス。

実際に私も利用してみた感想ですが、素晴らしいアイデアだと思いました。

扱っている言語

  • Ruby
  • JavaScript
  • Tailwind CSS
三ツ星トイレはこちら

6:漢文修験道

「漢文修験道」はWeb上で漢文の和訳問題の学習ができるサービス。

こちらもターゲットと課題解決が明白なサービスで、利用ユーザーも確保できてそうな印象です。

扱っている言語

  • PHP
  • Tailwind CSS
漢文修験道はこちら

7:ライブ出演バンド管理アプリ

こちらの作品は、サークル内でライブバンドの出演者を管理することのできるアプリ。

元々は出演するバンドの集計を手作業で集計してホームページに反映していたとのこと。

これではメンテナンスが大変な為、自動化したみたいですね!とても良いアイデアだと思います。

扱っている言語

  • PHP
ライブ出演バンド管理アプリはこちら

8:VSMAGIC

VSCODEのショートカットキーをゲーム感覚で学べるサービス。

入力の順番など、細かい制御が必要となるこのゲームは、実装能力の高さを感じました。

また、利用ユーザーも1000人を超えたことがあるとの事です。

扱っている言語

  • Ruby
  • JavaScript
  • HTML
  • SCSS
VSMAGICはこちら

9:音マップ

こちらの作品は、音楽ゲームの筐体がどのゲームセンターにあるかマップ上で検索できるサービス。

音ゲームマニアをターゲットにしたユーモアのあるサービスな印象です!

リリースしてから一日で1.4万PV…

扱っている言語

  • Ruby
  • JavaScript
  • React
音マップはこちら

10:VIMATE

vimエディタの操作をブラウザ上で学習できるサービス。

初級から上級コースまで分かれており、ゲーム性もあって楽しく学習できました。

vimをあまり触らない方向けに基礎から応用まで学習できるサービスとなっております!

扱っている言語

  • Ruby
  • JavaScript
  • SCSS
VIMATEはこちら

11:席替えメーカー

席替えメーカーは、席の条件を指定すると条件を元に提案してくれるサービス。

サーバー上にデータが残らない仕様にして、ユーザーの懸念点を克服されていました ユーザー数も6000人も超えていたとの事です。。

扱っている言語

  • JavaScript
  • Vue.js
席替えメーカーはこちら

プラス評価されるポートフォリオの特徴

ここまではエンジニア転職に成功した例のポートフォリオを紹介してきました。

ここからは、どういったポートフォリオがプラス評価になるのか解説していきます!

是非自分のポートフォリオや紹介した作品に当てはめて考えてみてくださいね!

  • 実際の課題を解決できるシステム
  • UI・UXが整っているサービス
  • 利用ユーザーがいる

実際の課題を解決できるシステム

このサービスを使うことで、「誰の」「どの課題を」「どのように」解決するのかがわかるサービスを作るのが重要!

なぜなら、企業が採用したいエンジニアはユーザーの悩みや課題をシステムや仕組みで解決したいと考えているからです。

例えば、次の2パターンがあったときに、どっちの方が希少価値が高いエンジニアに見えそうですか?

  • A:コーディング中、ユーザーの事を気遣って実装を進めるエンジニア
  • B:仕様通りに実装するエンジニア

どんなに小さな機能でも課題解決を中心に考えれないと、ただ実装するだけの人になってしまいます。

希少価値の高いエンジニアになるためにも、「どんな課題をどのように解決するのか?」を考えてポートフォリオを作ってくださいね!

UI・UXが整っているサービス

見た目は想像以上に重要です。

なぜなら、デザインやUI・UXが崩れているサービスはどうしても印象が落ちてしまうからです。

例えば、メラビアンの法則で人と人がコミュニケーションを図る際、以下の割合で影響を与えると言われております。

  • 言語情報(Verbal:7%)
  • 聴覚情報(Vocal:38%)
  • 視覚情報(Visual: 55%)

Webサービスも開発者も同様にユーザーとのコミュニケーションが発生しております。

さらに、Webサイトは音がないのでほぼ視覚からの情報になります。

こういったことから、見た目で与える印象はかなり大きいのでUI・UXは整えましょう!

利用ユーザーがいる

利用ユーザーいると圧倒的な差別化になります。

理由は、ポートフォリオを運用してユーザーを獲得するまで運用をする人が少ないからです。

逆にいうと、ユーザーを獲得できるまで運用をすると大きな差別化になるってことですね!

また、今回紹介したポートフォリオが良い例で実際に運用結果をベースにアピールされている方もいました。

せっかくポートフォリオを作るなら圧倒的な差別化を目指して運用実績を記録してみましょう!]

ポートフォリオの品質を上げるためのアプローチ

これまでは、評価されるポートフォリオの特徴やポートフォリオの例を紹介してきました。

最後は自分のポートフォリオの質を高めるための具体的な方法について触れていきますね!

  • 自分の課題を解決するシステムを考えよう
  • 公開されているサービスのデザインを真似しよう
  • 運用してユーザーを獲得しよう

自分の課題を解決するシステムを考えよう

結論、「自分の課題を解決する」アイデアを形にするのもおすすめです!

その理由は、自分をペルソナ設定にした方がサービスが作りやすいからです。

例えば、会った事もないユーザーの悩みを解決するのと、自分の悩みを解決するのはどっちが楽でしょうか?自分の悩みを解決する方が楽なはず。

もちろんユーザーの課題をヒアリングしてサービスにできればベストですが、ポートフォリオの作成に膨大な時間がかかってしまい疲弊してしまいます。

というわけで、ポートフォリオのアイデアに困っている人は、「自分が必ず使いたい仕組み」をアイデアを考えてみてくださいね!

さらに、自分の悩みと同じ悩みを抱えている人は、たくさんいるので結果良いアイデアが生まれると思いますよ!

公開されているサービスのデザインを真似しよう

有名なWebサービスのUI・UXを真似すると安定したデザインが作りやすくなります。

理由は一つ、彼らはUIのプロフェッショナルが作成したUIだからです。

もう少し噛み砕くと、自分で1からデザインを考えるより世の中に公開されているデザインを自分の作品に取り組むことで、デザインが統一されます。

じゃあ具体的にどこを真似すればいいの?という話ですが、以下にまとめました。

  • 要素使い方(影の付け方など)
  • フォント
  • 画面遷移
  • イベント処理(ボタンをクリックした後の動きなど)

もちろん、マルぱくりするのはNGです。

なので、「メルカリと同じメインカラーで作ろう」「このイベント処理を取り入れよう」みたいな感じで真似してみてくださいね!

運用してユーザーを獲得しよう

ポートフォリオの公開が完了したら、すぐに運用を始めましょう。

なぜなら、利用ユーザーを獲得できれば圧倒的な差別化ができるからです。

私もプログラミングスクールの講師時代に100個以上のポートフォリオを添削しましたが、実際に運用してユーザーを獲得した人は企業から高評価を受けておりました。

実際に運用することで、結果ベースでアピールできるのも強みです!

労力はかかると思いますが、ポートフォリオ公開したら運用しつつ転職活動をしてみてくださいね!

まとめ:ポートフォリオで重要なのは課題解決

今回は、エンジニアに転職事例のあるポートフォリを11選解説してきました。

どのポートフォリオにも共通しているのが「課題解決」が明確でしたね!

ポートフォリオによって扱う技術レベルに差はありますが、評価されるポートフォリオを作るには技術以外の要素も非常に重要になります。

もちろん、ある程度技術も必要ですが、技術は課題解決のための「手段」ということをお忘れなく!

良質なポートフォリオを作る際は以下の記事もチェックしてくださいね!

あわせて読みたい
未経験エンジニアが評価されるポートフォリオのレベルとは? 未経験エンジニアが評価されるポートフォリオのレベルとは?

コメント

コメントする

この記事の内容