1. はじめに
これが今回作ったサイトです。
愛知県岡崎市のウェブ制作会社SaaSEO合同会社の公式ホームページ
この記事は使ったプラグインやぶち当たった障壁などの詳細記事に辿り着けるような、まとめ記事として存在させます。
ちなみに、僕自身がマーケターなのでSEO関連（ページスピード含む）の思考や結論が多くなるかもしれません。また、開発に関しても本当に初心者なのであまり期待せずにお読み頂けると嬉しいです。
2. 開発環境
- Mac OS Version 12.0.1 (21A559)
- npm 6.14.15
- Gatsby version: 4.1.3とプラグイン
"autoprefixer": "^10.4.0",
"gatsby": "^4.1.3",
"gatsby-background-image": "^1.5.3",
"gatsby-plugin-advanced-sitemap": "^2.0.0",
"gatsby-plugin-breadcrumb": "^12.2.0",
"gatsby-plugin-google-gtag": "^4.2.0",
"gatsby-plugin-google-tagmanager": "^4.2.0",
"gatsby-plugin-image": "^2.1.2",
"gatsby-plugin-next-seo": "^1.9.0",
"gatsby-plugin-postcss": "^5.1.0",
"gatsby-plugin-react-svg": "^3.1.0",
"gatsby-plugin-robots-txt": "^1.6.14",
"gatsby-plugin-sharp": "^4.1.3",
"gatsby-source-filesystem": "^4.1.2",
"gatsby-transformer-sharp": "^4.1.0",
"postcss": "^8.3.11",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet-async": "^1.1.2",
"react-icons": "^4.3.1",
"tailwindcss": "^2.2.19"
3. 開発物の概要
今回は自分がSEOに強いホームページ制作業及びマーケティングコンサルタント業を立ち上げるにあたり、その第一弾として自分の会社のサイトを作ることになった、というのが背景です。とにかく速くシンプルにやりきりたかったので、機能はFormしか入っていませんw
とても基本的な静的ウェブサイトをGatsbyで作りたいという方には、もしかしたらお役に立てる内容かも・・・
4. 手順
このセクションではスターター選び、見た目作り、プラグインの設定、CDNの設定、メールの設定などなどを書いていきます。
a) スターター選び
今回選んだのは、白紙のテンプレートです。
ブログ等機能をつける場合は他のスターターを選んだら速攻で出来上がるのでおすすめだと思うのですが、今回はあくまでコーポ−レートサイトということで、プラグインも必要な分だけ自分で盛り込めるこの白紙テンプレートをお供に選びました。
これをターミナルに打ち込んでローカル環境セットアップしました。
npx gatsby new gatsby-starter-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
b) プラグイン祭り
ということで、ここではザーッと今回使ったプラグインを書き留めたいと思います。プラグインはGatsby公式サイトのプラグインページで毎回検索して使うようにしています。（アップデート等が多い印象で使えなくなっていたり別のプラグインがおすすめされたりしていて怖いので）
gatsby-plugin-advanced-sitemap
普通のサイトマップを今まで使っていたのですが、Ghostブログのサイトマップが好きだったのでたまたま見つけたこのGhost式アドバンストサイトマップを使ってみることにしました。こちらが僕のサイトの出来上がり品です。
クリックできるリッチな感じがお気に入りです。ただ、SEO的には<changefreq>や<priority>の設定ができないため、公式のサイトマッププラグインを選ぶ方が無難かも、なんて思いました。実際クローラーはどっちのサイトマップのほうが好ましいのだろうか・・・??
gatsby-plugin-google-gtag
これはGoogle AnalyticsやGoogle Adsのメタタグを埋め込めるやつです。ID等は出来上がってから取得したのですが、忘れないように入れておきました。設定がとても簡単で爽快です。
React Icons
めちゃくちゃ大量のアイコンから好きなのを選んで、スタイリングも自由にできちゃうという優れたデザイン系プラグイン？なので絶対に入れておきたいです。
これはGatsbyではなくてReactのプラグインなので上のReact Iconsページから以下コマンドを利用してインストールしました。
npm install react-icons --save
ちなみに、僕のお気に入りはIo5のアイコンたちです。ほとんどこれのSharp系アイコンで統一しました。
gatsby-plugin-robots-txt
これはとてもシンプルなRobotsテキストファイル生成機です。以下の感じでgatsby-config.jsファイルに挿入するだけでBuild時に自動生成されるのが便利かな？と思ってとりあえず入れておきました。
{
resolve: 'gatsby-plugin-robots-txt',
options: {
host: 'https://saaseo.dev',
sitemap: 'https://saaseo.dev/sitemap.xml',
policy: [{ userAgent: '*', allow: '/' }]
}
},
gatsby-plugin-react-svg
SVGファイルを直接JSXに書かなくて済むようになる、今回新しく使ってお気に入りになったプラグイン。<StaticImage>でSVGファイルを読み込むと、ピクセル化して画像が落ちてしまうことに気づいたので使用をはじめました。（てかそもそもStaticImageはSVGの使用を推奨していないと思うw）これならベクターファイルとして読みこめて、ロゴも綺麗に反映されました。
gatsby-plugin-next-seo
今までSEO設定のためには公式のreact-helmetを使っていたのですが、今回はこっちにしました。最近のSEOは構造化データの提出が大事なので、Json-LDを設定できるプラグイン無いかな〜と思って探していたらこれがヒットしました。
ConfigでデフォルトのTitleやDescription、OpenGraphを設定しておけるのも便利だし、よっぽど問題がなければこれからもこれを使っていきたいなと思いました。
tailwindcss
僕は普通のCSSが書けなくなってしまったぐらいTailwind CSSが好きなので必ず入れています。設定が面倒ですが、ちゃんと上のページをフォローしていけば設定ができます。
使いたかったのに諸事情で使わなかったプラグインたち
gatsby-plugin-breadcrumb
あまりにもサイトの階層が浅いことと、何故か僕の環境だとパンくずリストがワンラインで表現できず改行されるので諦めました。
gatsby-plugin-google-tagmanager
タグマネを使ってGAとか入れようと思っていたのですが、出番がありませんでした。これからMicrosoft Clarityとか入れるときに必要かも？
gatsby-background-image
背景設定のために使おうと思ったらTailwind CSSでの設定がわからずやめました。多分色々設定を頑張れば使えるとは思うのですが、、、
c) サイトコンテンツ・デザイン作り
小規模なサイトでSEO勝ちしていくのはとても難しい話だとは思いますが、やってみなければわからない！ということでほぼ全ページ狙いを持って作りました。ただ、イチからコーディングしていくのはツラいので、ローコードツール？のShuffleを使用しました。
このツールを使っていると、コンポーネント思考になると言うか、色んな意味で効率的に美しくコンテンツ作りができる気がします。
d) ローカル開発環境で画像の差し替えなど
ここまででGatsby様の力で環境は整い、Shuffle様の力でコンテンツは固まったので、あとはローカル開発環境に移行してReact Iconに差し替えたり、画像を差し替えたりという作業的な動きだけでした。ちなみに、ShuffleからExportできるHTMLファイルは以下のツールを使うと綺麗にJSXに突っ込める形式になりました。
e) CDNのNetlifyでホスティング
無料版を日本で使う場合は遅いということが完成後に発覚し、めちゃくちゃ萎えましたw
どうやら競合のVercelとかの方が日本での展開に関しては良いみたいです。ただ、Netlifyは今まで使ってきて安心感はあったし、実際今回も使いやすかったです。
ホスティングでのトラブルもなく、GitHubとの連携ができているのでGitへPushするたびにBuild & Deployが始まって気持ちいです。毎度時間がかかりますが、、、
f) Netlifyでドメイン取得、DNS設定、Https化
ドメインはGoogle Domainで取ったほうが安いし後から何か変えたくなったとき便利だろうなあ、と思っていたのですが、今回は速くシンプルに行く、というコンセプトだったので初めてNetlifyでドメイン取得をしました。Googleより2ドルほど高かったのですが、その分DNS設定は何もしなくて良くて、UXが良かったです。Https化についても説明に従ってクリックしていくだけで10分以内に完了しました。
g) Netlify Formの活用で問い合わせを設置
初めてで苦戦しましたが、この記事を参考になんとか完成させました。この記事の追記にもありますが、これからクライアント用に問い合わせを設置する際はGoogle Formを利用しようかな、と思いました。Netlify Formは最低限の機能がありますが、月間100通という制限もあるし、綺麗に回答データを取得・格納するにはGoogle Formにしちゃったほうが賢い気がします。
h) Zoho Mailでメールの設定
これはいらないステップかもしれませんが、今回自分の事業を立ち上げるにあたり通らざるを得ない道だったので書き残しておきます。安くて信頼のできるメールサービスとなると選ぶのが難しくて、結局Zohoとなりました。1アカウントあたり年間で1,000円ぐらいなので、安心を買うという意味では良いかと思います。（昔、Yandexを使ったときはよくスパム認定されて大変でしたw）
実は、ここでDKIM設定という"なりすまし防止"設定なるもので、NetlifyのDNS側での設定がうまく行かず1時間ほど躓きました。
レコードを消して追加してを繰り返していて、間違えて他のレコードを消してしまったときに突然うまく行ったような気がします。はっきりして無くて恐縮なのですが、僕も突然うまくいってしまい、モヤモヤしたまま設定を終えたという形でした。。。
5. 公開後（今）
Google AnalyticsやGoogle My Business、Google Search Consoleなど一通りの登録を完了し、現在はリンクビルディングをしています。この後、Google Adsを使ってトラフィックも稼いでいき、どうなるか？という感じです。
すぐには案件が取れるはずもない、と思っているので、次はブログ機能のあるサイト（つまりメディア）作りを頑張ってみたいと思っています。
本投稿ではざっくり過ぎてわからない、というところも多かったかもしれないので、もしリクエストを頂けたら細切りにした記事も書いてみたいと思っています。では！