紡建設グループ｜架空の建設業サイト

サイト情報

※架空サイトのためベーシック認証をかけております。

　お手数ですが下記ＵＲＬからユーザー名・パスワードをご入力ください。

ＵＲＬ：https://wp824966.wpx.jp/tumugu-kensetu 

ユーザー名：tumugu-kensetu

パスワード：tumugu-kensetu111 

制作概要

制作内容：デザインカンプ（中級EX課題）からのコーディングをしたのち、

　　　　　そのデザインを元に題材等を考えて変え半オリジナル化。

制作時間：コーディング　２５時間

　　　　　半オリジナル化　１３時間

ページ数：7ページ

サイト構成：トップページ・職業詳細（４ページ）・お問い合わせ・サンクスページ

使用スキル：HTML・CSS・jQuery・Sass

使用ツール：VScode・Figma

実装内容・工夫した箇所

・レスポンシブ対応

・ファーストビュー（３枚）が徐々に拡大されて切り替わるようにCSSアニメーション

　で実装

・ローディング画面はCSSアニメーションで実装し、ローディングが全て終わらなくても

　３秒後に画面が切り替わるようにjQueryを用いて実装 

・jQueryを用いてハンバーガーメニュー、ドロワーメニュー、モーダルウインドウ、

　スムーススクロール、ページトップボタンを実装

・スクロール途中からヘッダーを上部固定し、背景色・文字色変化

・メールフォームをGoogleFormを用いて実装

・ドロワーメニューとメールフォームでjQueryを用いてバリデーションを実装

・画面幅等で画像とテキストが重なる際視認性を下げないよう

　テキストにシャドウをつけた

・サンクスページ

気を付けた点

デザインカンプからのコーディング

・品質チェックをしっかり行い、修正の手間を省く

　→その結果修正無しで提出することができた

・画面幅が変わっても表示崩れをしないよう意識

・BEMを使用し、修正・管理しやすいコーディングを意識

半オリジナル化

・元のデザインに合うような題材

・題材に合うような画像や色の選択

半オリジナル化について

元々のサイトが採用サイトということもあり、

このデザインを活かすサイトは何か悩みました。

長年建設業に従事しているということもあり、イメージしやすかったので

建設業の企業に依頼されたと仮定して作成しました。

採用サイトということで

年齢問わず仲がいい従業員や企業の明るい雰囲気をイメージして画像を選び

木材をイメージさせる茶系の色を主に使用しました。

ＰＣ表示（トップページ）

ＳＰ表示（トップページ）

サンクスページ

ご覧いただきありがとうございます。