おにちゃん塾運営者に関する情報

【プログラミング】ポートフォリオの作り方と例を大公開

URLをコピーする
URLをコピーしました!
本記事の想定読者
  • プログラミング初心者でおしゃれなポートフォリオを作成したい
  • ポートフォリオの作り方を詳しく教えて欲しい

本記事ではプログラミング初心者向けにポートフォリオサイトの作り方について解説していきます。

おにちゃん

執筆者:大学生エンジニアの僕がプログラミング向けポートフォリオの作り方について執筆しています

本記事の内容
  1. ポートフォリオとは
  2. ポートフォリオの準備物
  3. ポートフォリオの作り方
  4. ポートフォリオを公開

上記を軸に解説していきます。

おにちゃん塾が実際に自作したポートフォリオは下記のURLから閲覧可能です。(現在削除済み)

本記事での想定スキル

  1. HTML&CSSをある程度知っている人
  2. jQueryを少し扱える
  3. 模写作品を作成した経験がある
おにちゃん

自信がない方は下記の記事でまず必要なスキルを身につけてみてください。

記事の内容

プログラミングに必要なポートフォリオとは

エンジニアに必要なポートフォリオとは
プログラミングに必要なポートフォリオとは

プログラミングでポートフォリオを作成する前に、

  • プログラミングにおけるポートフォリオって何?
  • プログラミング初心者がポートフォリオを持つメリット

について詳しく解説していきます。


プログラミングにおけるポートフォリオってなに?

ポートフォリオとは『作品集』を意味しています。

未経験プログラマーに求められるのは実務経験などではなく、どのくらいのスキルを所有しているのかを確認するための道具=ポートフォリオになります。

  • 0→1のWeb制作が出来るのか
  • コーディングの技量はどのくらいなのか

上記を示すために使われることを理解しておきましょう。


ポートフォリオのメリット

ポートフォリオを作成するメリットは下記の通りです。

  • 就職活動でアピールできる
  • 転職活動でアピールできる
  • フリーランスで活動するときに必須

ここまでで、ポートフォリオの重要性を理解できた方は実際に準備していきましょう。


プログラミング初心者向けポートフォリオの作り方:準備編

ポートフォリオに必要なものを準備していこう
プログラミング初心者向けポートフォリオの作り方:準備編

ポートフォリオに必要な準備物は下記の通りです。

プログラミングのポートフォリオに必要なもの

  1. レンタルサーバーを準備
  2. Googleアカウント
  3. SNSアカウント
  4. 画像を準備する
  5. 製作物の画像を準備

1つずつ解説していきます。


レンタルサーバーを準備

ポートフォリオをアップするのにはサーバーを準備する必要があります。

おにちゃん塾で活用しているサーバーは下記の3つです。

おにちゃん塾、エックスサーバーをおすすめします。

料金は月額1000円程です。→すぐに回収できる金額ですね。


なぜプログラミング初心者のポートフォリオでエックスサーバがおすすめなのか

理由は2つあります。

  • ググれば情報が溢れている
  • 使いやすい
おにちゃん

プログラミング初心者のうちからAWSやGCPなどが使えれば良いのですが、正直かなりきついです。9割以上の方が挫折するはずです。

であれば、最初のうちは簡単に設置できるエックスサーバーを使用した方が、すんなりサーバー側の知識も身につきますし、サーバーにファイルをアップロードするのも簡単に終えることができます。

最初の頃はよくわからないと思いますが、いずれ、おにちゃんの言っている意味が分かったと思うはずです。

エックスサーバー


Googleアカウント

ポートフォリオにはお問い合わせフォームを設置する必要があります。

基本的にお問い合わせにはPHPで設置するのですが、今回はGoogleフォームを活用しましょう。

おにちゃん

*堀江さんのzatudanでもGoogleフォームを活用していました。


SNSアカウント

SNSアカウントがあると、ポートフォリオサイトとしても信頼度が格段上がるので、必ず登録しておきましょう。

おにちゃんのSNS

おにちゃん

SNSから仕事を貰えたりもするので、必ず登録しましょう。


製作物の画像を準備

ポートフォリオには下記の画像データをおすすめします。

  • 模写したキャプチャ画像
  • WordPressのブログ画像
  • 架空サイトの画像

上記の画像をポートフォリオに載せていきましょう。

おにちゃん

おにちゃん塾では、2つ以上の制作物を載せることをおすすめします。


プログラミング初心者向けポートフォリオの作り方:開発編

ポートフォリオの構成の作り方
プログラミング初心者向けポートフォリオの作り方:開発編

ポートフォリオに最低限必要な情報は下記の通りです。

  • ヘッダー
  • メイン画像
  • スキル一覧
  • サービス一覧
  • 制作物
  • お問い合わせフォーム

上記は最低限ポートフォリオに組み込みましょう。


HTMLコーディングをしていく

HTMLでマークアップしていきましょう。

ポートフォリオサイトにはサイドバーや他の付属品はないので簡単に作成できます。

HTMLを爆速で書き上げる方法については後日詳しく解説していきます。(作成したので下記の記事をどうぞ)


CSSコーディングをしていく

CSSで意識すべきはスマホファーストのレスポンシブデザインです。

近年、Googleはスマホ対応を施しているサイトを評価するようになりました。

スマホ対応のCSS

@media screen and (min-width: 960px) {
タブレット対応のCSS
}
@media screen and (min-width:481px){
PC対応のCSS
}

CSSを爆速で書き上げる方法については後日詳しく解説していきます。(完成したので公開しておきます)


JavaScriptを書き足していく

HTML&CSSだけでは質素なサイトしかできません。

おにちゃん

質素なサイト→リッチなサイトに仕上げるためにはJavaScriptが必要です。

ここで読者に課題を提出します。

  • スクロールに応じてフェードインする機能
  • スクロールに応じて値が変化する機能

上記の機能を自分で調べて実装してみてください。

実装できると下記の動画のように表示できるます。

 


Googleフォームを追加する

Googleフォームに関してはGoogleスプレッドシートとの連携や自動メール送信など、

様々な所で活躍するので、是非使用して頂きたいです。

Googleフォーム

Googleフォームを使うメリット

  • PHPの知識が不要
  • プログラミング初心者でも簡単に実装可能
  • スプレッドシートとの連携が可能
  • 自動返信が実装可能
  • Googleの安全性が担保されている


プログラミング初心者向けポートフォリオの作り方:公開編

ポートフォリオを公開する
プログラミング初心者向けポートフォリオの作り方:公開編

今回はエックスサーバーを活用してポートフォリオを作成しましょう。

おにちゃん

おにちゃん塾ではエックスサーバーをおすすめします。

まずはエックスサーバーに登録しましょう。

プログラミング初心者向けポートフォリオを公開する手順

  1. エックスサーバーに登録する
  2. エックスドメインに登録する
  3. サーバーにファイルをアップロードする
おにちゃん

たったこれだけで、簡単にポートフォリオを公開することができます。


まとめ:プログラミング初心者向けのポートフォリオの作り方

まとめ:プログラミング初心者向けのポートフォリオの作り方
まとめ:プログラミング初心者向けのポートフォリオの作り方

ここまでで「【プログラミング】ポートフォリオの作り方と例を大公開」の解説は以上です。

ポートフォリオがあると、プログラミング学習のモチベが上がりますので、必ず作成するようにしましょう。

エックスサーバー:初期費用3000円+3ヶ月3000円
ConoHa WING:初期費用無料+3ヶ月2600円

おにちゃん塾でポートフォリオを作成した方は、この記事をシェア頂けると嬉しいです。

おにちゃん

本記事は以上です。最後までご覧くださりありがとうございました。

おすすめの記事

実績としてブログがあると案件獲得率が上がるので、今のうちに作成しておきましょう。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
記事の内容
閉じる