![システム会社ホームページ制作実績](https://dream-net.org/result/wp-content/uploads/2024/06/grant-pc.png)
- category
- システム開発
- 制作期間
- 約3ヶ月
- URL
- https://www.grant.co.jp/
ご相談内容
10年以上前に弊社でホームページの制作を行ったシステム会社様より、ホームページリニューアルのご相談をいただきました。
自社開発を行ったシステム商品の紹介用ホームページなどは、最新の状態を保ってていますが、オフィシャルサイトのリニューアルは後回しになっている状態でした。
取引先や求職者が閲覧した際に10年以上前のホームページでは、会社の雰囲気を正しく伝えることができない状況なので、いよいよホームページのリニューアルが必要ということでした。
HTML等の編集は自社で行えるため、CMS等のシステムは導入せずに、シンプルな形式でのホームページで問題ない、デザイン面を大幅に改善し事業内容についても最新の内容に更新したいとご要望いただきました。
リニューアル前
![リニューアル前](https://dream-net.org/result/wp-content/uploads/2024/06/grant-old-1.png)
制作当時は閲覧者のモニターも小さかったため、ホームページの横幅も狭い状況でした。また、スマートフォン対応が実施されていないため、スマートフォンでホームぺージを閲覧した際には、パソコン版のホームページが縮小されて表示されるため見難い状況でした。また、メインイメージはFLASHで作成しておりましたので表示に問題がある状態でした。
トップページリニューアル後
![リニューアル後](https://dream-net.org/result/wp-content/uploads/2024/06/grant-pc.png)
現代のモニターの幅に合わせて、画面いっぱいに情報が表示される仕様でデザインを制作しました。読みやすいようにフォントサイズを大きく設定しています。
また、当初FLASHで作成していた動画についても、MP4の動画に変更しています。当初より、閲覧者の通信環境が改善されているため映像も問題なく表示されています。
ホームページのリニューアルについて
10年以上前に作成したホームページなので、ページ構成も相当古く読みにくい状態でした。シンプルな構造だったため10年以上問題なく表示され続けていました。
デザインについては、システム会社らしくスタイリッシュでカッコいい雰囲気で作成して欲しいとご依頼いただきました。
一目でシステム会社と分かるようにプログラム言語が映像で流れ、黒を基調にスタイリッシュながらカッコの良い雰囲気でデザイン制作を行っております。
情報が画面いっぱいに表示されるため、インパクトがあり閲覧者の記憶に残るように心がけています。
HTMLの知識があるということで、特にCMS等は導入せずにシンプルな構成で作成していますので、構築費用は抑えることができています。
各サービス紹介ページについても、余白を広く使用し読みやすいように心がけて制作しています。
- ・取引先、求職者など閲覧者に対して信頼を感じていただけるデザインを心がける
- ・HTMLベースのシンプルなホームページ構成
- ・スマートフォン対応も実施されていないためスマートフォンでもストレスなく閲覧できるようにする
今回の要望のまとめ
サービス一覧
![サービス一覧](https://dream-net.org/result/wp-content/uploads/2024/06/grant-service.png)
目的のサービスに誘導するためのサービス一覧ページです。簡単に目的の情報にたどり着けるように分かりやすい構成で作成しています。
サービス詳細
![サービス詳細](https://dream-net.org/result/wp-content/uploads/2024/06/grant-service-detail.png)
コーナー毎の余白を広くとり、メリハリのあるデザインを心がけ、デザイン性と読みやすさを両立させることを心がけて制作しています。
会社案内
![会社案内](https://dream-net.org/result/wp-content/uploads/2024/06/grant-company.png)
経営理念・代表挨拶・アクセス案内・会社概要・沿革を1ページにまとめています。コンテンツが多くなり縦に長いページとなりましたので、上部にページ内リンクを設置しています。
スマートフォン対応について
スマートフォン対応については、Googleの推奨するレスポンシブ対応を実施しています。
スマートフォン対応の方法としては大きく2つに分かれます。1つ目は、PC版、SP版の2つのホームページを作成し、アクセスした端末を判別しシステムで最適なホームページを表示させる方法です。
もう1つは、ホームページは1つでアクセスした端末の横幅に合わせて、表示されるレイアウトが最適かされるという方法です。
今回は後者の対応を採用しています。メリットとしては、実際に運用するホームページは1つとなるため、管理が簡単になり運用コストを抑えることができます。
PC版をSP版に切り替えると情報量が縦に長くなることになりますが、閲覧者がストレスを感じないように配慮したデザインを心がけています。
![スマートフォンサイトのイメージ](https://dream-net.org/result/wp-content/uploads/2024/06/grant-pc.png)