ANTONIO KUBO ALFORDのポートフォリオ

架空の人材会社「Career Way」のTOPページと下層ページのデザインとコーディングです。

デザイン / コーディング

Figma / Photoshop / Visual Studio Code

サービスの認知 / 無料キャリア相談への誘導

デザイン：3週間（Topページ＆下層ページ合わせて2ページ）
コーディング：1カ月

都心在住の20代後半～40代の現状への不満（給与面、キャリア面）を抱えている営業職の男性

・サイト全体の配色は、紺系をメインカラーとして反対色の黄色系を採用しました。紺系を使うことで知的で落ち着いたイメージとともに、ユーザーに向けてサービスへの誠実さを与える意図があります。黄色系でメリハリをつけてユーザーに情報を新鮮に伝えるようにしました。

・ヘッダー横とメインビジュアル下にCTAボタンを設置しています。無料キャリア相談を早い段階で意識づけさせてアクションを起こさせやすくしています。またボタンを反対色の黄色系で作成することで、メリハリで視線が集まりやすくしています。

・最初のセクションの「キャリアウェイとは？」の見出し部分の下線を右向き矢印しました。これは社名のWay（道）と右方向（未来）をイメージしており、サービスを通してキャリアを良い方向に向かわせて行くという想いを込めました。

・TOPページでは図形や写真を変形させ、ずらしながら配置をしている箇所があります。ページ内に動きを出しユーザーの関心を高めて興味を引き付ける事が目的です。

・サービス紹介ページはシンプルなデザインです。これはサービスの内容をユーザーに届けることを意図しているためですが、下記実装部分の工夫点により機能的かつ動きのあるページにしています。ユーザーには情報の可読性とともにページを回遊する楽しさを感じさせています。

・サービス紹介ページではパンくずリストの設置をしています。ユーザーにサイト全体の行き来のしやすさを感じてもらえることを狙っています。

・画面のスクロールに応じて各要素がフェードインしてくる仕様にしており、視線を誘導させる狙いがあります。

・Q＆Aセクションにはアコーディオンメニューを実装しています。セクションをコンパクトにまとめ、ユーザーが必要だと思った情報のみを選択できるようにしています。

・画面右下にページ最上部へ遷移するためのボタンを設置しました。いつでもメインビジュアルから無料キャリア相談を受けられるようにするのが意図と、ページ内移動のストレスを軽減させる狙いがあります。

・レスポンシブではハンバーガーメニューで、スマホユーザーの直感的な操作に合わせています。

・サービス紹介ページのページ上部サービスアイコンをクリックすると、該当するセクションに移動するようにしており、知りたい情報に瞬時に辿り付けるようにしました。