制作の目的

ハロートレーニングで学んだことや身についたスキル、制作実績などを分かりやすくまとめ、就職活動に用いてアピールの材料とする。

ターゲット

新しいWebデザイナーを採用したいと考えている採用担当者の方。他業務と兼任して多忙を極める採用担当者の方。

担当範囲

要件定義、デザイン、コーディング、サーバー契約・ドメイン取得、WordPress化

制作の意図

ターゲットの導線を考えた際、まず初めに「この求職者はどんな作品を制作するのだろう」と制作実績を確認すると考えました。そして「この作品を制作したのはどんな人だろう」と制作者について知りたくなると考え、ファーストビューの次に制作実績、次にプロフィール、最後に連絡先の順番にセクションを並べました。

次にヘッダーのメニューは項目を３つに絞り、日本語表記にしました。簡潔にすることで迷うことなく目的地に到達できるよう工夫しています。なお、レスポンシブデザインではあえてハンバーガーメニューを取り入れていません。項目が３つなのでヘッダーにも余裕があり、わざわざユーザーのタップ動作を増やすメリットがないと考えたからです。

制作実績はJavaScriptでカテゴリーリストを作成し、ターゲットが閲覧したいカテゴリーを絞れるようにしています。また、ファーストビューから制作実績までスクロールすると、トップページに戻るボタンが右下に表示されるようにしました。

インデックスのプロフィールは簡潔に表記しており、興味を持たれたら「詳しく見る」ボタンをクリックして頂き、下層ページにジャンプする仕様となっています。

連絡先にはメールアドレスとSNSのアイコンを設置しました。なお、SNSではバナートレースの実績を投稿していたり、日々の積み上げをポストしています。

下層ページですが、制作実績ではモックアップの画像を大きく置き、次にデモサイトへのリンクと解説、最後にデモサイトのスクリーンショットもしくはバナーを並べました。
プロフィールではスキルや強みを記し、最後に５月から始めたバナートレースの成果物一覧を掲載しています。


サイトのメインカラーはグレー寄りの青色にし、落ち着きや穏やかさ、誠実さなど、制作者の性格を表現しつつ、シンプルなサイトにスタイリッシュな印象を与えています。
メインのフォントは游ゴシック体にし、長文でも読みやすいスタンダードなゴシック体を選びました。なお、見出しは可読性と視認性を備えたNoto Serif JPにし、セリフ体の伝統的な印象から信頼感を演出したいと思い、選びました。

作業期間

２週間

使用ツール

Figma / VSCode / WordPress / Photshop / Illustrator / Canva / After Efects / Lottie Files