架空のビルメンテナンス会社のHPをコーディング (Figma)
架空のビルメンテナンス会社のHPをFigmaデザインよりコーディングしました。デザインカンプからコーディングし、それをオリジナルデザイン化しました。 工夫したポイントなどは下記をご覧ください。
目次
1. サイトURL、認証パスワード
2. サイト名、サイトイメージ画像
3. 制作概要
4. 工夫したポイント(コーディング)
5. 工夫したポイント(オリジナルデザイン化)
1. サイトURL、認証パスワード
下記URLからご確認いただけます。リンク先にはBasic認証をかけていますのでユーザー名とパスワードのご入力をお願いします。
ユーザー名：hrsb
パスワード：hrsb
2. サイト名、サイトイメージ画像
サイト名：採用特設サイト｜ASビルサービス株式会社
3. 制作概要
制作時期：2024年8月
制作時間：170時間
ページ数：12ページ
作業内容：コーディング、クロスブラウザテスト、サーバーアップロード
使用ツール：VScode、Figma
使用言語：HTML、CSS、SCSS、JavaScript、jQuery、WordPress
4. 工夫したポイント(コーディング)
WordPressを使用してオリジナルテーマを作成し、コーディングを行いました。
投稿機能では、デフォルトの投稿機能とカスタム投稿機能の両方を活用しています。特に、カスタム投稿機能を使用した社員紹介ページでは、カスタムフィールド機能も組み合わせ、保守管理しやすくなっております。
また、パンくずリストを実装し、ナビゲーション性能を向上させています。一部のページでは、パンくずリストのリンク先や表示されるタイトルをPHPを用いてカスタマイズし、コンテンツの一貫性と利便性を確保しました。
さらに、スムーススクロールやページネーション、ハンバーガーメニューの実装を行うことで、サイト訪問者が快適に操作できるデザインを心がけました。
最後に、パソコンだけでなくスマートフォン（iPhone・Androidの両方）での表示確認を行い、デバイスに応じたレイアウトの崩れがないことを確認しました。
5.工夫したポイント(オリジナルデザイン化)
- 基本的にフォントはゴシック体だが、一部堅い印象を持たせるために明朝体を使用しました
- 信頼感や落ち着いた印象を与えるために背景は基本的に白や薄いグレーを使用しました