webデザイナーとshop運営をしています。
このブログでは主に「日々の制作過程」や、「勉強のお話」。
ときどき子育て生活のことを書いてます。
web制作

お花屋さんのwebサイト制作① 情報設計

お花屋さん

毎日PCの前で作業しています。
でも気づくと、またまたアウトプットを忘れていたので、
ここで私なりの制作過程を残していきたいと思い、ブログに書くことを決めました。

ただのお母さん
ただのお母さん
よし!書くぞ!!

※注意
このweb制作シリーズは、初心者にありがちなコンセプトワークを表面だけサラッとやって、ワイヤーフレームも書かずにすぐにデザインに着手してしまった失敗例の内容です。

そのため手戻りが多く、全く参考にならない記事かもしれませんが、これも経験。
次からはこうならないように自戒の意味も込めて、ありのままを書いていこうと思います。

なぜ「お花屋さん」のweb制作なのか

以前、お花販売のネットショップを開店していたんです。

当時は楽天サイトとASP(アプリケーションサービスプロバイダ)を使った自社サイトの2店舗を経営していました。

そんな中子どもを授かりましたが、つわりが酷く、楽天サイトを手放し、出産後も育児で手が回らなく、ASPサイトも一時休業というかたちで一旦お花屋さんをたたみました。

そんな一連から早5年。

webデザインの勉強をはじめたことから、webデザイナー1本に専念しようかとも思いましたが、お花屋さんを再経営することは、私のweb制作のいろいろ試せる場所にもなる!と考え直し、1からまた自社サイトを立ち上げる決意をしました。

「お花屋さんのホームページ」はどんな内容?

まずは簡単に、どんなホームページを作っていくのかを書いておきます。

コンセプト お客さまがワクワクしながら
自分のお花を選ぶことができるようになるお花屋さん
商品 ウェディングアイテムを中心としたフラワーアレンジメント
ホームページ内容 主にお花の選択方法を提案する(販売サイトは別でもつ)
ターゲット 30代半ばの女性

web制作のはじめはヒアリングと情報設計

web制作はヒアリングと情報設計なしでは話になりません。

出てきた答えによって、全然違うサイトになるので
ここを甘くやってしまうと簡単には後戻りできないです…苦笑

ただのお母さん
ただのお母さん
ここが一番大事なのに、私は自分のサイトだからといって、中途半端な思いで手を進めてしまいました。

わかっていたハズなのに、浅はかだった自分に大反省です。

一番はじめのサイトマップ

サイトマップ1回目ささっと作って、これを元にスマホデザインをはじめていました。

そしてその未完成のデザインをshibajuku柴田先生に見てもらったときに指摘をいただいて、はじめて気づいたんです。

私のこのサイトは果たしてユーザーに親切なサイトなのでしょうか。

ただのお母さん
ただのお母さん
わかりやすくないよね。

コンセプトワークとプランニング

その後、たまたまshibajukuのwebディレクション講座を見つけて、
あっ私、大事なものを見ていないじゃん!と、慌てて見たのを覚えています。

コンセプトワークの内容

  • 事前調査、ヒヤリング
  • 自社の強みの見つけ方
  • 競合サイトの分析
  • ペルソナシナリオ法

私のお花屋さんとしての強み・競合サイトとの差別化はどこで打ち出せるだろう
・・・webデザインを勉強しているのだから、もっとユーザーがお花を選びやすいサイトを作れる!!
ユーザーはどうやって動く?

プランニングの内容

  • ユーザー動線の設定
  • デザインガイド
  • マークアップ設計やらディレクトリ設計
  • コンテンツ設計にビジュアル設計

どのページからも容易にアクセスできる?
コンセプトに合わせてどんなレイアウト?フォント?色?
フォルダ構造は?ページごとに表示するコンテンツは?

コンセプトワークとプランニングをやってみて

全て完璧に考えられたわけではないけれど、きちんと向き合ってコンセプトワークとプランニングをしたことによって、このサイトの一本の軸が見えました

たくさんのことを考えて、全てを洗い出す。
情報設計は、どこまで深く考え抜けるかが勝負どころだと改めて思いました。

ただのお母さん
ただのお母さん
本当にこれがとっても大事。

サイトマップ最終版

サイトマップ最終

どこが変わったかというと、
「item」とか「contents」と言った、曖昧なカテゴリー分けをやめました。

ユーザーが迷わず求めている場所にたどり着けるように。

この修正、ちょっとしたことのようですが、大事です。

前回のサイトマップ時点で、スマホサイトのデザインをしてしまっていたので、
大幅にデザイン修正することに。

手本にならないダメな手順ですが、これも経験。

ただのお母さん
ただのお母さん
次回はデザインの部分をブログに書きたいと思います。

↑こちらの本、2年前に購入して、あまり深く読み込んでいませんでした。
サイト制作にあたり、もう一度読み直そうと思います。