学生必見！　就活やスキルアップに役立つポートフォリオサイト 始め方

Webページの仕組み

　まずは，簡単にWebページの仕組みから確認しておきましょう．

　私たちが普段Webページを閲覧する際，クライアント（パソコン，タブレット，スマートフォン等の各種端末）からURLでサーバとファイルを指定し，閲覧したいWebサイトのサーバにリクエストを送信（アクセス）します．

　リクエストを受けたWebサーバは，それに対するレスポンスという形で，Webページの表示に必要なHTMLやCSS，JavaScript 等を含むファイルをクライアントに返します．
クライアントのブラウザが受け取ったファイルをもとに，画面描画を行うことで，私たちはWebページを閲覧することができます．

Webページ公開にあたって必要なもの

　以上の仕組みから，Webページを公開するにあたって様々な準備が必要です．以下に必要なものを箇条書きでまとめてみました．Webサイトは住宅に例えて説明されることが多いので，それぞれの例示対応関係をかっこ書きで示しています．

　一軒家を建てて，友人をホームパーティーに招待することを考えてみてください．家に招くには，当然ながら土地と建物が必要です．この土地に相当するのがサーバであり，インターネットの世界では世界中に解放されたファイル置き場としての役割を持ちます．

　また，建物に相当するのがHTML，CSS，JavaScript 等のプログラムファイルです．Webページの実体・メインとなる部分ですが，それ単体では外部の人に見てもらうことはできません．

　そして，ドメインの存在も欠かせません．特定の場所を他の人に共有する場合，ほとんどの人が住所を伝えると思います．その住所に相当するのがドメイン（厳密にはURL）です．ドメインを使うことで，特定のサーバを指定することができます．
実は，コンピュータ内部ではIPアドレス（（英）数字の羅列）と呼ばれる別の仕組みでサーバを特定しているのですが，人間にとって分かりやすくするために，ドメインと呼ばれる文字列にわざわざ変換しています．（北緯40度〇分，東経139度〇分 と言われるより，○○県△△市□□区 と言われた方が分かりやすいのと同じ）

　これらがWebページの公開にあたり，最低限必要なものになります．この他にも現実世界で鍵やホームセキュリティがあるのと同じように，インターネットの世界でもセキュリティは欠かせません．
詳細は割愛しますが，SSL/TLS（通信の暗号化に必要）やWAF（サーバへの攻撃を防御）などの導入も非常に重要です．

Webページ公開に向けた準備

　前章ではWebページ公開に際して，サーバ・ドメイン・プログラムの３つが必要であることをお伝えしました．では，これらの３つはどのようにして準備すれば良いのでしょうか？
この章では，具体的な準備方法をご説明します．

サーバ

　「サーバ」という言葉を聞いて多くの方が “黒くて大きな直方体” をイメージされているかと思います．一般家庭に置けるような小型で比較的安価なサーバも存在しますが，いずれにしても，自前でサーバを用意するのは現実的ではありません．

　ですが，安心してください！　自前で用意できなくとも，“借りる” という手段が存在します．先ほどの例で言えば，アパートのようなイメージです．学生で一軒家というのは到底無理な話ですが，アパートを間借りして，そこに友人を招くのは現実的に可能ですよね．それと同じイメージです．

そして，気になるレンタル費用ですが，０～数百円／月 程度です．簡単なWebページであれば，無償のレンタルサーバでも十分です．

ドメイン

　こちらも無料のサービスと有料のサービスがあります．有料のサービスであれば，年間千～数千円程度の費用がかかります．
ただし，無料のサービスでは独自ドメイン（「自分の好きな名前」.com のような セカンドレベルドメイン）を取得できない場合がほとんどです．
無料サービスを利用する場合，原則としてサブドメイン（「自分の好きな名前」.「サービス提供企業によって割り当てられた名前」.com のようなサードレベルドメイン）を取得することになります．

　単にホームページ（ポートフォリオ）を公開するだけの目的であれば，サブドメインでも十分に事足りると思います．本格的なサイト運営やアフィリエイト 等を目的として独自ドメインの取得を希望するのであれば，別途ドメインを契約するのが基本になります．

プログラム

　住宅の例で言えば，建物（本体・実体）に相当する部分です．作りたいサイトの種類や目的に応じて，適切なものを選びます．
以下のフローチャートを参考に，どの手法でページを作成するかを選びましょう．

プロコード

　３つの中で最も難易度が高い方法ではありますが，柔軟性（拡張性）や技術力のPRについては一番優れています．
具体的には，Webページの描画に必要なHTML，CSS，JavaScript 等のプログラムを一から書いていく方法になりますが，近年はライブラリやフレームワークを用いてある程度高い柔軟性を維持したままコード量を削減する方法が主流であり，現実的です．
それでも全体的にコーディングの量が多く，沢山の知識が要求される方法です．

ローコード

　必要最低限のコーディング（カスタマイズ）により，Webページを構築する方法です．その他の大部分については，GUIによる直感的な操作でWebページ制作を進めることができます．
有名なサービスとしては，WordPress（ワードプレス）が挙げられます．
厳密には，WordPressを使うことで一切コーディングをせずに，ホームページやブログサイトを作ることもできますが，CSSなどを直接編集してカスタマイズすることも可能です．
ノーコードツールとしても，ローコードツールとしても使える世界的に有名なサービスです．

ノーコード

　読んで字のごとく，コーディングを一切必要としない方法です．有名なサービスとしては，Wix（ウィックス）が挙げられます．豊富なテンプレートが用意されており，ドラッグ＆ドロップでレイアウトを調節することができるため，初心者であっても簡単にWebサイトを構築することができます．

プロコードやローコードに比べると，機能拡張（カスタマイズ）に制限があります．