こちらの記事で紹介しているとおり、基本的にエンジニアに転職したいのであれば、あなたの技術力を証明する作品(ポートフォリオ)を企業に示す必要があります。
しかし、恐らく大半の方は
- 人生で『ポートフォリオ』というものを作った経験がない
- 何を作ればいいかイメージが湧かない
- 気を付けるべき点が分からない
このような状態かと思います。
そこで今回は、最短で質の高いポートフォリオを作る方法についてお伝えします。
- 30代＆業務未経験の状態から学習を開始して、
- 独学半年でWeb系企業に内定をもらった僕が、
- 自分の経験をベースに、先輩エンジニアの意見を参考に書く記事
ですので、この記事を読めば、あなたのエンジニア転職の成功率はグッと高まるはずです。
ぜひ最後までお付き合いください。
- これからポートフォリオ作りに取り掛かる人
- 現在ポートフォリオを作っている最中の人
- ポートフォリオ作りで気を付けるべきポイント
- 素早くポートフォリオを完成させるコツ
目次
ポートフォリオは「自分の悩み」から考える
ポートフォリオを作る際に、何を作るべきか悩む人は多いかと思います。
そんな人にオススメしたいのが、
「自分の悩み・不満」を解決する作品を作ること
です。
こういった作品をつくることで、
- 作品のイメージを膨らませやすい
- ペルソナが明確になることで作品に統一感が生まれる
- 面接官に「ユーザーを意識できる人」という印象を与えられる
- 自分の悩みを解決できるのは単純に楽しい。
以上のようなメリットがあります。
例えば僕の場合、自分が子育て中ということもあり、子育て中に感じた色々な悩み・不満を解消するために、次のようにイメージを膨らませました。
- 子どもの写真や動画を撮りすぎてデータ容量が足りない → 画像・動画の投稿機能
- 親から「孫の写真を送れ」という連絡が面倒 → ①で投稿したデータを他のユーザーが見れる機能など
- 子どもの成長記録を付けたいけど、つい忘れる → LINEと連携した定時の通知機能
ザックリとこんなかんじですね。
また、ポートフォリオに実装する機能を考える際は、
現在の自分の技術レベルは考えない
ということが重要です。
などといった理由で、ついネタ出しも控えめになりがちですが、業務未経験の人の現状のスキルで出来るポートフォリオのレベルなんて、たかが知れてます。
それに、ネタ出しをしたからと言って必ずしも、そのとおりに作る必要はありません。
実際に作っていく中で機能を考え直しても問題ありませんし、技術的にどうしても難しいなら諦めても構いません。
実際、僕もネタ出しをした要件のいくつかは諦めましたが、それでも無事に内定は獲得できました。
ポートフォリオは『自分の作りたいもの』をベースにイメージを膨らませる
これをぜひ覚えておいてください。
未経験でも実装したい機能
ポートフォリオのイメージを膨らませた次は、
その作品にポートフォリオとして十分な機能が備わっているか
という観点で考えていきます。
その作品をあなたが作りたいと思っても、あなたの技術レベルが見えなければポートフォリオとしては、全く意味がありません。
それで具体的な機能ですが、以下に表を作成しました。
まずはあなたのイメージを見比べてみてください。
- 記事の一覧表示機能
- 記事の詳細表示機能
- 記事の投稿・編集・削除機能
- ユーザー登録・ログイン機能
- 画像データの投稿・差し替え・削除機能
- データベースのリレーション管理
- ページネーション機能
- 単体テスト・統合テスト
いかがでしょうか。最低限、これらの機能は実装したいところです。
もし、あなたのイメージにこれらの機能が無かったのならば、どうにか組み込めないか検討することをオススメします。
積極的に既存のプログラムを模倣する
実装したい機能が固まると、いよいよコーディング作業に移っていきます。
基本的にはコツコツとコードを書きこんでいけば問題ありませんが、最速でポートフォリオを完成させるにはコツがあります。
既存のプログラムを積極的に模倣する
ということです。
もっと噛み砕いていうと、
- 参考書のサンプルコード
- ネット上に転がってるコード
- 他の人のポートフォリオ
これらで使ってるコードを積極的にパクってください。
もし、あなたの手持ちの情報の中にあなたが求めるコードが無くても、Googleで検索したらすぐに出てきます。
例えば、画像データを加工して保存したいのなら、
「rails 画像 加工して保存」
などと検索すれば、それらしいコードが出てきます。
こういう方もいるかと思いますが安心してください。
というのもコードをそのままパクろうとしても、大抵の場合、他のコードとの間でエラーが起きるので、
- 多少の微調整が必要になる
- コードの意味を理解する必要ある
などの理由から、完全にコピペすることは不可能です。
ですので、一つのアプリを全てコピペしようと考えない限り、いやでも自分の頭で考えて、色々とコードをいじることになるので、安心して他のコードをパクってください。
ちなみに、『STEAL LIKE AN ARTIST』という著書の中で紹介されているのですが、
- ピカソ
- ダリ
- ポール・マッカートニー
これらの有名なクリエイターの方々ですらパクることを推奨しています。
「あのピカソがパクれって言ってるんだし！」
人の作品を参考にすることに抵抗感のある人はこれくらいに考えてもよいかと思います。
パッと見の印象はポートフォリオの肝
ポートフォリオを作る上で大事にして欲しいのが、
ぱっと見の印象
です。
『人は見た目が9割』といいますが、ポートフォリオも同様で、見た目が良いだけで面接での評価もグッと上がります。
さらに、エンジニアへの転職という側面で考えると、
- 面接官も未経験者の採用にそこまで時間を割けない
- 人事（非エンジニア）が見ても好印象を与える必要がある
と言った理由もあるので、パッと見の第一印象は重要です。
でも、デザインといっても、具体的にどこを注意したらいいのか分かりませんよね。
そこで、デザイン知識が無い方でもそれっぽいデザインにするポイントをお伝えします。
- 文字フォントのデザインは大事
- 色の組み合わせは自分で決めない
- fontawesomeを積極的に使う
- bootstrapを活用する
- トップ画面とREADMEは特に注力をする
これだけだと分かりづらいので、もう少し丁寧に説明していきます。
文字フォントのデザインは大事
実は作品の印象を決めているのは文字フォントのデザインです。
あなたのアプリにあった文字フォントに変えるだけで、印象は全然違うものになります。
作業の手間の割に効果が高いので、文字フォントは必ず変更するようにしてください。
基本的にはフォントを変更する場合はGoogleフォントを使用することになるかと思います。
簡単に使用できるので、ぜひ使ってください。(もちろん無料です)
色の組み合わせを自分で決めない
素人が色の組み合わせを適当に決めると本当にカッコ悪いです。
ですので、色は絶対に自分で決めず、既に世に出回ってる他のサイトを参考にしてください。
また、「Twitter」など、多くの人が知っているアプリの色をそのまま用いると、類似品の感じが強くなってしまいます。
そういう場合は、背景をシンプルで強調しすぎないパターン画像に差し替えると、独自性がグッと増します。
上のような柄のことですね。
fontawesomeを積極的に使う
fontawesomeとはザックリ言えば絵文字ですね。
← こういったものです。
これをボタンの横に入れるだけで、グッとデザイン性がアップします。
こちらも無料で使用することができるので、ぜひ積極的に取り入れてみてください。
bootstrapを使う
「bootstrap」とはCSSのフレームワークの一種で、簡単に言えば、『デザインをパッケージ化して、誰でも簡単にそれっぽいデザインが出来るツール』です。
「他の人とデザインが被る」という理由で敬遠する人もいるようですが、これまで説明してきたポイントを押さえていれば、「どこかで見たデザイン」になることはないので安心してください。
むしろ、
- 素人が一から作ったデザインは基本的にダサい
- デザインはポートフォリオの本質的な部分ではない
などの理由から、導入しないことはむしろマイナスになりかねないと考えます。
トップ画面とREADMEは特に注力する
ポートフォリオを作る上で、
パッと見の印象は大事
ということは何度もお伝えしてきたかと思いますが、その中でも特に注力して欲しいのが、
- トップ画面
- README
この２つです。
面接官は基本的に皆さん忙しく、想像以上に中身は見てもらえません(といっても、内定を出す前にはひととおりチェックはされているようですが…)。
そんな中で、面接官の目に留まり、唯一まともに見られるのが、「トップ画面」と「README」になります。
ここが雑だと、その時点で面接官から「見る価値無し」と判断されかねないので、十分に気を付けてください。
エンジニア転職の肝はポートフォリオ
ポートフォリオの作り方に関してイメージは湧いたでしょうか。
今回の記事をまとめると次のとおりとなります。
- ポートフォリオは自分の悩みをベースに内容を考える
- 最低限実装したい機能は頑張って導入する
- コーディングの際は積極的に他からパクる
- パッと見は大事。ポイントを押さえて効率よく
繰り返しますが、デザインは本当に重要な要素になってきます。
- パッと見の印象は本当に大事
- 特にトップ画面が適当だと、それだけで評価されない可能性がある
これらを念頭に置きつつ、ポートフォリオ作りを頑張ってください。
もし、どこかしらでエラーにハマってしまった場合はこちらの記事を参考にしてみてください。
さて、ポートフォリオが完成したら次はいよいよ転職活動を開始します。
IT業界は色々な会社があり、とんでもないブラック企業から、しっかり成長できるホワイト企業まで様々です。
その辺りについては、僕が実際に自分の目と肌で感じたことについてまとめた記事があるので、そちらを参考にしてみてください。
