東大阪のフリーランスウェブデザイナー、坂本典子のブログです。

貼りもん屋.comのリニューアル

先日「貼りもん屋.com」という、ネットショップのデザインリニューアルを行いました。実はこのサイト、私の弟が運営する町工場直販のネットショップなのです。

貼りもん屋.com


キャプチャ:貼りもん屋.com

もともとは3年前に「みんなのビジネスオンライン」というサービスが初年度無料でスタートしたタイミングで、ブームに乗って始めたJimdoのサイトでした。(現在ははじめてWeb」という名称でサービスを継続されています)

「貼りもん屋.com」は、工場の通常業務では対応できないような小ロットの取引用に、会社の公式サイト以外にもネットショップがほしいという目的で、弟がコツコツと写真や文章を載せて運営しています。

ただし、3年前に作ったままの旧レイアウトで独自に更新を繰り返していたため、モバイルでの表示もイマイチだったので、新しいレイアウトに変更してリニューアルを行いました。

好きに触り放題のウェブサイト

最初にサイトオーナの弟に聞いたのは「デザイン好きにさわっていい?」の一言。 姉の権力を振りかざしのひどい話ですが「いいで!!!好きにさわって、頼んます」と言ってもらいました。

弟はネットショップの運営をずっとしてきてますが、デザインに関しては素人です。そして私はデザイナーですが「貼りもん屋.com」に関する工場の運営業務については素人です。製造業の町工場直販の雰囲気を打ち出す...というコンセプトを一番に、デザイン的にはすっきりとさせて、できるだけ見やすく分かりやすくを心がけました。

情報を整理しよう

まず手を付けたのはトップページに載せていた項目の整理です。弟を含めてウェブ制作が本業ではない担当者がウェブサイトの更新をすると、どうしても「伝えたいこと」「載せたいこと」を欲ばってしまい、トップページの情報がてんこ盛りになってしまいがちです。情報てんこ盛りはいいのですが、何が一番大切で伝えたいことなのかごちゃごちゃして分からなくなり、結果何も見てもらえないということになってしまいます。またウェブサイト訪問者は必ずしもトップページからアクセスしてくる人だけではありません。

貼りもん屋.comも、ショップの理念やおすすめ商品、発注に関しての注意事項など、伝えたい大事なことが順不同で大きな字で詰め込まれていたので、情報を項目ごとにグルーピングして移動できるものはまとめて別ページに載せるなど、情報の整理から始めました。

私はコンテンツを一度ノートに書き出して、まとめ直したのですが、もしご自身でサイトを運営していて情報がごちゃごちゃしている方は、付箋などを使ってもいいかもしれません。

Jimdoの標準機能を出来るだけ使う

リニューアルにあたって、新しいテーマは「Tokyo」を選びました。トップページだけにメインビジュアルが設定されていて、日本でよく使われているホームページの構造に最初から仕上がっているからです。

また、色や文字サイズなどの細かいデザイン設定は、出来るだけJimdoの標準機能を使うようにして、それに対応できない部分は独自にCSSを書いて、将来システムがアップデートされたとしても、表示が大きく崩れないようにしました。

読む人に伝わる文章には情熱がある

情報整理をしてページ構成は少しだけ変更したのですが、文章や写真などは出来るだけ変更しないようにしました。サイトオーナはネットショップを3年間運営してくる中で、「これは必要だな」「この方が売れるかな」というねらいの元に、がんばってたくさん文章や写真を入力してきています。意味が分かりにくい専門的な文章や、サイズがバラバラな画像は手を入れましたが、内容自体には大きく手を加えないようにしました。

それは今後も積極的に情報を載せていってもらうために、やる気をそぎたくないという気持ちからです。ウェブサイトは見た目のデザインや分かりやすさも大切ですが更新するモチベーションも同じぐらい大切です。

実際に「貼りもん屋.com」には商品である素材の特性や利用方法など、情熱を持って文章が書かれています。少し冗長ではありますが、自分の言葉で商品のことを伝えようという気持ちはとても重要で、読む人にも文章からその熱量が伝わってくると思います。

リニューアル後のあれこれ

そんなこんなでリニューアルを終えたのですが、サイトオーナーの弟には「なんか心なしか洗練された気がしてます」との感想をいただきました。(←いや、だいぶ分かりやすくなったはずですが w)何よりスマホでの見やすさという点で、旧レイアウトからは大分改善されたと思います。

結果はこれから出てくるはずなので、アクセス解析や売れ行きの様子を聞きながら改善していきたいと思います。


投稿者