はじめまして。テクニカルディレクターの横川です。CINRA, Inc.でクライアントワークや自社メディアCINRAなどに携わっています。

今回は、ウェブサイトを構築するうえで、土台ともいえる技術選定についてお話したいと思います。

エンジニア向け記事に見えますが、ウェブサイト構築の技術選定は、スケジュールやデザイン、そのあとの運用など、開発フェーズ以外の与件も考慮して決定されるため、自分には関係ないと思った非エンジニアの方（とくにウェブディレクター、プロジェクトマネージャーなどサイト制作全体のディレクションをする方々）にもぜひ読んでいただきたい記事です。

技術選定はエンジニアのものだけではない

ウェブサイト（アプリケーション）は、複数の技術の組み合わせによって実現されます。技術の組み合わせが示す範囲はさまざまですが、ある程度パターン化され、SPA、Jamstack、SSR、SSG……といった略語があり、「技術選定としてSSGを採択しました」のように利用されます。

「何の組み合わせ技術なのか」を簡単に伝えるための略語ですが、エンジニア同士で使う専門用語という印象を持っている方もいらっしゃるのではないでしょうか。

クライアント含め、非エンジニアの目線では、ウェブサイトが無事にリリースできることが重要で、そのサイトをどのような技術で実装するかはエンジニアの裁量に任せていただいていることが多いと思います。

しかし、技術選定を間違えるといざ運用が始まってから、担当者のやりたいことと、ウェブサイトのつくりにギャップが生まれてしまうことがあります。

納品後、WEBサイトを一番使うのはクライアントなので、どのように運用していくのか、誰が運用しやすいようにつくるべきなのかはしっかり抑えておきたいところです。技術選定はそうしたことも加味して決定するので、エンジニアは一見直接関係なさそうなクライアントの運用体制や、KPIの会議などもじつは興味津々に聞いています。

サイトを動かすソフトウェアの略語「○○○スタック」「○○○構成」って？

この記事では過去の制作実績とともに、なぜその構築手段を選んだのかを見ていこうと思うのですが、前提となる略語をいくつか紹介したいと思います。

非エンジニアの方にも読んでいただけるよう、ここでは大まかな位置づけを説明する程度にとどめます。もし内容について興味を持っていただけたなら、わかりやすくまとまった記事がすでにたくさんありますので、この機会にぜひ調べてみていただけたらと思います。

まず、ウェブサイトを動かすためにはいくつかのソフトウェアが必要です。何のソフトウェアを使ってサイトを動かすのかを「〇〇〇スタック」や「〇〇〇構成」といった言い方をします。よく使われる構成は例えば以下です。

【LAMPスタック】
最初期に登場していまもメジャーなのがLAMP（Linux、Apache、MySQL、PHP）スタックで、それぞれソフトウェアの頭文字を取って略称がつけられています。Apacheの部分がNginxに置き換わってLEMPになることもあります。

【MEANスタック】
その後、Node.jsの登場によりJavascriptがサーバーサイドも担えるようになったことで登場したのがMEAN（MongoDB、ExpressJS、Angular、Node.js）スタックです。AngularがReact、Vueに置き換わってMERN、MEVNスタックなんかもあります。

【JAMスタック】
そして、React、Vueが静的サイトの構築に使えるようになってきた流れで出てきたのがJAM（Javascript、API、Markup）スタックです。現在はより広義の概念を指すようになり、「Jamstack」という表記が使われています。

Jamstackの登場によって、CMSやサービスの幅が広がった

Jamstackについて少しだけ掘り下げておきます。大まかに言うと、SSG（Static Site Generator）という技術によって、コンテンツ更新があるサイトを静的HTMLで配信できるようにする設計手法です（正確にはより広義なアーキテクチャを指すようになってきているようなのですが、今回はSSGを使ったパターンを指すこととします）。

MT（Movable Type）というCMS（Contents Management System）をご存知の方は、それが静的サイトジェネレーターであるということを聞いたことがあるかもしれません。MTでは更新されたコンテンツを静的HTMLとして生成する処理をCMSが担っていましたが、Jamstackではその生成する処理をJavascriptが担います。

それにより、生成処理ができるCMSを選ばなくても、コンテンツ管理が必要な静的サイトを構築できるようになりました。つまり、選択できるCMSやサービスの幅が広がったのです。

冒頭にでてきたSPA（Single Page Application）は、Flashに代表されるRIA（Rich Internet Application）に変わり、Javascriptでリッチなウェブサイトを構築するための技術として提唱されていったものとされています（諸説あるようです）。

SPAはページの切り替え、描画すべてをJavascriptで行なうため、ネイティブアプリを使っているような操作感を演出できるのが特徴です。SPAに対し、従来の構築方法のことをMPA（Multiple Page Application）と言うこともあります。

簡単にですが、構成と開発手法について説明させてもらいました。なんとなくそういうものがあるのだと思いつつ読み進めていただけたらと思います。それでは、技術選定の例をCINRA, Inc.の過去実績とともに見ていきます。

安定感のあるベーシックな構成

CINRA, Inc.はLPから会員サイトの制作までさまざまな依頼を企業からいただくので、都度、技術選定を挟みますが、ゼロから考えるのではなくベーシックな型があります。WordPressを使うことが多いため、CMSを使う案件では基本的にLAMP / LEMPスタックのMPAサイトにします。これはCINRA, Inc.のスタンダードというよりは一般的にもベーシックとされている構成です。

受託案件である以上、別会社に引き継ぐ可能性を考慮しておかなくてはいけないというのもありますし、対応できるエンジニアも多く、つくり慣れているので低リスクというのもあります。

メディアグロースにも配慮したオウンドメディア

こうした受託案件全般に言える理由も大きなジャッジポイントのひとつなのですが、例えばアイセイ薬局様のメディア「HELiCO」（制作実績の詳細はこちら）では、次のような理由からベーシックな構成を積極的に選択しました。

• クライアントにメディアグロースをやっていく体制がしっかりありそうだった

• 長期的にはいろいろな施策を考えており、拡張性が求められそうだった

• 十分な構築期間が確保されていた

まず、運用体制を気にする理由は、実際にサイトを使う機会が多い人に合わせて設計するのが大切だと思っているからです。

グロースにはGTM（Google Tag Manager）やMAツール（マーケティングオートメーションツール）、そのほか外部サービスとの連携がつきものです。ここで、例えばSPAでつくられたサイトでは、設定方法が少し違ったり、エンジニア稼働が必要になってしまう場合があります。こうした導入障壁は長く運用していくにつれ細かいストレスになっていってしまいます。

「HELiCO」ではクライアントの運用チームにグロース担当者がいることがわかっていましたし、長期的にはいろいろと施策を打っていきたいというお話を聞けていたので、極力ベーシックな構成を考えました。

また、製作期間がしっかりと確保されているかも一つの考慮ポイントになります。ベーシックなつくり方では、マークアップソース（静的に組んだHTMLソース）をCMSに「組み込む」作業が発生します。ここは作業者が分かれる場合が多く、マークアップが完了しないと次が動き出せない、いわゆるクリティカルパスになるので、短納期案件には向いていないこともあります。

とはいえ前工程が押して結果的に五月雨に組み込み作業をすることになる……というのはエンジニアあるあるなのですが、製作期間を考慮して別のつくり方を検討することもある、ということだけこの場では言及しておこうと思います。

まとめると、下記のようなメリット、デメリットがあります（SEOについては次のSPAの項目でご紹介します）。

印象的な表現ができるSPA

CINRA, Inc.ではコンセプト策定から開発までを通して受託することが多いので、「デザインコンセプトやサイトコンセプトを考慮してSPAにしたい」というリクエストをデザイナーチーム、UXチームからもらうことがあります。

ブランディング重視のウェブサイト

ハワイウエディング事業を手掛ける「B.Nature」様のコーポレートサイトでは（制作実績の詳細はこちら）、社内のデザイナーとのコミュニケーションのなかでSPAを使う案が持ち上がり、下記の点を考慮して採用することを決めました。

• ウェブサイトに求めるものがブランディングであるという点がはっきりしていた

• SPA実装ができるエンジニアがアサインできる見通しが立っていた

サイトを見ていただくと、ページ遷移のときに入る、波をイメージしたアニメーションがハワイのゆったりとした雰囲気にマッチングして、素敵なブランディングサイトに仕上がっています。これはひとえに、SPAの為せる技と言えるでしょう。また、製作期間が少し短めであったこともSPAの採用を後押ししました。

前述の通り、ベーシックなサイトをつくるには「組み込み」工程が必要なのですが、SPAの場合は同じ担当者がマークアップをしながら動的につくり込んでいきます。そのため、明確な依存関係にはならずクリティカルパスが短くなる傾向にあります。

ただし、その分フロントエンドエンジニアに求められる技術スタックが増えるため、マッチングするエンジニアさんをアサインできるかどうかは事前に見通しを立てておく必要があります。

一方で注意点もあります。SEOについては、MPAのほうが最適化しやすいという意見がまだ根強くあるほか、Javascriptで動作するツールとの相性は構築方法に依るところがあります。

回避策もあるため一概にSPAはSEOに弱いとは言えないのですが、MPAでは何も考えずにできることを、あえて考慮しなくてはいけない不便さは正直感じてしまいます。そのため、SEOのプライオリティーが高い場合にはSPAでつくる選択肢は慎重に検討します。

そのほか、ページ遷移がなめらかにできることから、滞在時間が長くサイト内回遊が多く発生するサイトで採用されることもあります。

今後の動向が気になるJamstack

JamstackはまだCINRA, Inc.での事例が少ないのですが、表示速度を担保したい場合や、セキュリティー与件が厳しく、静的サイトが望ましいと企業担当者からリクエストいただくケースで選択肢に入ります。

また、インフラのコストを最小限に抑えられる、サーバレスという仕組みと相性がよいため、運用コストを抑えたい場合に最適です。ほかにも、選択できるCMSやサービスが多いため、サイト規模や構築期間などのさまざまな理由で選択肢に入ってきます。

イベントなどの期間限定サイト

行政のイベントプロジェクトを発信する、あるWebサイトでは「Newt」というCMSで記事を管理し、静的サイトジェネレーター（SSG）としてAstroを採用しました。Newtとは、ヘッドレスCMSと呼ばれるタイプのCMSで、JAM（Javascript、API、Markdown）スタックに必要な「API」の要素を提供するのに優れています。

表示速度の担保が特別求められていたり、静的サイトにすることが必須というわけではなかったのですが、次のような理由からJamstackを採用しました。

• 期限つきのサイトである

• コンテンツの内容として動的な要素が少なく、静的サイトベースで十分要件を満たせると判断した

• 短納期のため、フロントエンドとバックエンドで作業を分けたほうが効率よく進められそうだった

NewtはヘッドレスCMSのなかでも新興で、使える機能が絞られている代わりに、シンプルに運用、開発ができるため、目的がはっきりしているサイトには最適です。純国産なので日本語対応がされており、運用者にわかりやすいのも嬉しいポイントです。

また、CINRA, Inc.が手がけたそのサイトは期間限定のため、長期的な拡張性をあまり気にしなくてもよいという点も、採用する後押しになりました。静的サイトなだけあり、Core Web Vitralsの数値が良く、体感としてもサクサク動く印象です。

最後に

簡単にではありましたが、話題に上がることが多い構築方法を3つ紹介させていただきました。構築時の技術選択を間違えると、運用が大変になってしまったり、将来やりたかったことが出来なくなってしまったりする可能性もあるのだなぁということをなんとなく感じていただけたなら幸いです。

CINRA, Inc.の最新情報はこちらから！
Twitter　Facebook
メルマガ（月1回 配信）