自分のメディアサイトを作ったので、制作過程をWeb制作者視点で解説する｜東北の旅メディア「ROKKON」
WebディレクターのTANAYANです。
この度、私のチームBULLETIS (バレッツ) にて、独自の旅メディアサイト「ROKKON」を立ち上げました。
まず皆さんにサイトをご覧いただきたい気持ちは山々ですが、この記事では少し趣向を変えて、私の本業である「Webディレクター」「Web制作者」の視点から、このサイト制作の過程を紹介・解説していきたいと思います。
ただし、このサイトは、普段のクライアントワークではなく、私とチームメンバーが好き勝手に作ったサイトです。そのため、ここで紹介する内容がそのまま実務に適用できるとは限りませんのであらかじめご了承のほど（笑）。
しかし、Webディレクターとして3年以上の経験を積んできた私が、その知見を活かして作ったサイトです。Web制作の裏側や、ディレクターの思考プロセスを少しでもお伝えできればと思います。
簡単にサイトの説明を
今回作ったサイト「ROKKON」は、「ろっこん」と読み、「東北の旅を集めるメディア」です。
いわゆる一般的には「まとめサイト」、WEB業界的には「ギャラリーサイト」「キュレーションサイト」というと分かりやすいかもしれません。
具体的には、東北各地で「旅」をテーマに情報発信をしているWEBサイトやSNSアカウントを一覧で紹介しているサイトです。東北の魅力的な旅の情報を、一つの場所でまとめて閲覧できる、いわば「東北旅行のハブ」となることを目指しています。
そもそも作ろうとした背景と競合調査
そもそもこのサイトを作ろうとしたキッカケとして、「旅情報の発信を軸に独立したい」という私のチームBULLETISにおける活動テーマがあります。となると、「どこかの観光スポットに行って、写真を撮り、記事を書き、投稿する」というアプローチが一般的。
そこで、ディレクターなりにまずは「競合調査」から。
すでに有益な発信している人がめちゃくちゃいる…！
はい。早速、心が折れかけました（笑）。
というのも、まず私が個人的に調べた「宮城仙台で旅発信をしているInstagramアカウント」がこちら ↓
「フォロワーが1000以上いるInstagramアカウントまとめてみるかー」と軽い気持ちで作業に取り掛かったはいいものの、その数50をさくっと超えてしまいました。しかも、万フォロワーアカウントが結構いる。
これらは主に仙台のアカウントなので、宮城県内の他の市町村はそこまで深くリサーチしておらず、さらに私たちBULLETISとしては「東北」というより広いエリアでの発信をしていくつもりであったので、他の5県（青森・岩手・秋田・山形・福島）も含めると相当な量になる。
また、私の住む仙台だと、「仙台つーしん」という他の追従を許さない圧倒的PV数を誇るメディアもあり、「その情報どうやって仕入れたの？」という記事も多数あります（いわゆる、仙台つーしんさんは、仙台の「PR TIMES」的な存在でもある）。
県や市が運営しているWebメディアの存在感
地方自治体が運営する観光関連Webメディアの存在感がすごい。具体的にいうと、
県や市が運営するWebメディアの数が意外と多い
かつ、デザインの質が高く、コンテンツ量が圧倒的（観光に対して多くの予算をかけている印象）
現地取材しないと書けないような詳細な情報が豊富
また、私の勤める会社へ来る相談として、これら観光系のサイトを作りたいというご依頼やコンペ開催が最近は多く、ここ１年で５件ほど話がありました。観光系の需要の高まりを感じています。
競合は多い。
いや、供給過多かもしれない。
いやいや、供給過多で見られてないサイトが多いのかもしれない。
ここまでの調査内容をざっとまとめると、
競合の多さと市場の飽和
観光情報を発信する、または発信したいと考えているメディアが既に多数存在
この分野はすでにありふれているという印象
新規参入の難しさを強く実感
差別化の必要性
従来とは異なる角度からのアプローチが不可欠
既存のメディアと同じ土俵で競争することは非効率的
私たちサラリーマンとして本業を持ちながら運営する場合、リソースの制約がある
市場の現実
この分野への参入は熾烈な競争が予想される
単に情報を提供するだけでは、作るだけ無駄になるリスクが高い
仮説ながら、見られてない・知られてないサイトや記事が結構ある
特に３の最後の項目については、私も宮城仙台に10年以上いますが、指で数えれるほどのサイト・アカウントしか目にしてませんでした。ただ、今回調べると、ほんとに多い。こんなに有益な記事やアカウント、そして隠れた観光スポットがあったんだと発見ばかりでした。
知られないままのサイト達をどうにかできないかと、そんな思いも湧き上がってきました。
そこで思いついたのが「まとめサイト」
そんな調査を終え、ディレクターの仕事に戻る私。ディレクターの仕事をしていると、まぁ見ることの多い、MUUUUU.ORG や SANKOU! などの「デザインギャラリーサイト」。
これと見た時、「ピン！」ときました。これじゃん…と。
デザインのギャラリーサイトは「良いサイトを一覧で紹介しているサイト」です。ようは、これを観光に置き換え、観光系の発信をしているWEBメディアやSNSを一覧でまとめて紹介するサイトがあってもいいのでは？と。
もちろん、WEB制作の業界の方とはサイトを見る目的が異なるので全然見当違いなサイトになるかもしれませんが、ほぼ誰もいない領域であることは確かです。
誰もやっていない領域ということは、
そもそも閲覧ユーザーにとって需要が無い（ターゲット層の不明確さ）
それをやるの事自体が”面倒”でやる人がいない
技術的な課題、Web制作という専門知識がない
公平性や法的な問題で、企業や自治体が手を出しにくい。
あたりでしょうか。
私的には「１」以外であって欲しいなと思いつつ、「２」や「３」は私の得意分野。
得に「２」に関しては、「TANAYANって、いろんな情報を見てそこからまとめるの上手だよね」との声をありがたいことにいただくことがあるのですが、普段のディレクター業でも、あらゆる情報を見てそれをクライアントやクリエイターが見やすいようにして渡すという「情報の整理・可視化」が普通になっているので、苦ではない。
そんなこんなで、早速次の段階へ進みます。
コンセプトやサイトの概要を言語化する
作るものが決まったので、まずはコンセプト、概要、作る理由などの言語化から。
サイトを一言で言うなら？
東北6県にある各メディアを一つにまとめるサイト。
より詳しく言うと？
既存の東北の優れたコンテンツ（写真・記事）を「応援」するサイト
従来の滞在型サイトとは逆の発想（ユーザーを他のサイトへ積極的に誘導）
初期段階では「このサイトいいじゃん！」「このSNSアカウントの発信ナイスじゃん！」くらいの感覚で、魅力的なサイトやSNSアカウントをどんどん載せていく。
サイトの目的は？
東北各地の他のメディア・記事・アカウントの露出増加
東北の観光地や文化の認知度向上のきっかけ作り
東北の観光業発展への貢献
サイトで紹介したアカウント同士の繋がりや相乗効果・相互交流を狙う
私たちの制作メリット：
私たちが実際に現地へ行って撮影して記事を書くよりも、断然効率がいい。
運営すればするほど、自動的に競合調査が継続される。
あたりでしょうか。
サイトマップについて
サイトマップはこんな感じです。
公開時は合計39ページになりました。
ちなみに、上記サイトマップは、普段の仕事でも使っているものの簡易版です。Googleスプレッドシートで作成し、URLを知っている人、もしくは指定した人であれば閲覧や編集ができる状態にしています。
軽く項目を説明
少し項目を説明すると、以下のようになっています。
A列：ページの数
B～E列：ページの概要名（ページの分かりやすい名前）
F～I列：ディレクトリ（ALLと階層ごと）
J列：実際の本番URL
K列：ページのステータス（公開時のindex, noindex など）
L列：ページのタイプ（静的、動的、検索、404など）
M列：ページタイトル
N列：ページディスクリプション
関数で効率化
F～I列の「Directory」部分には、「Second level」「Third level」「Fourth level」という列があります。ここにパスを入力することで、「F列」には自動でスラッシュ込みのディレクトリ構造が入り、かつ「J列」にURLが自動生成される関数を入れてます。
Fの3には ↓↓↓
="/" & IF(G3<>"", G3 & "/", "") & IF(H3<>"", H3 & "/", "") & IF(I3<>"", I3 & "/", "")Jの3には ↓↓↓
=HYPERLINK(IF(Summary!B$1<>"", Summary!B$1, "") & IF(G3<>"", G3 & "/", "") & IF(H3<>"", H3 & "/", "") & IF(I3<>"", I3 & "/", ""), IF(Summary!B$1<>"", Summary!B$1, "") & IF(G3<>"", G3 & "/", "") & IF(H3<>"", H3 & "/", "") & IF(I3<>"", I3 & "/", ""))※上記、Jの3の関数内にある「Summary!B$1」というのは、同じスプレッドシート内にある「Summary」という名前の別シートのB1セルを参照しています。SummaryシートのB1に本番のURLを入れることで、自動で取得・表示します。なので例えば、テスト用のURL列も作りたい場合には、SummaryシートのB2などにテストのドメインを入れて指定することで作れます。
構成（WF）の作成
クライアントワークではないものの、やはり普段からWFを作るところからサイトのイメージを膨らませていくことが多いため、いきなりデザインするのはなんだか性に合わない。。。ということで作りました。
WF作成で使ったツールは「Figma」
仕事だとFigmaもしくはAdobeのXDを使いWFを作ることが多いですが、最近の私個人的にはFigma推し。
Figmaは、ブラウザ上のツールなので、ネット環境があればPCのスペックをそこまで求められません。加えて、チームメンバーをそこに招待するだけでブラウザ上でリアルタイムに共同作業ができてしまうのが利点（たまにFigma上でチャットして遊んでます笑）
そして無料（ありがたい）。
最近だと、デジタル庁がFigmaを使ったデザインシステムを提供してくれているのもあって、パーツ集めも結構助かっていますね。
※なお今回は、いつものようなデザインツールを使ったデザインはしないつもり（デザイナー要らず）だったので、私とチームメンバーがなんとなく分かればいいくらいの感覚で作っています。
制作に使ったツールは「STUDIO」
今回制作に使ツールは、ノーコードツールとしておなじみのWebサイト作成ツール「STUDIO」。
【2択】 WordPressで作るか、STUDIOで作るか。
そもそも、普段の仕事ではWordPressを使ったサイト制作がほとんどを占めるため、サーバーを借りてWordPressを使って実装するという選択肢もありました。チーム２人とも、これまで数十ものWordPressを作ってきた実装者でもあるので、難なく作ることができます。「経験」を考慮すると、WordPressが優勢。
また、料金を比較しても、WordPressが優勢。
WordPressで作る場合：約1,000円 / 月
WordPressファイルをアップするサーバーが必要。サーバーの契約期間（12ヶ月、24ヶ月など）にもよるが、およそ月1,000円前後が一般的。なお、WordPress自体は無料。STUDIOで作る場合：2,480円 / 月
今回のサイトは「CMSプラン」が必要。実際は、年間契約で29,760円の一括払いです。
ただ、作る時の労力と、作った後の継続的なメンテナンスや管理の容易さを考えると、STUDIOでいいのでは？という結論。そしてなにより、コードを書きたくない（笑）
普段の制作であれば、WordPressで作るのが”通常の流れ”なのですが、今回の場合は制作がメインの目的ではないですし、WordPressで作るとクリエティブに目的が寄ってしまったり、クリエイターのエゴ的に不要に”気にしてしまう”部分が出てくるのではとの懸念。
ようは、技術的な側面に時間を取られず、コンテンツ制作に注力したいという思いが大きく、結果STUDIOになりました。※結局、とあるページの機能のため、メンバーのNaofumiがGASでコードを書きましたが。。。（後述）
※個人的にWordPressよりもSTUDIOの将来の期待値が高いということもあります。まだ機能的な制限はありますが、「ノーコード」という言葉の破壊力は、今後より加速すると思います。
デザインの作成。。。はしてません。
今回は、構成（WF）をもとに、STUDIO上で直接デザインしながら作りました。いや、デザインはしてないと言ってもいいかもしれません。
いつもであれば、FigmaやXDで作ったデザインデータをもとに実装するのが通常なのですが、今回はあまりデザインに避ける時間もなく、そもそも私やチームメンバーにデザイナーがいないので、これまでのWEBサイト制作から得られた”感覚”で作りました（参考にならず、すいません）。
ただ、ロゴに関しては、メンバーのNaofumiが作ってくれたので、詳しくは、BULLETISのnoteで「ロゴに秘められた想い」書きましたので、併せてご覧ください。
※彼は普段、Webエンジニアです ←←←
実装とSTUDIOの中身
いよいよ実装フェーズ。ここはちゃんと書くと長くなってしまうので、簡単に、STUDIOのデザインエディタ画面や、CMSへ実際に登録している画面のスクリーンショットを載せておきます（小さくて分かりにくいかもしれませんが…）
パス（URL）、タイトル、ディスクリプション、ファビコン、OGP、言語の指定、indexの有無、構造化データ（JSON-LD）など、さまざまな指定も可能。
「カテゴリータイプ」のモデルで作成し、各６県を登録。
「ユーザータイプ」のモデルで作成し、各Webサイト・SNSアカウントをすべてここに登録。かつ、モデル[県]と紐づけ。
ドメインはお名前ドットコムで取得
ノーコードツールのSTUIDOですが、ドメインの取得はできないため、別途ドメイン会社にて契約が必要です。
普段の仕事では、「Xserver」にてドメインとサーバーを一緒に契約してしまうことが多いのですが、今回は「STUDIO」を使うということでサーバー契約は不要。
となると、国内シェア1位らしい信頼と実績のある「お名前ドットコム」も候補に挙がってきて、Xserverと比べて若干安い「お名前ドットコム」で取得。
また、いずれは独自ドメインのメールアドレスを使うことも候補に入れており、「お名前ドットコムのお名前メール」であれば月額180円ほどで使えるプランもあるので、将来性も考慮してます。
STUDIOで独自ドメイン紐付け
STUDIOの有料プランでは、独自ドメインの紐付けもできるため、STUDIOの管理画面で紐付け（一応、事前にお名前.com側でも設定は必要ですが、DNS設定にて「STUDIOで設定する」という項目があるので、手順通りに行えば３分で終わります）。
なお、紐付け完了まで少し時間がかかる場合があり、余裕をもった公開をお勧めします。今回のROKKONの場合は、夜寝る前に設定し、一晩置いて朝見たら完了していました。STUDIONを独自ドメインで公開する場合、公開日の前日にはこの作業をしておくと安心だと思います。
GA4やSearch Consoleもしっかり連携
STUDIOには、以下のような連携がサクッと可能。
アクセス解析ツールである「Google Analytics」
計測タグを一元管理できる「Google Tag Manager」
キーワード調査や検索最適化のための「Google Search Console」（sitemap.xmlの送信）
各ツールから発行されるIDをSTUDIOの管理画面にて入力するのみで、計測タグを入れ込んでくれます。
一応、STUDIOにもアナリティクス機能はあります
STUDIOでは、GA4を入れずとも、STUDIOの管理画面上でサイト全体のPV数（無料）や、ページごとのPV数（有料）も見れます。しかも、設定不要。
ちなみにこのアナリティクスはCookieを使用していないとのこと。そのため、通常であれば必要なCookie使用のための対策は不要と公式のページに記載があります。ここもポイント高いですね！
RSSを使った記事の自動取得表示
※現在、こちらのコンテンツは廃止にしています。
こちらは、本サイトの隠れた肝でもあるのですが、上記の画像のセクションは、東北各地のWebメディアから配信されている「RSS」を用いて、自動取得＆表示させています。
例えば、「仙台つーしん ( https://sendai-tushin.jp/ ) 」さんであれば、URLの末尾に「feed」と追加し、https://sendai-tushin.jp/feed/ として見ると、コードがずらっと表示されます。こちらがRSSと呼ばれる中身で、サイトの新着情報や更新情報を自動的に取得することが可能になります。
実際の表示方法と技術
また、こちらのサイトへの実際の表示方法を簡単に説明すると、下記のような技術・流れで表示させています。
GAS (Google Apps Script) を用いて、「Notion」に用意したデータベースへ自動で情報を入れ込むするコードを記述。
「STUDIO」から提供されている「Notion API」と連携し、Notionのデータベースに入れ込まれた情報をSTUDIO側で取得し、WEBページに表示。
なお、「Notion API」はまだベータ版のため、最大50件までしか表示ができません。また、突然動かなくなるなど挙動が若干あやしく、結構な試行錯誤をしてくれたようです。
こちらは、メンバーのNaofumiが、エンジニア歴４年の経験を活かして実装してもらいました（助かった）。
→ 詳しいことは、彼に聞いてみてください笑
https://x.com/naofumiotsuki
RSS、最近は衰退傾向？？？
ただ、RSS自体が最近はもう衰退傾向にあるのか、RSS配信をちゃんとしているサイトがあまりなく、ほぼ「仙台つーしん」さんの記事ばかりになっていまっているのが懸念点（いや、仙台つーしんさんが頑張りすぎなのかも笑）。特に、宮城県以外の県のメディアの記事が圧倒的に少ないので、もっと頑張って欲しいと内心思いつつ。。。
記事の取得の仕方など、ここはまだまだ改良の余地がありそうですね。
PageSpeed Insightsの結果は…
Googleが提供する表示速度を計測することができる無料ツール「PageSpeed Insights」
公開後、計測してみてみましたが、携帯電話：35点、デスクトップ：49点とあまり結果がよろしく無い。。。
STUDIOを使っているのでどうすることもできない部分もあると思いますし、先ほどのRSS部分で結構重めの処理をしているのもあって、劇的改善は難しいかもしれませんが、さすがに目をつぶれない数字。
※ちなみに、別案件でSTUDIOを使って制作した時は、デスクトップ95点前後をとれたこともあるので、ちゃんとやればそれなりの数字は目指せるはずです。
最近は、LCP・FID・CLSなどの指標が検索順位に影響することが多いので、ここは後ほど改善ですね。
最後に
いかがでしょうか。
クライアント案件だと情報をあまり出せないこともあるのですが、自分で作って自分で運営するサイトはこうして詳細に記事にまでできるので、いいですね。
ちなみに、「名前の由来」や「ロゴに秘められた想い」「今後の展望」などは、以下のBULLETISのnoteにて記事を書いています。よろしければこちらもご覧ください！
加えて、ROKKONはまだまだ道半ばです。
もし、ROKKONに掲載していないけど良いサイト・アカウントがありましたら、Xでもなんでも連絡いただけると、すごく嬉しいです！
それでは、これからROKKONと我らBULLETISを、どうぞよろしくお願いします。
私のチームBULLETISの宣伝
『旅は人生と世界を"ナイス"にする』
みなさんの旅が、もっと気軽で充実したものになるように。そして、旅が人生を豊かにするきっかけとなるように、発信活動をしています。旅メディア「BULLETIS (バレッツ)」をよろしくお願いします。
ROKKON公式X
BULLETIS公式X
Member TANAYAN : X (旧Twitter)、Instagram
Member Naofumi : X (旧Twitter)、Instagram
いいなと思ったら応援しよう！
