Web制作

実績が無い人はどんなポートフォリオを作れば良い?公開方法も解説!

どんなサイトを作る?実績0(ゼロ)からのポートフォリオ作りWeb制作

未経験からWebサイト制作案件を受注するためにポートフォリオサイトが必須ってことはわかったけど、どんなサイトを作れば受注できるの?

そんな方のために、当記事では未経験の人がポートフォリオを作る時に悩みがちな「何を作れば良いの?」「作ったらどうやって公開すれば良いの?」といった疑問にお答えします。

また「サーバーやドメインについて知りたい!」といった方も、本記事を読めばバッチリと理解出来るでしょう。

副業Webデザイナーとしてお仕事を受注するためには避けて通れない課題ですので、是非当記事を活用して、あなたもポートフォリオサイトの制作を開始しましょう!

どんなポートフォリオサイトが良いの?

ズバリ、架空の企業やブランドの公式サイト風Webページです。
デザインの良い企業サイトを参考にして、自分なりにアレンジを加えて制作します。

え?ポートフォリオって自己紹介とか実績とかを公開するんじゃないの?

確かに検索エンジンで「ポートフォリオサイト 見本」とか「ポートフォリオサイト 例」と検索すると、

  • 制作者の自己紹介
  • 経歴
  • 実績(過去に制作した作品)
  • 問い合わせ先

といった情報が掲載されているポートフォリオサイトに行き着きますよね。

しかも検索で上位に表示されるサイトって、実績のある著名なWebデザイナーのサイトが大半なので、すごくレベルが高い!

あぁ、自分にはこんなの作れないや…(諦)

そう思うのも無理はありません。

でもご安心下さい。あんな神レベルのスーパーおしゃれサイトを作らなくたって、クライアントが制作したいWebサイトのイメージに近い物が作れれば、ちゃんとWeb制作案件は受注できます。

作例紹介:どんなレベルのポートフォリオを作れば案件が受注出来る?

では、どんなレベルのポートフォリオサイトを作れば案件が受注出来るのでしょうか。

例として私が一番始めに制作した「架空の洗顔フォームのブランドサイト」のURLをご紹介します。

架空の洗顔フォームのブランドサイト

当時はデザインの引き出しがほぼ無かったため、「洗顔フォーム ブランドサイト」「化粧品 ランディングページ」などと検索し、自分でも作れそう&オシャレに見えるWebサイトを探し、参考にしました。

私の場合は上記サイトのほか、架空会社のWebサイトを追加で2ページ制作した頃にクラウドソーシングサイトのクラウドワークスで初案件を受注しました。

ポートフォリオはトップページだけ作ればOK!多業種のサイトを量産しよう!

架空の会社やブランドのポートフォリオサイトを制作する場合はトップページだけ作れば充分です。

下層ページはトップページのデザインを引用する場合が多いのため、そもそもサイトのデザインがクライアントの求めているイメージと合わなければまったく意味がありません。

テキストの内容も「テキストデータが入ります」の繰り返しなどでOK。

最も重要なことは色々なデザインのサイトを作って、クライアントのイメージにマッチできそうなネタを持っておくことです。

「学生向けのサイト」「女性向けのサイト」「老人向けのサイト」などなど…。

クライアントによって求めるWebサイトは様々ですので、多くのバリエーションを用意していおいて損は無いでしょう。

繰り返しになりますが、架空の会社やブランドのポートフォリオサイトを制作する場合は、トップページだけ作り、すぐに次のページの制作に取り掛かりましょう。

ポートフォリオサイトに必須の機能

ポートフォリオサイトには最低限、以下の機能が求められます。

  • 見やすさ(デザイン)
  • 使いやすさ(ユーザビリティ)
  • PC・スマホ、どちらで見てもレイアウトが崩れない(レスポンシブ対応)

「見やすさ(デザイン)」とは?

どんなWebサイトも、誰かに何かを伝えるために存在しています。

その「誰か」は20~30歳代の男性かもしれませんし、30~40代の女性、または10代の学生かも。
「何か」は車やお酒だったり、化粧品やエステ、TVゲームなどなど…。

年齢や性別によって、好む色や文字のサイズも様々です。

「誰か」と「何か」が明確なサイトは良いデザインとされますが、逆に誰に何を伝えたいのかがハッキリしないサイトは、誰が見ても見づらく、パッとしない印象を与えます。

上記を意識しながら参考になるサイトを探してみて下さい。

「使いやすさ(ユーザビリティ)」とは?

Webサイトには、使いやすさ(ユーザビリティ)を考慮した暗黙のルールが存在します。

突然ですが、以下の様なサイトを見かけたことはありませんか?

  • ページの左上にロゴが有る。ロゴをクリックするとトップページへ飛ぶ。
  • ボタンやバナーにマウスカーソルを乗せると光る(または色が変わる)
  • リンクが貼ってあるテキストにアンダーラインが引いてある
  • スマホで見た時:ページの上部に「」のボタン。タップするとメニューが開く

これらは全てWebサイトの暗黙のルールです。

Webサイトごとに操作感が異なると、「どうやってトップページに戻れば良いの?」「メニューはどこ?」といった様に閲覧者が迷ってしまう可能性があります。

閲覧者が初めてサイトに来たとしてもスムーズに操作して貰えるよう、Webサイトの暗黙のルールに則ってポートフォリオサイトを作ることを心掛けてください。

自分で制作しながら「そういえば、このパーツってこういう動きをするサイトが多いよな~」と思う部分は真似しながら作ってみましょう。

「レスポンシブ対応」とは?

同じURLのサイトでも、パソコンからアクセスした時とスマホからアクセスした時で、レイアウトが異なるサイトに出会ったことがあると思います。

このようなサイトをレスポンシブサイトと呼びます。

Webサイトを閲覧する端末のシェアは、今やスマートフォンがPCを抜いて一位になっていますので、ポートフォリオサイトを作る際には必ずレスポンシブ対応にするべきです。

ちなみにPCとスマホでレイアウトがガラっと変わるので、コードを別々に入力しているのかというと、ほとんどの場合はそうではありません。

説明すると長くなるので当記事では割愛しますが、「レスポンシブ メディアクエリ」と検索すれば情報がたくさん見つかりますので調べてみましょう。

ポートフォリオサイトを公開する方法

ポートフォリオってどうやってクライアントに見てもらうの?

制作したポートフォリオを見てもらう方法は主に以下の3パターンが有ります。

  1. クラウドソーシングサイトの経歴情報に掲載する
  2. 案件へ応募する時にファイルを直接クライアントへ送付する
  3. サーバーへアップロードする

オススメは断然「③サーバーへアップロードする」です。

1の方法では、ポートフォリオの静止画像(スクリーンショット)を貼り付けて公開する形式になるので、せっかくサイトに動きを付けたとしても見て貰えませんし、サイトの雰囲気もなかなか伝わりづらいです。

2の方法はクライアントに「ファイルダウンロード ⇒ 解凍 ⇒ 開封」という手間を掛けさせてしまいますし、そもそも見て貰えない可能性も高いです。

その点、3の「サーバーへアップロードする」方法なら

  • 本番環境(Webで公開した状態)でのサイトの動き、雰囲気を伝えることが出来る
  • URLを記載してメッセージを送れば、クライアント側は1クリックでサイトを見ることが出来る

という利点があります。

さらにもう一つ大きなメリットとして、あなたが自分で制作したサイトを、サーバーへアップロードする練習が出来るという点も見逃せません。

ほとんどのWebサイト制作案件では、コーディングしたサイトを指定されたサーバーへアップロードして、始めて納品完了となります。

「サーバーにアップロード」って、なんか難しそうで不安…。

確かにクライアントのサーバーには、現在公開しているWebサイトのデータなどが含まれていたりしますので、それらのデータを誤って削除すると大変なことになります。

初心者がぶっつけ本番でアップロード作業を行うのはリスクが高すぎます。

とはいっても、アップロード作業って実は単純作業なんです。

事前に自分のポートフォリオサイトでアップロードの練習をさえしていれば、まず心配する必要はないでしょう。

以上、ポートフォリオサイトの公開方法は「サーバーへアップロードする」の一択であることがおわかり頂けたかと思います。

ポートフォリオをサーバーへアップロードするための基礎知識

ポートフォリオをサーバーへアップロードするために、まずはサーバードメインを取得する必要があります。

サーバー、ドメインとは?

サーバー」というのはファイルを保存するための大きな箱です。わかりやすいように、今回の説明ではこの箱をお家に例えます。

「ドメイン」は、WebサイトのURLで「http://」や「https://」の後に続く文字列の事を指します。

ドメインの例 ※赤文字の部分がドメインです
https://yahoo.co.jp
https://twitter.com

ブラウザに「https://yahoo.co.jp」と入力すれば、yahoo!Japanのトップページに辿り着くように、ドメインはインターネット上における住所のような役割を果たしています。

お家(サーバー)住所(ドメイン)の両方が揃って、ようやくお客さん(閲覧者)を迎え入れる事ができるのです。

ポートフォリオサイトで使用するサーバーとドメインの選び方

サーバーはレンタルサービスを行っている会社からレンタルします。

有名どころだとエックスサーバーお名前.comレンタルサーバーロリポップ!あたりが人気です。

上記のサーバーレンタル会社を利用するメリットは、ドメインのレンタルもおこなっていることです。

サーバーとドメインをまとめてレンタルすることで、面倒な初期設定(サーバーとドメインを結びつける作業)を省略することが出来ます。

また万が一トラブルが発生したとして、サーバーとドメインのどちらが原因がわからない場合でも、同じ会社であれば問い合わせ先が分散せず、十分なサポートが受けられるでしょう。

サーバーとドメインのセットで割引キャンペーンの対象となることもあるため、基本的には同じ会社でサーバーとドメインを揃えることをオススメします。

どんなプランを選べばいい?

各社、サイトの表示速度やサーバーへ保存できるデータ量の違いから、様々な料金プランがあります。

どれを借りれば良いのか迷っちゃうな…

ぶっちゃけ、ポートフォリオを公開するだけなら安いプランで十分です。

なぜならポートフォリオサイトは

  • 同時に多人数がアクセスする状況を想定していない
  • ブログやECサイト等と比べて格段にデータ量が少ない
  • 表示速度が少しくらい遅くても悪影響が出ない

つまり最小限の機能で充分ということです。

とはいえ、あまりに安いプランだとちょっと実用性に欠ける場合があるので、以下に私のおすすめのプランをご紹介します。

ポートフォリオ設置におすすめのサーバー・ドメイン

ロリポップ!のライトプランとムームードメインのレンタルサービス。
この組み合わせがジャスティス。

ポートフォリオの設置に最適なサーバー

さっき、サーバーとドメインは一社にまとめるって言ってなかった?

ロリポップとムームードメインはどちらもGMOペポパ株式会社が運営しているサービスです。

サーバーとドメインを結びつける手間も掛かりませんのでご安心ください。

このプランを選定した理由は、「出来るだけ費用を抑えたうえで、かつポートフォリオを設置しておくのに充分な性能を持っているから」です。

ロリポップ!の公式サイトによると、1つ上のスタンダードプランが一番人気らしいですが、これはブログ開設用に利用するユーザーが多いからですね。

ブログの場合は多人数が同時に閲覧する可能性が高いため、ある程度スペックの高いサーバーで運営をするのが無難だと思います。

でも今回の用途はポートフォリオ!

案件に応募する時だけクライアントにサラッと見て貰えればオーケーな訳ですから、オーバースペックのサーバーをレンタルする必要はありません。

ライトプランは容量が50GBだけど、足りなくならない?

そこも心配ないです。

50GBもあれば、10,000ページ以上のポートフォリオサイトを掲載することができます。

増え続けるWebサイトの容量、1400KB超え | マイナビニュースによると、2018年11月時点で世界のトップ100万サイトの平均容量は1.4MB(0.0014GB)という統計があります。

Googleの検索結果の上位に表示されるための評価基準に「表示スピード」も含まれているため、1ページあたりのサイズは大きくても3MB以下に抑えるのが基本です。

50GBであれば、仮に全てのページが3MB(0.003GB)だとしても、16,666ページ掲載することができます。

ちなみに、一番安いエコノミープラン(10GB)でも3,333ページ掲載できる計算ですが、エコノミーだとWordpressに非対応なのでちょっと微妙です。

Web制作で収入アップするためのステップアップとして、これからWordpressを勉強する方も沢山いると思いますので、選択肢を広げるという意味でもライトプランを選んでおくのが無難かと思います。

サーバー・ドメインの初期費用を見てみよう!

ではまず、サーバーのレンタルに掛かる初期費用を見ていきましょう。

ロリポップ!ライトプランの初期費用

以下、ロリポップ!各プランの月額費用リストです。

ポートフォリオ設置に最適なサーバーの料金

(画像)ロリポップ!公式サイトより

料金は前払いになっていて、ライトプランは1ヶ月 or 3ヶ月契約で月額300円

6ヶ月以上の契約だと、なんと月額250でサーバーが借りられます。サーバーのレンタルは基本的に1年単位がオススメ(理由は後述)なので、こちらの価格でみていきます。

あとは初期費用1,500円が発生するので、ライトプラン1年(12ヶ月)と合わせると…

  • 初期費用1,500円
  • サーバー利用料金 (250円 x 12ヶ月)3,000 円

合計4,500になります。

ムームドメインでドメインを取得するための初期費用

次はドメインに掛かる費用です。

ムームードメインのキャプチャ

赤枠⇒新規取得時の1年間のレンタル価格(2020年1月時点)

ドメインは基本的に1年単位での契約になります。

先ほど、サーバーの契約は1年単位がおすすめと記載した理由がここです。

なるほど。サーバーとドメイン両方使えないと意味ないもんね

そういうことです!

なお、ドメインの価格は種類や購入する時期によって変動します。

種類・・・ https://twitter.com でいうと【.com】の部分
時期・・・ムームードメインだと月ごとに価格変動する事が多いです

普段はあまり見る機会が無いかもしれませんが、ドメインには400以上の種類が存在しています。

ムームドメインではメジャー・マイナー問わず多くの種類に対応しています。

価格はピンキリで、数十円で借りられるドメインもあれば、10万円を超えるものも…!

自分のポートフォリオを置くドメインにこだわりたい人、そうでない人が居ると思いますが、今回は一般的に使われることの多い「.com」で見て、1年間レンタル費用1,160です。

なおドメインはサーバーと違い別途初期費用は発生しません。

サーバー・ドメインに掛かる初期費用の合計

ということで、ポートフォリオをサーバーにアップロードするために掛かる費用は

上記を合計して5,660という結果になりました!

「費用が掛かると聞いて、どれくらい必要なのか不安になった…」という方も、これくらいの金額なら安心して頂けたのでは無いでしょうか?

これでも「少し高いな…」と感じた方が居るかもしれませんが、はっきり言ってWebサイト制作案件を受注できればすぐに回収できる金額です。

いずれにせよサーバー、ドメインの扱いかたを勉強する数少ない手段ですし、アップロード作業の練習にもなるので、前に進みたいという気持ちがあるならば迷わず投資すべき部分でしょう。

おトク情報(2020.07.04追記)

ロリポップが土日祝日限定で初期費用無料キャンペーンを実施しています。

単純に初期費用1,500円が無料になるのは、めちゃくちゃお得ですね!

このキャンペーンは2020年7月いっぱい開催されるとのことなので、これからポートフォリオを作成したいという方は、このチャンスを活用してお得にサーバーとドメインを手に入れましょう!

キャンペーン開催中はロリポップ!のトップページに「【土日・祝日限定】初期費用無料キャンペーン実施中!」のリンクが出現しているので要チェックです!

まとめ

  • 実績が無いうちは1つのポートフォリオのクオリティを上げるより、量の多さが大事
  • 制作するサイトは「見やすさ(デザイン)」、「使いやすさ(ユーザビリティ)」、「レスポンシブ対応」の要素を満たしていればグッド
  • 完成したポートフォリオは、サーバーへアップロードしてクライントに見せるのが受注への近道
  • サーバーはロリポップ!のライトプラン(ドメインはムームードメインで取得)がオススメ

あなたのポートフォリオサイトがより良いものになることを願っております!

【FTP?アップロード?】Web制作初心者にもわかるように解説
意外と見落としがちですが、データをサーバーへアップロードするスキルはWebデザイナーに必須です。「FTPって何?」という人や「最近HTMLとcssの勉強を始めたけど、データのアップロードって何をすればいいの?」といった人へ向けて、FTPを使ったアプロードについて出来るだけ丁寧にご紹介していきます。
【Web制作入門】デベロッパーツールの使い方(特に必要な3つを厳選)
デベロッパーツールを使えるか使えないかで、コーディングに掛かる時間に雲泥の差が生まれます。私がWeb制作の勉強を始めたばかりの頃は、「まずHTMLとCSSを覚えなきゃ!」とデベロッパーツールの使い方の勉強を後回しにしていましたが、これが大間違いでした。もっと早い段階でデベロッパーツールの使い方を理解していれば、無駄なことに時間を費やすこと無くHTML、CSSの勉強が出来たのに・・・と、未だに後悔しているほどです。ということで、本記事はWeb制作未経験の人でもわかるように「デベロッパーツールとは?」から、「どのように使う物なのか」まで解説していきます。
トップページへ戻る