採用担当者の方は日々多くのポートフォリオを見ています。だからこそ、“最初の3分”で信頼感や安心感を持っていただけるかどうかが大切です。私はTOPページを、忙しい採用担当者の方が短時間で必要な情報を把握でき、安心していただけるように設計しました。この記事では、第一印象で信頼を伝えるTOPページ制作の工夫をご紹介します。
ポートフォリオのデザイン制作
KV（キービジュアル）
ヘッダーにはロゴとメニューをわかりやすく配置。
ロゴの制作過程は別記事にまとめていますので、ぜひそちらもご覧ください。
※ロゴ記事の埋め込みURL
KVはWebデザイナーであるということ、サイト制作ができるということを視覚的に伝えたかったのでPC画面を配置し、その中にキャッチフレーズを入れました。
背景は、得意分野であるサロン系サイトをイメージしていただくために、サロンの画像にしました。私の屋号であるKURA Designがもしサロンだったらこんな雰囲気だろうという架空のサロンを、PhotoshopのAI機能を使ってビジュアル化しています。全体の雰囲気のテーマである「ナチュラル」から森の中にあるサロンを、テーマカラーのピンクに落とし込んだイメージにしました。
ポートフォリオを見る目的は「制作実績」か「人柄」を知りたいと見にくる方が多いと思いまして、「制作実績を見る」「わたしについて」という２つのCTAを設置しました。
Aboutカラム
詳しくはAboutページで見てもらいたいとCTAを設置。CTAは「About」ではなくて「私について」と直感的に内容がわかるようにしました。
とにかく秒で私のことを伝えるカラムとして文章は二言だけに絞りました。二言だけで伝えることをどうしようと考えて、前の記事の「採用担当者に伝えたい８つのポイント」のメモを見直し、得意分野と人柄・強みをバランスよく文章内に溶け込ませています。
また、何ができるかが一番知りたいことだと思うので、使用ツールを見やすく配置し、パッとわかるようにしました。
Worksカラム
こちらも詳しくはWorksページで見てもらうためにCTAを設置。CTAは「Works」ではなくて「制作実績を見る」として直感でわかりやすく。
制作実績を３つに分類し、画像でなんとなく伝わるようにしました。
Webサイト部分にはPC画面を設置、チラシ部分にはチラシを配置、その他部分は悩んだのですが、スマホサイトやレスポンシブができるということが伝わったらいいなとスマホ画面を設置してみました。
Flowカラム
こちらのCTAはわかりやすく「制作の流れを見る」としました。
Flowページではもっと細かく制作の流れがあるのですが、ここでは４つに絞り、イラストと一言のみで表現。イラストはAIで制作し、内容が相違なく伝わるイラストになるようにこだわりました。
流れを背景のグラデーションの濃淡で表現し、視覚的に順序がわかるようにしています。
Contactカラム
お問合せフォームも考えたのですが、今やりとりしているお仕事関係の方はLINEかメールだなと思ったので、２つのアイコンを並べて配置。簡潔にしました。
これでTOPページが完成です。
まとめ
TOPページは採用担当者が最初に見る場所。短時間で信頼を感じてもらえる工夫が大切です。
続いては、さらに“この人に依頼したい”と思っていただける
をご紹介します。
ここまでお読みくださり、ありがとうございました！
💁ポートフォリオ制作に関する記事一覧はこちら
こちらもぜひ合わせてご覧くださいませ
- 採用担当者に信頼が伝わるポートフォリオ制作の流れ｜目的整理から完成まで
- 採用担当者が3分で安心できるデザイン｜ポートフォリオTOPページの工夫
- 採用担当者が安心して依頼したくなるデザイン｜ポートフォリオAboutページの工夫
- 採用担当者が信頼できるスキルを確認できるデザイン｜ポートフォリオWorksページの工夫
- 採用担当者が不安なく依頼できるデザイン｜ポートフォリオFlow & Contactページの工夫
- 【番外編】依頼したくなるデザインの裏側｜ロゴ制作の方法と流れ
こんにちは、KURA Designの倉林あやねです。
普段はWeb制作やデザイン制作をしています。
サロンやお店の空気感や魅力を丁寧にキャッチアップし、それをデザインに反映させるのが得意です。
ページを訪れた方に心地よさや安心感を感じてもらえるよう、使いやすさにもこだわっています。
「自分の魅力を伝えたい」そんな想いを持った方と、一緒に世界観をカタチにできたら嬉しいです。