横山 倫洋

初めてCMSを触ったのは2005年。その時は「MovableTypeを利用したイントラサイトを構築する」というお仕事でした。当時は「なんて便利なツールなんだ？！」と思った記憶があります。
その後、オープンソース系のCMS(xoops等)や自社エンジンのblog OK!を利用する案件が増え、現在いただいているお仕事の多くはありがたい事に、オークCMSを利用したサイトの開発がメインとなっています。

今回は、2005年〜現在に至るまで少しずつたまってきたデザイン〜コーディングのノウハウの一部をご紹介します。

写真等の画像の扱い方 その1
縦・横向き画像や画像サイズについてお客様が記事投稿する際、写真やそのた画像サイズ(縦横比含めて)ってのは未知数です。
仕様でキメキメで「縦○で横○のサイズでお願いします！」なんて事はあまり強くいえません。
お客様のPCスキルは千差万別。ましてやの担当者が変わるなんてこともよくある事なので、柔軟な対応が求められます。

さて、どうしましょう
もちろん、ImageMagicを利用して画像の自動縮尺等はかける事はできますが、縦横比まではどういった比率でくるかわかりません。
この画像が入る事により、記事文章の横幅サイズが決められないなんて事があります(というかありました)

結論：縦・横どっち向きでもいいデザインとコーディングを用意。
できる限りデジカメの標準的なサイズ比率の4:3の比率で画像が入る事を想定してデザインをしています。
また、コーディング上も出来る限りこれをカバーできるようにしなくてはいけません。
デザイナー＆システム側との調整が必要ですが、画像の縦向き用、横向き用のCSSを用意し、画像の縦横比を見てプログラム上でスタイル(class名)を切り替えるという事で解決します。

事例 1：http://www.oaksway.com/showcase/archives/2009/01/30/entry215.html
事例 2：http://www.oaksway.com/showcase/archives/2009/06/08/entry224.html

写真等の画像の扱い方 その2
画像の掲載点数について上のその１と類似してますが、掲載予定の写真点数が未知数な場合があります。
特にECサイトやギャラリー系のサイトによくある事です。
「このページでは、写真は3つ用意できるけどこっちのページでは2つだけしかない」
なんて事が往々にしてあります。

さて、どうしましょう
CMSでの更新を前提としてデザインテンプレートを作成しますので、「こっちは…あっちは」といった場当たり的なデザインを書いていたのでは、デザイン費用が上がりかねません。

結論：点数変わってもいいデザインとコーディングを用意。
ほぼ、写真等の画像の扱い方 その１の結論と同じです。
ただし、予め掲載予定の写真点数の最小枚数と最大枚数をお客様と決める必要がありますが、決まってしまえばデザイン側は、それにそくしたデザインを用意し、コーディング側もそれに即したスタイルの定義をすることで解決ができるはずです。

事例 1：http://www.oaksway.com/showcase/archives/2009/01/30/entry215.html

文章を読みやすくblogに近いコンテンツやインタビュー等の記事をCMSを利用して更新する場合、自由度があがるので、記事を書く人により、文章のフォーマットや体裁が変わってきます。

さて、どうしましょう
プレスリリースや重要なお知らせ等、少々オフィシャル的な扱いでCMSを利用する場合、予め文章のフォーマットは決まった形になりやすのですが、blog型式で複数人で管理する場合、Aさんの書く記事とBさんの書く記事では、フォーマットがバラバラで統一感のないコンテンツになりやすくなります。

結論：ルールをつくって運用開始。
デザイン側で、最小レベルの文章フォーマットを用意しておく必要があります。
主に見出しのルールかと思います。装飾のデザイン含めてある程度決めておき、お客様に説明して運用してもらいます。
もちろんここでもコーディング上でスタイルを定義しておく必要がありますが、スキルの事もあるのでお客さんにタグやclass指定をする事なく見出しの設定ができる事が望ましいつくりになります。

事例 2：http://www.oaksway.com/showcase/archives/2009/06/08/entry224.html

という感じで、デザイン・コーディングともにお客様の発信したい情報にあわせて工夫し、一つ一つがノウハウになっています。
まだまだノウハウはありますが、今回は出し惜しみさせていただきます(笑)

最後になりますが、文中に出てきたオークCMSのサイトが9/17日にオープンいたしましたのであわせてご覧ください。
http://cms.oaksway.com/