作る上でのポイントって何かな？
という人へ向けてWebエンジニアがポートフォリオを作るときに気を付けるべきことを書いていきます。
ちなみに現在フリーランスエンジニアである私は、
- Web企業に転職経験が3回（ポートフォリオ作成3回）
- 面接官をしたり志望者のポートフォリオを見る機会が多かった
という経験があるので、その経験も踏まえて解説していきます。
この記事では以下のことがわかります。
- エンジニアがポートフォリオを作るべき理由
- 未経験エンジニアがポートフォリオでやってはいけないこと
- ポートフォリオの作り方・手順
- ポートフォリオ作成時の注意点
※基本的にWebデザイナー、コーダー、フロントエンドエンジニア向けですが、ポートフォリオサイトにWebサービス・Webアプリを載せたいサーバーサイドエンジニアにも読んでいただきたい内容になっています。
※ポートフォリオと実績は分けて考えましょう。この記事でお伝えするポートフォリオは実績を載せた自己紹介サイトのことです。
▼月額5,280円で挫折しないスクールはこちら▼
▼Twitterで人気爆発！未経験から副業・フリーランスになりたい人向けスクール▼
- キャリカミ：転職のプロに相談ができる！非公開求人1000件以上！
- レバテックキャリア
：高年収IT・Web業界トップクラスの求人数（4,000件）
- リクルートエージェント：求人数、転職支援実績、顧客満足度No.1
エンジニアがポートフォリオを作るべき理由
転職サイトによっては、スキルなどを羅列して入力するのみなところもありますが、実際の面接になるとポートフォリオを求められます。
またポートフォリオではなく実績を挙げてほしいという企業もあったりしますが、ポートフォリオさえ作っておけば転職エージェントや転職サイト上でURLを渡すだけなのでお互い楽ですよね。
また、履歴書と違って、他の会社にも使い回せるので一回作ってしまえば効率的ですよね。
あとは仕事をする上での必要になる技術情報は基本的にそのポートフォリオで全て分かるのでポートフォリオは作るべきです。
エンジニアがポートフォリオを作るべき理由まとめ
- 企業に求められるから
- 見せるのが楽・見るのが楽
- 作っておいた方が使い回せて効率的
- ポートフォリオで技術力がわかる
Webエンジニアならこんなポートフォリオはやめよう
ここからが本題ですが、意外とポートフォリオに関して認識が間違ってる方が多いかもしれません。
未経験エンジニアがポートフォリオを作る上でやってはいけないことを解説します。
1.レベルの高いポートフォリオを目指さない
レベルの高いポートフォリオとはどんなものかというと下記のようなポートフォリオです。
上記のようなかっこいいサイトを作りたいのはわかります。
しかしこれを目指してしまうとまず完成しません。
例えばあなたが、そろそろ転職しよう、とか独学から未経験エンジニアとして就職しようと考えているなら難易度の高いポートフォリオに使う時間はないのが実情ではないでしょうか。
上記のようなポートフォリオを作る方は、多くは経験値の高いフリーランスです。
自己ブランディングとして価値の高いポートフォリオを作ってるわけで、目的としてやや違いがあるのです。
そのため転職・就職にはそういった難易度の高いポートフォリオは不要で、ポートフォリオに意気込み過ぎて時間を使ってしまいなかなか転職できないというのは本末転倒になってしまいます。
まずはポートフォリオをシンプルな形で作り、企業に応募→面接というスピード感は意識する必要があります。
- 転職が目的なら難易度の高いものを目指さない
- ポートフォリオ自体に時間をかけ過ぎてしまい転職できないのは本末転倒
2.凝った演出は必要なし
未経験の時は、ポートフォリオ上で凝った演出は必要ありません。
なぜかと言うと凝れば凝るほど学習コストが高くなり、完成に至ることが困難になるからです。
また、未経験の時は、その演出がユーザーのストレスになっていないかがまだわからない場合が多いです。（自分もそうでした！）
そのため、自分のやりたいことを詰め込んでしまってユーザーのストレスを生んでしまうポートフォリオが出来上がってしまう可能性があります。
例えばモーダルウィンドウで実績を紹介するなどです。モーダルウィンドウを挟んでしまうと、面接官としては実績ページを見るまでに以下のように一つアクションが増えてしまいます。
↓
案件一覧
↓
リンクで実績ページ
↓
案件一覧
↓
モーダルウィンドウで案件の詳細（アクションが一つ多い）
↓
リンクで実績ページ
そのためモーダルウィンドウはない方がいいというのがポートフォリオを見る側の率直な意見です。
とはいえ、モーダルウィンドウは、まだそこまで手間ではないです。
ここで言いたいことは常に見る側にとってどうか？を考えることが重要ということです。
- スプラッシュアニメーション（ページ表示前のアニメーション）
- スクロールジャック（ユーザーがスクロールを操作できない）
- 不必要なトグル
などはない方が、見る側を考慮してると言えます。
ということであれば、例えばスプラッシュアニメーションなどはスキップボタンを付けるなどアクセシビリティ（※誰でもどんな環境でもアクセスしやすいという考え方）の考慮が必要になります。
- ユーザビリティ性がない凝った演出はいらない
- もし挑戦したいことがあれば見る側に立ってストレスにならないか考えよう
この辺はとてもうまく作られてるポートフォリオを記事にしましたので、気になる方は参照ください。
3.見にくい、崩れ、アクションが多い
また文字量が多すぎたり実績数が多すぎるのは注意です。
なぜなら面接官やポートフォリオを見るエンジニアは他の業務がある中、複数のポートフォリオを見るため時間をあまりかけたくないというのが本音です。
多いに越したことはないと思うかもしれませんが、厳しい言い方をさせてもらうなら低品質の実績が多数あるより、ちゃんと作り上げた実績が1,2～3件ある方がいいです。
そのため無駄な文言や自身のある実績のみに絞るなどの気遣いが必要です。
初心者の方は、特に崩れに注意しましょう。
ＩＥは気にしなくていいですが、特にタブレット幅やスマホ幅はブラウザ上のdeveloper tool上での確認で良いので崩れのないようにしておきましょう。
実機で見る人はほぼいないので特別見る必要はないと考えてよいです。
アクションが多いのは、モーダルでも言いましたがユーザーの手間を生んでしまいます。
そのため、不必要なページのリンクなどは極力減らすといいです。
- 文字量が多い、実績数が多すぎ→全部読みません。基本的に見るのは2、3サイト
- レスポンシブデザインの場合はdeveloper toolで確認する
- 不必要なリンクをなくす
4.やたら重い
画像などは実例紹介で必要になるかと思いますが、軽量化してページスピードを速くするのもポイントです。
厳密に何秒以内！とは言いませんが、実際に自分で客観的に見て、遅いなと感じない程度であればOKです。
軽量化ツールはWebでもサービスがありますので、忘れずに利用しましょう。
https://tinypng.com/
また古いjQueryなどのライブラリのバージョンを使っていたり、使用していないファイルのパスの読み込みはなくすようにしましょう。
5.不必要なことを載せる
下記は、とある転職サイトに「○○をポートフォリオに載せるべき」という記事がありましたが、バットパターンかと思います。。
何個か挙げてみます。
プログラミング手法の紹介をしよう
プログラミング手法の紹介をしよう
プログラミングの手法にはいくつかありますが、自分の得意なプログラミング手法、自分の製作スタイル、仕事の進め方を紹介しましょう。
プログラミング手法というのが良くわかりませんが、もしかしたら環境構築の話かもしれません。
それならまだ良しですが、仕事の進め方などは必要ありません。
必要最低限、でも必要なことは載せるという考えです。
載せても良いこと
- 使用してるエディタ
- 使用してるバージョン管理ツール
将来の方向性を紹介しよう
将来の方向性を紹介しよう
今後自分はプログラマーとして今後どういった仕事をやっていきたいのか？目標を書きましょう。
目標…。読みません。。面接のとき聞かれるのでその時答えましょう。
ただ、心がけてることなどはプロフィールにそっと添える感じで書いてもＯＫです。
プロフィールにそっと添える例
”セマンティクスなコーディングを心がけています。”
紙
WEBポートフォリオと紙ベースのもの両方を用意しよう
就職、転職を目的とするプログラマーのポートフォリオは紙媒体のものとWEBポートフォリの両方を用意しましょう。紙媒体のポートフォリオが有効となるのは主に採用面接の時です。
紙…まじですかっ。
印刷会社のデザイナーじゃないので、必要ありません。
なんならPCも必要ありません。（企業側で用意している為。ノートＰＣお持ちの方は持っていった方が無難&やる気アピールにはなります）
話は逸れましたが、面接時はスーツでなく私服で大丈夫です。
こんなポートフォリオはやめよう、まとめ
- レベルの高いポートフォリオを目指さない
- 凝った演出は必要なし
- 見にくい、崩れ、アクションが多い
- やたら重い
- 不必要なことを載せる
どういうポートフォリオをWebエンジニアは作るべきか
まずは、ポートフォリオについてやらない方がいいことを書きました。
次にどういうポートフォリオを作るべきかということを書いていきます。
ポートフォリオの目的を考えることが必要です。
つまり目的はユーザー視点でシンプルに実績を見せることに尽きます。
以下の情報を載せるといいでしょう。
1.自己紹介
簡単な自己紹介は必要です。ただ自己紹介も長すぎても読む気はしませんので100文字前後で良いです。
自己紹介に上げるべき事柄は以下です。
・経験
・スキル
・趣味
ここで、なぜ趣味かというと面接で割と盛り上がったりするからです。
自分も何度か経験ありますが、面接ではスキル面以外で面接官との共通点を見つけられると印象が強くなりますので、おすすめします。
2.案件実績
案件実績の一覧を見せます。
- サムネイル画像
- 制作時期、期間
- 担当した技術
をそれぞれ書きます。デザインとしては3～4カラムのカード型が一般的です。
ここで注意すべき点は、見せたいものから実績を挙げていくことです。
もちろん面接官は上から順に見ます。
しかし全て見るわけではありませんので、一番見せたい実例を著中に入れられてしまっては見られないこともありえるからです。
面接を何回か受けると良くわかりますが、
一番自慢できる仕事はなんでしたか？
一番大変だった案件はなんですか？
という風に1番を聞いてきます。
なぜなら私が見る側でもそうでしたが一つ見れば大体わかりますし、一人に時間もそんなにかけれられないので数はあまり重要視されないのです。
発信力
ここ数年で必要とされるのがこの発信力です。自分も2018年に久しぶりに面接を数か所受けてみて明らかに発信力が重要視されてるなと感じました。
主に下記です。
- ブログ
- github
- qiita
面接で恐らくアウトプットはされていますか？という旨の質問が7、8割の確率でされます。
その時に口頭でもいって尚且つ証拠を見せられると他の人と差別化できます。
つまりポートフォリオ自体に力を入れるのではなく、実績や日々の発信力に力を入れることがエンジニアのポートフォリオは重要です。
ただ未経験のうちは、Twitterに力を入れすぎて本命であるプログラミングがおろそかにならないように注意しましょう。
なので発信力は必須ではありません。
▼【リスクなし】最強の無料プログラミングスクールはこちら▼
ポートフォリオ作成時の注意点：転職活動がバレる！？
実務経験がある方に限りますが、案件実績の本番のリンクをはるときは注意が必要です。
もし実際のサイトを実績と載せていた場合、アナリティクスなどでリンク元としてポートフォリオが転職前の会社にばれてしまうからです。
自分が初心者の頃これをやって社長に転職活動がばれてしまったのは今となってはいい思い出です。。
なので、実績リンクの貼り方としては
・google検索した時のリンクをはる
・ポートフォリオサイトドメイン配下に実績を持ってくる
というやり方であれば、ポートフォリオがばれることはありません。
今後、2、3社目に転職する際は必要となるので覚えておきましょう。
▼高評価続々！ポートフォリオの作成サポート付きのスクール▼
まとめ：ポートフォリオを作る上で気にするべきたった一つのこと
Webエンジニアがポートフォリオを作る上で気にするべきたった一つのことはユーザー視点、つまり面接官のことを考えることです。
決して独りよがりの作品にしてはいけません。
これは今後も必要な考え方になります。
また、Webページの性質としてユーザビリティやアクセシビリティを重んじている為、それができていないポートフォリオ＝Webをわかっていないと判断されてしまうことも考慮しなければなりません。
ただ、最近学習したことをポートフォリオに取り入れるというのはいい意味で勉強となりますのでどんどん取り入れましょう。
その時でも上記のことは意識して作れるとベストです。
ポートフォリオを作る上で以上のことが参考になれば幸いです。
実績を作りたい方におすすめのnoteはこちら
そんなこと言っても実績がない！という人はまずは実績を作るべき。
トレンドをおさえたコーポレートサイトの作り方を14記事にわたって解説しました↓
また、「教えたい人」と「学びたい人」のスキルプラットフォーム「MENTA」でメンターやってます。
今なら質問回数無制限です！
就職サポートがある月額5,280円のプログラミングスクール
本気のパソコン塾でフロントエンドを学ぶのもおすすめです。
以下特徴があります。
- 低額で定額の料金設定
- 動画解説と質問サポート付き
- 日々の進捗をサポーターが一緒に管理
- 就職サポートあり
コメント