BRANU BLOG

「カッコいい人を育て、カッコいい会社をつくる」を掲げるブラニュー株式会社の日常を、六本木の中心にあるオフィスから発信します。

2017/04/27

転職を考えるエンジニア必見!ポートフォリオを作る6つのステップ

こんにちは、フロントエンドエンジニアの小原です。
「ブラニュー開発者ブログ」第2回は「ポートフォリオ作ろう!その2〜制作編〜」です。 前回はポートフォリオを公開する方法を書きましたが、今回は実際の制作編となります。

Step1.キャリアの棚卸しをしよう



さて、実際の制作となるといきなり手を動かし始めるイメージがありますが、まずは自分の関わった仕事・プロジェクトの棚卸しをしましょう。

・参加したプロジェクト、リリース時期
・プロジェクトの関わった範囲、ポジション、規模(人数や期間)など
・開発環境、開発言語、仕様ツールなど
・WebサイトならURL、アプリならアプリ名とDL先
・PVやKPI、アプリの場合はDL数、ECの場合は売上など数字でわかるもの(ただしNDAに反しない範囲で。)

 ポートフォリオを見る人は、あなたがどういうスキルを持っていて、どういう経験があるのかに興味があります。これまでの自分の仕事、参加したプロジェクトを整理してメモなどに書き出しましょう。これらは職務経歴書などにも書かれるかと思いますが、ポートフォリオに含めておけば、よりスキルや経験のイメージが付きやすくなります。
また、つきたい職種によって強調すべきスキル・経験も変わってきます。
例えばディレクター・PMの場合は外部折衝やメンバー管理、KPIなどのマネジメント経験、企画や要求分析・要件定義、アーキテクト設計などの上流工程の経験が求められます。

プログラマ・エンジニアの場合は詳細設計やバックエンドやフロントエンドの実装経験、ツールや言語などの使用経験、インフラの構築、APIやフレームワークの知見など、プレイヤーとしてのスキルを求められます。
自分がどういった職種につきたくて、どういった経験をしてきたのかを整理しましょう。 ベテランの方の場合、あまりにも古すぎる実績は参考になりませんので、直近のプロジェクトだけ書き出すようにしましょう。

Step2.画像を集める


次にこれまでの実績の画像を集めます。Webサイトやアプリのスクリーンショット、作成したバナー画像など。 バックエンドエンジニア、インフラエンジニアの場合はAPIやミドルウェア、サーバなど目に見えない部分を担当することも多いかと思いますが、その場合は関わったサイトのスクリーンショットでかまわないでしょう。

【ポイント】
・PCサイトとSPサイトが分かれている、レスポンシブの場合は必ず両方のスクリーンショットを用意する
 ・規模が大きいサイトの場合、具体的なページのURLとスクリーンショットを用意する

Step3.手書きラフスケッチ/ワイヤーフレームをつくる

次に手書きラフスケッチ/ワイヤーフレームを作ります。Webサービスなどを使う場合は省略可ですが、最低限上でまとめた情報とスクリーンショットは紐付けてまとめておきましょう。

手書きラフスケッチの場合

ラフスケッチですので、綺麗さよりもわかりやすさ、自分のしたい形をラフにします。方眼ノートなどを準備できればベストですが、なければ通常の大学ノートでも構いません。

ツールを使う場合

ツールを使う場合、デザイナーならAdobe Illustratorなどを使いますが、エンジニアの場合Adobe CCを持っていない方も多いかと思います。 そこで、ワイヤーフレーム作成に特化したWebサービスを使いましょう。

Cacoo
draw.io
moqups
Prott

ちなみにExcelやPowerpointなどでワイヤーフレームを作成する場合もありますが、やはり専用ツールのほうが使いやすく、時短にもなりますので積極的に使いましょう。
いずれの方法でも、実際に目に触れる人の視点(UX)を考えて、実際のコーディング時に破綻がないように作りましょう。ちなみに、サンプル画像はdraw.ioで作成しました。
フローチャートの部分は実際にコーディングするときに工夫が必要ですが、ざっくりとしたものでいいので絵起こししましょう。

Step4.実際に制作してみよう


デザイナーの場合ここからさらにカンプを起こし、コーディングしていきますが、WordPressやBootstrapテンプレートを使う場合、コーディングに入ってしまいます。 
エンジニアの場合、テンプレートを使っていれば見た目はある程度もので大丈夫かと思いますが、実際にコードを書く場合は、美しいコードを心がけてください。また、classやID名なども気をつけましょう。

Step5.公開前の確認


公開する前にかならず下記の内容を確認しましょう。

・明らかなレイアウト崩れやバグ、リンク切れ等はないか
・内容に間違いはないか
・誤字脱字はないか

このあたりは履歴書と同じです。せっかく作ったのに、応募後にtypoに気づいたら台無しですね。

Step6.公開します

前回のブログで用意したアカウント、サービスにポートフォリオを公開します。
お疲れ様でした!

ブラニューでは一緒に働く仲間を募集しています!

さて、完成したポートフォリオ。せっかくなのでブラニューに応募してみませんか?
少しでも興味がある方は、下記をご覧ください!
 
WEBデザイナー
UI/UXデザイナー
バックエンドエンジニア(マーケティングオートメーションツール)
バックエンドエンジニア(BtoCマッチングプラットフォーム)
フロントエンドエンジニア