おにちゃん塾の商品一覧

【プログラミング初心者】おしゃれなポートフォリオの作り方【大公開】

【プログラミング初心者】おしゃれなポートフォリオの作り方【大公開】
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つです。

GCPは難しいので、エックスサーバーをおすすめします。

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


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

理由は2つあります。

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

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

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

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

エックスサーバー


Googleアカウント

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

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

おにちゃん

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


SNSアカウント

SNSアカウントがあると、ポートフォリオサイトとしても信頼度が格段上がるので、

必ず登録しておきましょう。

おにちゃんのSNS


画像を準備する

画像を準備していきましょう。

おにちゃん塾では、下記の画像データを読者に提供させて頂きます。

現在準備中です。少々お待ちください。

スキル一覧の所で活用できます。


製作物の画像を準備

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

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

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

おにちゃん

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


プログラミング初心者向けポートフォリオの構成

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

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

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

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


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

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

ポートフォリオサイトにはサイドバーや他の付属品はないので下記の構造を使用しましょう。

今回のポートフォリオは1カラムサイトなので上記で問題ありません。

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の安全性が担保されている


プログラミングのポートフォリオを公開する

ポートフォリオを公開する
プログラミングのポートフォリオを公開する

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

おにちゃん

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

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

その後はググりながらサーバーにアップロードしましょう。

最初はサーバーにサイトをアップするのは至難の技です。おそらく挫折します。

しかし、こんな所で挫折しているようでは話にならないので、解決できるように頑張ってみてください。

ググるヒント

サーバー名 〇〇 で検索すると答えが表示されるはずです。


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

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

プログラミング初心者向けポートフォリオの作り方については以上になります。

ポートフォリオがあると、プログラミング学習のモチベが上がりますので、

必ず作成するようにしましょう。

エックスサーバー:初期費用3000円+3ヶ月3000円

ConoHa WING:初期費用無料+3ヶ月2600円

安さ×スピードを求めるの方はConoHa WINGがおすすめです。

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

本記事は以上になります。

おすすめの記事

実績としてブログがあると案件獲得率UP!?

【プログラミング初心者】おしゃれなポートフォリオの作り方【大公開】

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる