[自主制作]架空の採用サイト
クラウドソーシングでの募集案件をもとに、架空の採用サイトを作成しました。
依頼内容
| 目標 | 新入社員が入社すること |
| 目的 | どんな人が働いているか、どんな仕事をしているかを認知してほしい |
| 工程 | デザイン・コーディング・レスポンシブ対応 |
| 作業ボリューム | 5ページほど |
| 提供素材 | サイトマップ |
| ターゲット | 大卒、中途採用の20~30代男女 |
| カラー | 自社サイトとはデザインから配色まで雰囲気を変えたい。緑色は使ってほしい |
デザイン
デザイン制作期間：2日
まずは手書きでラフを描き、参考サイトを見てブラッシュアップしました。
その後Figmaに書き起こしました。
参考サイト
②https://recruit.horiba.com/recruit/index.html
若い世代向けの①の色使い・グラデーションをベースにしつつ、30代も対象なので幼い印象になりすぎないよう②の落ち着いた雰囲気も意識しました。
①と②の中間の雰囲気を目指しました。
ベースカラー/フォント
メインカラー: #67c0d7;
サブカラー: #baf8e1;
日本語フォント: “Noto Sans JP”, sans-serif;
英数字フォント: “Allura”, cursive;
若々しい色とグラデーションを使用しました。
日本語フォントはきちんとした企業らしくNoto Sans JPを使用しました。
画像に被せる装飾として、筆記体の英数字フォントAlluraを使用しました。
使用素材
| サイトマップ | 依頼通り |
| 画像 | 写真AC |
| 文章 | ChatGPT |
| ロゴ | Canvaで見たデザインを参考に、Photoshopで作成しました。 |
コーディング
制作期間：1週間
CSS
- CSS Loaders（ローディング素材集）
- animation（ページ遷移時にふわっと表示）
- scale（背景が流れるボタン）
JavaScript
- .querySelectorAll()（社員紹介のモーダル）
- window.onload（トップページのローディング）
jQuery
- $(window).scrollTop()（「TOPへ」ボタン）
- $(window).scroll（フェードイン時の動き）
- $(“.openbtn”).click（グローバルナビ）
- $(‘.tab li’).find(‘a’).each（タブメニュー）
jQuery+その他ライブラリ
- Vegas Background SlideShow（トップページの動画）
- slick（トップページのスライド）
- jquery.cookie（1日の初回のみローディング）