プログラミングでポートフォリオを作る理由とは?【制作方法あり】

プログラミングでポートフォリオを作る理由と具体的な作り方とは?

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg
ぼく
  • プログラミングのポートフォリオってなに?
  • エンジニアがポートフォリオ作る理由は?
  • 作り方も知りたいな!

こんな疑問に答えます。

プログラミング学習の方は、ポートフォリオを耳にしたことはないですか?

実は、このポートフォリオでエンジニアとしての市場価値が決まるといっても過言でありません。

私自身も、仕事を受注するときにポートフォリオが役に立っています。

本記事では、『ポートフォリとはなにか?』という基礎的なところから、『ポートフォリオの作り方』についても解説をしていきます。

記事を読み終える頃には、ポートフォリオすら作れるようになっていますよ

プログラミングポートフォリオの意味

プログラミングのポートフォリオ

まず、Portfolio(ポートフォリオ)とは、日本語に直訳すると「紙ばさみ」「折りかばん」「書類入れ」という意味です。

つまり「書類を運ぶためのケース」のことを表し、個々の書類を別々に扱うのではなく、書類全体をひとつの物として扱うという意味を持っています。

ですが、ポートフォリオという言葉は業界によって変わることがほとんどで、IT業界のポートフォリオは全く別の意味を持つことになります。

IT業界のポートフォリオとは、作品集のことを指し、自分の職種(あるいは転職希望職種)における実績や力量を評価してもらうための自作のサイト・サービスです。

プログラミングポートフォリオの具体例

プログラミングポートフォリオの具体例

続いては、具体的にどのようなポートフォリオサイトがあるのかご紹介していきます。

れむのポートフォリオ

れむのポートフォリオ

まず、はじめにご紹介させていただくポートフォリオは、筆者であるれむが作ったポートフォリオです。

私のスキルや、過去の実績をまとめています。

もし、興味があればサイトをのぞいてみてください!

>>れむのポートフォリオサイトを見る

ZIZIさんのポートフォリオ

つづいてご紹介するのはZIZI(@ZiziNomad)さんです。

旅するフリーランスエンジニアで、東南アジアを拠点としながら月5万円でゆるく生活している方です。

Ziziさんが制作されたポートフォリサイトはこちらから確認できます。

このポートフォリオを私も参考にしてサイト模写(サイトを真似して作る勉強法)をしたことがあり、完成度も高いものとなっています。

Ziziさんはブログも運営されているので、フリーランスに興味があればぜひのぞいてみましょう!

>>Ziziさんのブログをみてみる

よしこさんのポートフォリオ

最後にご紹介するのは、天才的なポートフォリオを制作したよしこ(@yoshiko_pg)さんです。

フロントエンジニアでバリバリ活躍されている方で、HTML5/CSS3モダンコーディングという本も書かれています。

正直にいうと、よしこさんのポートフォリをサイトを初めてみたときは、興奮と驚きで声を失いました。

そのくらいすごいポートフォリオサイトなので、こちらからぜひ見にいってみてください!

一度みたら忘れることはないすばらしいポートフォリオです!

プログラミングでポートフォリオを作る意味

プログラミングでポートフォリオを作る理由と具体的な作り方とは?

ポートフォリオを作る意味を確認していきましょう。

と言っても、主な理由は3つだけです。

  • 転職に使う
  • 就職に使う
  • 個人案件を受注するときに使う

まず、IT業界のポートフォリオとは『自作のアプリ・サービス』のことを指していました。

そしてポートフォリオは主に就職や転職のときに使われるもので、エンジニアの身元を示す履歴書のような役割を果たします。

仕事をもらうとき、一番重要なことは、プログラミングスキルです。

ポートフォリオは、プログラミングスキルを保証するための道具です。

そのため、自分プログラミングスキルを最大限つかって自作のアプリを作りましょう。

そのポートフォリオが、就職や転職、昇給に役立ちます。

私の場合は、プログラミング学習を初めて2ヶ月でポートフォリオを2つ作りました。

そして、3ヶ月目にはIT会社にインターン生として雇用してもらえることになりました。

つまり、プログラミングのポートフォリオは、エンジニアやキャリアアップに不可欠なものなのです。

良いプログラミングポートフォリオとは

プログラミングでポートフォリオを作る理由と具体的な作り方とは?

ポートフォリオを作りると言っても、いくつかポイントを抑えながらポートフォリオを作る必要があります。

  • 技術を詰め込む
  • コードが綺麗に整っている
  • 自己紹介要素が入っている
  • レスポンシブデザインが採用されている

ポイントを確認していきましょう。

技術が詰まっている

まず、ポートフォリオを作る1つ目のポイントは、あなた自身が持つスキルの全てを出し切るということです。

先ほども書きましたが、ポートフォリオが使われるときは転職や就職のタイミングです。

フリーランスの場合はポートフォリオの完成度しだいで契約の値段などにもおおきく変化が生まれます。

自分の生活やお金が絡んでくることなので、自分の持つ全ての力を使って作品制作して、少しでもスキルが優れていることをアピールしましょう。

全ての力を出し切って制作することで、良い待遇や、実績を残すことができて、良い循環を生み出せますよ!

コードがしっかりと綺麗に整っている

2つ目に重要なことは、コードがしっかりと整っていることです。

プログラミングのポートフォリオでは、作品の見た目だけではなく、コードがどのくらいきれいかという点も確認されます。

きれいなコードを書くためには、きれいな書き方を暗記してしまうことが一番です。

私のオススメの方法は、『webクリエイター能力認定試験』というプログラミングの参考書を使って勉強することです。

これは私のインターン先でも取り入れられている参考書の一つで、WEBプログラミングの資格についての本となっています。

資格試験の参考書であるため、きれいなコードの書き方や、無料サイトでは絶対に紹介されていないようなコードの書き方も勉強できます。

私はプログラミングスクールに通って勉強した経験もありますが、この参考書をみて目から鱗の連続でした。

オススメの参考書なので、ぜひ買って勉強してみてください。

>>webクリエイター能力認定試験

自己紹介の要素を入れる

ポートフォリオを作る上で重要な3つ目の要素は自己紹介の要素を織り交ぜることです。

先ほどご紹介したポートフォリオでは、自己紹介的な要素を取り入れています。

私が制作したポートフォリオには自己紹介のページはありませんが、Ziziさん、よしこさんのポートフォリオのいずれにも、自己紹介のページが用意されているのです。

繰り返しになりますが、ポートフォリオは転職や就職のにつかわれる、エンジニアのための履歴書です。

履歴書にはもちろん自己紹介を書きますよね?

なので、絶対にポートフォリオにも自己紹介を入れましょう。

また、個人案件では性格を見られることが多くなるので、特に重要になります。

絶対にプログラミングを入れるようにしましょう。

レスポンシブデザインが採用されている

最後に紹介する重要な要素は、レスポンシブ要素が採用されているということです。

レスポンシブデザインとは、スマホとPCで表示の形式を変更する方法です。

プログラミングは基本的にPCのサイズで制作しますが、実際にサイトを見る人ひとは、PCだけではなくスマホであるケースも多いでしょう。

この場合、スマホを対応のサイトを用意しておかないと、スマホにPCサイズのサイトや作品が表示されて、見た目が大きく崩れてしまう場合があります。

また、レスポンシブデザインを採用することで、WEBスキルを見せることにもつながるので、絶対に取り入れてみましょう。

プログラミングポートフォリオの制作方法

プログラミングポートフォリオの制作方法

それでは、最後にポートフォリオを作成するやり方をご紹介します。

作りたいものを見つける

まずは、自分が作ってみたいサイトを考えましょう。

完全にオリジナルのサービスでも良いですし、既存のサイトやアプリをマネて作ることもできます。

私のおすすめは既存のサイトやサービスを真似て基礎を作り、そこからオリジナル要素を取り入れていくという方法です。

プログラミングに慣れていて十分なスキルを持ち合わせていればオリジナルのアプリをるくることもできますが、初心者や初めてポートフォリオを作る場合は、かなり時間と労力が必要となります。

そのため、既存のサイトを模倣して作っていき、オリジナリティを出すことがもっとも手軽な作り方でしょう。

既存のサイトは次のような特徴があります。

  • 綺麗なコードで書かれている
  • 見た目が整っている

すでに公表されているサイトやアプリの多くは、プロのエンジニアさんが制作しています。

模倣することで、きれいなコードときれいな見た目を担保することに繋がります。

かっこいいプログラミングのサイトを探すには、『MUUUUU』というサイトをつかいましょう。

このサイトには、たくさんのかっこいいWEBサイトが集結しており、参考になるサイトも多いはずですよ!

コードを書いていく

好きなサイト・作ってみたいサイトを見つけたら、実際にコードを書いていきましょう。

参考にするWEBサイトを用意しておくとコードが書きやすいことも特徴の一つです。

WEBサイトには検証ツールという機能がついており、この機能を利用するとサイトのコードを確認することができます。

この検証ツールという機能を使って参考サイトのコードを書き写していき、自分のポートフォリオに利用していきます。

このような勉強法は写経といい、プログラミングでもっともポピュラーな勉強法です。

プログラミングの写経とは プログラミングの写経で鬼成長する方法【100%成長】

勉強方法について知りたい方は、ぜひ読んでみてください。

サーバーにアップロードする

コードを書いていき、ポートフォリオが完成したら誰でもポートフォリオを見れるように公開設定をしましょう。

サイトには無料サーバーと有料のサーバーがありますが、ポートフォリオは有料のサーバーを使って管理することが好ましいです。

理由としては、有料のサーバーを利用することで高速で接続できるので、クライアントや雇用主側に不快な思いをさせずに済むからです。

オススメのサーバーは『ConoHa WING』で、国内最速のサーバーです。

また、無料でサーバーを使いたい方は、Herokuというサービスを使うと良いでしょう

具体的な使い方は『Herokuを使って自作アプリを無料で公開する方法』という記事にてやり方を公開しています。

ぜひ読んでみてください!

まとめ:ポートフォリオでプログラミングスキルを見せろ!

プログラミングでポートフォリオを作る理由と具体的な作り方とは?

いかがでしたか?

IT業界で言われているポートフォリオとは、エンジニアのスキルがぎっしり詰まった作品集のことで、主に就職や転職で使われます。

ポートフォリオを真剣に作ることで、仕事で好待遇をうけれたり、良い企業に就職することができます。

既存のサイトを真似してつくることで、手軽にプロ並みのサイトを再現できるので、是非挑戦してみてください!