スパルテックのWebサイトをリニューアルいたしました!

February 28, 2017

この度、スパルテックはWebサイトを新たにリニューアルいたしました(パチパチ)。


サイトトップ絵


<測定結果> サイトトップページのレスポンス



速い。

「WordPressってこんなに速くなるの?」と思われた方もいるかと思います。実際、キャッシュサーバなどインフラ周りを整理すれば同等の速度を出すことは可能ですが、Linux周りの知識が必要で、少し面倒です。

今回のサイト、実はWordPressではなく「Hugo」というフレームワークで実装しています。そんなわけで今回は当サイトの作成に使用した静的サイトジェネレーターHugoを、スパルテックのサイトの制作実例に基づきながらご紹介していきます。


リニューアルの背景と目的

Hugoをご紹介する前に今回のサイトリニューアルの背景と目的をご紹介させていただきます。そもそもスパルテックとは

  • エンジニアの開発スキルを手に入れたい社会人向けの
  • 現役エンジニアによるスパルタな少人数制エンジニア教室
  • 料金はチケット制

という、最近流行のプログラミングスクールです。スパルテックというのは「スパルタ + テクノロジー」を掛け合わせた造語です。ネーミングは私ではありません。

他のプログラミングスクールと違うのは講師が現役バリバリのリードエンジニアであることと、レンタルスペースを利用して少人数制、低コストの価格帯を実現していることでしょう。

これまでストアカというサイトを使って地味に活動していたのですが、受講生の総計が250名を超えてきたのをキッカケに、そろそろ事業サイトを作ろうと考えました。ただし、実務能力を謳った講座を開いている手前、下手なサイトは作れません。

そこで今回はグローバルでトレンディな技術を使いつつ、入門者でも導入しやすい技術で構築し、かつリードエンジニアとしてのスキルも存分に発揮しようと考えました。さっそく見て行きましょう。


サイト設計

すでに受け入れられている週末講座があるので、そちらをベースに設計を考えて行きます。大事なのはコンテンツ、何を届けたいかを明確にすることでしょう。

  • アジャイル開発コース
  • WordPressマスターコース
  • 就職支援コース

また、スパルテックは巷のプログラミング系スクールと違って月額固定ではなく、チケット制であることも特徴です。これはユーザにとっては大きなメリットです。

なぜか?チケット制にすることサービス提供側が「品質の良い講座を届けること」に集中することができ、その品質がユーザの、次の購入動機に繋がります。サービス提供側もユーザ側もWin-Winになる理想の形ですね。

1st Viewのイメージ

サイトトップページ

1st Viewが決まれば後は「ユーザがそこからどんな情報を知りたがるか?」を予想し構造を考えます。ここは箇条書きで思いついたことを書きます。

  • 「このサービスの評判は良いのかな?」
  • 「講師はどんな人間なのかな?」
  • 「講師の情報をもっと見れないかな?」

これらの疑問に応えることは2nd Viewの役目です。

2nd Viewのイメージ

サイトトップページ


コストを考える

これとは別にFAQ(良くある質問)のページや、お問い合わせページも必要です。また講座ですので決済機能も必要です。

しかしここで少し考える必要があります。

こういった機能は開発も保守もコストになります。私はエンジニアなので決済機能もお問い合わせページも自力で実装できますが、コストに見合う価値がなければ実装はするべきではありません。

こうした機能は本当に自分で実装しなければならないのでしょうか?決済もお問い合わせもありふれた機能です。自分で実装しないで済む方法があるはずで、そして、実際にあります。

今回も、これらの機能は極力外部サービスに依存することとします。これにより大幅なコスト削減になりました。かくして以下のようになりました。

  • 講座の掲載と決済 => ストアカ
  • お問い合わせ => FormSpree
  • FAQ => ZenDesk…と言いたいところですがまだその規模ではないので一枚ページを用意します。

ここまででサイト制作の準備ができました!これらの機能は後々、実装方針を決めて今はこれで十分です。


Hugoチュートリアル

ここからは、実際にHugoを使ったサイト制作を扱います。 白井の環境はMacですので、成り行きでMac向けの説明となります。

インストール

$ brew update
$ brew install go
$ brew install hugo

インストールされたHugoのバージョンが古ければ下記を実行します。

$ brew upgrade hugo

Hugoがインストールされました。Hugoの公式はこちら

クイックスタートは公式サイトに載っています。下記はHugoアプリケーションを作成するコマンドです。(your_appは好みで変更してください)

$ hugo new site your_app

your_app/

|-- archetypes
|-- config.toml
|-- content
|-- data
|-- layouts
`-- static

your_appディレクトリ配下にHugoのディレクトリ群が生成されました。

細かい説明は公式サイトに委ねるとして、Hugoは静的サイトジェネレーターの名前を関している通り「静的サイト」、つまりHTML/CSSなど静的ファイルがメインで構成されるWebサイトを作るためのツールです。細かい動きを加えたければ全てJavaScriptで実装することになります。

ブログのような機能を持たせたければ、従来であればPHPやRubyなどのプログラミング言語を使ったDBアプリケーションを作成するしかありませんでしたが、静的サイトはサーバを経由しないため爆速になります。ではどうやってブログを追加するか?自分でブログ用のhtmlを作成してアップロードし、全ページの反映を手動で行なうしかありません。

しかしHugoはこれをファイルの編集だけで実現しています。早速見てみましょう。

※厳密に言えば「Go言語」という別のプログラミング言語が動いているのですが、とりあえずは分からなくても扱うことができます。

ブログ記事の編集用ファイルを作成

$ hugo new post/good-to-great.md

your_app/

|-- archetypes
|-- config.toml
|-- content
      |--post
          |--good-to-great.md
|-- data
|-- layouts
`-- static

good-to-great.mdが追加されたことにより、「/post/2017/02/28/good-to-great/」などのようなパスが有効になります。

Hugoの便利な所は、この追加による変更をキャッチしサイト全体を変更に合った形で組み替えてくれることにあります。これにより「あたかも裏でサーバが動いているような処理」を静的ファイルだけで実現できるわけです。便利でしょ?

さてgood-great.mdの中身は通常のhtmlも書けますが、マークダウン方式という略式記号が使えます。

* これは
* テスト
* です

と打つと

<ul>
  <li>これは</li
  <li>テスト</li>
  <li>です</li>
</ul>

とHTMLに変換してくれます。ある程度HTMLに精通していなければいけませんが、分かってくると爆速でHTMLが書けるようになります。

Hugoのテーマを使ってみよう

このタイミングでHugoのサーバを起動し、今の状態を確認してみましょう。

$ hugo server --buildDrafts
Started building sites ...
Built site for language en:
1 draft content
0 future content
0 expired content
0 regular pages created
0 other pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
total in 18 ms
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

こんな感じでターミナルにズラズラ文字列が並ぶと思います。この状態でブラウザのURL欄にlocalhost:1313と真っ白い画面が表示されると思います。

何故真っ白い画面か?HugoにはWordPressのようなデフォルトテーマが存在せず、先程投稿したブログを表示させるにはGo言語による実装が必要です。

なんだ無理じゃないか!

と思われた方もいるかもしれませんが、安心してください。Hugoにもテーマがありますので、自分が作りたいサイトに近い構造のテーマを見つけて適応すれば良いのです。それでしばらく運営してみて、慣れてきたらGo言語の習得にチャレンジしてください。

ではテーマをインストールしましょう。デフォルトではテーマ用のフォルダがないので作成します。

$ mkdir themes

your_app/

|-- archetypes
|-- config.toml
|-- content
      |--post
          |--good-to-great.md
|-- data
|-- layouts
|-- themes <- これ
`-- static

次にこのthemesフォルダにHugoのテーマを設置します。テーマ一覧から自分の目的に沿ったテーマを選択し、ページ上部すぐ下の「Installation」の項目を参考に、githubからテーマをpullします。

githubって?という方は近々講座を開設しますので、そちらをご受講ください!

$ cd themes
$ git clone https://github.com/dim0627/hugo_theme_robust.git
$ cd ..

これでthemesにHugoのテーマがインストールされました。このテーマを適応させるには一旦サーバを止め、テーマを指定して起動し直す必要があります。

$ hugo server --theme=hugo_theme_robust --buildDrafts

ちなみに先程からさらりと出ている–buildDraftsオプションですが、これは下書き状態の投稿も表示させるという意味です。公開状態にしたければ

$ hugo undraft content/post/good-to-great.md

などのようにします。

localhost:1313 に改めてアクセスしてみましょう。


テスト

無事に表示されましたね。^^


Hugoのテーマに沿ってスパルテックのサイトを作る。

スパルテックのサイトは以下のテーマを使用しています。

http://themes.gohugo.io/theme/hugo-universal-theme/


テスト

見た瞬間、「まんまイメージ通りだ!」と思いました。このテーマが使いたかったからHugoにしたというのは、ココだけの話です。 とりあえず1st Viewはこんな感じ。


サイトトップ絵

細かい所はいずれデザイナーさんに頼んで何とかしてもらおうと考えていますが十分です。次は2nd Viewです。


サイトトップ絵

themeに既に感想ページとして用意されていました。これをそのまま流用します。

お声ですが、1年半ほど活動し、おかげ様で多くの受講生の方から様々なご感想を戴いております。2017年3月2日現在、98件中95件がポジティブな感想となっております。満足率96%!! 皆様、本当にありがとうございます。

ちなみに個人的には良い感想を戴けなかった3件がちょっとかなり凹んでしまったのですが、反省材料として改善に努めます。

さてさて、そんな感じで感想ブロックは以下の通りになりました。


サイトトップ絵

これ以降に紹介欄とブログ欄がありますが、こちらは頻繁に手を加えるので直接ご確認いただければ幸いです。

テーマだとこの下に「クライアント欄」がありまして、私であれば法人研修実績が該当するのでしょうが、法人研修はスパルテックとして行なっていないので削除しました。ちなみにザックリ20-30社ぐらいは研修した経験があります。


完成に向けて

2017年3月2日現在、スパルテックサイトは建設中であり、この解説は一旦ここで筆を置かせて頂きます。たまに来てどんな改善が行なわれたか確認していただけると嬉しいです。

Hugoは素晴らしい静的サイトジェネレータです。今回はザックリとした解説でしたが、様々な奥深い仕様を内包しています。

また、本格的にHugoを使ってみたい、ついでにWeb制作を学びたい、という方はストアカのHugo講座をご受講ご検討いただければ幸いです。実際にHugoでサイト運営をする立場から、実務に繋がるノウハウを直接伝授いたします。

ちなみに個人的にはこんな風に考えています。

最初からガッツリグロースする前提でやって、Webリファレンス見ながらやりたかったらRails、ライブラリのコードが気に入らなくてほぼ自分で任意の実装がしたかったらLaravel、更新前提で管理画面やSEO対策などある程度揃っているならWordPress、それ以外はhugo。

それではまたお会いしましょう!

comments powered by Disqus