yukiポートフォリオサイトの作り方【営業の成果を爆上がりさせる!】ツイートシェアはてブLINEPocketこんばんは、Yukiです。今回は「Web制作をやっている駆け出しコーダーです。ポートフォリオサイトがあった方がフリーランスとして営業するときに便利と聞くけど作り方が分からない。ポートフォリオサイトってどんな手順で作って、どんな内容を入れたらいいんですか?」こんな疑問に答えていきたいと思います。【本記事の内容】ポートフォリオサイトに入れるべき項目ポートフォリオサイトを作る手順*「そもそもポートフォリオサイトってなんすか?」という方のために解説しますとポートフォリオサイトとは自分の作品などを公開するホームページみたいなもののことですね。この三つについて詳しく解説します。「価格感」まず最初に聞かれるのは「価格感」つまりいくらで案件を受けれるのかということです。これは必ず聞かれるのでポートフォリオに明記しておきましょう。実際にフリーランスの方から話を聞いたり、Web制作会社と何社か話してわかった相場ですが下記の感じです。コーディングのみ(トップページ)→10,000円〜20,000円くらいコーディングのみ(下層ページ/1)→5,000円〜8,000円くらいLPコーディング→20,000円〜30,000円くらい1年目のフリーランスの場合これくらいが妥当な相場感だと思います。価格表はあくまでも「自分はこのくらいの値段で仕事しますよ」という目安なので厳密にこの価格でということにこだわらなくて良いかと思います。経験の浅いフリーランスの場合は数をこなして実績やスキルを積むことが大事なので、LPのコーディングで15,000円くらいなら受けるのはアリです。当然ですが、一番大事なのは仕事をこなせるスキルがあるかどうかです。過去の制作物を実績として載せましょう。実績はグーグルドライブにまとめるのが良いです。言うとどんなものを作れるのかが制作会社側が一目でわかるからです。Captureを使ってスクショし、グーグルドライブに保存して、共有可能なリンクを取得すればOKです。グーグルドライブだとソースコードやアニメーションの有無が見れないので、ソースコードを見れるURLも合わせていくつか用意しておく必要があります。Githubやレンタルサーバーを使っていくつかサイトを公開しておきましょう。制作にかかった時間も聞かれることがあるのでわかる範囲でメモしておきましょう。仕事を任せられることになるので、信用されるかどうかもとても重要になってきます。経歴など信頼できる情報を載せましょう。ポイントは下記の項目を載せることです。載せている人は結構いるんですが、使えるデザインツールを明記していない人が多いです。デザインツールを使えるかどうかによって、制作会社側がフリーランスに任せてくれる案件がかなり変わってくるのでデザインツール(photoshop,illustratorなど)が使えるかどうかはしっかり明記しましょう。この「経歴」のところに自分に頼む付加価値を明記できるとなお良いです。次はポートフォリオサイトを作る手順について解説します。ポートフォリオサイトの作り方まずは大まかな流れを説明したいと思います。全体の流れはこんな感じです。細かい内容を見ていきましょう。入れるとしてあとは自分の好みなどで工夫していくのがいいと思います。注意として、ポートフォリオサイトだからと言って「凝ったデザイン」とか「すごいアニメーション」とかを入れる必要はあんまりないです。それよりも「この人に仕事を任せたい!と思ってもらえる言葉選び」や、「見やすい構成」、「HTMLのタグを適切に使用できるか」や、「メンテナンス性の高いコードを書けてるか」の方が大事です。ハニワマンさんのポートフォリオは非常に参考になります。紙に全体のイメージを描くこんな感じに紙に大まかなデザインを書いていきましょう。コーディングコーディングはデザインのイメージに沿ってやればOKです。わからないところなどは調べながら作りましょう。ポートフォリオサイトはソースコードまで見られることになるので適当に書かずに綺麗なコードを描くようにしましょう!具体的には、divばかりではなくsectionとかのタグを利用したりや、CSSを規則的に書くことですね。ドメイン取得、サーバーレンタルコーディングを終えたらいよいよドメイン取得とサーバーにアップです。そのためにはドメインとレンタルサーバーを契約しないといけないのですが、オススメは下記になります。ドメインはお名前.comレンタルサーバーはエックスサーバー(x10プラン)ドメインはどこで買っても同じなので、一番安いお名前.comで買うのが良いでしょう。レンタルサーバーは機能面も考慮する必要があるのですが、サーバーの落ちづらさや使い勝手を考えるとエックスサーバーのx10プランが一番良いかと思います。だいたい一年で16,000円くらいでサーバーは借りれますし、ドメインは年間500円くらいで取得できます。ドメイン名は.comとか.netとか.workとかでいいのでそこまでこだわる必要はないです。公開するのGithubじゃダメなの?と言われそうですが、ドメイン取得やレンタルサーバーを使ったサイト公開は必ず一度は経験した方が良いです。言うと、実案件ではサーバーを使うことがよくあるので、ここで一度一連の流れを経験しておくと実案件でサーバーを使うときも焦らずスムーズにこなせるようになります。FTPクライアントを使って公開FTPクライアントは「FileZilla」がよく使われていて、ググっても情報が多いのでオススメです。実際僕もFileZillaを使っています。「は?FTPクライアントって何やねん?」と思った方もいると思うので説明すると、Atomとかで書いたコードのファイルやフォルダーをレンタルサーバーにアップロードする際に使うものです。公開してみると、ブラウザの表示では発見できなかった改善点が見つかるので修正しましょう。改善しなきゃいけなくなるのがサイトの重さです。サイトが重くなる原因はだいたい画像の容量がめっちゃ大きいからです。目安として一つの画像が「1MB」超えていたら容量が大きすぎると思った方がいいです。重さの改善には「画像を変える」or「画像圧縮する」をしましょう。「画像の圧縮」には「JPEGmini」というツールを使うのがオススメです。このツールだと画質をほとんど落とさずに画像の容量を減らしてくれます。逆に他のツールを使うと容量と共に画質も落ちてしまうのでオススメできません。画像の圧縮にも限界はあるので、目安として一枚の画像が「3MB」を超えていたら他の画像に変えた方が良いと思います。「3MB」以上あると「JPEGmini」を使っても「1MB」以下に容量を落とせません。スポンサードサーチまとめ長くなりましたが今回はなぜポートフォリオサイトが必要なのかポートフォリオサイトに入れるべき項目ポートフォリオサイトの作り方を解説しました。ポートフォリオができたらガンガン制作会社に営業をかけていきましょう!では今回は以上です。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。模写コーディングのやり方とポイントを徹底解説!RECOMMENDこちらの記事も人気です。フリーランス2018.11.4コーディングの相場【コーダー1年目】フリーランス2018.9.19大学生が4ヶ月の独学でフリーランスエンジニアとして稼ぐまでの話フリーランス2019.4.12Web制作フリーランスとしての今後の方向性を考え直してみたABOUTこの記事をかいた人yuki慶應の通信課程に通う大学生。現在はフリーランスとしてコーディングなどの仕事を受けながら、受託開発してる会社でインターンしてます。通信課程(経済学部)に通う大学生。フリーでコーディングの仕事をしている。趣味は読書で、ビジネス書や新書、小説などを中心に読んでいる。現在はデータサイエンスに関心を持っている。通信課程(経済学部)に通う大学生。フリーでコーディングの仕事をしている。趣味は読書で、ビジネス書や新書、小説などを中心に読んでいる。現在はデータサイエンスに関心を持っている。