閉じる

多言語コーポレートサイト・事業部サイト

CLIENT
新明和工業株式会社様
CATEGORY
サイト構築 / MT導入
URL

OUTLINE

外国語サイトを含めた
大規模サイトをレスポンシブ化。

コーポレートサイト、10の事業部サイト(日英中の3言語)、さらに6つの現地法人サイトをレスポンシブ化。さらにニュースエリアのCMS化を実施しました。各サイトでデザインの統一を図るため、コンポーネント設計を採用。公開後の運用時に使用していただくため、スタイルガイドも納品しています。

MISSION

どの言語、どの事業部を見ても
統一感のある表現に。

リニューアル前の各サイトでは、事業部ごとに構成や文言、デザインにばらつきがありました。そこで、レスポンシブ化によるスマホ対応に合わせて、統一感ある見え方にすることをご提案。大規模なリニューアルを効率的に進めるため、ページの各要素をパーツ化して展開するコンポーネント設計を採用することにしました。

制作フローのご説明と
ご要望のヒアリングを丁寧に実施。

大規模リニューアルをスムーズに進めるため、まずは各事業部担当者様からご要望をヒアリングすると同時に、「PC/スマートフォン」でほぼ同じ要素、同じ並びとするレスポンシブ実装の特徴をご理解いただくことからスタートしました。また、今回はコンポーネント設計を採用することとしため、「画面ごとにデザインラフは作成しない」「どうしても必要な箇所を除いて、事業部ごとに個別デザインは作成しない」といったルールもご説明。実制作にあたっては、事前にパーツデザインや、サンプルページの確認のみを行い、後は基本お任せいただくようなフローとしました。

全ページをチェックして
必要なコンポーネントを洗い出し。

コンポーネント設計を採用する場合に肝となるのが、全ページをチェックして必要なコンポーネントを洗い出し、その使い方などによって分類、整理し、コンポーネント集を作成する作業。ここでしっかり洗い出しと整理ができていないと後々のページ量産時にパーツが足りない、どれを使っていいかわからない、などの問題が出てきてしまいます。そのため、最もベストな表現を叶えられるよう、全ページをくまなく確認、検証する作業を徹底しました。

開発環境を外注パートナーや
クライアントと共有し品質を担保。

プロジェクトは約1年という長いものであり、その期間中には社内でも10名以上、その他、外注パートナーさんやクライアントのシステム部署も含めて、多くの人がページの制作や更新に携わることになりました。そこで開発の効率化やアウトプットの品質を均一にするために、gulp、pug(jade)、sassといったタスクランナーやプリプロセッサを導入。開発環境を含め、Gitでソースのバージョンを管理することで、場所、時間、スキルに関わらず、どの関係者でも常に同じ状態で作業できるように整えました。また、開発環境に慣れていない外注パートナーさんやクライアントにも使っていただくために勉強会を実施。納品後の運用でも、その開発環境を継続して利用していただいています。

RESULT

ワイヤーとスタイルガイドの組み合わせで
大量ページを量産。

静的HTMLファイルは1500枚以上にも上るため、まずはパーツやコンポーネントを集めたHTML形式のスタイルガイドを準備。さらにページの構成はワイヤーで設計し、HTML量産はワイヤーとスタイルガイドで行うことで、デザインファイルを極力減らすことを目指しました。コンポーネントを組み合わせるだけでページができるので開発効率が上がるだけでなく、ディレクターやクライアントも素早く制作できるようになるというメリットも。また、ワイヤーや原稿の制作、共有はSketchやZeplinといったツールを活用しフレキシブルに行いました。

TOP