おすすめサービス

Web制作営業で役立つポートフォリオ作成サービスSalon.ioの使い方

※ 当サイトではアフィリエイト広告を利用しています

ポートフォリオの作成サービスがあるって聞いたけどどんなサービス?

Web制作で営業するのに必要なポートフォリオ。

実務未経験の場合は実績に架空サイトなどを載せると思いますが、これはパソコン上だけで見られればOKではなく、サーバーにアップしてインターネット上で見られるようにする必要があります。

サーバーにアップしないと相手に見せるにはパソコンを持って行かないといけませんし、ファイルを送るというのもWordPressであれば通用しません(データベースなどがあるので)

サーバーにアップする方法は以下の記事を参照下さい。

あわせて読みたい
【初心者向け】Web制作案件での納品を意識したFTPソフトを使用したポートフォリオサイトの公開方法
【初心者向け】Web制作案件での納品を意識したFTPソフトを使用したポートフォリオサイトの公開方法

続きを見る

ただサーバーにアップする必要があるのは実績に載せる架空サイトだけであり、実績を載せるポートフォリオ自体はサーバーにアップしなくてもOKです。

それはインターネット上で見れなくてもOKという意味ではなく、ポートフォリオ作成サービスを利用してインターネット上に実績などを公開するという事です。

そこで今回はポートフォリオサービス『Salon.io』の使い方をご紹介します。

もう1つのポートフォリオ作成サービス、RESUMEの使い方については以下の記事を参照下さい。

あわせて読みたい
Web制作営業で役立つポートフォリオ作成サービスRESUMEの使い方
Web制作営業で役立つポートフォリオ作成サービスRESUMEの使い方

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

Web制作営業で役立つポートフォリオ作成サービスSalon.ioの使い方

今回ご紹介するポートフォリオ作成サービス、Salon.ioの基本的な使い方はこちらになります。

Salon.ioの使い方

  • 無料会員登録
  • 制作したサイトのスクショを貼り付ける
  • スクショにリンクを設定
  • 制作についてのメモを書く
  • ポートフォリオのリンクを設定

Salon.ioの特徴はスクショを貼るタイプという事です。

なので見た瞬間に全体像が把握出来ます。

知り合いのデザイナーさんがこのSalon.ioに実績を並べてポートフォリオとして使用していますね。

解説に入る前にお見せしますが、今回の記事用に作成したポートフォリオがこちらになります。

それでは順番に見ていきます。



無料会員登録

まずはサイトにアクセスして無料会員登録をしましょう。

Salon.io

ユーザー名、メールアドレス、パスワードを入力して『新規登録する』をクリックします。

Salon.io:新規登録

Salon.io:新規登録

そしてこちらが表示されます。

Salon.io:新規登録

Salon.io:新規登録

『5ページと画像250枚まで無料』と書いてあります。

例えば架空サイトを3つ作った場合、ページを分けてスクショを載せれば3ページ分消費になりますが、1ページにまとめてスクショを載せることも出来ます。

実績をページごとに分けると見にくいので、基本的には1ページにまとめて大丈夫だと思います。

ページを分けるのはコーダーとしての営業とデザイナーとしての営業など、用途によって使い分ける場合でしょうか。

なので今回は無料で必要十分だと思います。

そしてパスワードを入力したら『登録する』をクリックします。

もしこちらが表示されたら使用出来ない記号などが使われているので、変更しましょう。

Salon.io:新規登録(使用できない記号など使っていた場合)

Salon.io:新規登録(使用できない記号など使っていた場合)



編集

そして登録が出来たらこちらが表示されます。

Salon.io:編集画面

Salon.io:編集画面

カーソルを右上の編集中か右端に乗せると編集メニューが表示されます。

Salon.io:編集メニュー

Salon.io:編集メニュー

カーソルを画面の真ん中の方に戻すと、メニューはまた引っ込みます。

そして最初に表示される説明文を閉じれば編集画面としてスタートです。

Salon.io:編集画面

Salon.io:編集画面

それではWeb制作でのポートフォリオとして役に立つ編集だけピックアップして解説していきます。

また、右上が以下のように『編集モードを開始する』の状態だと編集出来ないので、クリックして上記のように『編集モードを終了する』の状態にして編集をしましょう。

Salon.io:『編集モードを開始する』の状態だと編集不可

Salon.io:『編集モードを開始する』の状態だと編集不可

 

非公開にする

先ほどの状態はURLを知っていれば誰でもアクセス出来る状態になっているので、まずはポートフォリオが完成するまで非公開にしておきましょう。

Salon.io:非公開

Salon.io:非公開

選択した時点で設定は自動で保存されます(上にある「編集モードを終了する」をクリックしなくても自動保存)

 

スクショを貼り付ける

まずはスクショを貼り付けましょう。

ページ全体のスクショは『GoFullPage』というChromeの拡張機能を使うと便利です。

GoFullPage

そしてスクショをドラッグ&ドロップで追加していきます。

そしてこちらがスクショを2枚追加した状態です。

Salon.io:スクショした画像をドラッグ&ドロップで添付

Salon.io:スクショした画像をドラッグ&ドロップで添付

サイズや位置はバラバラですが、どちらも調整可能です。

 

スクショのサイズを変更

サイズは画像にカーソルを乗せればこちらが表示されるので、横幅指定、高さ指定、元画像のサイズで表示するかを選びます(1つしか選べません)

Salon.io:スクショのサイズ変更

Salon.io:スクショのサイズ変更

 

スクショの位置を変更

位置についてはドラッグで簡単に動かせます。

もし自由に配置したい場合はレイアウトを『キャンバス』にしてからドラッグで自由に動かせばOKです。

もしきっちり揃えたい場合は、固定グリッドにすれば簡単に出来ます。

Salon.io:レイアウト変更

Salon.io:レイアウト変更

サイズについても変更可能で、順番は下の方に書いてありますがドラッグで変更可能です(『順番を反対にする』をクリックで反対になります)

 

背景の編集

背景については背景色か背景画像を設定出来ます。

先ほどのレイアウトの下の方に『背景』という項目があるので、そこで色か画像を設定可能です。

今回の場合は右側がヘッダーも白くて背景が白だと少し分かりにくいので、色を設定すると良いかも知れません。

Salon.io:背景の編集

Salon.io:背景の編集

背景画像の場合はパターン素材など小さい画像で繰り返し設定に出来るものを使うといいと思います。

Salon.io:背景の編集

Salon.io:背景の編集

 

スクショのリンク設定

デザイナーであればスクショだけでも良いかも知れませんが、コーダーの場合はスクショだけではコードは分からないし、ブラウザで見ないとアニメーションや崩れがないかなども分からないので必ずリンクを設定しておきましょう。

リンクってどこのリンク?

と思う方がいるかも知れませんが、架空サイトなどは自分のテストサーバーなどにアップしておきましょう。

まだサーバーの契約をしていない人はこちらの記事を参照下さい。

あわせて読みたい
【徹底比較】ポートフォリオ用おすすめレンタルサーバー3選と選び方を解説
【徹底比較】ブログ・ポートフォリオにおすすめレンタルサーバー3選と選び方を解説

続きを見る

テストサーバーについては以下の記事を参照下さいエックスサーバーConoHa WINGの場合)

あわせて読みたい
【エックスサーバー】ポートフォリオやWordPressサイトの公開方法【テスト環境にも使える!】
【エックスサーバー】ポートフォリオやWordPressサイトの公開方法【テスト環境にも使える!】

続きを見る

あわせて読みたい
【ConoHa WING】ポートフォリオやWordPressサイトの公開方法【テスト環境にも使える!】
【ConoHa WING】ポートフォリオやWordPressサイトの公開方法【テスト環境にも使える!】

続きを見る

あとはそのリンクを設定します。

まずはリンクを設定したいスクショにカーソルを乗せて表示される編集をクリックします。

Salon.io:編集をクリック

Salon.io:編集をクリック

そしてこちらで設定します。

Salon.io:リンクの設定

Salon.io:リンクの設定

手順は以下の通りです。

  1. 歯車のタブを選択
  2. 『リンク先を新しいタブで開く』にチェック
  3. リンク先のURLタブを選択
  4. リンクを入力

これでOKです。

リンクはスクショごとに設定しましょう。

 

メモを追加

これは必須ではありませんが、制作についてのコメントを書いておくといいかと思います。

左のツールバーに表示されているテキストを追加をクリックします(シングルクリックで大丈夫です)

Salon.io:『テキストを追加』をダブルクリック

Salon.io:『テキストを追加』をダブルクリック

そしてこちらが表示されるので、カーソルを乗せて表示される『編集』をクリックします。

Salon.io:『編集』をクリック

Salon.io:『編集』をクリック

こちらが編集画面です。

Salon.io:テキスト入力

Salon.io:テキスト入力

この辺はWordPressブログをやっている人なら特に難しくないと思います。

フォントサイズや色などは右側の編集画面から変更可能です。

そしてこのようになります。

Salon.io:テキスト追加

Salon.io:テキスト追加

ただしレイアウトを『固定グリッド』にしているとコメントがスクショと同じ扱いになるので、横並びになってしまいます(レイアウトの変更は『スクショの位置を変更』を参照)

なのでこの場合のレイアウトは以下のように『キャンバス』が良いかも知れません(内容は仮です)

Salon.io:レイアウト『キャンバス』

Salon.io:レイアウト『キャンバス』

 

パーマリンク設定

あとはポートフォリオ自体のリンクを設定しましょう。

設定は『iマーク』のタブを選択してパーマリンクを入力するだけです。

Salon.io:パーマリンク入力

Salon.io:パーマリンク入力

そしてURLはこちらになります。

Salon.io:パーマリンク入力後のURL

Salon.io:パーマリンク入力後のURL

このURLを見せたい相手に送ればOKです。

もちろんその前に公開設定を非公開から公開にするのを忘れないようにしましょう。

Salon.io:公開

Salon.io:公開

ポートフォリオ・営業文の添削サービス

最後に制作会社向けの営業文・ポートフォリオの添削サービスをご紹介します。

恐らくほとんどの人は、

制作会社の営業ってどうすればいいの?

という状態だと思います。

そういう人にはこちらのサービスがおすすめです(画像クリックでアクセス👇)

サービス内容

  • 制作会社に評価されるポートフォリオの解説
  • 営業文の雛形公開、及び各点の解説
  • 営業時にやってはいけない手法とリストアップ方法
  • 制作会社へのインタビュー
  • 営業文・添付資料・ポートフォリオの添削(2回)
  • 評価されるチェックシートの雛形と作り方
  • 制作会社との面談での質疑応答の解説
  • 制作会社はポートフォリオのどこを見ているのか
  • 制作会社に出す見積書の雛形と解説
  • その他、役立つ書類を複数追加予定

私のように営業経験がない人は、どうやって営業をしていいのかさっぱり分からないと思います。

そして、

燃える犬

とにかく数を打つ!

と意気込む人もいてそれも間違いではありませんが、なるべく希望の制作会社と契約したいですよね?

そのためには営業方法を学び、営業文やポートフォリオの添削を受ければ契約に至る可能性を大幅に上げることが出来ます。

そしてこちらのサービスは売りっぱなしではなく、実際に営業をする会社のリサーチをした上で添削をしてくれます。

営業は無策で挑むと消耗戦になり、次第に営業先がなくなっていくということもあり得るので、このサービスを活用して制作会社営業の打率を上げておくのがおすすめです。

制作会社営業の打率アップに!

営業文完全攻略はこちら

2回の営業文添削付き!

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-おすすめサービス
-