コーポレートサイトを更新しました

Convergence Lab. 株式会社 CEOの木村です。

この度、コーポレートサイトの更新を行いました。

これまでは、Strikingly でサイトを作っていました。Strikingly はWIXやJimdoのようなグラフィカルにサイトを構築できるサービスです。Strikingly 自体はとても良かったのです。しかし、サイト上に配置できるページ数の上限が20であるなど、会社の発展に伴って不便も増えてきました。ブログサイトなどがコーポレートサイトと別になっており、情報をまとめたい意図もありました。Strikinglyにもブログ機能はあるのですが、やや不満があったのです。

そこで、ページを１から構築し直すことにしました。新しいサイトは、Vue.js/Nuxt.js でJAMstackで構築し、Netlifyでホスティングしています。コーディングは外注せず社内で行っています。まだまだ細かい調整が必要ですが、概ね満足しています。

デザイン

デザインはモノトーンに赤というイメージで作成しています。モノトーンで全体をシックで落ち着いた印象を与え、赤を入れることで単調さを減らし温かみを与えることを狙いました。

サイトの技術的構成

サイトの構築に使った技術スタックについて説明します。

Vue.js/Nuxt.js

これらは説明の必要がないかもしれません。Vue.jsはReact.jsとならぶ、よく利用される Javascriptフレームワークです。Nuxt.jsはVue.jsをつかって、SSR(Server Side Rendering)などをするためのフレームワークです。

Vuetify

VuetifyはVue.jsのUI フレームワークです。素のVue.jsには、ボタンやカードなどのUIコンポーネントが用意されていません。Vuetifyを使えば、サイトの見た目を簡単に現代風に整えることができます。

JAMstack

JAMstackは、Javascriptで生成舌サイトを静的サイトとして配信する方法のことです。JAMは、Javascript、APIs、Markupの略です。Nuxt.jsであらかじめ静的サイトを生成することで、旧来のwebのように、サーバーにあるHTMLを表示する形になります。動的なコンテンツは、クライアントサイドでAPIを叩いて表示します。

コーポレートサイトで動的なコンテンツにしたい部分は、ニュースリリースや会社ブログ、問い合わせフォームなどになると思います。

ホスティング

サイトのホスティングは、Netlify で行っています。NetlifyはJAMstackなサイトのホスティングに向いたたくさんの機能があります。しかし、サイトを配信してから知ったのですが、日本にCDN拠点がなく、日本からのアクセスが遅いです。他のサイトに帰るか少し悩んだのですが、JAMstackで構築する際の悩みどころが、ワンストップで解決できるため、そのままNetlifyを用いることにしています。

ヘッドレスCMS

ニュースリリースや、ブログ投稿にはヘッドレスCMSを利用しています。ヘッドレスCMSとJAMstackは相性がよいです。JAMstackによる静的サイト生成時に、あらかじめヘッレスCMSからデータを取得してHTMLを生成することで、ユーザーアクセス時にはCMSへのアクセスを省略できます。

今回はNetlify CMSを用いました。なのですが、Netlify CMSは少しシンプルなヘッドレスCMSなので、設定に若干苦労しました。また、Markdownウィジットでは日本語入力が効かないというバグがあるがため、このブログでは text ウィジットに Markdownsを直書きしています。

Form

問い合わせフォームには Netlify Form を使いました。これには特に不満がありません。シンプルで必要な機能があります。

まとめ

今回は、コーポレートサイトの更新について書きました。 今後はいろいろな記事を書いていきたいと思います。