ガーデン・シティ・ライフ・ログ

ジュビロ(Jリーグ)とか、野外フェスとかアートとか、庭園巡りや町歩き記録。

庭園情報メディア〈おにわさん〉リニューアルによせて

『おにわさん』のデザインをフルリニューアルしました!
oniwa.garden

2年前、これまで巡った庭園をまとめたサイトとして制作・380箇所からスタートした『おにわさん』も今や約700箇所の庭園を掲載。インスタグラムも4,000人フォロワーまでいったし、「●●県 庭園」でググると大手企業の観光案内系サイトと並んで表示されるレベルに。

趣味のサイトとしてはなんとなくブルーオーシャンみたいな状況で運営してきたのかなあと思う中で、今回のリニューアルに関してはウェブ制作目線で色々考えさせられるところも多かったので、その備忘録としてこのエントリを書きます。
サイトとしての方向性、みたいなことはサイト内「”おにわさん”について」(https://oniwa.garden/about-oniwasan/)に書いたので、こちらでは「ウェブ制作・運営目線」でのエントリを書きます。

課題感

一番最初のきっかけは「SSL対応しなきゃなー」と夏前ぐらいから思っていたところからで、既存サイトの契約が10月末で更新を迎えるのでそのタイミングまでにはやりたいなと思っていたところから。
そういう意味では最初はこんなにガッツリリニューアルするつもりはなかった――もうね、進めれば進める程課題に気づく日々だったw

▼サーバ目線

  • 繰り返しになるけど、GoogleSSL非対応サイトを検索結果から除外する――ということは昨年から言われていたことなので、SSL対応は必須のタスクだった。
  • そしてその上で、この春夏ぐらいからか既存のサーバの調子が超悪かった。記事何本か更新するとサイト落ちるみたいな。

なのでミニマムでは「まるっとSSL対応+サーバー移転」だけで良かったは良かったんだけど。

▼コンテンツ目線

  • そんな中、後発サービスの「庭園ガイド」(https://garden-guide.jp/)さんの台頭。たとえば自分のサイトがなかなか検索評価が上がらない中で、どんどん検索で引っかかるようになっている。
  • 自分のサイトのことしか見てないと「そんなもんなんだろう」と思ってたけど、他サイトの評価が高くなっていくのを見ていると「これはサイトの構造が古いのだ、改善せねば」と思ったことが、結構ガッツリしたリニューアルになった最大の要因。
  • その最たるものがやはりSSL非対応なところとサーバの調子(サイトの速さ)。でもそれはもちろんだけど、自分の昔の記事を見返せば見返すほど、本文が無いw 見出しもない、わかりづらい。
  • そりゃあコンテンツの評価高まらないわ。
  • そしてなんとなくだけど、リリース時は「タイトルに日本語・英語を併記することで、海外の日本庭園好きの検索からも引っ掛かるように」という狙いがあったんだけど、(初期は実際そこからの流入もあったんだけど)ここ最近は無かった。多分言語が混在しているページが評価されなくなった?
  • その他にも、例えば鎌倉の庭園が15件ぐらい載っているのに、「市町村」のカテゴリやタグが県までなので「鎌倉の庭園」という個別ページがない状態。その情報を探している人を取り逃している(届けられていない)。
  • なので――テキストを書き直すのは大変だけど、700件にもなったのだからカテゴリ・タグは単純にわかりやすくすべき。

以上を踏まえて、
・検索評価を少しでも上げるためにはサイトも抜本的に見直す必要がある
という意識でリニューアルをスタート…というか、徐々にそうなっていった。

▼作業

というわけで具体的な作業の話。

  • 有料のサーバは夏にハンドクラップ侍(https://handclap-samurai.com)を作った時に借りてて、ここならSSL対応も問題ないのでここはすぐ終了。
  • その後は夏場〜晩夏はまだまだフェスやサッカー遠征シーズンだったので、作業に着手できたのは9月末から。
  • サイトの速度がかなり課題感としてあったので、テンプレートを「速さ」重視で調べて採用。
  • そのテンプレート「Godios.」は前からやりたかったPjaxも搭載してるので本当はやりたかったんだけど――もともと使ってるフォトギャラリーのjsがうまく動いてくれなかったので(そしてそれを変えると全記事のソースを修正しなければいけず、それはしんどい)、ページ遷移は普通のものにしている。
  • でも一部、久々に自分でjsやphpを書いているところもある。ああもう、コーディングはおろかプログラミングはこれで卒業したい…(けどページタイトルの出し分けで一部納得いっていないところもあるので、もう少し手を入れそう…)
  • デザインについては後述。これは最後の最後まで調整してたけど集中してやっていたのは2週末+平日1〜2時間。
  • そして記事周りの登録作業――もちろんテーブルはまるっとインサートしてるんだけど――画像がサイズ変わるしな、ってところで一度全クリアしたのが良くなかった。700件のメイン画像登録し直し(+今回見出し用にもう一点登録する)というのが想像以上に大変だった。
  • 画像登録だけじゃなくて、併せて前述の市町村とか追加した項目への対応もしてたんだけど――ここで「テキスト適当すぎる!!」と実感。テキスト書き直しはじめてると全然進まない。これじゃ月内に終わらない――ので見出しなどの一部項目は諦め。
  • これに2週末+平日の2時間ぐらいを積み重ねて、よーーやく終了。
  • で、昨晩ネームサーバーを新しいサイトへ向けて終了〜〜月内にリリースできてほんとよかった〜〜。

▼サイトのデザインについて

そしてサイトのデザイン。こだわりポイントが色々あるので書きたい。

■デザインの方向性的なところ

  • 最初にリリースした時のようなファーストビューがフルスクリーンって感じのサイトがやっぱり好きなので、最初はそういう形で考えていたけど、
  • 仕事まわりで色んなサイト・雑誌の表紙を見ているのもあり、今年流行っているデザインは「余白」と「ブロークングリッドだぞ」と。自分が好きなカルチャーっぽいものは大体そういう方向性。
  • 和のものをカルチャー・マガジンっぽく見せたい。
  • そこと前回も使っていた「Sawarabi Mincho」を組み合わせたデザイン。
  • ちなみに今回使っているWebフォントはこれだけ。前回はもう一つ使ってたけど、「サイトを軽く」という思いがあったので明朝以外はデバイスフォント。
  • もともとこのサイトのコンセプトは「ゆるく」だし、ポップに見せたいというのもあるので、楕円を沢山使っているデザインになっています。

  • トップページで余白を気にした分、記事ページではファーストビューを写真が覆うような形になっていて――
  • その流れで、見出しを縦書きで見せているのも今回のこだわりの一つ。
  • あとPCで見るとフォントサイズが全体的にかなりデカいはずです。本文22px。普通のメディアサイトは14〜16pxが主流だと思うので、かなりデカい。仕事含めてこれまで自分がやったサイトで一番大きいです。これは――文言の少なさをごまかす目的とw、余白感と「読みやすさ」を追求していったら大きくなりました。多分PCで見ている方は年齢層高めの人だと思うので、文字が大きい=良いこと なのではないか、とは思っています。

■情報的なこと

  • そういうデザイン性も大事だけど、「文字を増やすこと」が今回のリニューアルでやらなければいけないことだった。
  • たとえば前回はトップページの一覧はグリッド的に最新記事を並べていて――前回は「どこの庭園」ということは重要じゃなくて、イメージでクリックしてもらえるような、そんなサイトがいいなと思っていた。

  • けど今回は「文言が少なくて検索評価が上がらない、一覧で見ていても情報が少なくてわかりづらい」ということが大きな改善事項だったので、カテゴリも文章の冒頭も色々と表に出る形になってます。

終えてみて:反省点

▼サイトを作りはじめに関する反省点

  • とにかく「どんな言葉で検索して、サイトに来訪してもらいたいか。それを念頭に置いたテーブル設計」に尽きる。「鎌倉の庭園でまとめられていない」というのが一番わかりやすい構造の悪さ。

  • 最初は面倒くさくってあまりフィールド分けをしなかったんだよね。「見出し」もなかったし、英語名も同じタイトルフィールドに入れてた。
  • でも結局今回そのフィールド分けを700件に対して作業しなければいけなくなったし、テキストもまだまだクオリティが低い状態。これを後から取り戻すのは大変だ。最初から念頭に置いて造らなければいけないところ。
  • 「どんな言葉で検索されたいか」で言うと、「庭園」という言葉で上位に来るようになることは正直最初諦めてたんですよね。一単語で引っ掛かるのは厳しいだろうと。
  • でも700箇所にもなると、庭園マップや写真の量に関してはそれなりのコンテンツである自負はある。
  • ので、ちょっと工夫としてサイト名で「庭園情報メディア」という単語を前に持ってきてみたし、サイト内でも箇所や写真枚数を入れてみた。画像点数は、「更新前」のもの含めると1万枚近く掲載しているけど一応正確に近いものに――こういう狂っている感じはもっと出したい。

今後やりたいこと

前述の通り、文章のクオリティ改善は今後の最大の課題。これは正直時間がかかるものなので先々時間を掛けて…。

  • 1) とにかく冬場に記事のリライトしたいな〜。別にテキスト中心のサイトにする気はないのだけど、一行だけしか書いてないエントリとかも結構あるので(笑)最初はやっぱそれでも「行った場所」ということをまとめたいサイトだったんだよね。
  • 2) そして今回は「メディア」という言葉をつけた。いつか「庭園メディア」と名乗りたいと思っていた。500箇所超えれば、その資格あるかな?と思っていたので。で、メディアというからには、もっと色んなコンテンツをやりたい。2年前から言ってるけど。でもこれは冬から本当にちゃんとやろう。
  • 3) その具体的な方向性。「おにわさん」というタイトルは、最初は「庭園そのもの」を指す言葉として付けたものだけど、庭師さんのことを「お庭さん」と読んだりする人もいる。庭師含めて、庭園の維持に携わる人々、庭園を好きな人々。にフォーカスを当てたコンテンツをやりたい。やろう。
  • 4) コンテンツ量の話に戻る。最初のリリース時はなぜか「画像はMAX8枚、そして偶数」というルールにこだわってセレクトしていた。なので今となっては結構「掲載していない画像」が多い。この辺を過去フォルダから掘り出したい…。
  • 5) あとは「どこまでを庭園っていうの?」なんて友達から聞かれたことがあったんだけど。実際、初期は「●●庭園」と、「庭園」が付くもののみを極力ピックアップしていて、ただ最近は登録有形文化財暮らすのは「●●家住宅」みたいなところにも庭園があるなあと思ってそうしたものを結構載せている。もう少し武家屋敷の庭園や茶室は行っているはずなので、そのへんの記事も掘り起こしたい。

たとえば――結局は自分の趣味で、茅野の藤森照信さん建築群なんかは絶対このサイト好きな人が見たら「好き」と思える場所だと思う。そんなものも今後載せたっていいのではないか、とは思っている。なにせ「ゆるくお庭を愛でる」なので、極端な話「あ、あのお庭いいな」と思える場所ならなんだって掲載したい。歌舞伎座の屋上庭園とかまさにそんな感じ。

でもやっぱり「キャッチーでライトに」がこのサイトの目指すところ

テキスト量の少なさに大変危機感を覚えた今回のリニューアルではありますが、最後に思い返すと、このサイトの場合はやっぱ別にプロっぽいコンテンツが目的ではない――1ページ30秒しか滞在しない人に、30秒で画像を見て雰囲気を伝える。多分そういうサイトであるべきなんだよな。
昨年のTVBros.の時も言ってたような気がするけど、インスタで「和が映える」と気づいた人が、このサイトを利用して巡りやすいものであるといいな――なのでもしこのサイトが最も目指すべきものがあるとしたら、庭園マップの件数がどんどん増えて充実していくこと、かな?

という感じで。構造が駄目なサイトでどんなに記事増やしたって仕方がない、と思っていたので更新がちょっとおろそかになっていたけど、これで気持ちよく次へ進めるーーー!!70箇所ぐらい更新のストックがあるのでどんどん更新していきたい。そして紅葉の庭園を巡りたい!!
一方で秋には残留争い!ハーフマラソン!今週にはポール!やっぱ色んなイベントが待ち受けているので――ああ本当に今週で終わってよかった〜〜。先週の長崎アウェーで、また知らない新しい街に出会って、ほんとのほんとに1年分のブログを起こす気ではいるんだけど――これも冬場のタスクだな〜〜〜。

最後に作業途中のデザインと前回のデザインの記憶を。

今後とも「おにわさん」もよろしくおねがいします!