私たちのWEBサイト設計
WEB DESIGN
WEBサイトは、見た目以上に「情報の整理や届け方」「体験の流れ」が大切です。
今回のリニューアルでは、どのように構成や内容を考えたのかを、
実際に使用した企画・設計書の一部をもとに、このページでご紹介しています。
はじめに
なぜリニューアルが必要だったのか?
音成印刷のリニューアル前のWEBサイトは、構成が古く、スマートフォンに最適化されていないという課題を抱えていました。
また、ウェブ制作を手がける企業として、自社サイトが時代に合っていないことにも問題意識を持っていました。
そこで今回のリニューアルでは、情報の整理・見せ方の改善そしてブランドイメージの向上の3点を主要なテーマに据えました。

現サイトの分析
現サイトを見つめ直して見えたこと
リニューアルにあたって、まずは現サイトの印象や課題を洗い出しました。
「古い」「何をいいたいかわからない」といったネガティブな面がある一方で、「人の写真がある」「社内の取り組みや活動が掲載されている」といったポジティブな面もありました。
これらの分析結果をもとに、良い点をさらに引き出しつつ、課題を解決する方向でサイト設計を進めることにしました。


新サイトへの設計に向けて
自社をあらためて見つめ直す
サイトを設計する前に、まず「私たちは誰に何を伝えるべきか」を再確認しました。
印刷だけでなく、企画やウェブ制作もできること。
地域とのつながりや柔軟な対応力など、普段は言語化されていない強みも洗い出しました。
そうした自社らしさをベースに、「信頼感」と「親しみやすさ」のバランスが取れたWEBサイトを目指すという明確な方向性が定まりました。


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


ワイヤーフレームの作成
ページの流れを考える
各ページの情報構成を考える段階では、ワイヤーフレームを用いて
「どんな順番で情報を届けるか」「どうやって次のアクションにつなげるか」を設計しました。
特にファーストビューでは、何を見せれば自社の印象が伝わるかにこだわり、無駄をそぎ落としたシンプルな構成を意識しました。


トンマナの設定
ブランドらしさを見た目で表現する
サイト全体の印象を左右するデザイン面では、カラーやフォントなどのトーン&マナー(トンマナ)設定を行いました。
コーポレートカラーでもある信頼感を持たせるブルー系をベースに使用。
印刷会社でもあることからなるべく多くの色を使いたいという思いもあり、メインカラーを邪魔しない範囲でカラー配色も検討しました。
読みやすく、品のある印象になるよう、フォントや文字の見せ方にも気を配りました。

デザイン設計
デザインに落とし込む
これまで整理してきた内容をもとに、実際のデザインに落とし込みました。
トップページから各コンテンツページまで、情報の流れや導線、トンマナが一貫するように設計。
見る人が「なんかいいね」と感じる直感的な使いやすさと、必要な情報に自然にたどり着ける構成を意識しています。



制作の流れ
ただのデザインじゃない、伝わる仕組みづくり
WEBサイトサイトは、見た目だけでなく、いくつもの工程を経てつくられています。
目的の整理から、設計、原稿作成、デザイン、コーディング、公開準備まで。
ついデザインに目が行きがちですが、その裏には、「何を伝えるか」を考え抜き、段階的に組み立てるプロセスがあります。

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

このページで使用した「WEBリニューアルの企画・設計書」をPDFでご覧いただけます。
WEBリニューアル企画・設計書
リニューアルにより、自社の強みや取り組みが少しでも伝われば幸いです。
今後も情報発信と使いやすさの向上に努めてまいります。
ホームページ制作などにご興味のある皆さまからの、ご相談やお問い合わせもお待ちしております。