【ウェブサイト】 株式会社ホクト企画 コーポレートサイト（トップページ）を制作しました

URL
https://ogiinoue.github.io/hokuto_toppage/

【トップページの技術的ポイント】

1. HTML/CSS設計
セマンティックHTMLを採用し、検索エンジンや支援技術にも優しい構造設計。
BEMライクなクラス設計で、拡張・保守しやすいCSSに。
リセットCSSを適用し、ブラウザ間の表示差を吸収。

2. レスポンシブデザイン
スマホ・タブレット・PCそれぞれに最適化したレイアウト。
flexbox中心のレイアウト設計で、コードのシンプル化と柔軟なデザイン変更に対応。

3. jQueryでの動きの実装
ハンバーガーメニューはjQueryで開閉処理を実装。
メニュー展開時のスクロールロックなど、スマホユーザーの操作性にも配慮。
ページトップボタンの表示・非表示もスクロールイベントで制御。

4. 画像管理とパフォーマンス最適化
画像はデバイスサイズに応じて最適な解像度を選択。
Google Fontsで和文・欧文の統一感と読みやすさを確保。
画像フォルダの構成をルール化し、運用時の迷いを防止。

5. コーディング全体の工夫
header・footer・navなど共通パーツ化を前提としたHTML設計。
metaタグ設定（ビューポート・X-UA互換・robotsなど）で、基本SEOとスマホ最適化をクリア。
CSSとJavaScriptを外部ファイルに分離し、更新・保守をしやすい構成に。

【デザイン面での工夫】
企業イメージを伝える施工写真を大きく配置し、視覚的な信頼感を重視。
事業ごとにテーマカラーを設定し、「何をしている会社か」が一目で伝わる構成。
テキストのフォントサイズ・行間にもこだわり、スマホでもストレスなく読める文

【技術的な工夫】
✅ 後から他ページを追加しやすい設計
トップページのみの依頼だったが、「今後、会社概要や事業ページを増やすかもしれない」との要望を考慮し、ヘッダー・フッターを共通パーツ化して柔軟に拡張できる構成に。

✅ 実運用を考慮した軽量化と保守性
画像圧縮・CSS/JSの軽量化・読み込み最適化など、運用中の負荷も考慮した実務仕様。

カテゴリー

ホームページ制作・作成

業種

工業・製造

制作期間

14日

参考価格

90,000 円

最終更新日

2025年3月9日