CMS、Drupal7を使ったサイトデザイン・レイアウト方法【Omegaテーマでグリッドデザイン】

私が普段使用してる。Drupal7を使ったサイトのデザイン・レイアウト方法の紹介します。CMSには、WordPress・Movable Typeなどのブログ系から派生しているモノやDrupal・MODXなどの当初からCMSと謳っているモノがあります。この当初からCMSと謳っているモノは、設計思想がブログではなく、ポータルサイト・企業向けとなっています。その為、サイトのデザインも自由度の高いものが構築できます。

Drupal7とOmegaテーマで、グリッドデザイン

グリッドデザインとは、雑誌や新聞など段組(グリッド)の格子を意識したデザイン手法です。もともと紙媒体では基本となるデザイン手法であり。Webサイトのデザインなどでも利用されます。

また、グリッドデザインは、情報の整理に向いているデザイン手法です。その為、Webサイトのアクセシビリティにも役立ちます。情報量が多いサイトに向けのデザイン手法なのです。

DrupalのOmegaテーマは、グリッドを意識したテーマファイルです。デフォルトでは、横幅960pxを12カラムのグリッドに分けて考えられています。また、テーマファイルの設定で、16・24カラムにも対応します。

例:ブロックリージョン
Drupal、ブロックリージョンの表示(Omegaテーマ)

※.上記では、コンテンツ・サイドバーセカンドのみを、24カラムに設定しています。

見ての通りに、CMS上で規則正しいグリッドが表示されます。
あとは、このグリッド画面を意識してデザインを行います。自分でデザインを行わない場合でも、デザイナーの方にグリッドを見てもらえば十分理解してくれるはずです。

DrupalのOmegaテーマがグリッドに対応していることで、情報の整理が行いやすくなります。また、テーマファイルがグリッドを意識している為に、デザインからサイトの構築作業を容易にして制作工数を軽減してくれます。DrupalやOmegaテーマはカスタマイズを前提としたCMSでありテーマなのです。

 

このエントリーをはてなブックマークに追加

コメントを追加