「株式会社ホクト企画」は、金融機関のATMブースや店舗内装、デジタルサイネージ設置などを手掛ける企業です。
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日
自動化とWeb制作で、貴社の業務効率と成長を実現します!
【プロフィール】
はじめまして、INOと申します。
Google Apps Scriptを使った業務自動化や、HTML/CSS、JavaScript、WordPressなどを使ったWeb制作を通じ、仕事の効率化と魅力的なWebサイト作りをサポートしています。
「手間を減らして、わかりやすく」をモットーに、皆さまのニーズに柔軟にお応えできるよう心がけています。どうぞお気軽にご相談ください!
【経歴・スキル】
●自動化システム開発
- Google Apps Script、スプレッドシート、Slack、Gmailを組み合わせた業務効率化
- 大量データの自動処理やエラーハンドリングによる安定稼働
●Web制作
- HTML/CSS/JavaScriptを使ったレスポンシブなサイト制作
- WordPressでのサイト構築・カスタマイズ・SEO対策
- Figma・Canvaなどを用いたデザインや画像編集
【実績】
●施設見学会リマインド&通知システム
Googleフォームとスプレッドシートのデータを連携し、Slack通知とGmail下書きを自動作成。手動の作業を減らし、迅速かつ正確な連絡を実現しました。
●出勤簿自動更新システム
勤怠情報の自動転記により、1日20分かかっていた作業を約40秒に短縮。転記ミスや計算エラーもほぼなくなり、大幅な業務効率化に成功。
●Web制作実績
ポートフォリオサイトやランディングページ、WordPress構築など、シンプルで使いやすいデザインを心がけ、ブランド価値の向上に貢献しています。
【提供サービス】
- 業務自動化システムの企画・開発
- スプレッドシートとApps Scriptを使ったデータ管理
- レスポンシブWebサイト・ランディングページの制作
- WordPressによるサイト構築、カスタマイズ、SEO対策
【コミュニケーション】
丁寧なヒアリングで最適なご提案をいたします。
自動化とWeb制作を組み合わせ、面倒な作業を減らしながら、見た目も伝わりやすいサイト作りをお手伝いしています。