ANTONIO KUBO ALFORDのポートフォリオ

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

デザイン / コーディング

Figma / Photoshop / Visual Studio Code

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

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

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

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

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

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

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

・ヘッダー横とメインビジュアル下にCTAボタンを設置しています。
→無料キャリア相談を意識づけさせてアクションを起こさせやすくしています。ボタンは反対色の黄色系でメリハリを付けて注目度を上げています。

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

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

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

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

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

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

Career Way