同級生がレストランを開くのでWEBサイト作ってみた その1
こんにちは、kenty(ケンティー) です。
小さなWEBサイトの企画〜公開、保守をやったのでシェアしたいと思います。
似たようなことをやりたい人の参考になれば 🙏
※ MeK 様には技術記事投稿の許諾を得ております。
TL;DR
完成品がこちら👇
時間配分がこちら👇
企画~公開(40時間程度):
| 項番 | 内容 | 期間 | 工数 | 備考 |
|---|---|---|---|---|
| 1 | プロジェクト管理 | 2~8月 | 8時間 | MTGやタスク管理 |
| 2 | オリエンテーション | 2月 | 6時間 | 要求のヒアリング・やること擦り合わせ |
| 3 | 要件定義 | 3月 | 6時間 | 要件の確認・制作ツール選定 |
| 4 | 見積り | 3月 | 4時間 | |
| 5 | ノーコードツール学習 | 4月 | 4時間 | |
| 6 | WEBサイト制作 | 6・7月 | 16時間 | (この時期にシングルページへ軌道修正) |
| 7 | WEBサイト公開 | 7・8月 | 6時間 |
公開~保守運用(10/13時点 20時間程度):
| 項番 | 内容 | 期間 | 工数 | 備考 |
|---|---|---|---|---|
| 8 | プロジェクト管理 | 8~10月 | 4時間 | MTGやタスク管理 |
| 9 | SEO調整 | 8月 | 4時間 | |
| 10 | SNS追加対応 | 8月 | 4時間 | |
| 11 | PV数・検索ルート確認 | 9月 | 2時間 | |
| 12 | デザイン微調整 | 10月 | 2時間 | |
| 13 | 店内動画追加対応 | 10月 | 4時間 |
ノーコードツールは手早くサイト公開したいならあり。可能性を感じた。
登場人物
| 人物 | 1行説明 |
|---|---|
 名前: ケンティー
|
筆者。WEBサイトとかモバイルアプリとか制作してる。 |
 名前: Kシェフ
|
同級生。レストランを開く予定。 |
プロジェクト発足(2月)
地元に帰ったら同級生がシェフになってました。
積もる話も脇によけ、運ばれてきたのはナス🍆のスパゲティでした。が、しかし、筆者はナスが苦手でした。ぐっと堪えて食べてみたところ、なんとめちゃくちゃ美味しい。
苦手な食材ですら美味しく調理できる腕に感動し、近々オープン予定のレストランにWEBサイトを作ると勢いで約束したのでした。ここから約1年、ゆるゆるノーコード開発が繰り広げられることとなります。
|
... ?! うまい!!! ナス苦手なのに食べれる、すごい天才!! | |
| ありがとナス！実は半年後に自分のレストランを開こうと思ってるんだよね。 | |
|
|
ならお店のWEBサイト作るぜ、任せろ!!! |
オリエンテーション(2月)
ここでは以下の2つを行います。
- どんなWEBサイトにするか決める
- そのWEBサイトを作るまでのおおまかな計画を立てる
この2点を決め、ケンティーとシェフKが同じゴールに向かっていけるようにしました。発注者と受注者の合意形成もやってます。友人同士なので、書面とかはスキップしました。
説明には Google スライドを使いました。
どんなWEBサイトにするか決める
- イメージに近いレストランのWEBサイトを列挙してもらう
- デザインや欲しい機能が浮かび上がってくる
- オープンするレストランの雰囲気やターゲット層、他情報を共有してもらう
- 必要な機能を洗い出す
- リッチなサイト < 工数や予算が小さくなる だった
- 機能が洗い出せると、利用サービスの選定ができる様になる
そのWEBサイトを作るまでのおおまかな計画を立てる
どのWEBサイトも制作プロセスは似ていると思います。ケンティーは知ってますが、シェフKは業種が違うので知らなくて当然です。一般的な制作プロセスを伝え、工数削減の為削れるところは削る方針としました。
|
LINEで送ってくれた、イメージに近いサイトを一緒に見ていこうか。要望出していって優先度つけていこう。途中良さげな提案あったらしてきます。 | |
| Aみたく料理の写真載せたいな！予約やクーポンのバナーは絶対欲しい！文字のアニメーションの感じはCに近いけど、優先度は低いな。 | |
|
|
OK！次はオープンするレストランの情報教えて！ | |
| まだ内装工事中なんだけど、場所はXXで、ターゲット層はYY代、ZZ層。ロゴは検討中！価格は¥¥¥¥¥くらいかな。 | |
|
|
未定部分は決まったら教えて！イメージ膨らんできたよ〜！ | |
|
機能も洗い出していくね！ 工数減らす為に凝ったデザインは無しでいこうか！ ... (以下略) と、話し合いながら決めてったけど、制作カロリー低い感じでいきましょう！ | |
|
ざっくりとした制作の流れも共有！WEBサイト作るときは 設計 → 制作 → 運用 のように流れていくよ！もっと細かくみていくと...(以下略) これをレストランオープンまでを目標にやってこうか！ | |
| WEBサイトのイメージが膨らんできた！ワクワク♪ | |
要件定義(3月)
コスト掛けたくないので、ここは薄いです！
やったことは、以下の２つ。
- ヒアリングした要求をまとめ、実現可能な要件に落とし込む
- 要求に優先度をつけ、上位のものを採用。他はベストエフォート(できたらやる)にした。
- 制作ツールの選定
- 制作方法の松竹梅を説明し、今回はノーコードツールを使ってみることに。
- 「ノーコードツールのテンプレ使ってコスト削減」戦略を採用。絞ったツールの中から、イメージに合うテンプレを探してもらった。
- 「STUDIO」に決定。
見積り(3月)
お金の話です。金額もざっくり書きます！
参考までに、どれくらいかかるの？と聞かれたので公開までの制作費用概算を出した。
この時点で30万(外税)くらい。
要件変更で後でシンプルになり、公開時点の見積りは20万(外税)くらい。
別途 STUDIOやドメインの契約はシェフKにしてもらうことを伝えた。
以上、お金の話でした。💰
※ 今回はCYKAMIキャンペーンにて無料で制作してます。
|
ざっくり見積りまっす！(算盤弾いて🧮)こんな感じっす！ | |
| WEBサイト作るのって、結構かかるんだね！！ | |
ノーコードツール学習(4月)
今回はノーコードツール触ってみたい&経験なかったので、軽く学習しました。
HTML,CSS,JSの知識、フロントエンドの業務経験があるので、キャッチアップは早かった。
公式の情報とYoutubeで乗り切れました。
深い知識は保守で必要になったら都度仕入れるつもり。
WEBサイト制作(6・7月)
ケンティーが5・6月稼働できず、制作遅延😭
6末からちょっとずつ再開。
レストランの方も開店準備で忙しくなって、 asset のやり取りしているうちに開店に間に合わないスケジュールに。
掲載する画像や文言を考える時間が足りない為、サイトのボリュームを減らし、シングルページにする作戦をたてつつリスケ。8月中の公開を目標にする。
当時のやることリスト。無効となっている部分が削った箇所↓
開店したレストランは好評で、大盛況でした。美味しいので是非皆さんも足を運んでみてください♪
|
6末で制作復帰！テンプレ調整します！ あと、こことそことあそことこちらに画像と文言入れたくて... | |
| 開店準備で半端なく忙しいっす。文言の準備きついかも。 | |
|
|
リスケしよう！ごめんなさい🙏 それと、テンプレから要らない所削除してボリューム減らしていこう。 |
WEBサイト公開(7・8月)
サイトが完成したので、公開設定していく。何度かコケつつ、8/1 無事公開できました。めでたしめでたし。
|
公開ボタンがポチれない...? | |
| お名前.com の設定を見直すぞい！！ リモートでアシストして！ | |
|
|
...よし、OK！公開ボタンをポチっとな!!! | |
| うぉぉぉぉおおお！！公開できてる！！！ | |
|
|
うぉぉぉぉおおお！！ノーコードツール楽じゃん！！！ ... あ、レイアウト不具合みっけ(カタカタ...)、修正更新！！ うぉおお反映されてる！！ |
SEO調整・PV数・検索ルート確認(8・9月)
しばらくして...
全然閲覧されないんだが...!!!
そうだ、SEO対策しよう。
やったことは、以下。
- instagram, google map, その他からリンクしてもらう
- Google Search Console に登録
- サイトの調整。要らないdiv消したり、シェア時の文言調整したりする
あとは待つのみ
...
1ヶ月待ち、結果が出てきた!!!
|
あと一人で1000PV(1000回閲覧)！一日20人くらい見られていて、10人に1人以上 NEWS を読んでくれてる感じだね。 | |
| お！結構見てくれてるんだね！！！！動画も綺麗なの取ってもらったし、イベントごとも今後やるから更新したい！ | |
実際のサイト（2025/02時点）を残します。
付録を参照してください。
SNS追加対応(8月)
instagramのリンク調整、新規LINEアカウントのリンク追加。
店内動画追加対応・デザイン微調整(10月)
ケンティー、9月稼働できず。10月に再開。
STUDIOはYoutubeかVimeoにアップロードしてiframeで埋め込むらしい。対応。
10月13日時点のアクセスはこんな感じ。
サイト全体のPV数↓
Google検索パフォーマンス↓
終わりに
STUDIO、良い！
レストランも大盛況🎉
近くに寄った際はぜひ訪れてみてください🍝
WEBサイトの改善要望や不具合報告はこっそりkentyまで💬
CYKAMIではWEBサイト制作の依頼も受け付けています。
お問い合わせはこちら👇
次回予告
あれから若干のマイナーアップデートはしたものの、大きくは変わってないです。
STUDIOでおおよその作成感を掴めたが、もっと細かい調整したくなってきました。
次回、大改修編。鋭意製作中。
付録
2025/02 時点のサイト
Discussion