採用担当者が最も注目するのは“どんな制作ができるのか”という点です。そのためポートフォリオの中でWorksページは大きな役割を持っています。この記事では、私がWorksページを作るときに意識した“見せ方の工夫”や“制作背景の伝え方”をまとめました。

制作実績ページのデザイン

全体のデザイン

（Worksページの全貌はこちら）

ページタイトルは「Works」としていますが、Topページからの流入CTAは日本語で直感的にわかりやすく「制作実績を見る」としています。

制作実績は１件ごとにカード形式にして２行に並べ（スマホだと１行）、開いただけでも４件分のカードが見えるような、そんな配置にしました。

制作実績ごとのデザイン

カードの内容は画像を大きくとり、その画像もPCで見るならPC画面埋め込み、スマホで見る制作物ならスマホの画面埋め込みのデザインにしました。

背景はその案件にあった背景を配置し、よりイメージしやすく。ぼかしを入れて制作物が際立つように工夫しています。

画像下にタイトルを入れ、その下にはタグのように使用ツールと行なったこと（「Direction」や「Design」）を羅列し、『私は何ができるのか』がすぐに伝わるようにしています。

画像をクリックすると、その制作のこだわりや背景などが詳しく記載されているページに飛ぶのですが、お忙しい採用担当者の方が一覧で『この人は何ができるのか』を確認できるように意識してデザインしました。

Contact

ページ最後にはContactカラムを配置し、連絡したいと思っていただけた気持ちをそのままContactページまで行かずとも連絡できるようにしています。

まとめ

Worksページはスキルや実績を具体的に伝える場所です。採用担当者が『信頼できる』と感じられる工夫を盛り込みました。

次の記事では、依頼後の不安を解消する

Flow & Contactページ

の工夫をご紹介します。

ここまでお読みくださり、ありがとうございました！

Webデザイナー Webデザイン ポートフォリオ

💁ポートフォリオ制作に関する記事一覧はこちら
こちらもぜひ合わせてご覧くださいませ

• 
  採用担当者に信頼が伝わるポートフォリオ制作の流れ｜目的整理から完成まで
• 
  採用担当者が3分で安心できるデザイン｜ポートフォリオTOPページの工夫
• 
  採用担当者が安心して依頼したくなるデザイン｜ポートフォリオAboutページの工夫
• 
  採用担当者が信頼できるスキルを確認できるデザイン｜ポートフォリオWorksページの工夫
• 
  採用担当者が不安なく依頼できるデザイン｜ポートフォリオFlow & Contactページの工夫
• 
  【番外編】依頼したくなるデザインの裏側｜ロゴ制作の方法と流れ