WEBサイトは、見た目以上に「情報の整理や届け方」「体験の流れ」が大切です。
今回のリニューアルでは、どのように構成や内容を考えたのかを、
実際に使用した企画・設計書の一部をもとに、このページでご紹介しています。

CONTENTS 01

はじめに

なぜリニューアルが必要だったのか?

音成印刷のリニューアル前のWEBサイトは、構成が古く、スマートフォンに最適化されていないという課題を抱えていました。
また、ウェブ制作を手がける企業として、自社サイトが時代に合っていないことにも問題意識を持っていました。

そこで今回のリニューアルでは、情報の整理・見せ方の改善そしてブランドイメージの向上の3点を主要なテーマに据えました。

導入のための設計シート
CONTENTS 02

現サイトの分析

現サイトを見つめ直して見えたこと

リニューアルにあたって、まずは現サイトの印象や課題を洗い出しました。

「古い」「何をいいたいかわからない」といったネガティブな面がある一方で、「人の写真がある」「社内の取り組みや活動が掲載されている」といったポジティブな面もありました。

これらの分析結果をもとに、良い点をさらに引き出しつつ、課題を解決する方向でサイト設計を進めることにしました。

WEBサイト設計におけるネガティブキーワードとポジティブキーワードの分類図 キーワード分析のステップを示す図
CONTENTS 03

新サイトへの設計に向けて

自社をあらためて見つめ直す

サイトを設計する前に、まず「私たちは誰に何を伝えるべきか」を再確認しました。

印刷だけでなく、企画やウェブ制作もできること。
地域とのつながりや柔軟な対応力など、普段は言語化されていない強みも洗い出しました。

そうした自社らしさをベースに、「信頼感」と「親しみやすさ」のバランスが取れたWEBサイトを目指すという明確な方向性が定まりました。

音成印刷の現状分析を示す図 新WEBサイト設計のコンセプトシート
CONTENTS 04

サイトマップの作成

情報を整理して、構成を考える

WEBサイトに掲載されている情報を洗い出し、どの情報が必要で、どう見せればユーザーに届くかを再設計しました。
サイトを訪れた方が、必要な情報にすぐアクセスできるよう、サイトマップを整理・再構築。

これにより、サイト全体の回遊性が高まります。

音成印刷新サイトのサイトマップ設計図 各記事についての詳細内容
CONTENTS 05

ワイヤーフレームの作成

ページの流れを考える

各ページの情報構成を考える段階では、ワイヤーフレームを用いて 「どんな順番で情報を届けるか」「どうやって次のアクションにつなげるか」を設計しました。

特にファーストビューでは、何を見せれば自社の印象が伝わるかにこだわり、無駄をそぎ落としたシンプルな構成を意識しました。

音成印刷新サイトトップページのワイヤーフレーム1 音成印刷新サイトトップページのワイヤーフレーム2
CONTENTS 06

トンマナの設定

ブランドらしさを見た目で表現する

サイト全体の印象を左右するデザイン面では、カラーやフォントなどのトーン&マナー(トンマナ)設定を行いました。

コーポレートカラーでもある信頼感を持たせるブルー系をベースに使用。
印刷会社でもあることからなるべく多くの色を使いたいという思いもあり、メインカラーを邪魔しない範囲でカラー配色も検討しました。

読みやすく、品のある印象になるよう、フォントや文字の見せ方にも気を配りました。

音成印刷新サイトのデザイン方針とトンマナ設定を示す図
CONTENTS 07

デザイン設計

デザインに落とし込む

これまで整理してきた内容をもとに、実際のデザインに落とし込みました。

トップページから各コンテンツページまで、情報の流れや導線、トンマナが一貫するように設計。

見る人が「なんかいいね」と感じる直感的な使いやすさと、必要な情報に自然にたどり着ける構成を意識しています。

音成印刷新サイトトップページの新デザイン1 音成印刷新サイトトップページの新デザイン2 音成印刷新サイト中ページの新デザイン
CONTENTS 08

制作の流れ

ただのデザインじゃない、伝わる仕組みづくり

WEBサイトサイトは、見た目だけでなく、いくつもの工程を経てつくられています。
目的の整理から、設計、原稿作成、デザイン、コーディング、公開準備まで。

ついデザインに目が行きがちですが、その裏には、「何を伝えるか」を考え抜き、段階的に組み立てるプロセスがあります。

音成印刷新サイトの作成の工程図

こうした多くの工程を経て、
今回のWEBサイトは形になっていきました。

音成印刷新サイトの完成イメージ

このページで使用した「WEBリニューアルの企画・設計書」をPDFでご覧いただけます。

WEBリニューアル企画・設計書

リニューアルにより、自社の強みや取り組みが少しでも伝われば幸いです。
今後も情報発信と使いやすさの向上に努めてまいります。

ホームページ制作などにご興味のある皆さまからの、ご相談やお問い合わせもお待ちしております。