本文へ移動
完了

FIELDコーポレートサイト / CMS / SVGアニメーション

東西産業貿易株式会社 Webサイト

輸入食品と産業設備にまたがる事業情報を整理し、社内更新可能なCMSとSVGアニメーションを実装した企業サイト。

DESKTOP
東西産業貿易株式会社 WebサイトのPC版画面
MOBILE
東西産業貿易株式会社 WebサイトのSP版画面

OVERVIEW

幅広い事業の全体像を伝えながら、各分野の情報へ迷わず移動でき、継続的に運用できるサイトをつくる。

Period
2020.4–2020.8
Status
完了
Role
システム設計 / フロントエンド / CMS構築 / テスト / メンテナンス
Field
コーポレートサイト / CMS / SVGアニメーション
Technology
WordPress / PHP / MySQL / JavaScript / jQuery / SVG

ORIGIN

発端

東西産業貿易株式会社は、輸入食品、養鶏システム・鶏舎設計施工、食肉プラントなど、食と生産現場に関わる複数の事業を展開しています。性質の異なる各事業を一つの企業サイトへ整理し、企業全体の姿と個別事業の情報を接続する必要がありました。

IDEAL EXPERIENCE

目指した体験

閲覧者が企業の事業領域を俯瞰したうえで、目的に応じて食品、設備、施工などの情報へ迷わず移動できる状態を目指しました。また、公開後にクライアント自身が最新情報を継続的に発信できることも、サイトを成立させる条件としました。

ROLE

担当

BLOOMARK在籍時に、エンジニアとしてシステム設計、フロントエンド実装、WordPressによるCMS構築、テスト、公開後のメンテナンスを担当しました。デザイナー1名、エンジニア1名の体制で制作しています。

CMS

社内で更新できる運用設計

最新情報などをクライアント自身が更新する運用を前提に、WordPressでCMSを構築しました。公開時の見た目を完成させるだけでなく、専門知識がなくても継続して情報を更新できることを重視しています。

IMPLEMENTATION

SVGアニメーションとブラウザ対応

トップページでは、複数の事業領域を視覚的につなぐ複雑なSVGアニメーションを実装しました。当時の対象環境に含まれていたInternet Explorerでも表現と動作を維持できるよう、ブラウザ間の差異を検証しながら調整しています。

RESULT

完成

2020年4月から8月にかけて設計・制作し、公開後のメンテナンスにも携わりました。複数事業の情報設計、クライアントによる更新運用、SVGを用いた視覚表現、旧ブラウザ対応を一つの企業サイトとして成立させたProjectです。

FACTS

Period
2020.4–2020.8
Status
完了
Role
システム設計 / フロントエンド / CMS構築 / テスト / メンテナンス
Field
コーポレートサイト / CMS / SVGアニメーション
Technology
WordPress / PHP / MySQL / JavaScript / jQuery / SVG