背景・目的
フリーランスWebデザイナーとしてお仕事を受注していくために、私自身をお客様に知ってもらい信頼を獲得する。
ターゲット
Webデザインを必要としているすべての人。
デザイン
落ち着いた安心感を与える緑をベースカラーとし、老若男女にわかりやすいデザインを目指しました。過度な装飾はいれず、できるだけシンプルに情報が正確に伝わるよう意識しました。
構築環境
CMS : WordPress
使用ツール
Canva（ロゴ制作）
製作範囲と期間
リサーチ、構想 : 2週間
デザイン : 2週間
WordPress実装 : 3ヶ月
制作時期
2024年4月 ~ 2024年8月
ポイント
HOME
・サイト・ロゴファーストビュー
お客様からの信頼を得るために、私自身の名前をサイト名、ロゴデザインに含めました。ファーストビューをどの画面幅でもレスポンシブに対応し、スクロール時は以降のページコンテンツの土台として下に敷してあります。私のデザイン、仕事にかける想いを礎としました。
・作品紹介カルーセル
複数の作品をカルーセルで紹介することで、より多くのお客様の目に留まるようにしました。
WORKS一覧
・カテゴリーでの絞り込み他
お客様が興味のある作品をカテゴリー単位で絞れるようにしました。また、スマホ幅で表示時、スクロールが発生するとヘッダーロゴが隠れ、メイン画面をより広くとれるようにしました。
・カテゴリーごとの画像切り替え
複数のカテゴリーにまたがった作品ページのアイキャッチ画像（サムネイル）を、カテゴリーごとに（複数枚）設定、絞れるようにしました。一覧画面では、作品ごとに複数枚のアイキャッチ画像（サムネイル）をカルーセル表示できるようにしました。
WORKS詳細
・PC版/スマホ版切り替え
PC版/スマホ版両方のデザイン画像を直列に並べると長くなり過ぎてしまうので、アイコンで表示する画像を切り替えられるようにしました。
・PC版/スマホ版モックアップ
PC版/スマホ版モックアップを用意し、お客様に実際のUIイメージが伝わるようにしました。また、モックアップ画面内でスクロールできるようにしました。
ABOUT
・プロフィール情報
自己紹介が堅くなり過ぎてしてしまったので、少しだけ遊びゴコロを入れてみました。
お問い合わせ
・お問い合わせ内容テキストエリア
お問い合わせ内容のテキストエリアが、入力されたテキスト量に応じて自動で伸縮するようにしました。
・プライバシーポリシー・利用規約
お問い合わせページ側での二重管理が発生しないよう、プライバシーポリシー・利用規約コンテンツを動的に取得、表示しました。また、お問い合わせ時、お客様が個人情報の含まれた内容を送信される前に、プライバシーポリシー・利用規約を必ずご確認、ご同意いただけるUI/UXとしました。