本瓦造船株式会社様 Webサイトリニューアル

スマートフォン・タブレット対応

以前のサイトでは、スマートフォンやタブレット表示に最適化されていなかったため、今回のリニューアルではレスポンシブWebデザインを採用し、マルチデバイスへと対応しました。
本瓦造船様は、BtoBの企業であるため、アクセス解析を見るとまだPCからのアクセスの方が多いですが、公開後もスマートフォンから3〜4割程度閲覧されています。
スマートフォン表示の際は、通信に負担がかからないよう、トップページの動画を画像に切り替える工夫を取り入れています。

デザインコンセプト

トップページのメインビジュアルでは、造船業の大きな見所の一つである進水式の様子や工場の全体像、鞆の浦を広く見渡せるよう、ドローンによる空撮映像も取り入れました。ほぼすべての写真を独自に撮影しており、スタッフの写っている写真も多く起用しているため、業務や会社の雰囲気が伝わりやすいのではないでしょうか。
イメージカラーは、ロゴカラーに統一するために赤色を使用しましたが、見やすさ確保のためコントラストに配慮し、Webでは少し深みのある色に変更しています。

設計・CMS

サイトを作る上で一番肝となる情報設計にしっかりと時間をかけて、担当者様と何度も打ち合わせの場を設けて進めていきました。
本瓦造船様にとってのお客様や、就職活動中の学生さんにとってわかりやすい表現を心がけ、その方々の見たいものにフォーカスして内容を精査し、全体の構成を決めています。
また、サイトの中でも迷わず目的のページに辿り着けるよう、ナビゲーション / 導線を極力シンプルに設計するよう心がけています。下層ページへもダイレクトに遷移できるよう、ドロップダウンメニューを採用しました。
運用面においては、本瓦造船様側でサイトの更新ができるよう、Wordpressを導入しました。「お知らせ」や「建造実績」の追加は、htmlの知識がなくても誰もが簡単に更新できることを目標に、プラグインを導入して改良しています。
特に、建造実績での船の追加は、簡単な画像の選択と文字の入力だけで追加出来るよう工夫しました。