【未経験OK】Javaエンジニアのためのポートフォリオ作成術!


エンジニアにもポートフォリオが必要らしいけど、
何を書いたらいいのかわからない・・・
エンジニア用ポートフォリオの具体例って無いのかな?

こんにちは。
エンジニアの転職が盛んな昨今、エンジニアといえどもポートフォリオが必要だ、という意見を耳にしたことがあるかもしれません。

たしかに、エンジニアのポートフォリオは時と場合によっては役に立つものです。ですが、ピンポイントにJavaエンジニアが作ったポートフォリオはあまり目にする機会がなく、どうやって作ったらいいのかわからないことも多いものです。

そこで今回は、ポートフォリオについて基礎から解説しつつ、具体的なJavaエンジニアの製作例もご紹介します。自作のポートフォリオでハマりがちなダメなパターンも合わせて紹介するので、ぜひ参考にして素晴らしいポートフォリオを作り上げてください。

それではさっそく行ってみましょう!

Javaエンジニアにとってポートフォリオとは?

まずはJavaエンジニアにとってポートフォリオとはどのようなものかを見ていきましょう。

ポートフォリオはご存知の方も多いと思いますが、ざっくりいうと自分の経歴と技術を証明する自己紹介用のサイトないし画像、というところです。

主にデザイナーやフロントエンドエンジニアが自分の技術証明のために作ることが多いですね。このため、バックエンドやWebに関係ないエンジニアにとってはあまり縁のないものと考えられがちです。

また、企業の方もJavaエンジニアにはポートフォリオを求めてくることがあまりないため、ますます疎遠になってしまっています。

このため、Javaのエンジニアにとって、ポートフォリオはあまり関係ないもの、という位置づけになってしまっているのが現状です。

ですが、このような状況だからこそ、上手に活用することで自身のアピールを効率的に行うことができる、とも言えます。

たとえば未経験からエンジニアに転職する場合、企業側は判断材料がほとんどない状況になるので、ポートフォリオで適切に技術を伝えられると評価が高まりやすいことが考えられますよね。

また、フリーランスで活躍していく際も得意な技術、使える技術をまとめたポートフォリオサイトがあると、クライアントの側も仕事が発注しやすいことが考えられます。

このように、足りない経験を補ったり、自分のスキルを相手に円滑に伝える方法としてポートフォリオは利用できます。

逆にJavaで何年も開発経験があり、転職先でもJavaを活用したい場合、現状重視されるのは開発経験や実績です。このため、すでに経験豊富なエンジニアは履歴書やエージェントを通じて自身の実績を適切にアピールする方向で進むのが得策でしょう。

未経験の方向けにポートフォリオを解説した記事がありますので、こちらもご覧ください。

実際にポートフォリオを作ってみよう

それでは、実際にポートフォリオを作ってみましょう。はじめて作る場合、難しく考えがちですが、とりあえず自分の経験やスキルを棚卸しするいい機会だと思って取り組むとやりやすいですよ。

以下、未経験・フリーランス・転職どのレベルの方にも必要なステップを紹介します。

ポートフォリオ作成の基礎を押さえよう

まずは基本的な作り方を押さえましょう。以下のページでポートフォリオの作り方を動画で丁寧に解説してくれているので非常に参考になります。
引用:paizaラーニング ITエンジニアの就活準備編2: ポートフォリオ制作

また、この段階でポートフォリオ作成の目的をあらためて確認しておきましょう。

これから作るポートフォリオは、以下の点を主張するためのものです。

  • HTML/CSS、JavaScript、BootstrapなどのWeb技術に対する理解を示す
  • 自分の経験、経験、成果物を紹介する
  • 自分のアピールポイントや将来のビジョンを示す

それでは先に進みましょう。

ポートフォリオの構成をイメージしよう

基礎の理解につづいて、これから作るポートフォリオをざっくりとイメージしていきましょう。

エンジニアのポートフォリオとしてオススメなのは、必要な情報が1ページにまとまった以下のような構成のものです。簡単に作成でき、ポートフォリオとして必要な機能が詰まっているためです。デザインなどで個性は主張できませんが、そういった部分が強みでなければ無難な選択と言えるでしょう。


ポートフォリオの構成イメージ

まずはこの形式に合わせて、どんなポートフォリオを作りたいか、実際に手を動かして設計図を書いてみるといいでしょう。ざっくりとわかればいいので、ノートに手書きで問題ありません。カッチリしたツールが必要な方はdraw.ioやcaccoがオススメです。

参照:draw.io https://www.draw.io/

参照:cacco https://cacoo.com/ja/

スキルと経験の棚卸しをしよう

作るポートフォリオのイメージがある程度固まってきたら、今度は中身のコンテンツを作る方法を考えましょう。考えるべき要素は、自分のアピールポイントと成果物です。

これを明確化するにはスキルと経験の棚卸しが必要になります。やり方はいろいろとあるのですが、まずは次の3軸をつかって自分の現状を把握する方法がわかりやすくてオススメです。

  • 自分のできることはなにか?
  • 自分のやりたいことはなにか?
  • そのために必要なことはなにか?

自分にできることの欄には、利用できる言語やフレームワークといった言語を軸としたスキルと、セキュリティや人工知能、データ分析、インフラ、DB管理といったフィールドを軸としたスキルを書き込みます。

自分がやりたいことの欄は、今持っているスキルの中から継続的に利用したいもの、現状不満なところ、これらを踏まえて新たに挑戦したいことを書き込みます。

そのために必要なことの欄には、新たに挑戦したいことを達成するために必要なスキル、経験、環境を考えて書き出します。

この3軸による分析で、現状のスキルと転職後やりたいことがある程度明確化できるはずです。

以下に分析の例を掲載します。余白の関係で量が少なめですが、実際は思いつくままにどんどん書き込んでいく形になるでしょう。

できること・やりたいこと・必要なことの分析

また、以下のサイトで紹介されているワークシートを使うことで、社会人として積み上げてきた職歴を言語化することもできます。こちらも1回やっておくとポートフォリオに限らず履歴書や職務経歴書が作りやすくなるのでオススメです。

引用:AllAbout 自分の棚卸しワークシート

引用:大阪市女性のチャレンジ応援サイト

アピールポイントを3つ考えよう

スキルと経験の棚卸しが完了したら、これをベースに実際のコンテンツを作成していきます。まずはアピールポイントを3つ考えてみましょう

3つという数字ですが、これはマーケティングや心理学的にもよく使われる数字で、横に列挙する場合、3個並べると座りがいいと言われています。3つもアピールポイントを出せないよ!という人も、3つじゃ全然足りない!という人も、うまくまとめて3つになるように調整してみてください。

個々のスキルについて深く説明することも大事ですが、実際に採用する側の目線に立った場合、なるべく短時間で相手の人のよい点・使える点を知りたいところです。採用は日にあなたひとりを見ているわけではありませんよね。なので、短い時間、文章で自分の魅力を最大限伝える工夫が必要になってきます。

たとえば、使える言語がたくさんあって3つでは全然足りない場合。アピールポイントでは〇〇個の言語とフレームワークが利用でき、現在も新規に学習を進めている、といった文章でまとめるとよいでしょう。そして、下の成果物のエリアや成果物一覧で、各言語の得意不得意や好き嫌いを存分に書き込めばいいわけです。

このように多すぎて3マスでは足りないと感じる場合は、抽象化を行って一段高いレベルからまとめるとうまくいくことが多いですね。

逆に3マスも自己アピールできない、という謙虚な方は、あらためてスキルと経験の棚卸しを見てみましょう。そこに記載されている経験や経歴はたった1つの能力だけで完遂されたものばかりでしょうか?

たとえば、マニュアル作成や新人教育といった一見エンジニアとは直接関係なさそうな経歴であっても、これらの経験から業務を効率的に伝えるスキルやコミュニケーション、資料作成、業務ロジックの抽象化などさまざまなスキルが引き出せるはずです。そして、これらのスキルは仕事をする上で汎用的に活用可能なスキルですので、十分あなたという人材の強みとして機能するポイントです。

このように、自分の経歴では3個もアピールできない、という方は実際の経歴を抽象的なスキルに分割する視点を持ってみるといいでしょう。

このような観点でアピールの例を2つほど紹介します。

幅広い言語に対応
大学に入って課題のためにJavaを学習して以来、12年のプログラミング経験があります。
ゲームプログラミング、統計処理、システム開発、オリジナルアプリ開発と様々な分野に手を付けてきました。
その時々で必要な技術習得をしてきたため、利用可能な言語は現在7個あり、今年はRailsに挑戦するためにRubyの習得を行っています。
来年は関数型の言語に手を付けたいと考えています。


わかりやすく伝える
前職で新人教育を担当し、まったくの素人を何人も一線で活躍できるJavaプログラマに育て上げました。
この経験をマニュアル化して、後輩に教育を担当させてみたところ、同じように新人を効率的に育て上げることに成功しています。
抽象的な概念でも素人にわかりやすく伝え、それを体系化することに自信があります。

あと、未経験かつ社会人経験もほとんどない、という状態であれば熱意と成果物でアピールするのが確実です。まったくの未経験であってもアピールする相手の業界に適した成果物があれば、0から教育するコストがかからないはずなので、企業側からの評価は上がるはずです。

未経験の場合、次のような書き方になるでしょうか。

成果物と習得力に自信アリ
エンジニアとしての経験もなく、社会人として特記できるポイントもありませんが、技術習得への熱意とアウトプットには自信があります。
まったくの未経験からフレームワークをつかったWebサービスを作り上げ、半年ほど運営し多くのユーザーの方にご好評をいただいています。
詳しくは成果物の欄を御覧ください。

成果物をまとめよう

アピールポイントが3つかけたら、それを補うように成果物を3-5個、説明文とともに紹介しましょう。

成果物の説明で重要なのは、製作者目線になりすぎない、という点です。自分がひとりで作り上げたプロダクトの場合、いろいろな新技術を盛り込んだり、思いもよらない苦労があったりといろいろ話を盛り込みたくなります。

ですが、ここでも大事なのは採用目線。採用の人が読みたいのはあなたの苦労話ではなく、以下の点です。

  • 何を意図して作成したものか
  • 自分がどう関わったのか

たとえば、Webアプリを成果物に載せたい場合、大事なのは何を考えながら作成したかです。

  • 新技術・新しいフレームワーク取得のため
  • ユーザーの〇〇というニーズを満たすため
  • 技術検証・好奇心から

多くの場合、上の要素が絡み合って実際のアプリ作成に向かうことが多いかと思います。

たとえば、Webフレームワークに興味があり、Ruby on Railsが最近流行っていると聞いたので習得したいと考え利用した。

また、全国各地の道の駅限定品がまとめられているサイトがあれば、旅行時に楽しいし、そういったニーズがあると考えた。

これらを組み合わせて全国各地の道の駅限定品が紹介レビューされる投稿型のWebサービスを作成した。

というような考え方です。

これを紹介文としてまとめると、以下のようになります。


もともとWebフレームワークに興味があり、Ruby on Railsの需要が高まっていると知ったので、技術習得のためにWebサービスを作成しました。
このサービスは全国各地の道の駅にある限定品について紹介・レビューが行える投稿型のサービスです。
最近道の駅の限定品が静かなブームとなっており、限定品の情報収集ができるサービスが有ると多くの方のニーズを満たせると考えました。
また、自身も旅行に出た時に活用できると考えて、このようなサービスを構築しました。

このぐらいまとまっていると意図がわかりやすく、自身の学習意欲も相手に伝わりやすいかと思います。さらに使える言語とそのレベルも伝えられて一石二鳥ですね。

また、企業の一員としてプロジェクトに関わった場合は、どのような立ち位置でプロジェクトに参加したのかを明確にする必要があります。

たとえば、大手小売店の通販サイト構築プロジェクトに参加していた、という経歴があったとして、これだけではどのレベルで参加したのかさっぱりわからないですよね。

下請けのコーダーとしてHTMLを組んだのか、インフラ周りの設計を1から主導的に進めたのか、システム設計の上流でPMをやっていたのか。

自分では当たり前になりすぎていて、意外と書き落としがちな部分です。もし関わり方が明確にできているか不安だったら、実際の文章を信頼できる友達や転職エージェントに見てもらうといいでしょう。けっこういろいろな指摘がもらえるはずです。

このようにして、とくに強調したい成果物3-5個をピックアップし、文章を作り込んでいきましょう。

成果物リストをつくろう

最後に、今までで紹介しきれなかった自分の成果物をリスト化して列挙します。

ここに掲載されるものはGitHubのリポジトリであったり、資格であったり、実績であったり、勉強会を主催した経験やイベントでの登壇経験もある人は書いておくといいでしょう。

ただ、注意点として、リンクだけを貼って終わり、というのはやめましょう。採用側からすると、なんのリンクか遷移するまでわかりませんし、いちいち踏むのも手間です。

少しでも採用の負担を減らすという観点から、リンクにはリンク先の概要を書くようにしましょう。GitHubであれば〇〇の言語で作った、××という動作をするアプリ、ぐらいの説明がついているのがベターです。

コーディングしよう!

最後にこれまで考えてきたコンテンツをコーディングして行きましょう。これにはHTML、CSS、JavaScriptとBootstrapの知識が必要になります。

これらの知識の習得にどうしても時間が割けない、という人は最終手段として、上で紹介したドローツールで画像1枚でポートフォリオをつくってしまう、というのもありです。あとは画像ファイルをクラウドにおいておけば、リンク一つで見ていただけるようになるので、楽といえば楽です。

実際に、名刺にポートフォリオ画像のリンクを貼り付けられていたデザイナーの知り合いがいました。

ただ、画像ファイルだと修正が手間なのと、ポートフォリオというと最近はWebサイトで有ることが一般的なので、Web技術の習得に消極的な人だとみなされてしまう可能性があります。

エンジニアであれば、極力HTML、CSSを活用してWebベースのポートフォリオサイトを作りましょう。大丈夫です。1つプログラミング言語を習得していれば、数時間もあれば使えるようになりますから。

あと、自分にはデザインセンスがなくて・・・という方もご安心ください。Bootstrapというフレームワークを使えば初心者でも簡単にそれっぽいサイトを作ることができます。

ぜひこちらの記事を参考に挑戦してみてください。


2018年最新!Bootstrap良質テンプレート19選【無料/有料/日本語別】
更新日 : 2019年4月25日

また、JavaエンジニアでWeb技術が使えるのなら、積極的に盛り込んだほうがいいの?という疑問を持つ人もいるかも知れません。

たしかにポートフォリオを技術証明として使うのはありといえばありです。ただ、何度も言っているように大事なのは採用目線です。JavaScriptを使える人がとくにやりがちですが、使い勝手を阻害するような演出、動作は厳禁と思ってください。一発でUI/UXの意識が低い人と判断されてしまいます。

経験者やWeb技術を売りにしたいフリーランスの場合、個人的にはポートフォリオよりも成果物で勝負したほうが賢明だろうと思っています。

また、初心者・未経験の場合できることは限られてくるでしょう。この場合、むりに背伸びして自分を大きく見せようとするのではなく、自分のできる範囲を素直に認めて、簡単なページにするほうが評価が高くなりやすいように感じています。

無理によくわからない技術を盛り込んでしまった場合、採用側はその技術が使える前提で話を進めてしまう可能性があります。そうなるといろいろと取り返しがつかなくなる場合もあるので、無理はしない、という姿勢は大事です。

具体的なコーディングはこの章の最初の基礎で紹介したページが参考になりますので、あらためてそちらを確認しつつ、実際にポートフォリオのコーディングを進めていきましょう。

引用:paizaラーニング ITエンジニアの就活準備編2: ポートフォリオ制作

ダメなポートフォリオの例

最後に、明らかにダメなポートフォリオの例を3つ紹介します。一生懸命作っていると、意外とダメな部分を見落としてしまいがちですので、この点は外さないように何回も確認しましょう。

デザインに力を入れすぎて内容が入ってこないケース

最初に、フロント寄りの人や凝り性の方に結構多いのが、このデザインに力を入れすぎちゃったケースです。

たしかにポートフォリオは自分の技術証明の場でもあるので、デザインセンスを発揮したくなるのはわかりますが、今回の転職先はあくまでもエンジニア。

見た目ではなく、中身、成果物や経歴で勝負しましょう。

あと、デザインの話をすると、知り合いのデザイナー数人に話を聞きましたが、デザインの現場でもセンスを前面に出す機会はほとんどないようです。一般に求められているのはユーザビリティや外さないデザインだから、というのが主な理由でした。

逆にいえば、自分にデザインセンスとか無いし・・・という方も、世の中、そんなにセンスが求められてない、という事実は安心材料になるかもしれませんね。

スキル一覧にGitHubのアドレスしか書いていない・・・

こちらは逆にバックエンドや技術一本で来た方にありがちなケースです。

GitHubは自分の技術証明に最適ですが、だからといってリンクを書いてあるだけでは一般的にリンク先の内容はわかりません

前にも書きましたが、大事なのはこのポートフォリオを読む採用の人の負担をいかに軽くできるかです。リンクを貼るにしても、どんな内容なのかわかるようにする心遣いも社会人として重要なスキルではないでしょうか。

プロジェクトにどう関わったのかが明確になっていない

最後に、成果物の話でも触れましたが、前職で関わったプロジェクトを成果物として書く場合、プロジェクトにどう関わったのかが明確になっていないケースです。

プロジェクトにどのように関わったのか書いてもらわないと、ポートフォリオを読む側はあなたのスキルがサッパリわかりません。

それこそ、某銀行のシステム移管に参加しました、と書けるエンジニアは日本に1万人近くいるはずです。ですが、参加したのがN次受けか上流かで意味合いはまったく変わってきますよね。

ここまで極端でないにしても、どのような立場で参加したのかはあなたのスキルを示す重要な指標です。しっかり明確に書いて、スキルアピールをしましょう。

JavaエンジニアからWeb系へ転職するには

これまでJavaエンジニアとしてやってきて、仕事内容や働き方に疑問を感じてウェブエンジニアへ転職したくなる気持ち、非常によくわかります。

すでにエンジニアとして経験があるため、そこまで転職活動をする上で苦労はしないと思いますが、できれば選択肢を持って待遇の良いところに転職したいですよね。

そういった場合は、短期間で効率よく学習のできるプログラミングスクールでの学習がおすすめです。

特に弊社「侍エンジニア塾」では、一人一人のレベルに合わせたオーダーメイドカリキュラムをマンツーマンで教えるため、すでに知識のあるあなたに合わせたレベルからスタートさせることができます。

学習後は提携しているウェブ系の企業への紹介も可能なため、学習〜転職までを一気通貫して行うことができます。

無料体験レッスンでは、あなたの理想のキャリアを叶えるための学習方法や、これまでの生徒様の事例などをくまなくご紹介いたします。オンラインでも受講可能なので、お気軽にお申し込みください。

まとめ

いかがでしたか?

今回はエンジニアむけのポートフォリオについて、ある程度具体的な書き方の流れを紹介しました。

ポートフォリオを書く、ということは自分のエンジニアとしての仕事の成果を一回棚卸しする、ということでもあります。

振り返ってみることでいろいろ発見もあるでしょうし、将来への展望も見えてくる部分があるでしょう。

ぜひ大型連休など、時間のある時にポートフォリオの作成に挑戦してみてください。

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

平山 晃

平山 晃

フリーのエンジニア・ライター。
プログラミング、ライティング、マーケティングなど、あらゆる手段を駆使して、
ハッピーなフルリモートワーカーを目指し中。

最近興味がある分野は深層強化学習。
積みゲー、積ん読がどんどん増加しているのがここ数年の悩み。
実は侍エンジニア塾の卒業生だったりします。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説