平成最終版。僕が静的サイトを作る時に使う便利ツールやサービスまとめ

この記事を書いたひと: @t4traw 2019年4月24日

ぼくの職場の新人さん向けに、サイト制作(とくに静的サイト)を作るのに便利なサービスをまとめたので記事にしました。

もう少しあるので、あとで加筆修正するかもしれません。

静的サイトジェネレーター『Hugo』『Middleman』などお好みで

StaticSiteGen

静的サイトジェネレーターは、結局生成されるのはhtml+css+jsなので、好みの物を使えばいいと思います。

このブログではHugoを利用していて、確かにビルドはめっちゃくちゃ早いですが、スクラッチで制作・開発するなら慣れているRuby+Middlemanのほうがサクっと作れます。そんな感じで使い分けても良いと思います。SPA(Single Page Application)に近いものを作るなら、VueとかReactなどを採用したフレームワークを使えばいいですし。

ホスティング『Netlify』

Netlify: All-in-one platform for automating modern web projects.

サイトのホスティングは、いわゆる昔ながらのレンタルサーバーはもういらなくなりました。2019年4月現在で静的サイトをホストするなら、

  • Netlify
  • GitHub Pages
  • Firebase
  • AWS S3

上記4つのどれかが候補になると思います。

GitHub Pagesは、jekyllでブログを運営するならとくに気にすることなく運営できますが、npmやその他の静的サイトジェネレーターを使うなら、FirebaseかNetlifyになると思います。AWSを使う環境ならS3での静的サイトホスティングも候補かな。

自分がNetlifyをよく使うの理由は、とにかくデプロイが楽だからです。

デプロイコマンドyarn buildなど自分で設定できますし、formも<form name="your-form-name" action="thanks.html" netlify>と書けば、後はダッシュボードのFormからEmailやSlackに通知がいくように設定できます。

CSSフレームワーク『Bulma』

Bulma: Free, open source, & modern CSS framework based on Flexbox

レスポンシブや基本的なスタイルの作成は、よっぽど大きなチームやプロジェクトじゃない限り、CSSフレームワークを使った方が良いです。

オススメはbulma。class名とかflexbox対応で使いやすく、カスタマイズが簡単なので使いやすいです。

htmlからcssを生成『OneClickCSS』

OneClickCSS

htmlで先に構造を作っておき、そこからcssを生成してくれる便利ツール。sassやlessで出力できるのが素晴らしいです。

お決まりの背景パターン『Hero Patterns』

Hero Patterns | Free repeatable SVG background patterns for your web projects

サクっとドット背景などをsvgで生成するならこのツールが便利です。

背景パターンを作成『Flaticon』

Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of free icons

はじめて使ったときは感動した。FLATICONのアイコンを使ってSVGな背景をbackground-repeat: repeat;のプレビュー状態で生成できます。

ポリゴンパターン作成『Trianglify.io』

Trianglify.io · Low Poly Pattern Generator

ポリゴンパターンのsvgをサクっと生成できるWEBツールです。背景とかによく使うんですよねー。

スライダー『Swiper』

Swiper - Most Modern Mobile Touch Slider

スライダーを作るのに便利なライブラリはたくさんあるけれど、「VannilaJS(非jQuery)」「npmで入れられる」「レスポンシブ&スマホ(スワイプ操作)対応」「ナビゲーションがしっかりしている」などなどを満たしていて軽量なjsライブラリがSwiper。

これ使っておけば間違いがないしトラブルになったことがないので、最近はずっとコレを使わせてもらっています。

CSSグラデーション生成『CSS Gradient』

CSS Gradient — Generator, Maker, and Background

CSSでグラデーションを使う時に死ぬほど便利なWEBツール。2色だけじゃなく3色なども対応。カラーコードを直接指定できるし、Linear/Radialなどもにも対応。

生成したグラデーションをコード生成してくれます。

モック画像生成『Placeholder』

Placeholder.com: Placeholder Images Done For You [JPG, GIF & PNG]

制作途中の仮画像をサクっと生成できるWEBサービス。日本語のパチもんツールがあるけど、個人的にはリスペクトを含めこっちを使いたいたい。

https://via.placeholder.com/300x100

といった具合のurlをimg要素に入れると、

といった具合に画像を生成しれくれます。

フリー写真素材検索『O-DAN』

O-DAN (オーダン)- 無料写真素材・フリーフォト検索

フリー画像素材の検索するならココ。商用フリーの画像などを調べる時に重宝しています。

jpgやpngなどの軽量化『ImageOptim』

ImageOptim — better Save for Web

jpgやpngの画像圧縮ならImageOptimが便利です。Macならネイティブアプリケーションでドラッグ&ドロップでサクっと軽量化できます。

svgの軽量化『SVGOMG』

SVGOMG - SVGO’s Missing GUI

これもマジ神ツール。はじめて使った時は感動して泣きそうだった。svgファイルを軽量化してくれるWEBツールです。設定にもよりますが、かなり削れるのでsvgを使う時はぜひ試してみてください。

スクロールアニメーション『Sal』

Sal - Lightweight scroll animation library

スクロールしたらふわっと要素を表示するライブラリ。wow+animate.cssとかいくつかあるんですが、「軽量」「簡単」という点ではSal.jsが便利です。

jsのイベント確認『JavaScriptのイベントをたくさん見られるサイト』

JavaScriptのイベントをたくさん見られるサイト

jsのイベントをざっと見たい時に重宝するサイトです。「マウス関連のあのイベント……えーっと」って時に開いています。

ファビコンの作成・コード生成『favicon generator』

様々なファビコンを一括生成。favicon generator

これもマジで神ツール。.pngから.icoを生成してくれ、更に必要なmeta要素などもすべて網羅してくれるfavicon生成サービス。もう何度お世話になったことか。faviconつくらなきゃと思ったらココ開いておけばOKです。


WordPressなどを使わずに静的サイト化するのが普通になって4-5年が経ち、さまざまなWEB開発・制作の便利ツールが登場し、サイトの表示スピードも制作スピードも非常に快適になりましたね。

また便利なサービスがあったら紹介したいと思います