【フリーランス】リモートに強いエージェント5社
10万円給付金で始められる無料プログラミングスクール5つ(就職可能)
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

未経験エンジニアがポートフォリオを作る上で必要なこと・やってはいけないこと

Web転職する
Webエンジニアとして転職したいけどポートフォリオは作るべきかな?
作る上でのポイントって何かな?

という人へ向けてWebエンジニアがポートフォリオを作るときに気を付けるべきことを書いていきます。

 

ちなみに現在フリーランスエンジニアである私は、

  • Web企業に転職経験が3回(ポートフォリオ作成3回)
  • 面接官をしたり志望者のポートフォリオを見る機会が多かった

という経験があるので、その経験も踏まえて解説していきます。

 

この記事では以下のことがわかります。

  • エンジニアがポートフォリオを作るべき理由
  • 未経験エンジニアがポートフォリオでやってはいけないこと
  • ポートフォリオの作り方・手順
  • ポートフォリオ作成時の注意点
  • 【期間限定】有料ポートフォリオのテンプレート無料配布←NEW!

 

※基本的にWebデザイナー、コーダー、フロントエンドエンジニア向けですが、ポートフォリオサイトにWebサービス・Webアプリを載せたいサーバーサイドエンジニアにも読んでいただきたい内容になっています。

※ポートフォリオと実績は分けて考えましょう。この記事でお伝えするポートフォリオは実績を載せた自己紹介サイトのことです。

MENTA

「教えたい人」と「学びたい人」のスキルプラットフォーム「MENTA」でメンターやってます。

今なら質問回数無制限です!



エンジニアがポートフォリオを作るべき理由

転職サイトによっては、スキルなどを羅列して入力するのみなところもありますが、実際の面接になるとポートフォリオを求められます。

 

またポートフォリオではなく実績を挙げてほしいという企業もあったりしますが、ポートフォリオさえ作っておけば転職エージェントや転職サイト上でURLを渡すだけなのでお互い楽ですよね。

 

また、履歴書と違って、他の会社にも使い回せるので一回作ってしまえば効率的ですよね。

 

あとは仕事をする上での必要になる技術情報は基本的にそのポートフォリオで全て分かるのでポートフォリオは作るべきです。

 

エンジニアがポートフォリオを作るべき理由まとめ

  • 企業に求められるから
  • 見せるのが楽・見るのが楽
  • 作っておいた方が使い回せて効率的
  • ポートフォリオで技術力がわかる

Webエンジニアならこんなポートフォリオはやめよう

ここからが本題ですが、意外とポートフォリオに関して認識が間違ってる方が多いかもしれません。

未経験エンジニアがポートフォリオを作る上でやってはいけないことを解説します。

1.レベルの高いポートフォリオを目指さない

レベルの高いポートフォリオとはどんなものかというと下記のようなポートフォリオです。

 

 

上記のようなかっこいいサイトを作りたいのはわかります。

 

しかしこれを目指してしまうとまず完成しません

 

例えばあなたが、そろそろ転職しよう、とか独学から未経験エンジニアとして就職しようと考えているなら難易度の高いポートフォリオに使う時間はないのが実情ではないでしょうか。

 

上記のようなポートフォリオを作る方は、多くは経験値の高いフリーランスです。

 

自己ブランディングとして価値の高いポートフォリオを作ってるわけで、目的としてやや違いがあるのです。

 

そのため転職・就職にはそういった難易度の高いポートフォリオは不要で、ポートフォリオに意気込み過ぎて時間を使ってしまいなかなか転職できないというのは本末転倒になってしまいます

 

まずはポートフォリオをシンプルな形で作り、企業に応募→面接というスピード感は意識する必要があります。

 

  • 転職が目的なら難易度の高いものを目指さない
  • ポートフォリオ自体に時間をかけ過ぎてしまい転職できないのは本末転倒

2.凝った演出は必要なし

未経験の時は、ポートフォリオ上で凝った演出は必要ありません。

なぜかと言うと凝れば凝るほど学習コストが高くなり、完成に至ることが困難になるからです。

 

また、未経験の時は、その演出がユーザーのストレスになっていないかがまだわからない場合が多いです。(自分もそうでした!)

 

そのため、自分のやりたいことを詰め込んでしまってユーザーのストレスを生んでしまうポートフォリオが出来上がってしまう可能性があります

 

例えばモーダルウィンドウで実績を紹介するなどです。モーダルウィンドウを挟んでしまうと、面接官としては実績ページを見るまでに以下のように一つアクションが増えてしまいます。

 

ポートフォリオページ表示

案件一覧

リンクで実績ページ

 

ポートフォリオページ表示

案件一覧

モーダルウィンドウで案件の詳細(アクションが一つ多い)

リンクで実績ページ

そのためモーダルウィンドウはない方がいいというのがポートフォリオを見る側の率直な意見です。

 

とはいえ、モーダルウィンドウは、まだそこまで手間ではないです。

ここで言いたいことは常に見る側にとってどうか?を考えることが重要ということです。

 

  • スプラッシュアニメーション(ページ表示前のアニメーション)
  • スクロールジャック(ユーザーがスクロールを操作できない)
  • 不必要なトグル

 

などはない方が、見る側を考慮してると言えます。

 

インタラクティブな動きを使ったサイトが得意だから、まだ実績がなくてそこまで時間をかけず作れるからやりたい

 

ということであれば、例えばスプラッシュアニメーションなどはスキップボタンを付けるなどアクセシビリティ(※誰でもどんな環境でもアクセスしやすいという考え方)の考慮が必要になります

 

  • ユーザビリティ性がない凝った演出はいらない
  • もし挑戦したいことがあれば見る側に立ってストレスにならないか考えよう

 

この辺はとてもうまく作られてるポートフォリオを記事にしましたので、気になる方は参照ください。

 

【未経験Webエンジニア必見】俊逸過ぎるポートフォリオまとめ・解説
この記事では、Twitterでお見かけした俊逸過ぎるポートフォリオを2つ取り上げたいと思います。 またコーディングの技術だけではなくデザイン性も優れているのでWebデザイナーの方も必見です。 この記事を読むことで優れたポートフォリオを見ることができます、参考にしたい時、実装方法の調べ方を解説します。

 

3.見にくい、崩れ、アクションが多い

また文字量が多すぎたり実績数が多すぎるのは注意です。

なぜなら面接官やポートフォリオを見るエンジニアは他の業務がある中、複数のポートフォリオを見るため時間をあまりかけたくないというのが本音です。

 

多いに越したことはないと思うかもしれませんが、厳しい言い方をさせてもらうなら低品質の実績が多数あるより、ちゃんと作り上げた実績が1,2~3件ある方がいいです。

 

そのため無駄な文言や自身のある実績のみに絞るなどの気遣いが必要です。

 

初心者の方は、特に崩れに注意しましょう。

 

IEは気にしなくていいですが、特にタブレット幅やスマホ幅はブラウザ上のdeveloper tool上での確認で良いので崩れのないようにしておきましょう。

 

実機で見る人はほぼいないので特別見る必要はないと考えてよいです。

 

アクションが多いのは、モーダルでも言いましたがユーザーの手間を生んでしまいます。
そのため、不必要なページのリンクなどは極力減らすといいです。

  • 文字量が多い、実績数が多すぎ→全部読みません。基本的に見るのは2、3サイト
  • レスポンシブデザインの場合はdeveloper toolで確認する
  • 不必要なリンクをなくす

4.やたら重い

画像などは実例紹介で必要になるかと思いますが、軽量化してページスピードを速くするのもポイントです。

 

厳密に何秒以内!とは言いませんが、実際に自分で客観的に見て、遅いなと感じない程度であればOKです。

 

軽量化ツールはWebでもサービスがありますので、忘れずに利用しましょう。
https://tinypng.com/

 

また古いjQueryなどのライブラリのバージョンを使っていたり、使用していないファイルのパスの読み込みはなくすようにしましょう。

 

5.不必要なことを載せる

下記は、とある転職サイトに「○○をポートフォリオに載せるべき」という記事がありましたが、バットパターンかと思います。。

 

何個か挙げてみます。

プログラミング手法の紹介をしよう

プログラミング手法の紹介をしよう
プログラミングの手法にはいくつかありますが、自分の得意なプログラミング手法、自分の製作スタイル、仕事の進め方を紹介しましょう。

 

プログラミング手法というのが良くわかりませんが、もしかしたら環境構築の話かもしれません。
それならまだ良しですが、仕事の進め方などは必要ありません

 

必要最低限、でも必要なことは載せるという考えです。

 

載せても良いこと

  • 使用してるエディタ
  • 使用してるバージョン管理ツール

将来の方向性を紹介しよう

将来の方向性を紹介しよう
今後自分はプログラマーとして今後どういった仕事をやっていきたいのか?目標を書きましょう。

 

目標…。読みません。。面接のとき聞かれるのでその時答えましょう。

ただ、心がけてることなどはプロフィールにそっと添える感じで書いてもOKです。

プロフィールにそっと添える例

”セマンティクスなコーディングを心がけています。”

WEBポートフォリオと紙ベースのもの両方を用意しよう
就職、転職を目的とするプログラマーのポートフォリオは紙媒体のものとWEBポートフォリの両方を用意しましょう。紙媒体のポートフォリオが有効となるのは主に採用面接の時です。

 

紙…まじですかっ。

印刷会社のデザイナーじゃないので、必要ありません。

なんならPCも必要ありません。(企業側で用意している為。ノートPCお持ちの方は持っていった方が無難&やる気アピールにはなります)

 

話は逸れましたが、面接時はスーツでなく私服で大丈夫です。

 

こんなポートフォリオはやめよう、まとめ

  1. レベルの高いポートフォリオを目指さない
  2. 凝った演出は必要なし
  3. 見にくい、崩れ、アクションが多い
  4. やたら重い
  5. 不必要なことを載せる

どういうポートフォリオをWebエンジニアは作るべきか

まずは、ポートフォリオについてやらない方がいいことを書きました。

次にどういうポートフォリオを作るべきかということを書いていきます。

 

ポートフォリオの目的を考えることが必要です。

つまり目的はユーザー視点でシンプルに実績を見せることに尽きます。

 

以下の情報を載せるといいでしょう。

1.自己紹介

 

簡単な自己紹介は必要です。ただ自己紹介も長すぎても読む気はしませんので100文字前後で良いです。
自己紹介に上げるべき事柄は以下です。

 

・名前、年齢
・経験
・スキル
・趣味

ここで、なぜ趣味かというと面接で割と盛り上がったりするからです。

自分も何度か経験ありますが、面接ではスキル面以外で面接官との共通点を見つけられると印象が強くなりますので、おすすめします。

2.案件実績

案件実績の一覧を見せます。

 

  • サムネイル画像
  • 制作時期、期間
  • 担当した技術

 

をそれぞれ書きます。デザインとしては3~4カラムのカード型が一般的です。

 

ここで注意すべき点は、見せたいものから実績を挙げていくことです。

もちろん面接官は上から順に見ます。

 

しかし全て見るわけではありませんので、一番見せたい実例を著中に入れられてしまっては見られないこともありえるからです。

 

面接を何回か受けると良くわかりますが、

 

一番自慢できる仕事はなんでしたか?
一番大変だった案件はなんですか?

 

という風に1番を聞いてきます。

なぜなら私が見る側でもそうでしたが一つ見れば大体わかりますし、一人に時間もそんなにかけれられないので数はあまり重要視されないのです。

 

発信力

ここ数年で必要とされるのがこの発信力です。自分も2018年に久しぶりに面接を数か所受けてみて明らかに発信力が重要視されてるなと感じました。

主に下記です。

  • twitter
  • ブログ
  • github
  • qiita

 

面接で恐らくアウトプットはされていますか?という旨の質問が7、8割の確率でされます。
その時に口頭でもいって尚且つ証拠を見せられると他の人と差別化できます。

 

つまりポートフォリオ自体に力を入れるのではなく、実績や日々の発信力に力を入れることがエンジニアのポートフォリオは重要です。

 

ただ未経験のうちは、Twitterに力を入れすぎて本命であるプログラミングがおろそかにならないように注意しましょう。

 

なので発信力は必須ではありません。

 

▼【リスクなし】最強の無料プログラミングスクールはこちら▼

無料で転職可能なプログラミングスクール5つ(給付金で始めよう)
無料のプログラミングスクールないかな? 定額給付金の10万円でプログラミングを始めたい! この記事では上記のような方に向けて、10万円以内で始められるおすすめのプログラミングスクールを紹介します。

ポートフォリオ作成時の注意点:転職活動がバレる!?

実務経験がある方に限りますが、案件実績の本番のリンクをはるときは注意が必要です。

 

もし実際のサイトを実績と載せていた場合、アナリティクスなどでリンク元としてポートフォリオが転職前の会社にばれてしまうからです。

自分が初心者の頃これをやって社長に転職活動がばれてしまったのは今となってはいい思い出です。。

 

なので、実績リンクの貼り方としては

 

・そもそもリンクを貼らない(検索してもらう)
・google検索した時のリンクをはる
・ポートフォリオサイトドメイン配下に実績を持ってくる

 

というやり方であれば、ポートフォリオがばれることはありません。

今後、2、3社目に転職する際は必要となるので覚えておきましょう。

まとめ:ポートフォリオを作る上で気にするべきたった一つのこと

Webエンジニアがポートフォリオを作る上で気にするべきたった一つのことはユーザー視点、つまり面接官のことを考えることです。

決して独りよがりの作品にしてはいけません。

これは今後も必要な考え方になります。

 

また、Webページの性質としてユーザビリティやアクセシビリティを重んじている為、それができていないポートフォリオ=Webをわかっていないと判断されてしまうことも考慮しなければなりません。

 

ただ、最近学習したことをポートフォリオに取り入れるというのはいい意味で勉強となりますのでどんどん取り入れましょう。

その時でも上記のことは意識して作れるとベストです。

 

ポートフォリオを作る上で以上のことが参考になれば幸いです。

 

また、ポートフォリオ作成の次に面接となりますが今のうちから下記記事は読んでおくことをおすすめします。

▼ポートフォリオを作る前に読んでおくべき記事はこちら▼

【徹底解説】プログラミング独学中どの段階で面接に行くべき?面接のタイミング
Web企業に3社転職、現在フリーランスをしている自分がプログラミング独学中どの段階で面接に行くべき?問題について解説します。

【期間限定】ポートフォリオの簡易テンプレート無料配布←NEW!

ここまで解説してきましたが、実際にポートフォリオをどう作ったらいいかわからないという方は、ポートフォリオのテンプレートを作りましたので、気になる方は参照ください。

↓期間限定ですが、ポートフォリオの簡易テンプレート無料配布します!

gulpのテンプレート、使い方&ポートフォリオの簡易テンプレート|hoshi|note
このnoteは以下のnoteを小売りにしたものです。 内容は同じものになりますのでご了承ください。 -------------------------------------- gulpのテンプレート、使い方 コーディングする上で今や必須のタスクランナーgulp。そのgulpの設定ファイルとディレ

実績を作りたい方におすすめのnoteはこちら

そんなこと言っても実績がない!という人はまずは実績を作るべき。

トレンドをおさえたコーポレートサイトの作り方を14記事にわたって解説しました↓

14日後にコーダーになるネコ|hoshi|note
14日で1サイト作れるnoteのまとめです。 HTML、CSS、JSが学べます。 サイトを作成をする上での考え方、コードすべてを画像付きで解説しています。 photoshopなしでも大丈夫、ポートフォリオに乗せれる実績が作れます。 最終的にはwordpress化もしていますので、こちらを実績に仕事を取ることも可能です。

HTMLとCSSのモジュール設計を学びたい方

  • 会社に入ってから先輩に迷惑かけたくない!
  • 同期や面接で差をつけたい

ならこちらがおすすめ。

モジュールの教科書

プログラミングに躓いた方向け無料サービス

プログラミングにつまづいた方は無料のプログラミングスクールに頼るのもおすすめ↓

MENTA

「教えたい人」と「学びたい人」のスキルプラットフォーム「MENTA」でメンターやってます。

今なら質問回数無制限です!



コメント

タイトルとURLをコピーしました