釧路市ご当地Vtuberの鬼霧シアンさんの公式サイトを制作しました

なぜ制作することになったのか?

身内の紹介という、ふとしたきっかけから作ることになりました。

鬼霧シアンさん(本人)がWIXの無料板で作っていた既存のホームページがありましたが、
やはり、デザインやSEOの面で悩んでいたようで、今回私がWordPressを使い制作する形になりました。
依頼内容としては、「なるべく団体さん向けにしてほしい」,「リスナーさん向けにするのも疎かにしない」
のような感じでした。

鬼霧シアン公式サイト

鬼霧シアン公式サイト | 釧路市ご当地Vtuber

https://onikiri.jp

鬼霧シアンの活動情報をわかりやすく紹介しているサイトです。

サーバーの構成の紹介

今回は、AWSとさくらのレンタルサーバーを組み合わせた、ハイブリッドな構成で作りました。
ほとんどの動的なファイルもキャッシュし、応答速度が最小330msのときもあります。

また、約2000~3000の同時アクセスに耐えうることが期待されます。(あくまで予想)

この構成のメリット

• さくらのレンタルサーバーを使用しているため、オリジンのコストが最小限に抑えられる。
• AWS CloudFornt で同時アクセス数の拡張ができる。
• 小規模~中規模サイトのため、CloudFrontの無料枠のみで完結できる。

セキュリティの面について

AWS WAFとCloudFrontを併用して、セキュリティを高めています。

AWS WAFでは主に、以下のような攻撃に耐えられるよう構築されています。

AWS WAFのメリット

• レイヤー7のD/Dos攻撃
• Linux(OSコマンドインジェクション)
• PHP(PHPの脆弱性やPHPインジェクション)
• SQLインジェクション
• XSS
• WordPress(WordPress固有の脆弱性)

CloudFrontのメリット

• D/Dos攻撃を受けても被害を最小限に留めることができます。
  • 約1分間で約3000件のトラフィックの同時接続数に耐えられます。
• テキストを次世代の方式(Brotli(br))で圧縮できる

サイトのUI/UX設計

Vtuberさんのサイトなので、アニメのサイトや、エンタメ寄りのサイトを想像するかもしれませんが、
実は、かなりシンプルにサイトのUI/UXを構築しました。

まず、下記の画像をご覧ください。

このUI/UXをみて、どう思いましたか？
やはり、一番最初のTOPページを見た時点で、
「すごくシンプルなUI/UXだ」だと思いませんか？

私は、このようなシンプルなUI/UXのサイトを作ることが得意で、コーポレートサイトのような見た目になりました。

実際の意見

しっかりしてるし分かりやすい!!

企業のサイトのようで堅実さをアピールしてる

など、監修役の人や、でし民(視聴者)たちから、フィードバックをもらいました。

コンバージョンとして設定したのが、案件獲得

鬼霧シアンさんと打ち合わせをして、本人から出てきた意見はやはり「案件の獲得」でした。
なので、まずは「メールアドレス直乗せ」をやめて、コンバージョンが少しでも上がるように、
外部のフォームサービス「オレンジフォーム」を使用し、問い合わせフォーム作成しました。

また、問い合わせページへ遷移した数の測定などを記録したり、問い合わせボタンがクリックされたのを、
アナリティクスで分かるようにしました。

SEOの面でかなり強い

鬼霧シアンさんのサイト、onikiri.jp は現時点(2024/11/28)で登録してまだ、間もないのに、
なんと検索結果で4位という地位に上り詰めました。

今回の場合、特殊ケースで、WIXのサブドメインを使用していたため、ドメインの評価の引き継ぎなどはできないのですが、
それでも4位に上り詰めるという驚異的なSEOの強さがありました。

こだわったポイント

やはり、エンタメページではないので、いかにキャラクターを引き立たせるかに注力しました。
具体的には、鬼霧シアンさんの絵をdrop-Shadowで、際立たせたりしました。

他には、誰でも見やすいようにUIにも配慮しました。
Googleが提唱しているマテリアルデザインの要素を少し取り入れて、私の作ったUIと混合させることで、
わかりやすいUI/UXを実現させました。

https://onikiri.jp

進め方

最初はなにもない状態でした。
なので、本人が作った元になるサイト(WIX)で、ある程度情報収集ができました。

打ち合わせの面では、お互いの意見を尊重しあい、かなり良好な関係でした。
また、打ち合わせ前では簡易的なグループチャットで、主に鬼霧シアンさん含め複数人で、色々意見を出し合ったりしました。

そこから、ある程度自由にやっていいということだったので、まずは、私が雛形を作り、
それをあとから数回の通話でのヒアリングをし、改変していきました。
そして、サイトを公開しました。

まとめ

今回は初めてのクライアントの折衝もあり、
色々と社会的な勉強や、エンジニア的な勉強もできました。
今まで苦手だった、AWSの使い方も覚え、WordPressうまくいじれるようになりました。

またUI/UXをGoogleのマテリアルデザインと混合させるという斬新な手法を実現し、
自分としても、レベルがかなり上がったと感じています。

今回、サイトを作らせてもらった鬼霧シアンさんには心から感謝しています。