プログラミング

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

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

プログラミング初心者の方『HTML・CSSについて理解ができた。ちょっとしたJavaScriptが活用できる。エンジニアとしポートフォリオを持ちたい。』

▲想定読者

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

 

本記事の内容

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

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

本記事の信頼性

おにちゃん
おにちゃん
  • 大学生エンジニア
  • ブログ収入:月約6万円
  • 総SNSフォロワー数:5000人

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

https://smile-away.org/

本記事の想定読者

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

エンジニアに必要なポートフォリオとは

エンジニアに必要なポートフォリオとは

ポートフォリオを作成する前に、

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

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

 

ポートフォリオってなに?

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

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

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

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

 

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

ポートフォリオを作成するメリットはWeb制作の案件を比較的獲得しやすくなることです。

おにちゃん
おにちゃん

エンジニア系インフルエンサーは口を揃えて、ポートフォリオの重要性を発信しているので間違い無いでしょう。

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

 

ポートフォリオに必要なものを準備していこう

ポートフォリオに必要なものを準備していこう

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

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

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

 

レンタルサーバーを準備

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

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

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

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

 

Googleアカウント

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

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

おにちゃん
おにちゃん

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

 

SNSアカウント

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

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

おにちゃんのSNS

 

画像を準備する

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

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

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

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

 

製作物の画像を準備

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

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

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

おにちゃん
おにちゃん

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

 

ポートフォリオの構成の作り方

ポートフォリオの構成の作り方

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

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

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

 

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

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

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

See the Pen
HTML準備
by onityan2000 (@onityan2000)
on CodePen.

今回のポートフォリオは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!?

【WordPressブログの始め方】初心者が10分で開設する方法【極秘】WordPressの始め方を初心者の方でも分かりやすいように、詳しく解説しています。...
ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事