ポートフォリオの作り方を、プログラミング初心者向けに1から解説します【保存版】

ポートフォリオサイトの作り方をプログラミング初心者向けに解説

こんにちは、LLENNです。

ポートフォリオを作りたい人:HTML&CSSの学習がとりあえず終わりました。案件を取るため、実際に自分のポートフォリオを作りたいです。1から10まで詳しく教えてくれませんか??

こんな悩みにお答えします。

プログラミングにおけるポートフォリオサイトは、自分の実力の証明となるので、作ることによって案件獲得にグッと近づきます・・!

本記事の内容

・ポートフォリオサイトの作り方を徹底解説

この記事を書いている僕は、過去にポートフォリオサイトを作りましたが、その際に参考にした記事は詳細なものが少なかったので、こうして書くことにしました。

ちなみに僕が作ったポートフォリオはこちら

≫僕が1からデザインしたポートフォリオ

この記事を参考にすることで、今からさっそくポートフォリオサイトを作り、アップロードまで行えます。

つまり、ポートフォリオサイトを作るならこの記事さえあればOKというわけですね・・!

では、さっそく見ていきましょう。ここから前置きが長くなりますが、少しだけお付き合いいただけると幸いです(^^)

始めに:ポートフォリオサイトを作る際の手順まとめとコツ

ポートフォリオサイトを作る際の手順とコツ

ポートフォリオ作成に入る前に、全体の流れとコツをまとめておきます。

まずはざっくりと流れを説明します。下記ツイートの通り。

ポートフォリオサイト作成の流れ

・まず、デザインを決めよう(パクリOK)

・実際にコーディングしてみよう

・作ったファイルを、サーバーにアップロードしてみよう

大まかには上記の通り。たったこれだけ。

あと、ポートフォリオを作る際のコツもありまして、以下の通りです。

・いきなり完璧を目指さない

・作るだけじゃなくて、アップロードまでする

まず、ポートフォリオを作る際は、デザインにしてもコーディングにしても、完成度7割でOKです。いきなり完璧を目指すと挫折しますので。

加えて、たぶん後から色々付け足したくなるなので、まずはざっくり作ってみるのがいいかと。

そして、作ったポートフォリオは、サーバーにアップロードしましょう。

アップロードしないと、他の人があなたのポートフォリオを見られませんからね。笑

(もちろんアップロードの方法も解説しているので、ご安心ください)

なお「Webサイトを公開できた!」という達成感を味わえると、Web制作が楽しくなるので、少々グダグダでもサッサとアップロードしてしまうことをオススメします。

では、早速ポートフォリオの作り方を見ていきましょう。

ポートフォリオサイトの作り方①:まず、デザインを決めよう

ポートフォリオサイトの作り方:デザイン決め

ポートフォリオサイトを作る最初のステップは、デザインを決めることです。

デザインと言っても、あまり力まずに自分の作りたいものを作ればOKですよ。

デザインする際に決めるべきポイントは、2つだけ。

・サイトのレイアウト

・色遣い

ちなみに、もし思いつかなければ、今回は僕のポートフォリオ(≫こちら)の内容を丸パクリしてもらって大丈夫です・・・!

ポートフォリオサイトのレイアウト

まずは、あなたが作るポートフォリオサイトの「レイアウト」を決めましょう。

いきなり編集ソフトなどを使うのはハードルが高いので、「紙」に書き出してみるのがオススメ。

実際に僕が書いたレイアウト案はこんな感じです。

ポートフォリオサイトのレイアウト

上記のように、かなりざっくりした感じでOKです。カラム分け(1行に要素を何個配置するか)まで考えておくとGoodですね(^^)

ちなみに、ポートフォリオは以下の内容を入れると主旨が伝わりやすいので、ぜひ入れましょう。 

ポートフォリオに入れるべきもの

・自己紹介

・顔写真(恥ずかしければ、イラストでもOK)

・SNSアカウントへのリンク(あれば)

・スキルセット(HTML、WordPressなど)

・実績、制作物

・お問い合わせフォーム

とりあえず上記の5つが入っていれば、あなたが何者なのか伝わります。

よくある質問:色遣いなどはどうすればいいですか?

結論から言うと、自分の好みでかまいません。

もしあなたがピンク系のデザインが好きなら、ピンクを多めに取り入れるといいですし、ブルー系なら、青を多めに取り入れてみましょう。

とはいえ、もしそういった希望がない場合は、僕のポートフォリオのように、白黒をベースにすると良いかと。シンプルは好まれますからね。

ここからはデザインの領域に入ってくるので止めますが、結論としては、自分の好きな色があれば、それらを積極的に取り入れるといいですよ。

この段階で、サーバーを持っておくのもあり

なお、この段階であなた専用のサーバーを取得しておくといいかと。

よくあるパターンですが、コーディングまで終えて満足してしまい、サーバーにアップロードしない人がいます。そうなると全くもって意味がありません。笑

今のうちにサーバーを取得しておくメリットは、以下の通り。

・できることの幅が広がる(WordPressなど)

・あとで面倒になってやらないリスクが減る

・実務での勝手が分かるので(ファイル転送など)、焦らなくて済む

サーバーは、エックスサーバー一択です。有名ブロガーの方々も、大多数がこれを使っているので、信頼できます。(僕もエックスサーバー)

月額1,000円近くはかかりますが、Web制作で稼ぐなら必要な投資と考えて問題なし。

今はドメイン無料キャンペーンもやっているので、サクっとサーバーをゲットしておきましょう。

 エックスサーバーを取得する

※プランはX10の一択です。あとは画面の指示どおり進めばOK。

ポートフォリオサイトの作り方②:実際にコーディングしてみよう

ポートフォリオサイトの作り方:コーディング

お待たせしました。ここまで来れば、あとはコーディングするだけです。

今まで学んだHTML&CSSの知識をフル活用して、時にはググりながら、イメージを画面に起こしていきましょう。 

 

なお、少々ヘンテコでも後からいくらでも修正できるので、まずは一通り作り上げるのが先ですよ。

動きを付けたい。。

コーディングをしていると、「カッコいい動きを付けてみたい。」という人もいるかと思います。

そこで、≫僕のポートフォリオ でも実装している、「ふわっとフェードイン」アニメーションの実装コードを紹介します。ぜひコピペして使ってみてください。

ふわっとアニメーションのコード

お問い合わせフォームが作れない。。

お問い合わせフォームは、PHPというプログラミング言語の知識がいるので、少々難しいです。。。

なので、最初はGoogleフォームを使った裏技を利用しましょう(^^)

以下の記事に、詳しくまとめてくださっています。

≫Googleフォームを自在にカスタマイズする 

レスポンシブ化はやっておこう

ポートフォリオサイトの作り方:レスポンシブ化

PC版のコーディングが一通り完成したら、次はレスポンシブ化(スマホ対応)もやっておきましょう。 

レスポンシブ化は、Progateの上級編などでも出てくる大事なポイントで、CSSに、@media (max-width:〇〇px){ } というように記述することで実現できます。

最近はスマホからのアクセスも多いので、これがされてないと、スマホからアクセスした際にヘンテコ表示になります。。。笑

とは言ってもあまりこだわりすぎず、上記の画像のように、最低限スマホで見た際に表示が崩れないようになればOKです。

ポートフォリオサイトの作り方③:作ったサイトを、サーバーにアップロードしよう

ポートフォリオサイトの作り方:サーバーアップロード

さて、そろそろ終わりが見えてきましたね。ですが、「最後のステップまでしっかりとやり切ること=ポートフォリオサイトの完成」と呼べます。 

というわけで、最後は作ったサイトをレンタルサーバーにアップロードしましょう。

理由は以下の通り。

・作ったサイトを誰でも見られるようにするため。

あなたがせっかく書いたコードでも、他人が見られなければ意味がありません。

 

インターネットの世界は、以下の図のような仕組みでできており、そのうちの「サーバー」、「ドメイン」を今から取得します。

インターネットの世界

サーバー、ドメインの取得

まずは、サーバーです。

個人の場合、基本的に「レンタルサーバー」と呼ばれるものを使います。

サーバーは≫エックスサーバー一択です。理由は、たくさんの人が使っていて信頼できるからですね。(有名ブロガーはこれが多いし、僕もこれ)

しかも、表示速度なども優れています。

≫エックスサーバーを取得する

※X10プラン一択です。ドメインの無料キャンペーンもやっているので、お早めに。

エックスサーバーでは、今なら独自ドメインまで同時に無料取得できるので、ドメインについては割愛します(^^)

ファイルのアップロード

ファイルのアップロードには、FTPというツールを使います。

一度やってしまえば、あとはドラッグ&ドロップで簡単なので、とにかく慣れてしまいましょう。

方法は以下の記事にまとまっています。

≫FTPソフトで楽々サーバーファイル操作!Cyberduck使い方まとめ

まとめ:ポートフォリオサイトの作り方を、初心者向けに解説しました

というわけで、ポートフォリオサイトの作り方を、1からお話してきました。

最後に、もう一度手順をおさらいしておきます。

・まず、デザインを決める

・実際にコーディングしていく

・サーバーにファイルをアップロードする

ぶっちゃけコーディングより、ファイルのアップロードとかの方が難しかったのでは?と思います。笑

とはいえ、実務ではアップロードまでやることが多いので、今のうちに慣れておけば、テンパることもないですよ。

さて、ポートフォリオができたら、あとは営業を掛けていくだけです。Web制作で稼ぐという目標に向かって、頑張りましょう・・!

今回は以上です。最後まで読んでいただきありがとうございました(^^)

人気記事

≫プログラミングスクールのおすすめ3つはこれだけです。【無料体験|無料カウンセリングあり】

≫大学生がプログラミングを始める方法【4つあります|とりあえずこれ読めばOK】

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です