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

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

[chat face="me.jpeg" name="ただのお母さん" align="right" border="brown" bg="none"] よし！書くぞ！！[/chat]

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

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

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

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

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

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

そんな一連から早5年。

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

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

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

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

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

[chat face="me03.jpeg" name="ただのお母さん" align="right" border="brown" bg="none"] ここが一番大事なのに、私は自分のサイトだからといって、中途半端な思いで手を進めてしまいました。 [/chat]

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

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

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

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

[chat face="me03.jpeg" name="ただのお母さん" align="right" border="brown" bg="none"] わかりやすくないよね。[/chat]

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

[su_list icon="icon: check" icon_color="#424040"]コンセプトワークの内容

[/su_list]

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

[su_list icon="icon: check" icon_color="#424040"]プランニングの内容

[/su_list]

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

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

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

[chat face="me02.jpeg" name="ただのお母さん" align="right" border="brown" bg="none"] 本当にこれがとっても大事。 [/chat]

サイトマップ最終

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

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

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

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

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

[chat face="me.jpeg" name="ただのお母さん" align="right" border="brown" bg="none"] 次回はデザインの部分をブログに書きたいと思います。[/chat]

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