デザイナーも静的サイトジェネレーターが使えた方がよいのではないか

静的サイトジェネレーターを使う

静的サイトをどのように制作していますか?
静的サイトジェネレーターを使っていますか?

Web デザイナーは Photoshop や Sketch でサイトデザインをして HTML / CSS / JavaScript でコーディングといった、静的サイトの制作を行う機会が多いかと思います。

私の場合も同様に、Wordpress や Web アプリケーションに組み込むための静的サイトを制作することが多く、これを効率的に行うべく LESS をやり始めたのですが、周りで使っている人がほぼ皆無。Sass / SCSS 割合の高さに焦り、慌てて切り替えました。
そして、さらなる効率性を求めて 1 年ほど前から静的サイトジェネレーターを取り入れました。

静的サイトジェネレーターとは?

そもそも静的サイトジェネレータとは、静的サイトを効率的に制作するためのツールで、好みの言語で開発して納品用に HTML / CSS / JavaScript といった形式に変換してくれるもの。効率化するツールだけあって様々な機能が用意されています。

  • 開発用の対応言語の数が多い
  • ヘッダーやフッターを外部ファイル化して必要に応じて呼び出せる
  • 条件分岐やループを使える
  • 変数を使える

とにかくスムーズに開発するための機能が豊富。今では数多くの静的サイトジェネレーターがあり、有名どころは以下のような感じ。

StaticGen」というサイトでは、数多くの静的サイトジェネレーターの Github でのスター数やフォーク数をまとめてくれていますので、今の流行をチェックするのに使えます。

効率的に作業を行えるようになるかも

現時点で私が好んで使っているのは「middleman」です。これを使い始めるまでは、SCSS や CoffeeScript をコンパイルする時は Codekit を使っていたのですが、これらは全て middleman がやってくれるようになりました。

実際の作業の流れは、新規案件のコーディング前に middleman の初期設定を行い、その時に SCSS / CoffeeScript / Slim といった言語が使えるようにしておくだけ。コンパイルするツールを別途立ち上げておく必要がないのでかなり楽です。

middleman の良い点を挙げてみる

なぜ数ある中から middleman を選んだのかと言われれば、同じプロジェクトの凄腕エンジニアの方に勧められたという単純な理由です。なのに、今でも使い続けているのは、慣れ以外では以下の 4 点が大きかったからです。

1. 日本語ドキュメントがある

困ったことや気になることを調べる時に日本語対応のサイトや解説があるのは心理的にかなり安心です。日本語対応していただいた方々ありがとうございます。

2. 開発用サーバーがある

ローカル開発環境とか作るの苦手、よく分からない、設定が面倒だという経験ありませんか?
middleman では、ターミナルで以下のコマンドを打つだけでローカルサーバーが起動します。

$ bundle exec middleman

しかも、設定を追加すれば、プログラムの修正や変更を即時反映してくれるオートリロード機能を使うことができます。これによって、変更内容を保存するだけでブラウザが自動で更新され、常に最新の状態が表示されるようになります。

3. 共通のレイアウト設定やファイルをパーツ化できる

雛形になるページのレイアウトを作成して、それぞれのページでそのレイアウトを呼び出すことができます。
例えば、ヘッダーとフッターが同じでコンテンツ部分だけが異なる A、B、C というページがあるとします。この 3 つのページは共通のレイアウト構成なので、そのレイアウトを雛形として個別ファイル化しておきます。

この雛形には、「コンテンツ部分にページ内容を読み込むようにする」という設定の記述をしておき、A、B、C それぞれのページファイルには「使用するのはこのレイアウト」とする記述を書けば自動的に共通のレイアウト構成のページを作成してくれます。

この説明だとわかりにくいので、以下のイメージも見てください。

レイアウトイメージ

このレイアウト機能のように、共通する部分を別ファイルにしていろんな場所で呼び出すことができれば、重複の記述が減りコード量も少なくなります。

4. 変数が使える

ページごとに変数をつけたり、サイト全体で使える変数を設定することができます。最初は理解が難しかったのですが、徐々に慣れてくると便利さを実感できます。
例えば、以下のようなナビゲーションメニューがあり、それぞれのメニューの名前に当たるものをname、そのURLをurlといった変数にして設定しておきます。

navigation:
  - name: home
    url: /001/
  - name: about
    url: /002/
  - name: contact
    url: /003/

私は Slim という言語で HTML を書きますが、設定した変数を呼び出すような記述を書くと、

/ slim
ul.nav
  - data.menus.navigation.each do |i|
    li
      = link_to i['name'], i['url']

一応、ERB 形式での記述も載せておきます。

<!-- erb -->
<ul class="nav">
  <% data.menus.navigation.each do |i| %>
    <li><%= link_to i['name'], i['url'] %></li>
  <% end %>
</ul>

HTML にコンパイルすると変数が展開されます。

<ul class="nav">
  <li><a href="/000/">home</a></li>
  <li><a href="/001/">about</a></li>
  <li><a href="/002/">contact</a></li>
</ul>

いきなりのコードでなかなか掴みにくいかもしれませんが、使い方のコツがわかれば、変数の追加や削除をするだけで多くのことができるようになります。

目的や用途でいろいろ触ってみよう

メリットとして挙げた上記機能は調べてみると middleman 固有のものではなく、他のジェネレーターでも同様の機能が提供されているようです。(そうすると、middleman を使い続けている理由は慣れだけになってしまう…。)

最近では、ブログサイトを作る場合はコンパイルが早い Hugo が人気があり、黒い画面を使いたくない人には chatwork 社製の Phest などがあるようです。

デザイナーは使って損はないと思う

最近は SCSS を使う Web デザイナーが周りにも増えており、静的サイトジェネレーターはそういった方々の制作業務を楽にしてくれます。そうして生まれた時間を UI の検討や他の案件、スキルアップに費やすことができれば可能性も広がりますね。

自分は案件絡みで静的サイトジェネレーターの存在を知り、使うように半ば強制されたおかげで制作に欠かせないツールとなり、Slim や CoffeeScript も覚えることもできました。(たまには強制されることも悪くないな。)
まだ使ったことがない人は一度チャレンジしてみてはいかがでしょうか。


ちなみに、いろんな静的サイトジェネレーターを知りたい人は「Github Pagesでブログ構築ができる静的サイトジェネレーター総まとめ」が参考になると思いますよ。

関連記事