WordPressの代わりになる!2018年注目の静的サイトジェネレーター6選
WordPressを使ってブログサイトやホームページを作成しているひとは多いかもしれません。しかし、もしあなたにプログラミングの知識が多少なりともあって、SEO上も有利にしたいのであれば、静的サイトジェネレーターを使ってみるのはいかがでしょうか。
静的サイトジェネレーターを使えば、データベースが不要になり、一般的にページの読み込み速度も上がるとされています。汎用的に使えるものからシンプルに使えるものまで幅広く存在するので、用途にあったものが選べます。
そこで今回は、2018年に注目の静的サイトジェネレーターを、概要を中心にご紹介していきます。
サンプルコードなどは、参考として挙げているページをご覧ください。
静的サイトジェネレーターとは?
静的サイトジェネレーターとは、Markdownなどで書かれたファイルをもとに、静的なコンテンツのテンプレートだけでビルドを行いサイトを作成するためのWebサイト作成用のフレームワークです。
WordPressをはじめとするCMS(コンテンツ管理システム)では、ホームページを作成するのにコンテンツを保管するデータベースが必要です。しかし、静的サイトジェネレーターに必要なものはWebサーバーだけでよいので、準備コストもメンテナンスコストもかかりません。
静的サイトジェネレーターの多くはNode.jsやReactなどのJavaScriptフレームワークをベースにして動いています。そのため、最低限のJavaScriptの知識は必要になりますが、それをクリアした状態であればWebサイトの作成も非常に簡単に行うことができるでしょう。
2018年に注目の静的サイトジェネレーター6選
1. Gatsby (ギャツビー)
Gatsbyは、React.jsをベースにした静的サイトジェネレーターです。HTMLやCSS、JavaScriptなどのファイルをテンプレートとして保存しておけば、Markdownで作成したテキストファイルをビルドすることで、簡単に静的サイトを作成することができます。
サイトの制作スピードは静的サイトジェネレーターの代表格であるJekyllやCMSのWordPress、サイトビルドサービスのSquarespaceに比べても圧倒的に高いことが明らかになっています。また、メンテナンスのしやすさでも他のツールに優っています。
ページをリロードせずに他のページに遷移する仕組みを採用しており、読み込み速度も早く感じるでしょう。このようなシングルページのWebアプリケーションは、従来のページに比べて20分の1以上に抑えられており、SEOでも有利に働きます。
参考:
React.js製の静的サイトジェネレーターGatsbyを使ってみた – Snaplog
2. Hexo (ヘクソ)
HexoはNode.js製の静的サイトジェネレーターです。
Hexoはさまざまなツールの中でも、ブログ作成に特化しています。Markdown形式で記事を書くという点は他のツールと同じですが、非常に簡単なコマンドでページを追加したりプラグインやテーマのインストールを行うことができます。
Hexoではさまざまなテーマが公開されており、無料で自由に利用することができます。デフォルトではLandscapeという名前のテーマが適用されています。また、さまざまな機能を追加できるプラグインもあり、RSSフィードを自動的に作成したりサイトマップを作成したりしてくれます。
参考:
Node.js製の静的サイトジェネレータ「Hexo」で無料ブログ開発 vol.1 | dotstudio
3. React Static (リアクト スタティック)
React Staticは、比較的最近作られた、100%Reactで作られた静的サイトジェネレーターです。Reactに慣れている場合は、非常に簡単に静的サイトを作成できます。
Reactに準拠しているということは、Reactが扱うUIの状態を管理するフレームワークReduxや、ライフサイクルのセキュリティ、ルートアニメーションなども扱えることになります。GraphQLも扱いやすいです。
一方、React Staticに関する日本語の文献は非常に少ないので、もしかしたら戸惑うかもしれません。Reactに関する基本的な知識があれば、英語のドキュメンテーションを確認すれば概要を掴むことができるでしょう。
React StaticはGatsbyに比べると設定もほとんどなく軽快です。React Staticで作成したページもSEOに有利に働くので、React学習者は利用してみてはいかがでしょうか。
参考:
Introducing React-Static — A progressive static-site framework for React!
4. Phenomic (フェノミック)
Phenomicは、ReactとWebpackを用いた静的サイトジェネレーターです。Webpackも用いていることから、Phenomicは自身のことを「Webコンパイラー」としています。
もともとReactベースではありましたが、現在では他にReasonReactもエコシステムとして選ぶことができます。また、PREACT、Next.js、Vue、Angularも開発が進められており、まもなく利用できるようになります。
Phenomicはテンプレートの書き方が非常にシンプルなので、JavaScriptの基本がわかればすぐに理解できるようになるでしょう。複雑で汎用的にしているというよりは軽量かつシンプルになっているので、慣れてしまえばあっという間に使えるようになるため、学習コストも極めて低いのが特徴となっています。
参考:
A Step-by-Step Guide: Phenomic on Netlify | Netlify
5. Metalsmith (メタルスミス)
Metalsmithは、「pluggableな静的サイトジェネレーター」と自称している、非常にシンプルなジェネレーターです。
*「すべてはプラグイン」(Everything is a Plugin.)*という思想設計があり、その名を体現するように、useを鎖で繋いで最後にビルドするだけ、という単純さが売りになっています。また、さまざまなプラグインと組み合わせることで、好みの形式にすることもできます。
Phenomicとはまた違った形でシンプルなので、学習コストも非常に低いでしょう。HTMLファイルをそのままの形で使い回すこともできます。
参考:
Nodeで動作する静的サイトジェネレータ「metalsmith」を使ってみた - HAM MEDIA MEMO
6. Jekyll (ジキル)
Jekyllは今回紹介するなかでも一番古手の静的サイトジェネレーターです。Rubyがベースになっており、Markdown形式で簡単にブログ記事を制作することができます。
Jekyllに関しては日本語に関する参考文献も多く、デザインも自由にカスタマイズすることが可能です。Github Pagesでもサポートされており、Rubyの勉強にもなるでしょう。
また、テーマやテンプレートも豊富に配布されているため、ゼロから組み立てるのが面倒であれば、すでにデザインされたテーマを利用してみるのもいいでしょう。無料のテーマも多いので、ぜひ探してみてください。
参考:
Jekyllで作るシンプルWebサイト - Jekyllとはなにか | CodeGrid
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- SEO
- SEO(Search Engine Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。
- データベース
- データベースとは、複数のアプリケーションまたはユーザーによって共有されるデータの集合体のことです。特定のテーマに沿ったデータを集めて管理され、検索や抽出が簡単にできるようになっているものを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- CMS
- ホームページを作成するための様々な作業を、一元的に管理できるシステムのことをCMS(コンテンツ マネージメント システム)と言います。ホームページを作成するには文章や画像などのコンテンツの作成からHTML、CSSを使った構成・装飾の記述、リンクの設定などが必要ですが、CMSを使用すればこれらの作業を自動的に行なうことができます。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- データベース
- データベースとは、複数のアプリケーションまたはユーザーによって共有されるデータの集合体のことです。特定のテーマに沿ったデータを集めて管理され、検索や抽出が簡単にできるようになっているものを指します。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- CMS
- ホームページを作成するための様々な作業を、一元的に管理できるシステムのことをCMS(コンテンツ マネージメント システム)と言います。ホームページを作成するには文章や画像などのコンテンツの作成からHTML、CSSを使った構成・装飾の記述、リンクの設定などが必要ですが、CMSを使用すればこれらの作業を自動的に行なうことができます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- SEO
- SEO(Search Engine Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- RSS
- RSSとは、ブログやホームページが更新された際に、更新情報(コンテンツ)の要約を直接訪れることなく受け取れるソフトウェアを指します。
- サイトマップ
- サイトマップとは、ホームページの中にあるページ構成を一目見て分かるようにした、目次のような案内ページのことを指します。ホームページ内にある全てのページへのリンクが一覧になっていることが多いです。はじめて訪問した人でも、どこに何があるのかがすぐに分かるようにすることを目的として作成されます。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- サイクル
- サイクルとは、スタートしてゴール、そしてまたスタートと、グルグルと循環して機能する状態のことを言います。まわりまわって巡っていく、といった循環機構をさすことが多いです。水の循環サイクルというように、実は繰り返しになってしまう使われ方もすることもしばし。また、自転車に関する事柄として、サイクルスポーツなどという使われ方をされることもあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- SEO
- SEO(Search Engine Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
おすすめ記事
関連ツール・サービス
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング