Web制作 案件獲得

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

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

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

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

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

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

参考記事
【初心者向け】Web制作案件での納品を意識したFTPソフトを使用したポートフォリオサイトの公開方法
【初心者向け】Web制作案件での納品を意識したFTPソフトを使用したポートフォリオサイトの公開方法

続きを見る

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

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

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

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

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

続きを見る

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

コーディングの時給アップにはこちら!


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

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

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

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

-Web制作, 案件獲得
-