信頼ブロックの作り方(プロフィールの作り方) | SkillhubAI(スキルハブエーアイ)

信頼ブロックの作り方(プロフィールの作り方)

基本的にクライアントはお仕事をお願いしたいと思って見ています。ポジティブな感情として「信頼したい」と思っているのです。

ですので、その期待を受け止めるようなプロフィールにしましょう。 クライアントの課題を解決できる人物であるということをアピールしてください。

信頼をつくる3つのポイント

ポイントとしては以下の3つを意識し、良いものに見せましょう。

  • 技術力があるということ
  • 今までの経験もそれなりにあること
  • 良い写真

これがしっかりしていると信頼を得ることができます。 技術的に出来ることと、自分の売りSNSや自分のブログへのリンクを張っておくと良いでしょう。

プロフィールに自信がない場合はどうするの?

しかし、あまり書けるようなことが無いという人も多いと思います。 その場合は今までの職歴とからめたプロフィールを作ると良いでしょう(学歴がある人はそれもアピールしても良いです)。

例)医療関連マーケティングに強いWebデザイナーです。 WebデザインからJavascript、HTML/CSSコーディング、さらにはWordPressでのサイト構築を得意としています。 前職で医療関連の仕事をしていたため集患などにはノウハウを持っています。すぐにお力になれると思います。

デザインを含めると以下のように表現すると良いでしょう。 file

実演:プロフィール部分の変更

では、実際にプロフィールの部分を差し替えてみます。 前回も使用したコーダーを想定したプロフィールを作ります。

file

ヒーロー部分では黒っぽくクールな印象の画像を使用しているので、他の部分も無彩色ベースで統一して作っていきます。 アクセントカラーは元のデザインよりも柔らかめの色 #7FC3DB を使用することにしました。

カラフルで可愛らしい印象に仕上げたい方はWebデザインの3カラー、トーンなどを意識して配色を行ってみて下さい。

コーディング

まず左上のブロック、写真・名前等の部分を変更します。

file

 

元デザイン時に作ったクラスを使用しているほか、 SNSアイコンを配置するための「circle」クラスを新しく追加しました。

【HTML】 file

【CSS】 file   ↓ file

 

次にプログレスバーの色をアクセントカラーに変えます。

file   ↓ file

 

右側のカラムを変更しましょう。 見出し下の下線の色もアクセントカラーに変更し、テキストを打ち換えます。 和文フォントで「lead」クラスだとテキストサイズがかなり大きくなるので外しました。

file   ↓ file

 

最後に、新しく追加した経歴部分を追加します。

file   ↓ file

 

課題:プロフィールを作成しましょう(About me)

以上のような留意点を踏まえてプロフィールを作成してください。 それを自分のポートフォリオに反映させましょう。