【さっぽろ飯ログサーチ】という飯ログ用ポータルサイト作ってみた！

初めに

札幌グルメの調査記事を書いている中で、今後記事が増えてくるほど、読者が目的の記事を探しにくくなるのではないか、と思っていました。

そこで今回、あとで作るより今記事数が少ないうちに作って問題があれば改善を繰り返すほうが後々いいかなと思って作ってみました！

名前は、

さっぽろ飯ログサーチ

です。

以下のリンクから実際の画面確認できるので良ければ見てみてください！
30分くらいでリリースまで出来ました！

さっぽろ飯ログサーチを作った理由

作ろうと思った理由はシンプルです。

note記事を、もっと探しやすくしたかったから。

noteマガジンは記事をまとめる場所として便利ですが、読者側から見ると、基本的には新しい記事から順番に並んでいます。

そのため、記事数が少ないうちは問題ありませんが、記事が増えてくると、

「大通の記事だけ見たい」
「すすきの周辺の記事を探したい」
「札幌駅あたりの候補を見たい」

というときに、少し探しにくくなるな～と感じました。

さっぽろ飯ログの記事は、エリアとの相性がかなり大事です。

たとえば、同じ札幌グルメでも、読者が探している場面はそれぞれ違います。

• 札幌駅周辺で安めのご飯を探したい

• 大通で一人でも入りやすそうな店を見たい

• すすきので飲み会後の候補を探したい

• 旅行中に札幌らしいランチを探したい

• 仕事帰りに寄れそうな場所を見たい

こういうとき、記事を1本ずつ読む前に、まずは地域で絞れる入口があると使いやすいのではないかと思いました。

そこで、noteの外側に小さなポータルサイトのようなものを作ってみることにしました！

どんなWebサイトなのか

さっぽろ飯ログサーチは、札幌グルメ調査記事を地域ごとに探せるWebサイトです。

現時点では、以下の地域を対象にしています。
他地域の記事を作成したら増やします。

• 札幌

• 大通

• すすきの

画面上で地域をチェックすると、その地域に関係するnote記事が一覧で表示されます。

記事一覧には、

• 記事のサムネイル

• 記事タイトル

• 対象地域

• note記事へのリンク

が表示されるようにしました。

気になる記事をタップすると、そのままnoteの記事ページに移動できます。

イメージとしては、noteマガジンをそのまま読むというより、「今日はどのエリアで探すか」から記事を見つける入口 です。

さっぽろ飯ログとの相性

さっぽろ飯ログは、実食レビューではなく、公開情報ベースの候補整理メディアです。

そのため、記事単体で読んでもらうだけでなく、必要なタイミングで見つけてもらうことが大事だと思っています。

たとえば、

• ランチを探しているとき

• 旅行中の夜ご飯を探しているとき

• 飲み会前に候補を見たいとき

• 大通周辺で一人飯を探しているとき

• すすきので二次会候補を探しているとき

こういう場面では、検索して1記事だけ読むよりも、複数の記事を比較できる入口がある方が使いやすいと感じました。

今回のWebサイトは、まだ小さな試作です！

それでも、「記事を書く」だけで終わらせず、読者が記事を探しやすくする導線まで作ることで、さっぽろ飯ログ全体を少しメディアらしくできるのではないかと思っています。

技術的な話は少しだけ

技術的な話は詳しく書きすぎないようにしますが、今回はReactを使って、地域を選ぶと記事一覧が切り替わるシンプルなWebサイトとして作りました。

デザインはスマホでも見やすいカード型にしています。
既にスマホ対応しているのでスマホの方もぜひ！

公開は、開発したWebサイトをGitHubで管理し、Vercelを使って公開をしています。
閲覧数が増えたらXserverなど過去に使っていた有料のサーバーへ移管を考えています。

使ったものをざっくり書くと、以下のような感じです。

• React

• Tailwind CSS

• GitHub

• Vercel

細かい構成や、どうやってAIに指示したのか、どこで詰まったのかなどは、気になる方がいたら技術的な話がメインになるので別の記事でまとめようと思います！

今回は無料記事なので、技術解説というより「なぜ作ったのか」「どんな使い方を想定しているのか」を中心に書いています。

作ってみて感じたこと

作ってみて感じたのは、note記事も少しずつ増えてくると、記事そのものだけでなく、記事をどう見つけてもらうか が大事になるということです。

最初は、記事を書いて投稿するだけでも十分だと思っていました。

でも、記事が増えてくると、読者にとっては「どの記事から読めばいいのか」がわかりにくくなります。

特にグルメ系の記事は、読者の目的がはっきりしていることが多いです。

「今いる場所の近くで探したい」
「今日行くエリアで探したい」
「旅行中に使いやすい記事を見たい」

そう考えると、地域で絞れるだけでも、少し使いやすくなるのではないかと思いました。

また、自分は札幌で会社員SEをしながら、note運用と個人開発を試しています。

その中で、記事を書くこととWebアプリを作ることを分けて考えるのではなく、組み合わせていけるのは面白いなと感じました！

記事で情報を整理して、Webサイトで探しやすくする。

この流れは、noteを始めた当初から考えていたので、自分が想定していたよりnoteの記事作成やAI活用が面白過ぎたのでもう作っちゃったって感じです笑（ほんとは３か月後くらいに作る予定でした）

今後やりたいこと

今後は、まだまだ改善したいことがあります。

まずは、記事数を増やしていきたいです。

札幌、大通、すすきの以外にも、エリアを少しずつ増やしていけたらと思っています。

たとえば、

• 中島公園

• 円山

• 琴似

• 新札幌

など、札幌市内でも探したいエリアはまだまだあります。

また、地域だけでなく、目的別のフィルターも追加したいです。

たとえば、

• ランチ

• 夜ごはん

• 一人飯

• 飲み会

• 旅行

• 二次会

• 海鮮

• ジンギスカン

• スープカレー

のように、目的やジャンルで探せるようにできれば、さらに使いやすくなりそうです。

あとは、note記事を更新したときに、Webサイト側にも反映しやすくする仕組みも考えたいです。
今回は初動で早く出したかったので地域は固定になっているので記事から取得するように修正予定です。

今はまだ小さな試作ですが、将来的には、札幌グルメ記事の入口としてだけでなく、店舗向けアプリや札幌グルメ系の個人開発にもつなげていけたらと思っています。

飲食店向けのウェブアプリはすでに４つ開発し今後さらに修正してリリースしたいなーって思っています。
今は下のリンク２つだけnoteで公開中です！

他２つは近くの飲食店やバーの方と話しだいぶ出来が良いのですがまだ修正中なので終わり次第記事作成します～！
お楽しみに！

おわりに

webアプリ作りのハードルが下がり、自身でコーディングしていた時とは比べ物にならないくらい早いリリースができて本当に楽しいのでいろんな人にwebアプリ作成を試してみてほしいです！

人に教えるのも好きなので仲良くなった方とかに作り方教えながら一緒にやるのも楽しいかも？って思ってます。

飯ログ記事は調査記事っぽい口調なのでここではカジュアルに書いていこうと思います！

またの更新楽しみにしててくださーい！