萌尽狼グ

音系同人サークルASIA LUNAR代表、萌尽狼(もえつきろ)の個人ブログ

ASIA LUNARウェブサイトリニューアルのお知らせ

f:id:moetsukiro:20131225212811j:plain
http://asialunar.info/


本日、音系同人サークルASIA LUNARのウェブサイトをリニューアルしました。


2012年07月17日のリニューアルからTwitter Bootstrapでレスポンシブデザインになっていましたが、実際にスマホで見てみるとメニューが開けないため、トップページから移動できないことがわかりました。


そのため、今回のリニューアルではトップページからすべてのコンテンツにアクセスできるように、コンテンツをタイル状に美しく並べようというのが大命題になりました。


karoryさんのウェブサイトを見て、やっぱりコレだよなぁ…と思ったので。
karory.net|Comic&illustration web site by karory


以前は苦肉の策でトップページのフッターにサイトマップを付けてみたりしましたが、お世辞にも美しいウェブデザインとは言えませんでした。
f:id:moetsukiro:20131225214945j:plain


これはBootstrapのバグらしく、v.2.3.0では修正方法があるようです。
Twitter Bootstrapのドロップダウンメニューがタップできない場合の対処法 | mawatari.jp


ところが、ASIA LUNARウェブサイトのBootstrapはv.2.0.4。
bootstrap.jsを見てみても、上記リンク先のように修正できませんでした。


Bootstrapはv2.1.0からfont-size/line-heightが13px/18pxから14px/20pxに変更になったため、バージョンアップするとレイアウトが崩れてしまい、修正するのが大変です。


最新のv3.0.3に移行することも検討しましたが、やはりソースを全面的に見直すのは、今の生活では大きな負担となってしまうのであきらめました。


Bootstrap3はモバイルファーストとなり、古いブラウザもサポート外となりました。
Google Analyticsを見ても、閲覧者はおおむね最新のブラウザを使っているようなので、Bootstrap3に移行しても差し支えなかったのですが、フラットデザインがどうもなじめなくて…


Bootstrap3はパネルが使えるので、今回のリニューアル案ではかなり魅力的だったのですが。
f:id:moetsukiro:20131225220509j:plain


結局、Bootswatchに表示されている広告枠をヒントに、アイディア勝負でなんとかしました。
f:id:moetsukiro:20131225221009j:plain


グリッドデザイン(row)の中に可変グリッドデザイン(row-fluid)を入れ子にしてレイアウトしているので参考にしてみてください。
f:id:moetsukiro:20131225223033j:plain


今回のリニューアルで、ディスコグラフィーの旧作紹介・試聴と、エグゼリカ二次創作のページを削除しました。
『加賀峰』『播嶺』の作品紹介は後日ページを作り直す予定です。