Design
Jekyll
Web

ちょっとしたWebサイトを作るのに最適なツールを考える

会社で、ちょっとしたWebサイトを構築しなくてはいけなくなりました。
ミセス向けのファッションブランドのサイト+ワークショップのサイト。

そのツールを選んだので、その過程を共有してみます。

サイトの構造

今回作成するサイトは、このような構造になります。

【会社のサイト:構築済み】
 └ブランドサイト(サブドメイン)
  └ワークショップの特設サイト(サブディレクトリ)

で、それぞれ、このように違います。

  • ブランドサイトは、ほぼワンページャー。

    • ブランドの概要を説明する。
    • 店舗一覧は、会社のサイトに飛ばしちゃう。
  • ワークショップサイトはやや機能が多い。

    • オプトインページでメルマガ購読者を集める
    • 今後のワークショップイベントを告知する
    • 過去のワークショップイベントの記事を投稿する

検討の過程

ワークショップサイトは、WordPress一択。これは迷わなかった。

で、ブランドサイトのワンページャーのほうをどうするか・・・となった。ほぼ、一枚物の静的HTMLが作れれば、用が足りてしまうので、オーバースペックになるのが嫌です。

今回、導入を検討したのは、以下の通り。


ペライチ

簡単にワンページャーが作れるWebサービス。
本当に簡単。

【ペライチのメリット】
  • テンプレートを選んだ時点で、すでに完成されている。
  • パーツを選んで、写真や文章を変えるだけ。本当に速い。
【ペライチのデメリット】
  • 当然有料プランを使うものの、持てるページ数が3ページと少ない。
  • つまり、本当にワンページャーと割りきって使う必要がある。

justinmind

GUIでサイトの見た目を構築するとよしなにやってくれる、プロトタイピングツール。
ここから、静的HTMLが取り出せれば、それをアップロードすれば用が足りると考えた。

【justinmindのメリット】
  • シミュレーターなど、機能が親切。
  • デザインが美しく、操作性もよい。
【justinmindのデメリット】
  • HTMLにエクスポートすると、シミュレーターごとエクスポートされる。
  • もう少し、本番っぽい単位でHTMLを吐いて欲しい。
  • やり方があるのかも知れないが、ドキュメントを読んでもよくわからなかった。

WordPress

言わずと知れた、最も有名なCMS。サーバーに配置すると、ブログができる。

【WordPressのメリット】
  • ノウハウが豊富で、テーマやテンプレートも数多い。
  • SEOに強い。
【WordPressのデメリット】
  • テーマを自分で作ると工数がかさむので、テンプレートを買わざるを得ない。
  • テンプレートもやたらと多いので、選定の時点で一苦労する。
  • 定期更新するサイトに向くが、作りきりのワンページャーをやると手間の方が大きくなってしまう。

Jekyll

ローカルマシンのデスクトップ上で、ひな形から静的サイトを生成してくれるrubyツール。

【Jekyllのメリット】
  • テンプレートさえあれば、HTMLを出力するのに手間が少ない。
  • 記事を書いてGithubPagesなどにデプロイすると、簡単にサイトやブログが作れる。
  • テンプレートが、GitHubで手に入る。
【Jekyllのデメリット】
  • ドキュメントがそれほど多くない。
  • 動的なWebサービスは作れない。
  • エディタとWebブラウザで完結するので、エンジニアでないと快適と感じにくい。

結論

ひと通り全部、ちゃんと使ってみた結果、今回の比較では、Jekyllが最も使いやすかったです。

理由1. HTMLとCSSはわかるので、エディタで書けると楽

高機能なツールは、楽ができる一方で『HTMLでこう書きたいんだけどな』と感じてしまうので、あまり有難くない部分もある。本来書きたい事が隠蔽されるというか。

トータルコストでは、自分にとってGUIツールはベストではなさそう。

Jekyllの場合は、基本的にHTML、CSS、javascriptで完結しており、しかもHTMLのコードがコンポーネントに分かれているので、部品の再利用がしやすいです。

ブラウザのデバッグツールが今は高機能なので、エディタ側に頼る必要性が薄くなりました。

エディタはVimを使うので、ファイル単位の往復が苦になりません。

理由2.コストが安い

複数のプロジェクトに応用したいので、コストに対する拡張性があってほしい。WordPressテーマを買う事や、有料サービスを利用する事じたいは問題ないけど、『これじゃないな』となった時にまた買うとか、別のサイトを作るときにライセンスを追加しなくてはならないとかだと、心理的にスケールしにくいです。

その点、Jekyllなら、テンプレートがGitHubで無償で手に入るので、構築までのコストが最安。

理由3.スケールしやすい

自分で構築したサイトのひな形は、全てファイルになっているので、新しいサイトに応用するのも楽。

Jekyllひとつ覚えてしまえば、かなり楽ができる部分があります。


というわけで、あなたも一枚もののサイトが作りたいなら、Jekyllを覚えると楽ができますよ。
最も大きな決め手は、GitHubに高機能なテンプレートが公開されていることです。