ポートフォリオってなに載せたらいいの？
実績とかないよ。
コーディングできないと作れない？
簡単にサクッと作りたい！
今日はこんなお悩みを解消します！
ウェブデザインで稼ぐなら、まず必須になるのがポートフォリオサイトです💡
クライアントに自分のスキルや実績をアピールするための、自分の作品を載せたウェブサイトのこと。
自分のスキルアピールをするための「名刺」のようなものです！
しかし、一口に「ポートフォリオ」と言っても、何を載せるか、どうやって作ったらいいか分からないですよね。
検索するとオシャレなポートフォリオばっかり。駆け出しには厳しい…😇
そこで今回は、
実績ナシ！駆け出しウェブデザイナーのポートフォリオの作り方と載せるべき内容をご紹介します！
- ウェブデザインを勉強している方
- 駆け出しウェブデザイナーの方
- 仕事を取りたいと思っている方
- ポートフォリオを作っている方
では、さっそくいってみましょう！
ポートフォリオに載せる内容【オススメ５項目】
サービス
ウェブデザイナーといっても、人によって仕事内容は様々です。
コーポレートサイト・LP・ECサイト・ロゴ・バナー・サムネイル…
どれかひとつに特化したウェブデザイナーも多く、依頼者がポートフォリオを見た時に
「なにができる人なのか」がわかるように明記しましょう！
また、ウェブデザインと関係するスキルがあれば、併せて記載しておくと＋αの依頼につながる可能性もありますよ。
- インスタグラムなどのSNS運用
- イラスト
- ライティング
- スライド資料作成
私は数点イラストも載せていました！
作品
「あなたにお願いしたら、どんなものを制作してくれるのか」
をイメージしてもらうために５〜10点ほど載せておくのがオススメです！
- バナー：５点
- サムネイル：３点
- LP：２点
- ウェブサイト：１点
作品数はあくまで目安。１つでも相手の心に刺されば依頼につながる可能性も大いにあるので、できた作品から載せていくのも全然アリです！
実務で作成した作品がない方は、架空のサービスでOK◎
必ず、架空サービスである旨を記載しておきましょう。
また、模写やトレースなどを載せる場合も「模写」「トレース」であることを明記しておきましょう。
記載しておかないと著作権の侵害に当たることも…！
実際に私も、初めてポートフォリオから問い合わせをいただいた時は、架空の「新鮮野菜を取り扱うサービス」のウェブサイト・バナー・商品ページなどを載せていました🥦！
また、作品には必ず制作過程の説明を入れるようにしてください。
作品説明に記載する内容【５選】
- ターゲットユーザー
- 作品のコンセプト
- 制作期間
- 使用したツール
- 意識したポイント
見ている人が「あなたに依頼することで、どんなデザインができるのか」をより具体的に想像することができます。
使用ツール・開発環境
ウェブデザインは同じ仕事内容でも、クライアントによって使用ツールを変える必要があります。
クライアントから
「aiデータで納品して！」「Photoshopで作ってほしい」「SCSSを使って」など
使用ツールや言語を指定されることもとても多いです。
使用可能なツール＋具体的にどのようなことができるのか、
コードが書けるのであればHTML・CSS（SCSS）・jQueryなど、言語などもしっかりと記載しましょう。
価格
価格を書かない方もいますが、私は書くことをオススメしています◎
ウェブデザインの金額はピンキリ。
相場はあってないようなもので、だいたいの金額を知らないと依頼者側も検討しにくいですよね。
バナー１枚：3,000円〜5,000円（希望価格）
LPコーディング：20,000円〜（ボリュームに応じて金額が変わります）
など、金額に幅があること・デザインによって変動があることもあわせて、ざっくりと記載しておくといいですよ。
お問い合わせをいただいて、お見積りを出すタイミングで正式な金額をお伝えできれば問題ありません◎
自己紹介
相手のことを全く知らない状態で、お仕事をお願いするのって怖くないですか？
顔が見えないからこそ信頼してもらえるように、安心して依頼できる人柄だとわかってもらえるように、自己紹介は充実させましょう！
私も過去に、「デザインが好き」「趣味が一緒」「文章の感じが好き！」という理由でご依頼をいただけたことがあります！
デザインと人柄、見てくれる方にとってはどちらも大切な要素です◎
- 名前（フルネーム）
- 家族構成
- 住んでいる県
- 経歴
- 趣味
- ウェブデザイナーになったきっかけ
- 大切にしていること
文章を書くのが苦手な人は箇条書きでもOKです◎
なるべくたくさん「あなたの情報」を載せて「共通点」や「信頼してもらえるポイント」を見つけてもらえると依頼につながりますよ♡
ポートフォリオの作り方【２選】
スキルや獲得したい仕事内容によって、作り方は異なります。
- デザインのみ掲載する場合
- デザイン〜実装までする場合
上記ふたつはコードを扱うか扱わないかの違いです。
私自身、どちらとも作ってどちらからも仕事を獲得できたので、悩む方はサクッと簡単にできる❶から作ってみてくださいね。
デザインのみ掲載する場合
- コーディングせずに作りたい方
- 時短でサクッと作りたい方
- サーバー契約やドメイン取得が面倒な方
96,000人以上のクリエイターが登録している【無料ポートフォリオ作成ツール「foriio」】がオススメです！
駆け出しから抜けたウェブデザイナー仲間も使っている人が多い印象。
foriioの使い方はめちゃくちゃ簡単です。
アカウント登録したら、作品をぽんぽんドラッグ&ドロップであげていくだけ。
- 作品の追加が簡単
- 作品毎に作品名・説明文が書ける
- 画像以外にもウェブサイト・動画・キャッチコピーなども載せられる
- Pro版（有料）にすれば独自ドメインを使用できる
作品がすでにある人は、いまこの瞬間に作ってすぐ公開できますよ◎
ココナラで「提案する際はポートフォリオを付けて〜」という案件も多いから、すぐに必要！って方にはもってこい◎
作品毎に限定公開にできるのも良いですよ！
デザイン〜実装
コーディングできる（勉強したい）方は断然こちら！
デザインのみでお仕事していく予定でも、必要最低限のコーディング知識やスキルがあると仕事の幅も広がります。
- コーダーになりたい
- サイトをまるっと作りたい
- コーディングを勉強したい
ノーコードツールも増えていますが、デザインからコーディング、実装まで任せられると大型案件も取りやすいです。
コーディングでポートフォリオを作る流れはこちらです↓
まず、デザインカンプ（Webデザインの完成見本）を作ります。
使用デザインツールはAdobe XDかPhotoshop、Figmaがオススメ◎
デザインカンプをもとにコーディングします。
自分が作った初デザインカンプ、ほんっとにコーディングしにくいです…！デザイナーとコーダー、どちらの気持ちもわかっているウェブデザイナーは重宝されますよ。
クラウドソーシングではWordPressに関わる仕事がめちゃくちゃ多い…！
WordPressでサイト構築までできたら最強です◎
コーディングしたデータを公開します。
サクッと流れはこんな感じ↓
レンタルサーバーを契約・ドメインの取得・FTPソフトでファイルをアップロードする
ブラウザで正しく表示できたら完了です！
まとめ
ポートフォリオは、年中無休で営業してくれる最高の相棒◎
SNSにリンクを貼っておくだけで自動集客になり、
クラウドソーシングの応募も「ポートフォリオ」＋「クライアントの要望に応える」提案ができて、成約率UPかつ、手間が省けて一石二鳥です◎
制作過程でスキルアップできて、自分の好きなように作れるのがポートフォリオのいいところ！
ウェブデザインで稼ぐには必須のポートフォリオ、ぜひ楽しみながら作ってくださいね。