案件獲得 Web制作 ノウハウ

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

Web制作営業で役立つポートフォリオ作成サービスSalon.ioの使い方
ポートフォリオの作成サービスがあるって聞いたけどどんなサービス?

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

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

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

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

【初心者向け】Web制作案件での納品を意識したポートフォリオの公開方法

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

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

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

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

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

効率よくコーディングしたい人はこちら

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

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

Salon.ioの使い方

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

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

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

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

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

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

 

無料会員登録

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

Salon.io

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

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

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

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

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

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

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

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

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

 

編集

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

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

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

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

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

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

 

非公開にする

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

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

 

スクショを貼り付ける

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

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

GoFullPage

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

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

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

 

スクショのサイズを変更

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

 

スクショの位置を変更

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

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

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

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

 

背景の編集

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

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

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

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

 

スクショのリンク設定

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

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

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

エックスサーバーでテストサーバーを作る方法

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

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

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

手順は以下の通りです。

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

これでOKです。

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

 

メモを追加

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

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

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

こちらが編集画面です。

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

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

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

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

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

 

パーマリンク設定

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

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

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

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

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

以上になります。


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-案件獲得, Web制作, ノウハウ
-,