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