- 制作背景
-
実在企業様のホームページ制作を担当しました。
会社概要・サービス紹介・採用情報・FAQ・お問い合わせなど、コーポレートサイトに必要なページを一通り構築しました。ユーザーが求める情報にスムーズにアクセスできるよう、情報設計とデザインの両面を意識しながら制作を行いました。
- ターゲット
-
・自社のサービスや会社情報を発信し、WEBサイトを通じて新規顧客を獲得したい企業
・業務効率化や顧客対応のために、システム開発を依頼したい企業や事業者
- デザインコンセプト
-
黄色と青の反対色を基調に、視認性と印象の強さを両立したデザインを採用しました。
シンプルで信頼感を与えるレイアウトにまとめ、余白を活かして情報を整理し、見やすさを確保。さらに、問い合わせや採用ページなど、ユーザーが目的の行動に自然に進めるよう導線設計を意識しました。
- 制作プロセス
-
・リサーチ：様々な企業サイトを調査し、配色・レイアウト・導線設計の傾向を分析しました。特に「信頼感」「情報整理」「問い合わせまでの導線設計」が重要であると学びました。
・構成設計：トップページからサービス紹介・会社概要・FAQ・採用・お問い合わせへ自然に遷移できるサイトマップを作成しました。また、WordPressの自由テーマで制作し、クライアント様が修正できるようにACFフィールドを実装。事業案内・お知らせ・FAQ・採用情報などを、コードを触らず管理画面から更新できる仕組みにしました。
・素材制作：Illustratorでワイヤーフレームを作成後、必要なイラスト素材を購入し調整。さらにPhotoshopで切り抜きや色味を補正し、サイト全体のトーンに統一感を持たせました。
・実装：HTML・CSS・JavaScript・WordPressを用いてレスポンシブ対応でコーディング。PC・スマホの両方で快適に閲覧できるよう最適化しました。
・改善点・気づき：初稿ではイラストやテキストを大きく配置しすぎたため、全体的に大柄な印象となりました。クライアント様から「サイズ感を小さく調整してほしい」とのフィードバックをいただき、バランスを整えました。また、実装後の確認ではスマホ表示時に余白が広すぎたり狭すぎたりして読みづらい箇所があったため、行間や余白を見直し、より快適に閲覧できるよう改善しました。
- 工夫した点
-
・全ページに共通デザインを適用し、企業サイトとしての一貫性と信頼感を意識しました。
・サイト内検索機能を導入し、必要な情報にすぐアクセスできる仕組みを構築しました。採用ページには応募フォームを設置し、求職者がスムーズに応募できる導線を設計しました。
・お問い合わせフォームはプラグインではなくPHPMailerを用いて実装し、将来的な保守や拡張にも対応できる仕組みとしました。
・構造化データを組み込み、検索エンジンがサイトコンテンツを正しく認識しやすいようにしました。
デザイン面だけでなく、実装・SEO・保守性まで含め、総合的に制作を行いました。
- 制作時間
-
デザイン：1週間
コーディング：3週間
- 使用ツール
-
Illustrator／Photoshop／PhpStorm／WordPress
- URL
-
https://l-hd.com/
