今回は開発する上で最初に考えたのは、今Webに必要とされているのは何かということ。
その上で必要な機能を洗い出しました。
想定するターゲット層
初期セットアップとカスタマイズは専門知識を持った人が行い、一度セットアップが行われた後はユーザーが単独で保守していくという運用を想定しています。見た目を変えやすくする
一番最初に考えたことがカスタマイズ性。多人数が使うテーマの場合、そのまま使うとどこかで見たサイトそのままになってしまうため、実際には見た目についてカスタマイズを行うことが多いと思います。
そこで見た目については未完成な状態として、カスタマイズで完成してもらうことを想定とした設計としました。
具体的にはHTMLとCSSの完全な分離。サンプルとしてのCSSの提供。Media QueryとJava Scriptの禁止です。
見た目が未完成である以上、見た目のためのコードは最小限の範囲、つまりCSS内に抑えなくてはいけません。
HTMLに見た目の要素が入らないよう、最初にHTMLを作成して、その後CSSを作成しました。
CSS作成時にはHTMLには一切手を付けないこととして、装飾の要素をHTMLに入れられなくしました。
最後にHTMLが様々なデザインに適用可能であることを確認するためにCSSだけ変えて角ばった1カラム式と丸を主体としたマルチカラム式の2つの全く異なる見た目に仕上げることできることを確認しました。
そのためHTMLにはdivタグやclass="red"のような装飾のためのコードが一切含まれていません。（管理画面部を除く）
初期データをdefaultとwhiteで切り替えることで全く違う見た目になることが確認できます。
そのCSSですがサンプルとして提供するために見やすさを最重要視して、どちらのcssも200行以内に収まるようにしています。
実際のコードはgithubで確認できます。
default CSS
white CSS
Media QueryとJava Scriptはコードの見通しが悪くなるため管理画面を除いて全面的に禁止しました。
これらはいつ発動するかが見えづらく、カスタマイズする人が想定していない動きを起こす可能性があるため、カスタマイズを行った後で独自に追加してもらうのが良いと思います。
このような結果幾つかの見た目について妥協しています。
実装のために見た目を犠牲にするのは、実際にお客さんがいる案件では難しく、好きにやることが出来て楽しかったです。
一方で見た目以外の部分はそれほどカスタマイズされないだろうという前提で作りこみをこなっています。
多環境対応
環境に依存しないHTMLを書くことでMedia QueryやJavaScriptに頼らずレスポンシブデザインを組んでみました。その結果AndroidでもiPhoneでもかなり古い端末までサポートすることが出来ました。
スマートフォンも廉価なモデルを含めて高解像度なディスプレイを搭載するのが当たり前になっていて、そういう端末で美しく見えるようRetinaに対応しました。
特殊な方法として、ブログのアイキャッチに写真をアップロードするときにRetina用の画像が自動生成されるようになっています。
これは本体プラグインの機能なのですが、スマートフォン向けに画像を自動縮小出来る機能を利用して、PC向けの解像度とスマートフォン向けの解像度を2:1に設定することで、PC用の画像をretina、スマートフォン用の画像を非retinaとなるようにしたうえで、画面密度に応じて開く画像が切り替わるsrcsetを出力するようにしました。
ソーシャル対応とSEO対応
ソーシャルとSEOに備えてOGPやmicrodataの組み込みを行ったほか、全てのページがランディングページとなりうるという前提でコンテンツファーストの作りとしています。トップページも目次と割り切り、特殊なコンテンツを配置せず、最新ブログの記事を表示するようにしています。
保守性の確保
運用が始まった後の保守は、ソースコードを触れない人が管理画面で行っていくことを想定しています。そのために、管理画面を大きく修正して初期セットアップ時に使う機能を目立たなく、ブログ投稿などの日常良く使う機能を目立つように配置しました。
標準の管理画面
カスタムされた管理画面
固定ページやウィジェット管理のようなあまり使わない項目を目立たなくして、代わりにブロクの記事を追加する「ページ追加」や記事を修正する「ページ管理」を追加。
また、管理画面をスマートフォンに対応させました。
ブログ主体のサイト
今回もコンテンツの修正はブログのみで行う前提になっています。baserCMSでは固定ページとブログの管理がバラバラになっているため、混在して管理が煩雑になるより、気軽に更新できるブログ一本にまとめました。
ブログを使いやすくすることで、固定ページも使おうと思えば使えますが、暗黙的に使用しないような作りとしています。
管理者用バーのレイアウト調整
baserCMSは管理者でログイン済みの場合、上部に帯が付くのですが、これにより管理者は訪問者と見た目に差があるサイトを見ることになってしまいます。そこで、管理者用のバーは通常非表示としてマウスオーバーした時だけ表示する仕様としました。
通常時は小さな▲が表示されるだけで管理バーが表示されない。
画面上部にカーソルを合わせると管理バーが表示される。
受賞して
様々な方々のアドバイスのお陰でこの賞を受賞することが出来ました。お礼申し上げます。特に昨年のコンテストで共作してデザインのいろはをおしえてくれたnada designの坂田さん、Typoを見つけていただいた平田さんにとても感謝しています。
かなり変わった趣向のテーマだとは思うのですが、評価していただいた審査員の方々有難うございます。
今回はカスタマイズ性を最重要視してどんなサイトにも化けるサイトにしたかったのでノージャンル賞というのはまさに狙ったところに行けたのかなと思っています。（去年もノージャンル賞でしたが）
ソースコードはgithubにて公開しております。