結果ブロックの作り方（サービス内容部分）

結果ブロックはあなたの商品

この結果ブロックとは、あなたに仕事を依頼した時に「確実に実現してもらえるメリット」のことです。

ポートフォリオで言えば「サービス」の部分にあたります。 サービス部分は基本的には出来る仕事を列挙しますが、それだけでは弱いです。 ここは言わば自分の売り出す商品です。なので、魅力的に映るようにする必要があります。 クライアントがそれを仕事を依頼した時に得られるメリットが明確に伝わるようにしましょう。

悪い例

悪い例としては、ただ出来ることをあげているだけのものです。 例えば以下の例は何が出来るかはわかりますが、それをあなたに依頼するメリットが書かれていません。

これではクライアントに対して魅力的なオファーは出来ていないですね。

良い例

良い例としては、例えば「30%集客アップSEO」「時短Webデザイン」など具体的なメリットが訴求できるようなサービスを用意することです。

以下は、サービスのメリットが強く感じられるのではないでしょうか。

このようにポートフォリオの主（デザイナー・エンジニア）に依頼した時に得られるメリットを列挙することが重要です。 クライアントが困っていることを具体的に解決するサービスを用意できれば良いです。

未経験者はどうするの？

ここも未経験だったらどうするの？と困ってしまいますよね。 その場合は自分でもできる範囲のサービスを考えると良いです。

例えば、未経験なので単価は安くできそうですね。「超低料金Webサイト構築プラン」なんかはできそうですね。 それと時間に余裕があるのであれば「時間拘束Web制作プラン」なども良いかもしれません。その時間はオンラインでがっちりオンラインでも拘束されるプランですね。

ここは新商品を開発してリリースするというように進めるのが良いかと思います。 そして、引き合いを分析して手を変え品を変えやるべきだと思います。

もちろん出来るスキルを伝えることも忘れないようにしてくださいね。

実演：サービスエリアのカスタム

実演では下図のデザインにサービスエリアを変更します。 上段がサービス(強み)、下段にはプランを入れてみました。 アイコン部分は様子を見て変更しやすいよう、テキストに変更しています。

ご自身のポートフォリオでは、もちろんアイコンやイラストを使用して頂いても構いません。サービスとプランどちらかにする、エリアを分けるなど見やすい工夫をしてください。 なお、サービスエリアの下に入っていたスコア部分は必要ないので削除しています。

コード変更

まずサービスエリア全体の背景色を変更し、見出しの文字を白くします。

　　↓

この状態だと見出し上が少し狭いので、余白を調整します。

次にアイコン部分のクラスとcssを設定します。 使用したクラスとスタイルは下記のとおりです。

【CSS例】

/* プロフィールで使用したクラスのサイズを調整して使用 */
#service .background-circle{
  display: block;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin: 0 auto;
  padding-top: .55em;
  font-size: 36px;
    text-align: center;
  background: #7FC3DB;
  color: white;
}

#service .border-circle{
  display: block;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin: 0 auto;
  padding-top: .4em;
  font-size: 36px;
  text-align: center;
  box-sizing: border-box; /* borderを内側に */
  border: solid 10px #7FC3DB;
}

課題：自分の商品を作りましょう

自分の想定したクライアントに響きそうな商品を最低3つ作りましょう。 多すぎても良くないので得意なもので勝負する、本当に売るつもりのものを用意しましょう。

以下の内容を満たし、自分のポートフォリオに適応してください。

• プラン名を考える
• プランの概要を考える
• アイコンを合ったものにする

この場合もクライアントに与えるメリットを一番大事にして作成してください。