父が立ち上げたNPO法人のWebサイトをSquarespaceで制作した話
育休中自由研究プロジェクト第三弾*1
父が新しく立ち上げたNPO法人のWebサイトをSquarespaceで作ってみたよ！というお話。
何を作ったのか
雨水まちづくりサポートという非営利活動法人のWebサイトです。
この団体は簡単に言うと、雨水に関する法律が施行されたことにあたり、その資格作りや普及、技術支援などを目的としたNPO法人です。*2
水資源：雨水の利用の推進に関する法律について - 国土交通省
この立ち上げを、建築士であり雨水の専門家である父が任されたということでサイト制作の相談を受けたのがきっかけ。*3
なぜSquarespaceなのか
自由研究と言えども今回はいちNPO法人のサイトなのであまりにお粗末なサイトを作るわけにはいきません。とは言え育児の片手間1人でゼロベースで制作することは非現実的です。
そこでオウンドメディアですよ。2017年ですもの、静的Webサイト作るのにレンサバ借りてドメイン取って。なんてもうやらなくていいんですよ。ありがたいですね。
中でも特に魅力的だった理由は下記の2つ。
提供元のロゴを入れたくなかった
自社サービスであるAmebaOwndは完全フリーですがPowered by Owndは取り除けないようです。今回は法人サイトなので有料でもロゴが入らないものを選定する必要がありました。
ちなみに。大学生の頃に作った何とも古めかしい父の会社サイトはオウンド研究がてらAmebaOwndに移してみました。*4（未完成）
仕事で使っていた
これがけっこう大きくて。私個人は触ったことなかったのですが産休前に働いていた部署で使っていました。復帰後でも無駄にはならないかもしれない経験というのは大きな選定理由です。
Squarespaceの良かったこと、大変だったこと
Squarespaceの使い方に関しては触れだすと果てしない量になるので公式ドキュメントを見てもらうとして。ここでは個人的な良し悪しについて触れようと思います。
良かったこと
コミュニティが充実している
ヘルプやQ&Aサイトが驚くほど充実しておりほぼすべての問題がこれらで解決に至りました。
サイト制作からドメイン取得までワンストップでできる
Squarespace内でドメイン取得から反映が可能なので立ち上げがめちゃ簡単。*5
かゆいところに手が届いている
細かい話になりますが。Squarespaceでは基本的にGUIで部品（Block）を置いて作っていくのですが、Code Blockではちょっとしたコードを挿入することができます。
例えばこのCode Block内のエディタがけっこう良くできてる。
シンタクスチェックやオートインデント、タブインデントなどが普通に効く上に私得なEmacsキーバインドにも対応してるのでIDEで開発してるのと何ら変わらない体験を得られる。ほら、よくこういうポップアップ内エディタって、tab押すと次のリンクに飛んじゃったりしてイラッとすること多いじゃない。
この細やかな気配りにはいささか感動しました。
開発者向けメニューが充実してる
これまた良くできてるんです。
DeveloperモードをONにするとgitで管理ができるようになります。
さらにさらにローカルでサーバ起動までできるという優れもの。
基本的にGUIでは即時反映されてしまうのでローンチ後にはありがたいですね。
大変だったこと
日本語の資料がほぼ皆無
膨大な量のドキュメントから自分のやりたいことに辿り着ける英語力がないと少し厳しいかもしれない。
日本語フォントがない
font-familyの選択肢に（当然っちゃ当然ですが）日本語フォントは見当たらない。なので日本語Webフォントを当てたい場合は自分でカスタムフォントを追加する必要がありました。
こういったこともanswersで大概解決します。
カスタムCSSを書く場合の留意点
先に述べたCode Blockで独自classを当てることができます。
その際、descriptionとか汎用的なclassを定義するとSquarespaceで元々定義されてる名前とかぶって思わぬところが崩れるといったことがありました。なので自分で定義したクラスにはmy-descriptionのように独自prefixを付けています。
細かいスタイル調整にはハックが必要
例えばニュースのページである問題が発生。
ここは私じゃなくても記事更新できるようにブログの機能を用いたページです。
先に述べたようにタイトルヘッダにはWebフォントを当てています。そのためフォントファイルを生成する際に必要な漢字を予め把握しておく必要がありますが、ブログなのでいつどんなタイトルが入稿されるか予測不能なんですね。
フォントがない漢字が使われると同じタイトル内で部分的にしかフォントが当たらない問題が起こってしまいました。
そこでだいぶ無理矢理なんですが時には下記のような力技を用いる必要がありました。（もしくはがんばって都度タイトルに使われる漢字を含めたフォントファイルをアップし直すか…）
.blog-list h1 {
font-family: "Source Sans Pro",sans-serif !important; // ブログ一覧の時だけデフォルトフォントに戻す
font-size: 24px;
line-height: 1.2em !important;
}
良くも悪くも
型にしっかりはまっている＝デザインの自由度は低い
例えばロゴ。ロゴ／タイトルの設定ページでは画像によるLOGOもしくはテキストによるTITLEしか設定できない仕様です。
これにはタイトルとロゴを同時に設定することは2重の意味を持たせることになるのでNGという確固たる理由があるそうです。
ははん、なるほどね。ということでロゴのみ設定。
一方、父からは「サイトに訪れる年齢層は高い（Webリテラシーが低め）からあまりモダンなサイトにしないで欲しい」とSquarespaceという選択に相反した要望をもらっていました。
ここで何が問題かと言うと「他のページからTOPに戻れないからメインメニューにTOPへという項目を入れるのはどうか」というとんでもリクエストが来たんですね。なるほどロゴを押すとTOPへ戻るという発想がないらしい。
悩んだ挙句ヘルプにもOptionalで書いてある通り画像の中にサイトタイトルも入れるという策に至りました。
制約が厳しいが故に型にはまった綺麗なサイト構成が実現できているのですが、裏を返せばデザインの自由度は低いので、ちょっとカスタマイズしたい時に調べないと実現できない。かと言ってあまりにカスタマイズしすぎるとデザイン崩れやSEOの面でサポートできないとのこと。
結論
広義ではCMSと言えども少し凝ったことがしたい場合にはマークアップやHTMLの知識が皆無だとやっぱり厳しそうです。
またSquarespaceは細かいところまで調整できるのが魅力ですが、コーディング経験がなく英語での問題解決も難しい場合はAmebaOwndで十分事足りると思いました。
