ハードウェアスタートアップにとって、製品を開発するという本業はもちろんのこと、開発以外にもやらなければいけない大事なことがたくさんあります。その大事な一つでありながら注目される機会が少ないことが、Webサイトの構築と運営です。

インターネットが普及し、電化製品もネットで買うことが日常的となった今、自社で開発した製品を幅広く販売するためにもWebサイトの存在は必要不可欠。見た目や使いやすさといった要因はもちろん、取材を受けてアクセスが殺到、その結果サーバーが落ちて肝心のサイトが見られない、という事態を防ぐために、大量のアクセスにも耐えられるサーバーの強さも必要です。

とはいえ、予算の限られているスタートアップにとって、Webサイトにかけられる費用は潤沢ではありません。ドメインを取得してサイトはとりあえず1ページ用意しておくという会社も少なくありませんし、中には無料のブログサービスを会社のサイト代わりにしているところもあります。

みなさんがいまご覧になっているこのカデーニャも、始まったばかりのWebサイトというだけでなく自社製品にも無関係なため、大幅に予算をかけて立ち上げるというわけにはいきません。とはいえ今後に備えて大量のアクセスをさばける冗長性の高さもニュースメディアとしてはしっかり抑えておきたいところ。

見た目も良くアクセスにも強く、それでいて予算は抑えたいというわがままな要望を受け止めた上で、オープンソースのブログツール「WordPress」をベースとしてカデーニャのWebサイトを構築してくれたのが、神戸にあるWeb制作会社のデジタルキューブ。今回はデジタルキューブに、カデーニャを題材としてWebサイト構築のノウハウをお伺いしました。

デジタルキューブの本社オフィスがある神戸の商船三井ビル
デジタルキューブの本社オフィスがある神戸の商船三井ビル

創業からWebサイト構築を手がけて10年。社員は全国各地でリモートワーク体制

——本日はよろしくお願いします。まずはデジタルキューブという会社について教えてください。

太田さん
太田さん

太田:2006年に創業した会社で、WordPressやAWSを使ったWebサイトの企画・制作・コンサルティングを手がけています。最近ではAWSを使ったWordPressのホスティングサービスである「AMIMOTO AMI」といった独自サービスも展開しています。カデーニャもこのAMIMOTO AMIを使って構築しました。

本社は神戸にあるのですが、社員は全国に散らばっていて、リモートワークで業務をこなしています。インタビューにお答えしている2名のうち太田は東京ですが、岡本は新潟の事務所で普段業務を行っています。弊社のリモートワークについては以前インタビューを受けているので、よろしければそちらもご覧ください。

ASCII.jp:神戸のデジタルキューブが実践するコミュニティ、ビール、たまに仕事 (1/3)
http://ascii.jp/elem/000/001/512/1512561/

——お2人のお仕事について教えてください。

太田:フロントエンドエンジニアです。WordPressのHTML/CSSデザインを担当しています。

岡本:インフラエンジニアです。WordPressをインストールしているサーバーや負荷対策などを担当しています。

低コストでアクセスに強いWebメディアを作るための秘訣とは

——今回は「できるだけ低コストでアクセスにも強いWebメディアをWordPressで作りたい」という、かなりわがままなお願いだったのですが、Cerevoからこのお話を受けたとき正直なところどう思いました?

岡本さん
岡本さん

太田:アニメの「PSYCHO-PASS サイコパス」を観ていたこともあり、Cerevoは「ドミネーターを作っている会社だ」という認識でした。お話をいただいた時は「これで下手なサイトを作ったら犯罪計数※が上がっちゃうんじゃないか」と不安でしたね。
※犯罪係数: アニメ「PSYCHO-PASS サイコパス」に登場する用語。作中においてこの数値が高い人は潜在的な犯罪者として扱われてしまう

岡本:ちょうどWordPessのサーバー構成でコストはかけずに速いサイトを作るために試してみたいアイディアがあったので、これはいい機会だなと思いました。

——具体的にはどのようなアイディアだったのでしょう?

岡本:WordPressの管理画面と、Webサイトの表示で使用するインスタンス(サーバー)を分離して、管理画面で使用するインスタンスを個別に停止できるようにした点です。

カデーニャのWebサイトはAmazonのAWS上で構築していますが、AWSは月のデータ量に応じて料金が発生する仕組みになっています。なので記事を投稿するときは両方のインスタンスを動かしておき、記事を投稿しないときには管理画面側のインスタンスを止めることで、AWSの運用コストを下げることができます。

また、CloudAutomatorのようなサービスを使えばAWSの運用を自動化するサービスを組み合わせると、営業時間外は管理画面用のインスタンスを停止する、といったコスト削減も実現できます。

さらに極端な話ではありますが、記事投稿をしたいときだけ管理画面用のインスタンスを起動すれば、WordPressの管理画面を狙った攻撃機会を減らすこともできるので、よりセキュアに運用することも可能です。

Webサイト表示側のサーバーについてはリザーブドインスタンス(AWSの入札制で購入する格安インスタンス)をオートスケーリングさせることによって、サーバーの運用費を抑える工夫もしています。

また、今回はサイトの初期構築のみを弊社が行い、その後の運用はお客様自身で行っていただくという内容になっています。その場合、設定値の変更などを行う際の資料引き継ぎが大変です。そのため、すべてのAWSリソースの設定を Terraformでコード化しておき、サイトの構築が終わったらそのコードをgitで提供することで、運用開始後はお客様が継続的にメンテナンスすることができるようにしております。

カデーニャはWordPressでできています
カデーニャはWordPressでできています

——なるほど、いろいろ考えられているのですね。フロントエンド側として工夫された点はありますか?

太田:サイトのデザインは一から制作すると工数もかかりますので、イメージに近いWebサイトをいくつか選んでもらい、色やフォントの大きさなど細かな点のみ要望を踏まえてカスタマイズすることで工数を削減しています。

機能面もWordPressはプラグインが多数公開されているので、使えるものはうまく取り入れています。例えば関連記事を表示するための「WP Simple Related Posts」とGoogle Analytics からデータを取ってきてランキングを表示する「Simple GA Ranking」ですね。他にも管理画面側の機能を追加する「Advanced Custom Fields PRO」、タグ管理がしやすい「Simple Tags」、カテゴリーやページの順番を変更できる「Simple Page Ordering」やSEO機能を追加する「Yoast SEO」など、ニュースメディアで要望されることの多い機能も取り入れています。

また、個人的に使ってみたかったということもあって、一部の表示周りでWP REST APIを使ってみました。具体的にはスライダーやアーカイブページでWP REST APIを使っていて、ページ送りのREAD MOREを押すとWP REST APIで次のページをを取ってきて、下に追加する仕組みにしました。

ニュースサイトならではのサイト構築のこだわり

——一般的なサイトとニュースを扱うサイトだと構築に違いはあるものでしょうか。

太田: ニュースサイトでは記事を投稿するライターさんが複数いるのを想定し、画像サイズや入力方法などを統一できるように工夫しています。例えば横長と縦長の画像が混ざった場合、一覧ページでは高さがバラバラになってしまってデザインが崩れることがあるので、WordPress側である程度画像をそろえてしまったり、スタイルシートやJavaScriptで調整します。同様に記事タイトルが長い場合も、文字数に制限をかけてデザインが崩れないよう調整していますね。

また、投稿する人ごとに記事の見た目が変わらないよう、投稿画面に入力項目をいくつか用意し、それを埋めていくことでデザインの統一感がでるような工夫もしています。

ただ、こうした工夫はもちろん費用もかかるので、運用でカバーできそうな場合はあまり作り込まないこともあります。カデーニャは実際に運用する人のリテラシーもある程度高いだろうということもあり、あまりカスタマイズは加えていません。運用でカバーしてもらうようにしている点もコストを抑えるための秘訣ですね。

岡本:ニュースメディアでは、いきなり話題になって通常時の数十倍のリクエストが発生することがあります。そういったときの対応として想定される最大リクエスト数にあわせて最初から大きなリソースで運用することでも対応できますが、それだとリクエストが少ない時にはオーバースペックとなり、コストもバカになりません。

サーバーをAutoScaling構成にして、リクエスト数やネットワーク流量にあわせてインスタンスの台数を増減することでコストを抑えつつ、話題になった時には大量のリクエストを捌くことが必要となってきます。また、CDNをリバースプロキシキャッシュ的に使用することで、オリジンサーバーへのリクエストを減らし、オリジンサーバーのリソースも抑えています。今回はCDNにCloudFrontを採用しました。

——かなりざっくりとしたお願いながらもしっかり作り込んでいただけたことが理解できました。ちなみに今後同じようなお願いを他の企業がする場合、どのようなところに気をつけておけばいいでしょうか。

太田:いくつかありますが、まずはサイトの目的、サイトを見てほしいターゲットをしっかり決めておくことですね。その上で同業者のサイトや、デザイン的に参考になるサイト、イメージに近いサイトなどをいくつか見つけておくこと、サイトに絶対必要な機能を決めておくことも重要です。

また、サイトは構築して終わりではなく、その後誰がどのように運用するのか、メンテナンスはどうするのかという長期的な視野も必要です。これらを考慮した上で、どのくらいの期間でサイトが必要なのか、運用やメンテナンスも踏まえたトータルの予算はどのくらいなのかを決めてもらえるとその後がスムーズです。

とはいえ、これだけのことを最初からすべて考えておくのも大変ですので、まずは細かな仕様までは考えずに、サイトの目的を簡単に教えてもらえれば大丈夫。我々はWordPressを使ったWebメディアの制作はたくさん経験がありますし、お話を聞く中で技術的な選択やコストパフォーマンスの検討を予算に応じてこちらから提案できますので、まずは気軽にご相談いただければと思います。

——本日はありがとうございました。

デジタルキューブ
https://www.digitalcube.jp/

WordPress 専用の AWS + クラウドホスティング AMIMOTO | 超高速 WordPress AMI AMIMOTO
https://ja.amimoto-ami.com/

一覧へ戻る 右矢印