デザイナーがa-blog cmsを使う際に気をつけたいこと
2016年8月6日に加筆修正し、タイトルを変更しました。
こちらの記事は a-blog cms Advent Calender 2015の24日目になります。
a-blog cmsを使いはじめて2年がたちました。
その間練習用のものや公開しなかったものを含め約10個のWebサイトをa-blog cmsでカスタマイズしましたが、色々なところでつまずき遠回りしてしまったと感じる部分があり、デザイナーが効率良くa-blog cmsをマスターするためのポイントを考えてみました。使い始めたばかりの人向けの内容です。
効率良くa-blog cmsを勉強するために
a-blog cmsは数あるCMSの中でも、難しいプログラムを書くことなく使えるため、デザイナー向きのCMSと言えます。実際には、CMSを初めてさわるデザイナーにとっては一朝一夕で習得できるようなものでもありませんが、はじめてのことは何でも大変です。できるだけ効率良く、早く、ある程度のところまでマスターしたいものです。遠回りをして、私が「最初にわかっていたらもっと効率良く使えるようになったかも」と思うポイントを紹介します。
デザイナーが気をつけたいポイント
直接、cssでデザインしようとしない
まずは骨組み。とわかっていてカスタマイズを進めていても、どうしても先に見た目を調整したくなってしまう。これは職業病です。だからといって、構築過程で先にcssをさわるのは得策ではありません。最終的にコードが散らかってしまい、後からキレイに直すのが難しくなるのでやめましょう。
またcssをカスタマイズする際には、自分が修正、追加したいcssだけを、「サイト名.css」などとして新しく作ったcssファイルにまとめて書くのがおすすめです。既にあるクラスにスタイルを追加したいときでも「site.css」などを直接編集するのはやめましょう。そして使うテーマのlink.htmlファイルにも、新しく作ったcssファイルを読み込む記述を追加してください。
できるだけ元のcssファイルを編集しない。ということがポイントです。元のファイルを編集してしまうと、自分では想定していなかった箇所のスタイルまで変わってしまっていた。ということになりやすいので気をつけてください。
プロトタイプでの制作にこだわらない
a-blog cmsを活用するにあたって、プロトタイプでの制作に便利という点は大きなメリットの一つですが、効率良くマスターするためには、はじめてのことをできるだけ減らすことも大切です。慣れていない場合、いきなりa-blog cmsをプロトタイプの制作手順に用いることは難しいので、まずは一旦『a-blog cmsを使って自分のデザインを反映したWebサイトを作る。』これだけを目標にやってみるのがおすすめです。
実際にカスタマイズを進めてみると、機能について簡単に変えられる部分と、初心者にとってはそうではない部分が徐々にわかってきます。機能やUIについては運営しながらでも改善できるので、最初はハードルを下げておく方がいいのではと思います。
また初めてa-blog cmsに自分のデザインを反映する際には、レイアウトは元のテンプレートからあまり遠くないデザインをするとやりやすいです。
効率良く作業するためのコツ
- あらかじめ、管理画面内でサイトの情報をしっかり入力してから作業する。
- 実際のページの内容も、できるだけ反映してから作業する。
- a-blog cmsで使われる各要素の意味を理解しながら進めるつもりでやる。
あとは、デザインを反映する際には、まずはじめに「acms-container」や「acms-grid-r」「acms-admin-col-」などの、a-blog cmsのグリッドについてちゃんと理解しておくといいと思います。
初心者が持っておいた方がいい１冊
2016年7月に、a-blog cmsに関する専門的な書籍が出版されました。
『コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング』
https://www.amazon.co.jp/dp/486246341X/
a-blog cmsの準備と設定から公開時のチェックポイント、カスタマイズのための基本機能の説明、公開までの手順など、デベロッパーサイトよりも詳しい説明がたくさん書かれています。また、実例からa-blog cmsでのカスタマイズを理解できるようになっています。コンテンツファースト、プロトタイピングがテーマになっていますが、a-blog cmsの教科書として活用できる、初心者は必ず持っておいた方がいい１冊です。
これからa-blog cmsを勉強するデザイナーさんに向けて
私は長らくデザイン業務のみをやってきて、それからコーティングやCMS構築、ディレクション業務にも関わるようになりました。個人的な見解ですが、デザインをするのとCMSを構築するのとでは、使う脳が違います。たとえばデザイナーさんが感性を使って仕事に取り組んでいる時間が多いとした場合、a-blog cmsを使ったCMS構築をすることは、普段使わない筋肉を頑張って使うようなもの。htmlやcssにも慣れていないし、ローカル環境へのインストールやサーバーへのインストールだって、最初は簡単ではありません。
でも一度理解できれば、a-blog cmsはデザイナーにとって大きな１歩になります。フリーのWebデザイナーは、Webサイト制作自体を受注できるようになりますし、仕事の幅がぐんと広がります。またCMS構築の考え方を理解することで、Webサイト制作やサイト運営への理解は間違いなく深まります。ここが変われば、自然とデザインも進化していくはずです。
今色々わからないことがあっても、諦めずに使っていると絶対にわかってきます。焦らず長い目で、a-blog cmsに取り組んでいきましょう。
