サイト制作に使っているものとか(2026年9月版)
2026/09/13
2026年9月現在サイト制作に使わせてもらっているものたちを思い出せるだけ書き連ねる というコーナーです。はじまり～
もくじ
表で働いている(いた)もの
Google Fonts
- 用途
- Webフォント
- 公式サイト
- https://fonts.google.com/
Web上で配信されているフォントデータを読み込むことで、閲覧者のデバイスに依らず同じフォントを表示させることができるやつです。特徴的な書体から長い文章に使える「普通の」書体まで、様々なフォントが使えます。昔(このサイトを開設した時あたり)は英字が中心で日本語フォントはほとんどなかったのですが、現在では日本語も結構バラエティ豊かな書体がそろっています。わ～い。
ちなみにここで使用しているメインのフォントは「M PLUS 1」と「Preahvihear」です。
Font Awesome
- 用途
- アイコンフォント
- 公式サイト
- https://fontawesome.com/
いい感じのアイコンが使えます。CSSで色や大きさを調節することも可。有料版にすると使えるアイコンやスタイルが増えるみたいですが、無料版で使えるだけでも十分すぎるほどアイコンが揃っています。一覧を眺めているだけでも楽しい。
てがろぐ
- 用途
- つぶやきページ
- 公式サイト
- https://www.nishishi.com/cgi/tegalog/
「お手軽マイクロブログCGI」(公式より引用)です。弊サイトでは一人用ツイッタ～的な使い方をしています。かなり多機能ですが、スキンのカスタマイズで使う機能の取捨選択ができるので、使いたい機能だけ使うことが可能です。カスタマイズによってはてがろぐだけでサイトを構築することもできるみたい(実際にやっている方を見かけたことがある)。すごい。
そのカスタマイズ方法も普通のhtmlにコンテンツやパーツを専用記法で埋め込む、的な書き方で割と簡単。また、後述の11ty(静的サイトジェネレーター)の記法とてがろぐの専用記法が被っていないので、うちではスキンファイルも11tyで生成してヘッダーやレイアウトを他のページと共有で使いまわす方法をとっています。
ちなみにIndexページのつぶやきコーナーは「最新の1件だけ表示する専用スキンで『つぶやき』カテゴリに絞った表示をする」URLをiframeで埋め込んでいます。
patipati
- 用途
- Web拍手
- 公式サイト
- -
拍手を押された時間と回数、それからコメント(送ってくださった場合)がわかります。ちなみに拍手を押された回数はおにぎりアイコンの数で表示するようにしています。つまり、たくさん拍手していただくとたくさんのおにぎりがよしむらに届きます。嬉しい。
機能がちょうどよかった＋設置当時は配布サイトが残っていたのでこれを設置したのですが、今となっては配布サイトも消えちゃうぐらい古いCGIなのでこのまま使い続けて大丈夫かなという気持ちがないでもないです。代替を探そうにもなかなかちょうどいい機能のものが見つからない＋自分で作るのも怖い＋今のところ困っていない の合わせ技で使い続けています。よくない。
fancybox3
- 用途
- モーダルウィンドウで画像とか表示する
- 公式サイト
- (archive) https://fancyapps.com/fancybox/3/
モーダルが実装できるライブラリはいくつかありますが、スマホのスワイプ操作に対応しているのと、見た目が気に入ったのでこちらを導入しました。使い方もスクリプト読み込み＋htmlタグの属性にちょっと追記で難しくな～い。fancyboxの最新版は2026年現在バージョン6となっている上にバージョン3の公式もアーカイブしかない状態ですが、一度実装したのを見直すのが面倒くさくてずっと3を使い続けています。
swiper
- 用途
- 横方向にスイスイするやつ
- 公式サイト
- https://swiperjs.com/
スイスイするやつです。おもに3Dモデルのページで複数画像を並べて展示するのに使っています。スイ～。
model-viewer
- 用途
- 3Dモデルの展示
- 公式サイト
- https://modelviewer.dev/
スクリプト読み込み＋html記述だけで3Dモデルのビューワーが簡単に実装できるやつです。設定をいじって見え方をテストしたり実装用のhtmlタグを出力したりしてくれるエディターも公式で用意されているので本当に簡単。すごい。スマホカメラの映像と3Dモデルを合成するARモードもちょろっと追記するだけで実装できちゃうので、うちでも調子に乗ってARモード搭載したりしています。
parallax.js
- 用途
- 視差効果の実装
- 公式サイト
- https://matthew.wagerfield.com/parallax/
このイラストに使っています。マウスカーソルの位置やデバイスの傾きに連動して立体的に見える視差効果が実装できます。おもしろ～い。
Leaflet
- 用途
- 地図の表示
- 公式サイト
- https://leafletjs.com/
地図(β版)で使用しています。実際の地図だけでなく自分で用意した画像も表示できます。楽しい。
Rellax
- 用途
- スクロールに連動した視差効果の実装
- 公式サイト
- https://dixonandmoe.com/rellax/
Indexページの一番上に表示されるイラストに視差効果を付けたくて使用していました。使い方もそんなに難しくない。CSSの進歩によりjavascriptを使わなくても視差効果を実装できるようになったと知り、面白そうだと思ってCSSへ置き換えちゃったため今は使っていません。でもせっかくなので紹介しておこうね。
裏で働いているやつ
VSCode
- 用途
- コードエディタ
- 公式サイト
- https://code.visualstudio.com/
Microsoft製のコードエディタ。シンタックスハイライトやコード補完が装備されているのはもちろん、プラグインで機能を拡張できるのもナイスです。ファイルパスを補完してくれるやつ(Path Autocomplete)マジ便利。ターミナル(コマンドでいろいろ操作できるやつ)がくっついているのも嬉しい。あと動作も重くない。
ちなみにVSCodeの前はOS付属のメモ帳→Crescent Eve →Atomとエディターを乗り換えてきました。Crescent Eveはファイル選択ダイアログで画像を選ぶとimgタグを挿入してくれる機能が気に入っていました。そのあとAtomに乗り換えたきっかけはあまり覚えていないですが、AtomもVSCodeと同じぐらい多機能だったのでもっといろいろできるエディターを求めて乗り換えたのかも？機能的には満足していたものの動作が重くてVSCodeに乗り換えた時の話がここに残ってました。ちなみにAtomは既に開発終了しているみたいです。あら。
11ty
- 用途
- 静的サイトジェネレーター(公開用HTMLの生成)
- 公式サイト
- https://www.11ty.dev/
こやつを使うとヘッダーやフッターのような共通パーツやページのレイアウトなどを分割して管理できます。あと同じカテゴリー内の前後ページへのリンク自動生成やMemoのようなページネーションも実装できます。
更に動作確認用のローカルサーバーを建てることができて、ブラウザで表示を確認しつつファイルに変更を加えたら自動で再読み込みしてくれたり(ホットリロード)、同じネットワークに繋がっているデバイス(スマホとか)からも動作確認できたりします。うれしいね。
普通のhtmlそのまま～ちょっと書き換えるだけでも11tyで使用できる形式になるので、元々html手打ちで構成していたサイトを移行するなら11tyが一番簡単…だと勝手に思っています。ただ、公式サイト以外の情報(特に日本語のもの)が少なめなので「こういうものを実装したいんだけどどうすれば？」とか「エラーでた！助けて！」みたいな時大変かもしれない。その点はAstro の方が使用人口多そうだったり公式ドキュメントの日本語訳があったりでよさそうだな～と思っています。
XAMPP
- 用途
- CGIの動作確認
- 公式サイト
- https://www.apachefriends.org/jp/index.html
サーバーと、PHPとかPerlとかその他いろいろ実行環境の詰め合わせ…的な？てがろぐやpatipatiはPerlで作られているため、これらの動作確認に使っています。11ty側でBrowsersync を有効にしてproxyというのを使うと、XAMPPで動作確認用サーバーを動かしながらホットリロードで変更をチェック、という芸当ができます。てがろぐのスキンをいじりたいときなどに便利。ただ、これをやると少し動作がもっさりするので、必要な時以外はやりません。
sharp/Satori/Color Thief
- 用途
- OGP・サムネイル画像の生成
- 公式サイト
- https://sharp.pixelplumbing.com/ (sharp)
- https://github.com/vercel/satori (Satori)
- https://lokeshdhakar.com/projects/color-thief/ (Color Thief)
sharpはNode.js環境上で動く画像処理ライブラリです。雑な説明をすると、画像をトリミングしたり拡大縮小したりするプログラムがjavascriptで作れます。これで作成したOGP/サムネイル用に画像を加工するプログラムに、11tyの「公開用htmlではないファイルも生成できる」機能・「ファイル生成処理の後に特定のプログラムを実行できる」機能を組み合わせて…
- 11tyでhtmlのついでに「サムネイルにしたい画像の情報をまとめたJSONファイル」を生成
- サムネイル作成用プログラムで先のJSONファイルを読み込んでトリミング・サイズ変更などを行って保存
…という流れでOGP画像やサムネイルを自動で作成できる仕組みをつくっています。
らくがきログのサムネイルは更に、html/cssで見た目を整えた文字をSVG画像に変換できる「Satori」、画像のメインカラーなどの情報が取得できる「Color Thief」を組み合わせて
- Satoriでタイトルなどの文字をSVG化
- Color Thiefで取得したメインカラーをマスク用画像に反映
- sharpでトリミングした画像と前述の2つを重ねて1枚の画像として保存
の流れで生成するようにしています。しました。
webpack
- 用途
- javascriptのコードをまとめるやつ
- 公式サイト
- https://webpack.js.org/
作成時は分かりやすいように複数ファイルにプログラムを分割、実際に公開するファイルは1つにまとめて読み込みを早くする みたいなことをしています。正直よく分かってない＋通常のサイト更新時にjavascriptを書く機会がほとんどないので最初にwebpack導入して以来あまり存在を意識していない。2026年現在では割と古めのツールで、後継や代替がいろいろあるようです。
Sass
- 用途
- CSSが効率的に書けるようになるやつ
- 公式サイト
- https://sass-lang.com/
変数だったりミックスインだったりで一度書いたものを使いまわしたり、ネスト(入れ子)で記述を短くしたり、管理しやすいようにファイルを分けておいて公開時には1つにまとめたり…などができます。ただ、最近はCSSの進歩によって素のCSSでも変数やネストが使えたりするので、どこまでが素のCSSでどこからがSassの書き方なのか分からなくなるなどしています。動けばいいんだよ。
TinyPNG
- 用途
- 画像の圧縮
- 公式サイト
- https://tinypng.com/
名前の通りPNG画像の容量を削減してくれるWebツールです。パンダ。このご時世でどこまで容量を気にしたらいいのか/しなくていいのかいまいち分かっていないですが、小さいに越したことはないだろう ということで、PNGで書き出したイラストなどはここを通すようにしています。
Inkscape
- 用途
- SVG画像(データ)の作成
- 公式サイト
- https://inkscape.org/
サイトのロゴや背景画像はSVG形式の画像になっています。なぜならCSSを使って色を変えたりできて楽しいから。そのデータを作成するのに使っています。正直触る機会があまりないので、使うたびに使い方を調べています。
FileZilla
- 用途
- 公開用ファイルのアップロード/サーバーに保存されているログのダウンロード
- 公式サイト
- https://filezilla-project.org/
サーバーにファイルをアップロードするのに使用しているFTPソフトです。ドラッグ＆ドロップでサーバー⇔ローカルでのファイル送受信が簡単にできます。ソフトそのものは使いやすくて機能に不満はないのですが、最近ソフト起動してドラッグして～の動作が面倒くさくなってきてしまい、patipatiのログ(2か月でサーバーから消える)をワンクリックでDLできる自分用アプリを作っちゃいました。何とかしてサイト更新も1ポチでできるようにならないかな～と考えたり考えなかったり。
サーバー
スタードメイン・特典サーバー
独自ドメインに憧れがあった＋サーバーが無料でついてくる…おトク！ ということで、開設当初から今までスタードメインで取得したドメイン＋特典サーバーでやっています。現在のよしむらの環境では容量5GB、PerlやPHP等が使える、WordPressも設置可(使ってないけど)てな感じで、今のところ全く困っていません。この機会に確認してきたのですが、まだ容量の1/8ぐらいしか使っていないみたいです。なるほどね。
