Web Design

[Web Design]

使用スキル

STUDIO, Illustrator, After Effects

2023.11

Personal Work

制作背景

知人がキャリアコンサルタントの資格を取得した際、個人的にコンサルティング活動をしていく上で、自分の人となり・想い・連絡手段を載せた名刺代わりのホームページを作りたいとの相談があった。

ヒアリングを続けていく中で、依頼者に寄り添えうような穏やかで優しいデザインにしたいとの希望があった。配色、ファーストビュー、レイアウトのイメージについて話し合いを重ね、クライアントの想いを形にできるよう思考を続けた。

ビジュアルデザイン

クライアントの想いと人となりがダイレクトに伝えるため、シンプルなレイアウトで構成した。クライアントが希望した穏やかなイメージがサイト利用者に伝わるよう、ピンク系色で全体を整え、ファーストビューには抜け感のある花の写真を用いた。

全体のレイアウトを中央揃えにすることでモバイルファーストを意識し、どのデバイスからサイトを閲覧しても、同じ情報を利用者に伝えられるようにした。

サイトへのアクセス直後には、クライアントの想いが詰まったロゴをラインアートアニメーションで表示し、サイトに訪れた直後からクライアントの人となりを感じてもらえるよう意識した。

ロゴデザイン

ロゴ制作にあたり、クライアントが目指しているキャリアコンサルタント像について話を聞いた。彼女によれば、「自分が直接関わる相手も、その人が大切にしている人たちにも、幸せが伝播し広がっていく状態を作りたい。そのために、依頼者の心の底に眠っている本心に耳を傾け、依頼者が心の底からしたいことに向かい走っていけるように支えていきたい。依頼者が本心を前向きに持って大切にできれば、その周囲の人にも幸せが伝播していくはずだ。」とのこと。

作成したロゴは、スクリプト体のSをクライアントに見立て、依頼者の心（Heart）に手を差し伸べるようなデザインにした。クライアントをスクリプト体のSに見立てたのには、三つの理由がある。

第一に本人の苗字がSであること、第二に形状が人のように見えたこと、第三にスクリプト体が文字から文字へ繋ぐ特性を持っているため、クライアントが大切にしたい「伝播」を具現化したかったこと。またSとH（依頼者のHeart）が並ぶことで、クライアントの名前をロゴに取り入れた形にもなった。