【宝飾品パッケージ web制作】東京中央区の大北商事株式会社様｜ホームページ制作9800円～東京台東区のエグゼクティブクリエイション/反響重視のホームページ制作

先日大幅なデザインリニューアルを行いました、ほうせき箱屋さん（東京中央区の大北商事様）の制作時POINTを掲載します。以前よりサイト運営をお任せいただいており、今回は主にビジュアル面のwebリニューアルを実施。

旧デザインの文字サイズは大き目でどちらかというと可愛らしい見せ方が主体でしたが、そのビジュアルから変更し、スタイリッシュ＆上品な打ち出し方を重視しています。また従来のデザインは初期制作から長く経過していたのもあり、ページ横幅が狭い状態でしたがリニューアル時に近年主流のワイドモニターでも左右余白があまり出ないよう、横幅サイズを大きく広げています。

全体的なカラーリングも従来のグレー基調から、落ち着いた高級感の要素を出すために茶系とベージュ色を取り入れました。ジュエリーケース・宝飾品パッケージのサイトということで、そのユーザーイメージに合わせたwebデザインを意識しています。

大北商事様（東京銀座）：宝飾品パッケージホームページ制作実績

トップページデザイン時の注力点について

メインビジュアルは大北商事様でお取り扱いをされているジュエリーボックスの写真をメインに、雰囲気良くデザインレイアウトを組んでいます。中央に大サイズで商品写真を配置し、左右へ画像をイラスト調に加工の上モノトーン調にしたイラストを置きセンス良く仕上げています。

既存デザインでは横書きで大きく英字キャッチコピーが入っていましたが、今回は写真を邪魔しないよう右部へ縦書きでメッセージを載せています。その下の「NEW PRODUCTS」項目の大型バナーも落ち着いた色合いのゴールドとブラウンの中間色にてデザイン。シンプルながらもスタイリッシュ感が際立つ見せ方です。

ホームページの中で、メインコンテンツといえるカテゴリー別商品紹介欄では、新着商品・ジュエリーケース・限定ケース・ジュエリーボックス・ジュエリーポーチ・ウォッチボックス・プロツール等多彩な商品のカテゴリーを紹介画像と共に配置。敢えて商品サイズを少し小さめにし、コメント文字サイズも小さくすることでそれによって生まれる余白を活かしたwebデザインとなっています。

背景色がホワイトで、コンテンツ背景色もうすいグレーレイヤーにすることにより、商品とコメントの視認性が高まり自然とそれぞれの商品カテゴリーへ目がいくようになっています。webデザインを行う上で、サイト訪問者の目線の動きを想定/考慮することは非常に大切です。

トップページ中段では「SHOWROOM」「ORDER」として、東京銀座ショールームに関するご紹介とオーダーメイドのご依頼及びお問合わせリンクメニューを配置。こちらも写真を中心に、メインビジュアル同様イラストスケッチ風に加工されたレイヤーを活用し、お洒落な見せ方を重視しました。

「ABOUT US」「PICK UP」コンテンツは、リニューアルサイトデータUP後の検索上位対策を考慮したtext紹介文、そしてカタログ請求や割引価格商品ページへのリンクがあります。閲覧者が透明感を感じるデザインにて、制作しています。

下層ページデザイン時の注力点

トップデザイン時のPOINTを引き継ぎつつ、下層も各商品画像へ注目が集まる見せ方をとっています。ただデザイン重視なだけではなく、旧サイトからの必要情報の分かりやすさ/見やすさは引き続き出せるよう、考慮しています。トップページよりも下層ページはコンテンツ内容の分かりやすさ/読みやすさへ重きを置いています。

これまで定期的にホームページへ訪れていた利用者がリニューアルサイトが表示された際、違和感・使いにくさ等が極力無いようにすることが重要と考えます。「サイトがリニューアルされて、何だか使いにくくなったな。リニューアル前の方が分かりやすくて良かった…」というケースは案外あります。

こういったマイナスを予防できるよう、ただ新たなレイアウト・新たなデザインで作るのではなく、既存ページの良さをしっかりと分析/認識の上良い部分は無くさないようにしなければなりません。

ついつい目新しさの面を重視してしまうと結果、ターゲットユーザーにとってのマイナスが生じてしまうので注意が必要です。