こんにちは、LLENNです。
ポートフォリオを作りたい人：HTML＆CSSの学習がとりあえず終わりました。案件を取るため、実際に自分のポートフォリオを作りたいです。1から10まで詳しく教えてくれませんか？？
こんな悩みにお答えします。
プログラミングにおけるポートフォリオサイトは、自分の実力の証明となるので、作ることによって案件獲得にグッと近づきます・・！
本記事の内容
・ポートフォリオサイトの作り方を徹底解説
この記事を書いている僕は、過去にポートフォリオサイトを作りましたが、その際に参考にした記事は詳細なものが少なかったので、こうして書くことにしました。
ちなみに僕が作ったポートフォリオはこちら
この記事を参考にすることで、今からさっそくポートフォリオサイトを作り、アップロードまで行えます。
つまり、ポートフォリオサイトを作るならこの記事さえあればOKというわけですね・・！
では、さっそく見ていきましょう。ここから前置きが長くなりますが、少しだけお付き合いいただけると幸いです(^^)
始めに：ポートフォリオサイトを作る際の手順まとめとコツ
ポートフォリオ作成に入る前に、全体の流れとコツをまとめておきます。
まずはざっくりと流れを説明します。下記ツイートの通り。
Web制作における、ポートフォリオサイトの作り方
①：まず、デザイン構成を決める（パクリOK）
②：実際にコーディングをする
③：ファイルをサーバーにアップロードする
これだけです。サクッと作っちゃいましょう😄
— LLENN@ブロガー＆Web制作 (@LLENNblog) May 4, 2020
ポートフォリオサイト作成の流れ
・まず、デザインを決めよう（パクリ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フォームを使った裏技を利用しましょう(^^)
以下の記事に、詳しくまとめてくださっています。
レスポンシブ化はやっておこう
PC版のコーディングが一通り完成したら、次はレスポンシブ化（スマホ対応）もやっておきましょう。
レスポンシブ化は、Progateの上級編などでも出てくる大事なポイントで、CSSに、@media (max-width:〇〇px){ } というように記述することで実現できます。
最近はスマホからのアクセスも多いので、これがされてないと、スマホからアクセスした際にヘンテコ表示になります。。。笑
とは言ってもあまりこだわりすぎず、上記の画像のように、最低限スマホで見た際に表示が崩れないようになればOKです。
ポートフォリオサイトの作り方③：作ったサイトを、サーバーにアップロードしよう
さて、そろそろ終わりが見えてきましたね。ですが、「最後のステップまでしっかりとやり切ること＝ポートフォリオサイトの完成」と呼べます。
というわけで、最後は作ったサイトをレンタルサーバーにアップロードしましょう。
理由は以下の通り。
・作ったサイトを誰でも見られるようにするため。
あなたがせっかく書いたコードでも、他人が見られなければ意味がありません。
インターネットの世界は、以下の図のような仕組みでできており、そのうちの「サーバー」、「ドメイン」を今から取得します。
サーバー、ドメインの取得
まずは、サーバーです。
個人の場合、基本的に「レンタルサーバー」と呼ばれるものを使います。
サーバーは≫エックスサーバー一択です。理由は、たくさんの人が使っていて信頼できるからですね。（有名ブロガーはこれが多いし、僕もこれ）
しかも、表示速度なども優れています。
※X10プラン一択です。ドメインの無料キャンペーンもやっているので、お早めに。
エックスサーバーでは、今なら独自ドメインまで同時に無料取得できるので、ドメインについては割愛します(^^)
ファイルのアップロード
ファイルのアップロードには、FTPというツールを使います。
一度やってしまえば、あとはドラッグ＆ドロップで簡単なので、とにかく慣れてしまいましょう。
方法は以下の記事にまとまっています。
≫FTPソフトで楽々サーバーファイル操作!Cyberduck使い方まとめ
まとめ：ポートフォリオサイトの作り方を、初心者向けに解説しました
というわけで、ポートフォリオサイトの作り方を、1からお話してきました。
最後に、もう一度手順をおさらいしておきます。
・まず、デザインを決める
・実際にコーディングしていく
・サーバーにファイルをアップロードする
ぶっちゃけコーディングより、ファイルのアップロードとかの方が難しかったのでは？と思います。笑
とはいえ、実務ではアップロードまでやることが多いので、今のうちに慣れておけば、テンパることもないですよ。
さて、ポートフォリオができたら、あとは営業を掛けていくだけです。Web制作で稼ぐという目標に向かって、頑張りましょう・・！
今回は以上です。最後まで読んでいただきありがとうございました(^^)
人気記事