a-blog cms v2.0管理ページデザインについて

このエントリーは、a-blog cms Advent Calendar 2013 の10日目担当分です。12月3日にa-blog cmsのv2.0のRC1がリリースされました。私はその中で主に管理ページのデザインを担当しましたので、そのことについて書きたいと思います。

理想のウェブデザイン

新しい管理ページの話が出たのは、随分前のことで、たしか2011年ごろの話だったように記憶しています。その後なかなか着手することができず、結局、今回の2.0のタイミングとなってしまいました。私はクライアントワークでもシステムのUIのデザインを何度かやっているのですが、いつも難しいなぁと格闘しております。

私がウェブデザインで好きなところは、最終的に使う環境と制作環境が同じであるということです。理想は土をこねて器を作るようにデザインできたらなと思っています。そんな中で2011年末に見たインブラウザ デザインのエントリーは1つの理想系に見えました。ただ、ウェブデザイナーのどのぐらいの方が実際にコーディングもされているのかわからないのですが、弊社ではデザインとマークアップは分業体制で行っているので、私のコーディングスキルでは、逆に時間がかかりすぎてしまったり、うまくイメージした通りに実装できなかったりなかなかハードルは高かったです。それでもできるところからいろいろ試すことができたのは良かったと思います。Styledoccoとか。

実装方法についていろいろ試してみて、a-blog cms v2.0の管理画面では、BootstrapなどのCSS Frameworkで動くものと、Fireworksで作ったデザインとの両方からデザインを確定していく方法をとりました。

制作の過程で取り入れたもの

作りながらデザインを整える為、できるだけ短いターンでアウトプットして検証して修正してというのを繰り返すために、制作過程では以下のツールを使うようになりました。

Github

プログラマだけが使っていたGithubをデザイナーやマークアップエンジニアも使えるようにしました。使えると言っても、プルしてコミットしてぐらいです。プログラマさんにブランチ切ってもらってます。はじめは無料のツールを使っていたのですが、プログラマが使い慣れたツールの方がコンフリクトなどのうまくいかなかったときに対応してもらいやすいことからみんなTowerを買ってもらいました。

LESS

どのメタ言語でもよかったのですが、Git経由で複数人が同じファイルを触る可能性があることから、JSで手軽に始めれるLESSで実装してもらいました。この辺りの自動化はいろいろ試してみたいです。

シンボルフォント

アイコンは前々から使いたいと思っていたのですが、はじめBootstrapで作って気軽にシンボルフォントを使っていたことから、あとあとになって、自前でシンボルフォントを用意せざる状況になりました。弊社のもう1人のデザイナーに用意しないといけないリストを用意して描いてもらいました。

1系と大きく変わったところ

メニューの位置

1系では上部ヘッダーとフッターにメニューを配置していたのですが、管理ページ上部と左のカラムにメニューを配置しました。メニューのカラムだけスクロールするようにしてクリックしたメニューが下の方でもJSで表示位置にでるように工夫をしています。

可変レイアウト

1系では管理ページは固定幅だったのですが、2系では幅に応じて伸び縮みする可変の形にしました。またモバイル環境でも最低限の確認ができるように、レスポンシブ対応をしています。普段のクライアントワークの中で担当者さんと撮影現場にいたときに、スマホを取り出してバナーを切り替えする姿を見てしまい、それ以来管理ページはある程度PCで見ることを前提にしているが、場合によってはスマホでも見たりするというスタンスで考えるようになりました。

ページ遷移

1系では何か設定を保存するとindexページに移動するページ遷移だったのですが、2系ではそのまま設定ページに居続ける遷移になりました。

インクリメンタルサーチ

普段のクライアントワークでは、とにかくモジュールIDがたくさん作られます。(いつもの案件でbid1だけで、200以上あった)何か修正するにも探すのが大変だったり、変更した後にどれを触ったかわからなくなったりする場合がありました。そこでモジュールIDのページにインクリメンタルサーチのフォームを追加して絞り込めるようにしました。

ブログのカラーリング

1系をはじめリリースしたときには、こんなにもブログを多用してページを作るという実装方法になるとは思いもしませんでした。今どのブログにいるかがわかりにくいということから、ブログごとに色を設定できるようにしました。

是非、新しいa-blog cms v2.0を試してみてください。


カテゴリー

yamada takuo

有限会社アップルップル デザイナー

カメラと自転車と本屋が好きです。愛知県岡崎市在住。