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

Web転職する
スポンサーリンク
スポンサーリンク
スポンサーリンク

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

 

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

ちなみに自分はWeb企業に転職経験が3回、また、企業に在職していた時、面接をしたり志望者のポートフォリオを見る機会が多かったのでその経験も踏まえて解説していきます。

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

 

転職サイトによっては、スキルなどを羅列して入力するのみなところもありますが、実際の面接になるとポートフォリオを求められることが自分の感覚だと8~9割です。(ほぼ確実)

 

またポートフォリオではなく実績を挙げてほしいという企業もあったりしますが、ポートフォリオさえ作っておけばurlを渡すだけなのでお互い楽ですよね。

 

また、履歴書(まだ提出させる会社があることが驚きですが)と違って、他の会社にも使い回せるので効率的ですよね。

 

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

 

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

 

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

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

 

レベルの高いポートフォリオってどんなものかというと下記のサイトに載ってるようなサイトです。

参考にしたい日本人デザイナー・エンジニアのポートフォリオサイトまとめ
就職活動の時期にさしかかっています。 Webデザイナーの方はポートフォリオ作りに勤しんでるのではないでしょうか。 Webデザイナーの平尾誠です。 かっこいい・可

 

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

 

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

 

上記のようなポートフォリオを作る方は、多くは経験値の高いフリーランスです。自己ブランディングとして価値の高いポートフォリオを作ってるわけで、目的としてやや違いがあるのです。

 

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

 

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

 

凝った演出は必要なし

 

未経験の時は凝った演出は必要ありません。

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

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

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

例えばモーダルウィンドウで事例を紹介するなどです。モーダルウィンドウを挟んでしまうと

 

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

案件一覧

モーダルウィンドウで案件の詳細

リンクで実績ページ

となってしまい面接官としては実績ページを見るまでに一つアクションが増えてしまいます。
そのためモーダルウィンドウはない方がいいというのがポートフォリオを見る側の率直な意見です。

 

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

 

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

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

 

もし、

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

 

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

 

まとめると言いたいこととしては、下記です。

 

  • 難易度の高いことに挑戦し過ぎて完成できないのは本末転倒
  • レイアウトやアクションやアニメーションでユーザーにストレスがかかってないかの判断が必要

 

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

 

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

 

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

 

どこに何があるかわからないのは言わずもがなですが、気を付けるべきです。

また文字量が多すぎたり案件事例数が多すぎるのも逆にどれを見ればいいですか?となってしまうので絞るべきです。

 

初心者の方は、気を付けるべきですが崩れは注意しましょう。

 

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

 

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

 

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

 

やたら重い

 

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

 

ただ、遅いなと感じない程度で良いです。

 

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

 

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

 

不必要なことを載せる

 

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

 

何個か挙げてみます。

 

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

 

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

 

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

 

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

 

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

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

 

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

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

 

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

 

紙…まじですかっ。

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

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

 

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

 

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

 

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

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

 

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

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

 

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

自己紹介

 

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

 

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

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

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

案件実績

 

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

 

  • 画像
  • 制作時期、期間
  • 担当した技術

 

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

 

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

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

 

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

 

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

 

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

 

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

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

 

発信力

 

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

主に下記です。

  • twitter
  • ブログ
  • github
  • qiita

 

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

 

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

 

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

 

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

 

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

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

 

なので、やり方としては

 

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

 

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

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

 

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

決して独りよがりの作品にしてはいけません。これは今後も必要な考え方になります。

 

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

 

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

 

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

 

面接を受けるタイミングは良ければ下記を参照してみてください。

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

 

 

人気転職エージェント

 

 

人気転職ブログ記事

 

note作成しました!

 

  • ・【モジュールの教科書】
  • ・gulpのテンプレート、使い方
  • ・ポートフォリオの簡易テンプレート
  • ・サイト課題

 

【無料】WebIT系優良就活・転職サイトまとめ
Webist(ウェビスト)

Webist(ウェビスト)は大手企業に強いWeb専門の転職サイト&エージェントです。
特徴・メリットは
・30年の実績
・幅広い働き方を推奨
・大手企業多数
・週3案件が多い
・エージェントの質がいい
などなど。
大手Web企業で転職を決めましょう!

ワークポート

元々IT専門の転職サイトだったためIT業界の求人数が約2000社と圧倒的です。
エージェントも質が高く専門性の高いサポートをしてくれます。
オリジナルツール「eコンシェル」が便利。
【IT業界・ゲーム業界】に強い、転職決定人数 No.1です!

レバテックキャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

スポンサーリンク
Web転職するポートフォリオ転職
スポンサーリンク
シェアする
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして企業に週5で業務委託で常駐しています。

正社員からフリーランスになり以下のように変わりました。
・月収 34万→929,346円(最高月収)
・残業時間:最高100時間→0~10時間
・日々の積み上げ:なし→ブログ、筋トレ、プログラミング

このブログでは、フリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

技術ブログはこちら→frontendomemo

関係ないですが、オムレツ作るのが好きです。

プロフィール
サイトマップ

宜しければフォロー、feedly登録くださいm(__)m

フォローする
hoshilog

コメント

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