松本市のパン屋さん「スイート」。Webサイトリニューアルまでの全工程まとめ。
長野県松本市のパン屋さん『スイート』のサイトがリニューアルされました。
サイトリニューアルは弊社Resにて担当させていただきました。リニューアルも無事完了し、ぼちぼち落ち着いてきましたので、今回どのように進めていったのかをまとめてみます。
サイトリニューアルのお声がけいただく
そもそもですが、サイトリニューアルのご相談をスイートの渡辺社長からお声がけいただきました。
スイートさんはSWEET WORKというコワーキングスペースを運営しているという特殊(？)なパン屋さんなのですが、そもそも私がこのSWEET WORKのヘビーユーザでした。
で、去年の11月にSWEET WORKが２周年を迎えたので、そのキャンペーンサイトを作成したのです。
こういった活動を見てくれていて、『お、サイト作れる人いるじゃん』みたいな感じで依頼してくれたのだと思います。ちょこちょこ活動していると良いことあるな、と思いました。
もともとスイートのパンのファンだったということもあり、お話を伺いました。話を聞いているうちに、社長がサイトリニューアルに向けてやりたいと思っていることで、自分の経験を活かせる部分があると感じたのでお受けしました。ここから少しずつ活動を始めます。
ヒアリング：会社が大事にしていることや発信したいことを確認。
サイトリニューアルにあたり、まずは下記を確認します。
・サイトリニューアルの目的
・なぜリニューアルするのか
・会社が大事にしていること
Web制作において一番大事なのがヒアリングです。
サイトを作ったものの、イマイチピンとこないサイトになってしまっている場合、このフェーズがしっかりできていないことが多いです。
ヒアリングの結果、漠然とした理由だったり、あまりリニューアルしても意味がなさそうだなと感じたらリニューアルをしないと言う選択肢もあります。または、やるべきことはサイトのリニューアルではない場合もあります。
そんなことを探りつつ社長を含めメンバーの皆さんにヒアリングしたり雑談したりしてました。
リサーチ：他のサイトどんな感じ？
競合他社のリサーチをします。ただそこまで必死にはやらずに、こんなサイトあるんだな、とか、このサイトかわいいな、くらいにとどめておいて、必要以上に熱量持ってやらない方が良いかなと思います。
理由としては、競合のやっていることと、今回リニューアルすることが一致する可能性がそこまで高くないからです。
私の場合はpintarestで競合のサイトをまとめて、たまに眺めるようにしていました。
アンケート調査：パン屋のサイトで欲しいものは？
次に調査です。実際にお客様がパン屋さんのサイトに何を求めているのかを調査します。今回はスイートさんが「お客様の声」を手書きで書かれているものがあったのでそちらを参考にしたのと、実際のお客様以外でパン好きの方に向けてWebアンケートをとりました。
アンケートを集計
壁に貼られたお客様の声
指針作成：サイトの目的は何か？
とここまでで課題を調査し、今回のサイトリニューアルの指針を伝えます。
伏字でスミマセン。
今後施策で悩んだ時に指針となるように、目的は最初にお伝えしておきます。
設計：サイトマップ作成
リサーチをもとに情報設計し、サイトマップを作成します。
サイトマップ作成はWeb幹事さんのこちらを参考にしました。
サイトマップでは、
- サイトの階層
- ページタイトル
- URL
- 概要
- サイトの目的のどの部分に当てはまるか
あたりをしっかり作っておきます。
サイトの目的に則った構成になっているか、階層は正しいか、また、今回はリニューアルなので、なるべくURLは引き継ぐこととに注意しました。
コミュニケーション設計：Slackの利用
今回のプロジェクトで幸運なのは、私の作業場所（SWEET WORK）とスイートさんが同じビル内なので、気楽に雑談や相談ができる点でした。
なのでコミュニケーション不足が起きることはあまりなかったのですが、会話の履歴は残しておきたかったのでSlackを利用しました。スイートさんはSlack利用したことなかったので使い方のレクチャーから実施。
スイートのみなさん、慣れないツールにも快く応じてくれて感謝です。
情報共有もSlackにて対応
システム開発：デザインとシステム
デザインの作成とシステム開発を実施します。
お話伺っていると、スイートさんの場合は凝ったデザインを作りたいというよりは、シンプルに情報発信をしたいということでした。
なのでデザインは極力シンプルに、スイートがもともと持っているコンテンツをうまく引き出せるよう、表現できるように注力しました。
情報発信に力を入れたいということで、システムはCMSのDrupalを利用して、スイートの皆さん自身で今後サイトの更新が行えるように開発しました。
Adobe XDで制作したワイヤーフレーム
コンテンツ管理：魅力の発信
スイートさんは情報発信をしっかりしていきたいということでした。しかしどうやって情報発信したら良いか、どういう情報を発信していけば良いかがスイートさんのメンバー内では分からない状況。
私自身もコンテンツ作成が強くはないので、ここで助っ人を呼ぶことにしました。パン好きのライター松元さんです。
https://www.facebook.com/maki.matsumoto.940
松元さんはライターであり、以前スイートの魅力を発信した記事を書いているので今回お願いするにはピッタリの人だと思っていました。
ということでお願いしたところ、快く受けてくださって感謝感謝です。松元さんにはコンテンツディレクターとして、サイト全般の文章を構成、記述していただきました。
下記ページなんかはすごく良くまとまっていて、本当にお願いしてよかったと思っています。
SEO設計：title、description、OGの決定
せっかく作成したサイトを多くの人に見てもらいたい！ということでSEO設計もしっかり行いました。
コンテンツ作成とともに、閲覧してくれるユーザにどういった情報で表現するか、繋げ方や広げ方を設計しました。
ちなみにSEO設計については『10年使えるSEOの基本』がとても参考になりました。
イラスト作成：パンをよりかわいく見せる方法
スイートの方々と話していると、イラストが上手な方がスイートスタッフの中にいるとのこと。せっかくなので見せていただくとこれがとても可愛かった！
このデザインを活かさない手はないと思い、お願いして描いてもらいました。するととても可愛い作品をほぼ全ての商品分書いてくれるという素晴らしい仕事っぷり！！
感動してしまいました。
サイト内にあるイラストは全てスイートスタッフの百瀬さんが書いてくださいました。
商品ページにイラストが載ってますので、ぜひ見て見てくださいませ。
また、インスタにも載ってますので、合わせてチェックお願いします。
ちなみにスイートにはイラストが得意、歌が得意、楽器が得意、ダンスが得意、などパン以外のスペシャルな特技をお持ちの方がたくさんいるので、ここら辺も今後発表していきたいところ。
撮影：パンの魅力をそのまま出す
撮影も行いました。商品が素敵なので、撮影にそんなに技術力はいらなかったです。そのままを写すだけでOKでした。
ここはスキル次第でもう少し上手く表現できるかなーと思っていますので、今後の課題でもあります。
撮影後は美味しくいただきました😋
リリース
ということでついにリリース。皆さんお疲れ様でした。
感想：プロジェクトマネージャーとしてまた一つレベルが上がった
今回のスイートリニューアルプロジェクトを経験して、以下のことが身につきました。
1. 非Web系企業への制作
2. チームビルディング力
3. 未経験分野の開拓力
1. 非Web系企業への制作
もともと一貫してやるのは得意な方でしたが、今回はお客さんが非Web系だったということが初めてでした。私たちWebの人にとっては常識なことでもお客さんにとっては珍しいことだった、ということがよく会ったので、常識/非常識の線引きを勝手に決めてはいけないなと実感しました。
2. チームビルディング力
チームを作り上げるところから開始するのは初めてだったので、とても勉強になりました。
『たまたま時間が空いていたからその人にお願いする』ではなく『この事業にはこの人があっているから熱量込めてお願いする』ということがとても大事なんだなと思いました。
また、偶然の出会いも味方につけることができ、ラッキーな状況をうまくまとめることができたと思います。
3. 未経験分野の開拓力
パン業界は初めてだったのですが、調査からしっかり行うことで戸惑うことなくプロジェクトを進めることができました。
未経験分野へのチャレンジは結構ビビること多いですが、今回の経験により未経験でも準備や調査をしっかりやれば対応できるな、という思いになりました。こういう意識改革はとても大事なので、本当に良い経験できたなと思います。
ということで今回のnoteは以上です。今後もスイートさんのサイトを進化させていこうと思うので、どうぞよろしくお願いいたします🥐
おまけ：Spotifyプレイリスト
スイートのサイトを作っていた時によく聴いていた曲をまとめました。この曲を聴くとスイートサイト作っていた頃を思い出します。
読んでいただきありがとうございます。