Web制作で営業するのに必要なポートフォリオ。
実務未経験の場合は実績に架空サイトなどを載せると思いますが、これはパソコン上だけで見られればOKではなく、サーバーにアップしてインターネット上で見られるようにする必要があります。
サーバーにアップしないと相手に見せるにはパソコンを持って行かないといけませんし、ファイルを送るというのもWordPressであれば通用しません（データベースなどがあるので）
サーバーにアップする方法は以下の記事を参照下さい。
【初心者向け】Web制作案件での納品を意識したポートフォリオの公開方法
ただサーバーにアップする必要があるのは実績に載せる架空サイトだけであり、実績を載せるポートフォリオ自体はサーバーにアップしなくてもOKです。
それはインターネット上で見れなくてもOKという意味ではなく、ポートフォリオ作成サービスを利用してインターネット上に実績などを公開するという事です。
そこで今回はポートフォリオサービス、RESUMEの使い方をご紹介します。
効率よくコーディングしたい人はこちら
Web制作営業で役立つポートフォリオ作成サービスRESUMEの使い方
今回ご紹介するポートフォリオ作成サービス、RESUMEの基本的な使い方はこちらになります。
RESUMEの使い方
- 無料会員登録
- プロフィール編集（スキルや経歴など）
- 実績を載せる
RESUMEは完全無料で使用出来ます（有料プランはなし）
同じポートフォリオ作成サービスのSalon.ioは無料で十分使えますが有料プランもあり、スクショを貼るタイプになります。
Salon.ioの使い方については以下の記事を参照下さい。
Web制作営業で役立つポートフォリオ作成サービスSalon.ioの使い方
それでは順番に見ていきます。
無料会員登録
まずはサイトにアクセスして無料会員登録をしましょう。
はじめるというボタンが2ヶ所ありますが、どちらも同じです。
ボタンをクリックするとこちらが表示されます。
登録はSNSやGoogleと連携する形で行うので、どれかクリックして登録しましょう。
プロフィール作成
プロフィール作成で設定可能な項目は以下になります。
- プロフィール（Profile）
- スキルとレベル（Skills）
- 経歴（Experience）
- 執筆歴（Writing）
- SNS（Socials & Links）
- 自由記述
それでは順番に解説していきます。
プロフィール（Profile）
登録が出来たらこちらが表示されます。
メールアドレスだけ任意と書いてありますが、名前とユーザー名だけ書けば保存は出来ます。
ただなるべく全部書いた方がいいでしょう（メールアドレスはお好みで）
そしてこの内容で保存をクリックするとこのような表示になります。
スキルとレベル（Skills）
次にスキルとレベルを入力していきます。
＋Resumeを作成するをクリックします。
するとこちらが表示されるので、スキルを追加をクリックします。
そしてこちらが表示されます。
例えばHTMLと入力すると、専用のアイコンが表示されます。
他にも専用のアイコンがあるものは表示されるので、それを選択します。
あとはレベルを次の5段階から選択します。
- 入門
- 初級
- 中級
- 上級
- プロフェッショナル
この点をスライドさせて選択します。
そして中級だと円グラフの真ん中になります。
編集したい場合は、アイコンにカーソルを乗せれば右上に「・・・」が表示されるので、そこから編集と削除が可能です。
そしてスキルを追加をクリックすればどんどん追加出来ます。
見て分かる通り、レベルによって円グラフの位置が変わります。
並び順は追加順ではなくレベルが高い順になっていて、同じレベルのスキルでは順番の変更は出来ないようです。
結構いろいろありますね。他にもいろいろあると思うので、ぜひ探してみて下さいw
経歴（Experience）
スキルの下で経歴を追加します。
経歴を追加するをクリックするとこちらが表示されます。
経歴も何個でも書けます。
年の終わりを書かなければ、上記の場合「じゅんぺいブログ」のように継続中という書き方になります。
執筆歴（Writing）
これは書籍などを出版した事がある人が書く項目です。
Web制作のポートフォリオで書く人は少ないかと思います。
SNS（Socials & Links）
載せたいSNSのリンクがあれば追加しましょう。
追加された項目は色が有効化されます。
＋その他のリンクを追加にも自由に追加出来るので、ブログなどを追加しても良いかも知れません（色は9種類から選択）
注意ポイント
自由記述
最後には自由記述の項目があります。
＋自由記述の白紙を作成するをクリックすると編集画面になります。
自己PR文などを記載するといいかと思います。
テキスト以外にも画像を載せたり箇条書きの設定もあります。
編集が終わったら右下の保存するをクリックして完了です。
これでポートフォリオのカバーページの作成は完成したので、ページの左上にある編集終了をクリックしてトップページに戻ります。
実績を載せる（Works）
ここから一番重要な実績を載せていきましょう。
トップページでWorksをクリックします。
プロフィールを編集したい場合
Worksをクリックするとこちらが表示されます。
まだ何もないのでNo Works yet.となっていますね。
ここで＋Workを作成するをクリックすると編集画面が表示されます。
カバー写真は実績として載せたいサイトのスクショを載せます。
ページ全体をスクショして載せた場合、Worksの個別ページでは全体が見れていいですが、一覧では右のようにスクショの中央付近が切り取られます。
逆に一覧でページトップから表示されるようにスクショした場合、個別ページでは当然切り取られた状態になるのでどちらにするかは良く考えましょう。
ページ全体のスクショはGoFullPageというChromeの拡張機能を使うと便利です。
あとは記入したら右上の公開設定をクリックします。
そしてこちらが表示されます。
ここでリンクの設定や鍵をかけて限定公開にすることも可能です。
と思う方がいるかも知れませんが、架空サイトなどは自分のテストサーバーなどにアップしておきましょう。
デザイナーであればスクショだけでも良いかも知れませんが、コーダーの場合はスクショだけではコードは分からないし、ブラウザで見ないとアニメーションや崩れがないかなども分からないので、必ずリンクを設定しておきましょう。
テストサーバーの作り方は以下の記事を参照下さい。
そしてこちらが入力した状態です。
設定出来たら右下の公開するをクリックして公開設定完了です。
設定したリンクはWorksの個別ページの右下のWEBSITEボタンにあり、ここをクリックすればサイトが開くのですがちょっと分かりにくい場所にあるので、説明文に「ページの右下にサイトへのリンクボタンがあります」と書いておいた方がいいかも知れません。
Worksを追加したいときはページ右上にある＋New workをクリックすればOKです。
以上になります。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
