南関東学院(職業訓練校サイトサンプル)

南関東学院PC)
南関東学院(TB)
南関東学院(SP)

サイトはこちら

作成時期

2021年7月(リニューアルの企画部分~記事作成)
2021年9月(デザインカンプ)
2021年10月(コーディング)

作成時間

合計時間:約99時間
□企画・記事作成 :4.5時間

□ワイヤーフレーム(XD):4時間
□スタイルガイド:2.75時間(トップ×3サイズ、下層×3サイズ)
□デザインカンプ(XD) :10時間(トップ×3サイズ、下層×3サイズ×2種類)
□写真加工・画像作成など部品:3h(1h(ロゴ)+2h(写真加工))

□テーマ作成(コーディング)75.5時間:
・functions.php:5.75時間(トップのアクションフックなど4h+その他1.75h)

・ブロックスタイルのJavaScript作成:1.5時間(22ブロック。sectionブロック:6種類、グループブロック:6種類、親カラムブロック:4種類、画像ブロック:1種類、ボタン:2種類、見出し:2種類、段落:1種類)

・独自プラグインを作成してセクションブロックを作成:2h

・記事:合計9時間(トップ:3時間+webデザイン科1時間(画像掲載含む)+講師紹介遷移1時間+よくある質問2時間+他ページ:2時間)

・php(html):合計7時間(ベースのphp作成:4時間+トップphp:2時間+固定ページphp 0.5時間)

・CSS:合計40.75時間
共通9時間
(header4時間+footer4時間 +ハンバーガー1.75時間+ホバーボタン0.25h)
トップ18.5時間
(通常1.75時間+スタイルを当てる部分4時間+レスポンシブ5.5時間+ホバーズームCSS:1.5時間+画像、ブログボタン(1.75h)1文字ずつタイピングのように出るテキスト要素 4時間)
固定ページ13.25時間※スタイルにはめ込んだ部分も含む
(ベース:4時間
ブロックスタイルのCSS作成:1.5時間
webデザイン科CSS:3.25時間
講師紹介1.5時間
お問い合わせ:20分
よくある質問:1時間
見学案内0.25時間
入学案内:1.25時間
プライバシーポリシー:0.75時間
アクセス1時間)

・JavaScript:9.5時間
(JSスライダー1.5時間
フェードインJS:4時間
ヘッダーの色変化:3時間
ハンバーガーJS:0.5時間
トップに戻るボタン0.5時間)

□修正:文章修正:入学までの手順1時間
□コーディング、記事の修正2.25時間

作成期間

約3か月(リニューアルの企画部分~記事作成1か月、デザインカンプ1か月、コーディング1か月)

使用アプリケーション

VSCode、XD(ワイヤーフレーム・カンプ・スタイルガイド作成)

使用言語・CMS

WordPress、HTML、CSS、JavaScript

WordPressで独自のテーマサンプルを制作しました。
ブロックスタイルを自作することによって、作業を効率よく進められるように努めました。
プラグインを制作することで「sectionタグ」という、独自のタグを入れられるようにしました。

・コーディング面としては、JavaScript部分は一切プラグイン・ライブラリを使用せずに作成しております。
特にトップページでは「フェードインスライドショー」、「スクロールすると下の要素がフェードイン」が該当します。
またデザイン面と見やすさを両立させるため、すべてのページのヘッダーバーはスクロールすると背景色が透明→白へ変化します。そちらもJavaScriptで実装しました。

・各画面にCTAにつながるリンク(「見学案内・お申し込み」「お問い合わせ」)は多くのページの下部に入れています。

・すべての下層ページのヘッダーに写真を入れることで、各ページの印象をつけています。オーバーレイをいれることでヘッダーバーやページタイトル文字のの邪魔をしないよう、工夫しています。