title.
jin様
ポートフォリオサイト
jin様ポートフォリオサイト
(date)
(role)
design, direction
(tool)
Figma
(duration)
20days
overview
長崎在住のWebコーダーjinさんのポートフォリオサイトです。「長崎から灯をともす、誠実なコーダー」をコンセプトに、TOP＋下層4ページ、PC・SP両対応で制作しました。スキルと人柄の両方の信頼感を伝え、問い合わせ獲得につなげるように設計しました。
#01 ターゲット
長崎県内の中小企業で、コーディングを外注したいエンドクライアント。担当者が途中で変わってしまう不安や、遠方に頼むことへの距離感・心細さを抱えており、地元で長く親身に付き合えるコーダーを探している層を想定。
#02 課題
地元への想いとコーダーらしさの両方を伝えたいものの、一歩間違うと観光サイトのようなトーンになってしまう危うさがあった。長崎らしさを出しながらも、あくまでもコーダーとしての実力が主役だと伝わるトーン設計が必要。
#03 目的
コーダーとしての認知を高め、問い合わせ数を増やす。「確かなスキル×誠実さ×地元の親近感」が揃うことで、ターゲットに「この人に任せたい」と感じてもらい、メールでの問い合わせにつなげる。
#04 情報設計
オープニングアニメーションでは「Your project starts here」の一文で幕を開けます。jinさんとともにお客様のプロジェクトが始まる、その期待感を最初に持ってもらう狙いです。幕が開くようにFVへとつながり、背景にはさりげなく長崎港の写真を選びました。長崎から貿易が広がっていったように、お客様のプロジェクトもここから始まる、というニュアンスを重ねています。プロフィールセクションは、スクロールに合わせて背景のグラバー園が色づいていくパララックスを採用しました。地元の方への親しみを演出しつつ、jinさんが長崎に根ざして活動していることを、言葉ではなく写真で印象づけています。構成は「実績」が主役になるため、制作物を先に見てもらってから人柄を知ってもらう順番にしました。その後、FLOWやQAセクションでターゲットの不安や疑問を回収し、Animationセクションではコーダーとしての技術力も見せる構成にしました。
#05 ポイント
誠実さを感じさせるネイビーをベースに、オレンジをアクセントにしました。オレンジは夜景で知られる長崎の港に灯る光がモチーフで、誠実さの中にあたたかみも添えています。見出しにはセリフ体のMontaga、本文にはNoto Sans JPを採用し、誠実で落ち着いた印象を狙いました。実績が主役のサイトなので、あしらいは最小限に留め、かわりにアニメーションで画面に単調さが出ないようにしています。
#06 クライアントの声
素敵なデザインはもちろんのこと、常に丁寧で迅速な対応をいただけました。
contact コンタクト
「具体的な依頼ではない」「ちょっと話だけ聞いてみたい」そんな段階でも大歓迎です。
まずは気軽にご連絡ください。当日中にお返しします。
送信が完了しました
お問い合わせいただきありがとうございます。
今しばらくお待ちください。