デザイナーの市村さん（@MarlboroLand）による「WebオペレーターのためのWebデザイン勉強会」の後半、実技編です。

＞＞前編の理論編はこちら

市村さんはIrrustratorを使われているので、実際にイラレを操作しながらの説明となりました。
記事中に添付している画像は、私が家で再現したものです。

ボタンのサイズ

最近のボタンは高さがどんどん短くなっている

→グローバルナビの役割が小さくなり、コンテンツを見せることを重視するようになった

配色について

※記事冒頭のスクリーンショットを参照

原色は避けるべき。色選択はRGBよりHSBの方がいい
90%くらいに落とすとちょうどいい

明度と彩度を保ったまま色だけ変えることができる
ただし緑は彩度、黄色は明度が高すぎるので調整が必要

グラデーションの調整

白→黒のグラデーションはまずない
グラデーションのトーンカーブは全体に柔らかく、いちばん下（濃い部分）のカーブを若干きつめに

→横に回転した時の様子をイメージしてみよう

文字の配置

新ゴ／リュウミンを中心に、モリサワフォントを使うのが無難
（ウェイトを細かく指定できる）
モリサワがないときは、Adobe製品なら小塚ゴシック／明朝があるのでそれで代用

文字のウェイトを細めに、文字を大きめにするとすこしおしゃれに見える

英文字が混在する場合

英語のみHelveticaかArialに、文字サイズを若干大きくすると収まりが良くなる

カーニング

古いバージョンのIllustratorは文字間隔が不安定なので
「イ」「ト」などの隙間が広くなってしまうことがある

一文字ずつの微調整が必要　文字を選択した状態でAlt(option)＋左右キー

立体感を出す作り込み

PCの原点は左上／文字は左上から読む
…なので、左上を光源にするとバランスがいい

1. 1px内側に食い込ませるように、上と左に明るい線を引く
2. 1px内側に食い込ませるように、下と右に暗い線を引く（縁ギリギリに引くとはっきりしない）

ボタン上の文字に立体感を出すコツ

飛び出して見えるようにする

透明度を下げたドロップシャドウをかける

凹んで見えるようにする

1. ぼかしを0、色を明るくしたドロップシャドウを右下に向かってかける
2. ぼかしを0、色を暗くしたドロップシャドウを左上に向かってかける

フラットだけど読みやすくする

ボタンの縁に明るい境界線を細く引く or 光沢を出してみる

上から下のグラデーションのTIPS

上：白っぽい色
→　真ん中：基準色
→　下：彩度を少し高く
下から光っている印象になる

定番の矢印などの装飾

○ ＋　− ＋　>
▲を横に倒す

PhotoShopのオートシェイプに太い矢印があるので調整する手も

※今見ているブログの、右のメニューの矢印を見てみてください＾＾；
※矢印のベクターグラフィック素材は、検索をかけるとけっこう手に入ります

グローバルナビゲーションに応用してみる

横並びのパターンがほぼ主流→誘導リンクの集約

1. メイン枠と同じ幅、ボタン高さのグラデーションの棒を作る
2. シェイプをコピーして「段組設定」で均等に分割する
3. 分割点に区切り線を引く／二本引いて、左を少し暗く、右を少し明るく

Σ（°Д°; 段組設定知らなかったーーーーーーーー！！

※CS4以降だと上メニューの「編集」→「パス」の中にあります

市村さんのおすすめの本

WEBデザイン 不朽の表現（MdN刊）

今回の内容がだいたい網羅されている
DTPのデザイン本も買った方がいい。Webデザインの本はサンプルがしょぼい。

レポートは以上です。

「今回はどのくらい来るかわからなかったので初歩的なテーマにしたが、好評ならもう少し突っ込んだ話をするかも」ということでした。

イラレやフォトショの基本的な機能までは専門学校や勤め先で教われるものの、いわゆるTIPSであったり、理論であったりは実務経験を積まないことには身につきません。
私もコーディングのお仕事が多くなり、きれいなデザインカンプに触れることはできるのですが、なかなかそのテクニックを勉強することができない状況です。
デザイナー寄りの勉強会も定着して欲しいと思います。

@MarlboroLand 普通にReplyくれたらいいですよwwwwwwwwwww

Twitterで記事を紹介して下さい（-人-）

デザイナーの市村さん（@MarlboroLand）がWebデザインの勉強会を開かれたので、参加してきました。
市内のレストランの一室にモニターを持ち込んでの、ごく小さな勉強会です。

WebオペレーターのためのWebデザイン勉強会開催 | くずWebデザイナーのなれの果て

”くずWebデザイナー”とか”ネガティブおやじ”とか名乗られてますが、市村さんはプロのWebデザイナーで、SaCSSでも日本のWebデザイントレンドについて、ライトニングトークをされてます。

初回ということで比較的初歩的な話になりましたが、かなり密度の濃い内容だったのでレポートします。
この記事は前半の、理論に関するまとめです。

勉強会の目的

Webデザインがうまく行かない悩みをみんなで考え解決していこう

コーダーに求められるスキルは？

• 専門的な知識が必要
• 最低でもXHTML+CSSが必須
• プログラムは習得に時間がかかる
• サイト構成などの知識も必要

→要求されるレベルが上がり何でもできないといけない

では、デザイナーに求められているスキルは？

• デザインに答えはない／センス（感性）が必要
• DTPスキルが希望されている
• サイト構成からの知識が必要
• アイコンなどの装飾技術

→時代に合わせたデザインを作り出せる感性や発想が必要

デザイン習得のための原則

1. やってみること
2. 感じること
3. 調べてみること
4. 創ること
5. 観ること
6. 続けること

→とにかく思い立ったら行動してください（市村さん談）

制作時必要なソフト

1. Firewoks　スライスの書き出しが早い
2. PhotoShop　画質が高い
3. Illustrator　文字組がきれい

Illustratorでテキスト作り、PhotoShopで調整、Firewoksでスライス…という流れだったが、各ソフトの向上で変わってきている

Webデザインの変遷

※記事冒頭のモニター写真を参照

制作ソフトが普及してなかったり、画像形式テーブルレイアウトなど制限が多かったため、デザインにもその影響が出ていることが分かる

→モニタの肥大化による詳細なデザインの実現
→（ユニクロなど）DTP寄りのデザインが要求されはじめている

見ておいた方がいいサイト

• コリス
• WebDesignDetabase

Webデザインの基本

モニタ横幅＝1024pxが最も多い

コンテンツ幅＝960px
様々な数で割れ、グリッドシステムを組みやすい

メインコンテンツの幅は一行何文字入ればいいのか？

この問題に答えはなくまちまち／幅から算出するしかない

最近のデザインの傾向

• フッターにサイトマップが入っているデザインが非常に多くなっている
• サイトの肥大化に伴いグローバルナビの役割が変わってきている（後述）
• 特に誘導したい、必要とされるリンク／最上層のカテゴリー一覧
  それより下層のサブカテゴリーを全てフッターに掲載する

Webデザインでつまづきやすい場所

装飾の方法

ボタンやバナーなどの作り方を覚えよう

サイトレイアウト

ヘッダやフッタなどの必要なコンテンツの配置方法を覚えよう

レイアウトバランス

配色による影響や見出し、文字の組み方を考えよう

コンテンツの組み立て方

コンテンツ情報をまとめサイトマップを作ってみよう

その他：重要だけど学ぼうとすると時間のかかるもの

文字の形式やウェイト
カラーキーワードや色に関する人への影響
画像の加工方法 etc…

グローバルナビから先の構成の変化

• むかし：　1ページに全て載っている
• 少し前：　最初の1ページが載っている
• 現在：　子ページのインデックスが掲載されている

→キーワード細分化によるSEO的な利点
→腹黒い話見積がちょっと増(ry

市村さんが最近作ったサイト

ブレインワークス
最近のサイトデザインのトレンドを踏襲してみました

• 直線的なデザイン
• 整理されたグローバルナビ
• フッターにサイトマップ

>> 実技編につづく

Twitterで記事を紹介して下さい（-人-）

講師：WordBench札幌の田中さんのセミナー資料はこちらです。
http://another.maple4ever.net/archives/1270/

拙記事ではセミナー内容の捕足、実務で扱うものとしての雑感などを交えます。
まだ3.0をちゃんといじっていないので、3.0についてはあくまで聞きかじりの段階であることはご了承ください。

WordPressはCMS

• 広瀬香美ブログ
• 百式
• 暮らしの手帖

WordPress3.0は6/25時点で1,121,440ダウンロード

WordPressは時系列主体のサイトに強いように思われますが、「暮しの手帖」のような時系列に添わない、個性的な一覧ページを持ったサイト構築も充分可能です。

とは言え、様々な実務案件を経験してきた視点から言えば、静的ファイルとの共存が難しい、テーマファイルの見通しが良くないなどの欠点から多人数で連携して制作するサイトにはあまりおすすめできません。

尚、私のブログもWordPressです。一覧ページの体裁が普通のブログと違っていたり、a-blog cmsベースの本サイトとインクルードで連携していたりします。

どのようなコンテンツマネージメントシステムということを知る にはそのデータ構造を知ることが早道です。
WordPress 3.0 の新機能を交えまして、まずは WordPress の データ構造を紹介していきます。

WordPressのデータ構造（記事情報）

ポストとページの二種類＝post_type

1. ポスト：時系列（日記／新着情報など）
2. ページ：固定的（自己紹介）

ポストとページのメタ情報

• タイトル
• 投稿日・投稿者
• 修正日
• パスワード
• トラックバック先
• 分類情報(カテゴリ・タグ・タクソノミー)
• リビジョン
• 等々

WordPressの記事情報は時系列とカテゴリーによって分類することを前提にした「ポスト（記事）」と、1ページごとに独立した「ページ」に分類されます。

ただ、ページでも時系列の整理が可能だったり、後述の「カスタムタクソノミー」でうまくタグ分類すると、両者の区別はほとんどつかなくなってきます。
この辺りの特徴は、MovableTypeと非常に良く似ています。

カスタム投稿

WordPress3.0からの新機能
ポスト／ページに加えて新しいタイプを定義できる

タイトル不要／日付不要／トラックバックが必要／などなど

旧来のポスト／ページもカスタム投稿のひとつとして
デフォルト実装されている＝再定義ができる

カスタム投稿機能は、マルチブログ以上の目玉機能なんじゃないかと思っています。
上の説明の通り「必要／必要ない項目」を自分で定義することが可能なので「タイトル・本文がなく、カスタムフィールドのみで構成された記事」などの大胆な構成も可能なようです。
MovableType4以降で登場している「表示オプション」に近い印象です。

管理画面上の入力項目の順番設定はできるのか、旧来のプラグインや表示パフォーマンスへの影響はないかなど気になるところもありますが、使いこなせば無償で使える軽量CMSとしての良さが増しそうです。

カテゴリーとタグ

記事に対する抽出条件のひとつ

1. カテゴリー→階層構造を持たせられる
2. タグ→フラットな分類

カスタム分類（タクソノミー）

任意のセット分類を追加できる
1サイトに複数のタグクラウドを生成できる

2.9から機能強化
ただし分類の新規作成はプラグインが必要（custom-post-type-ui）

カスタムタクソノミーは、「複数の独立した階層カテゴリーを作成できる機能」と解釈した方がいいと思います。前バージョンから概念自体は存在していましたが、3.0以降では、管理画面からの設定が可能になりました。

こちらの記事で詳しく説明されている通り、導入の手順が面倒な割に必要性が薄い機能だったりします＾＾；

カスタムタクソノミー(Custom Taxonomy)の導入と使い方 [WordPress 3.0]

その他の情報

コメント
記事に対する外部からのコメント

ユーザー権限
複数のユーザーが投稿できるようにユーザー管理ができる
購読者／管理者／編集者／作成者／投稿者
管理画面のアクセス権限や投稿、修正制限
投稿から公開へのワークフローが持てる

オプション
サイトの動作システム情報

リンク先
他サイトとのつながりを格納する情報／XFNを使える

ポストメタ（カスタムフィールド）
記事に対するここまでで出てきた以外のカスタムメタ情報を持たせる

ユーザー権限については捕足が必要です。
ほとんどの安価なCMSもそうですが、「上司」「部下」のアカウントがあって、部下が更新すると昇任者である上司に自動でメールが送られる…といった機能は、WordPress2.xの段階ではプラグインがなければできません。
MUと統合したWordPress3.0はもしかしたらできるかもしれないのですが、まだ未確認です。すいません。

2.xでの実装方法についてはこちらの記事を参照してください。

WordPress – 公開承認ワークフロー – 新規公開 | Technolog.jp

リンクの「XFN」というのは人間関係を表現したフォーマットなのですが、
なんで恋愛関係だけこんなに充実してますのん
と必要性に疑問を感じるわけですよ。ハイ。

その他の情報続き

マルチブログ
3.0から利用可能
これまでに出てきた情報を複数もたすことで、複数のサイトを持つ

データフロー
管理画面操作からのデータベースへの格納
コメント者からのコメントの投稿
トラックバック／ピンバック
XMLRPC／ATOM経由でのデータベースへの格納

出力系（テンプレートタグ）
WordPressテーマの実態
テンプレートタグはデータ構造をHTMLやRSSで出力する関数群
データの抽出を行うループ系の関数を起点に、条件取得された 情報を取得
現在は主にブラウザ用に簡単に HTML 出力する機能が提供されている

注目していたマルチブログですが、今回のセミナーではデータ構造の説明の一部にとどまりました。
MovableType4、SOY CMSのように管理画面からウィザードを介して作成できるのかと思っていましたが、現時点では外部からの.htaccessの編集などが必要なようです。
サブドメインも想定して設計されているのはありがたいところです。

Wordpress 3.0で複数ブログを使う設定 « lainforest.org

出力系の説明にある通り、WordPressのタグはテンプレートエンジンではなく、PHPの関数です。
なのでテーマにはそのまんま関数を書きます。
PHPをある程度かじれば融通が利くのがありがたいところですが、プログラマさんがWordPressのテーマファイルを見たら、ちょっと面食らうかもしれません。

プラグイン

add_filter／add_actionで既存のタグ／関数に自作関数をフックできる
既存の関数も全てフックされているので不要なものを除外できる

functions.phpでテーマ専用の関数を定義できる

※簡単に実装できる反面、プログラム構造を追うのに慣れがいる

フィルターの例

記事の特定文字列を加工し、HTMLを付与
（記事中の「hiromasa」をタグで囲む）

ショートコード
（[tegaki]〜[/tegaki]で囲んだ箇所がカスタムフォントに変わる）

アクション（template_redirect）
通常のテーマに情報を渡さず、携帯用テーマの処理をさせる（例：Ktai Style）

ウィジェット
サイドバーのウィジェットを追加する

管理画面への機能追加
3.0からの新テーマはヘッダー画像を差し替えできる

時間指定実行（wp_cron）
コアには既に予約投稿の機能がある

必要なプラグインがあったなら「コア機能に対する変更」という視点で
調査を行うと比較的簡単に実現可能

既存のプラグイン修正時もコアのどの部分に介在しているのかを調査し、
そこからソースコードを追うとわかりやすい

WordPressは「フック」という概念でコア関数を管理しています。

既存のタグに新しい関数を定義する「add_filter」と

add_filter( 'the_content', 'hogehoge' );

WordPress内の特定の処理で関数を発動させる「add_action」があります。

add_action( 'wp_head', 'hogehoge' );

「コアのどの部分に介在しているのかを調査し、そこからソースコードを追う」というのが、プログラミングに慣れていないと難しいです。
phpファイルを内部検索できるソフトなどで調べる手もありますが、
WordPressのコアファイルを公開している、こちらのサイトが便利です。

PHP Cross Reference of WordPress

ページ右上にあるサーチボックスからタグ名、関数名を入力するとどのファイルの何行目にコードがあるのか、を調べることができます。

WordPressの魅力

ブログを起源とするプロダクトだがデータ構造がシンプル
特に3.0から基本構造や分類の解放を行っているためCMSとしても使いやすくなった

個性が強いブログサイトを構築する手段としても人気があるので
テーマやプラグインに美術的なものが多く配布されている

個性をだすべく、システムもそれに答える形で拡張されていく
テーマやプラグインからの介在の余地が大きく
様々な要求に応えられるカスタマイズが可能

サイトへの導入実績が多くそのノウハウが得られやすい

WordCamp／WordBenchなどオフラインコミュニケーションも活発で楽しい

WordBenchについて

WordPress の地域コミニュティー
実はWordBench札幌としてのオフライン活動はこのOSC北海道が初めて

参加お待ちしております
http://wordbench.org/

セミナーのレポートは以上です。

田中さんが述べられているように、WordPressはPHPの知識があれば柔軟なカスタマイズができることが魅力です。
このためかデザイナーが介入しやすく、芸術品のようなテーマ、とても無料とは思えないような高度なテーマが多数公開されています。
管理画面の完成度の高さも特筆すべきところです。

一方で「安くて簡単でなんでもできる」という情報が一人歩きしてしまい、WordPressの仕様では困難な案件、ライセンス料をかんがみても他のCMSの方が安心して運用できそうな案件もWordPress前提で来ることが増えているのが、私の悩みだったりします。

そういう意味で、新機能を派手にアピールするのでなく、WordPressを更に詳しく知るための解説に徹した田中さんのセッションは好感を持ちました。

MUと統合し、更に奥深くなったWordPressはこれからも注目すべきCMSだと思います。

Twitterで記事を紹介して下さい（-人-）

昨日（4/17）は東京で「CSS Nite LP, Disk 9」がありました。
WEBコーダーの最新技術にフォーカスしたイベントで、Web制作・jQuery・CSS3・HTML5とかなり幅広いテーマとなっています。

私も参加したかったのですが都合が付かなかったので、Twitterのハッシュタグ「#cssnitelp9」をお仕事しながらチェックしてました。

その中で、牧野工房の大杉さんと、ドーガの石本さんのコーディングスタイルの違いに関する呟きに興味を持ちました。
少なくとも、CSSの扱いに関しては全然違うようです。

necozeさんも参加されてたんですねー＾＾

牧野工房はサイト内のCSSをコンテンツ毎に分割して、importで一括管理するスタイルなので、石本さんがhttpリクエストを節約する方針で制作しているのであれば、真逆になるはずです。

これはどっちが正しいとかではなく、
「ボリュームのあるサイトを早く正確に作成する」ことを業態としている大杉さんと
「パフォーマンスの高いサイトを作成して長期的効果をアピールする」のを追求している石本さんでは
同じコーダーでも「求められている要素」が違うのだ思います。

私のようなフリーのコーダーになると、協業先の方針や案件の状況によって「今回求められている要素は何か」を判断する必要が出てきます。

制作会社との協業の場合は先述したような、早さか、正確さか、パフォーマンスかという話になってきますが、それとは別に
「Webデザイナーとしての技術的なサポート」を求められることもあります。

依頼先が小規模団体や、DTPデザイナーしかいない制作会社だった場合、カンプの文字サイズ・マージン・パディングなどは適当ですし、Webページに起こすとどうなるかなどはあまり考えられていません。
その辺りの補完を制作側がまかされるわけです。

常に一定のワークフローで進められないのはけっこう大変なのですが、ポリシーがないのもポリシーですよということで、いろいろな協業先の良いところを吸収していきたいと思っています。

そんな私は6/5の「CSS Nite LP, Disk 9.2（reprise）」に参加予定です。
再演版ではCSS3や、HTML5にさらにフォーカスした内容になっているようです。

内地のコーダーの皆様、会場でうぇびんを見かけたときはいじめないでください。
宜しくお願いいたします。

Twitterで記事を紹介して下さい（-人-）

新しい技術を得ることも大切ですが、今の作業、ブラッシュアップできてますか？

iPhoneアプリ「HTML/XHTMLタグ辞典」が人気の、大藤幹先生の新刊「XHTML&CSS超高速コーディング術」の出版記念セミナーが、アップルストア札幌で開かれました。

今回は「コーディング＝カンプを元にHTMLとCSSを作成する業務」を専門に扱う制作会社「牧野工房」の協力を受け、短時間で正確、かつ美しいコーディングを行うための、牧野工房の実践的なノウハウが紹介されています。

コーディング専門の牧野工房
スキルパートナーズ株式会社

本のPRになると思うのでNDAに反しない範囲で書きますと、私はこの牧野工房さんとお仕事をさせていただいたことがあります。

その際にワークフローの一部を拝見することになったのですが、とにかく驚いたのが、書籍の協力者である、大杉さんのコーディング技術と、徹底した作業工程の管理体制でした。
ルールが厳しいのはもちろんですが、それら全てに理由付があり、しかもコーディングスキルの向上につながります。
セミナー内で大杉さん自身が
「牧野工房のルールに従っていれば、IE6でも問題は発生しない」
と断言されていますが、大げさな話ではありませんでした。

そのような経緯で、私自身も牧野工房のコーディングルールの影響を大きく受けています。
今回の書籍が出版となったのも、大藤先生がハンズオンセミナーを通して大杉さんのスキルに感心したからなのだそうです。

セミナーでの紹介によると、テーマは「手戻りをなくすこと」。

1. 基本をしっかり守る
2. 手順に沿って進める
3. 情報をしっかり管理する

という、当たり前のように見えてずさんになりがちな、牧野工房の実践テクニックが公開されています。

牧野工房が使用している工程管理表・テンプレートが同梱されていたり、大杉さん考案の「シャドーコーディング」(いきなり書くのではなく事前に構造をイメージする)についても触れられていますので、WEBデザイナー・コーダーの方は是非ご一読を。

何故私がこんなに薦めているのかというと、良いコーディングルールの普及・共通化は業界全体のワークフローの改善につながっていくからです。

私のようにフリーランスでやっていると、様々な会社のコーディングをお手伝いすることになります。既にコーディングを終えた静的コンテンツのCMS埋め込みなどもすることがあります。
私が全て作業する案件ならいいのですが、普段行っているものと違う（場合によっては効率の悪い）ソースコードに合わせるのはなかなか厳しいものがありますし、工程にもムダが出てしまいます。

HTML5の仕様が発表され、つい新しい技術に目が行ってしまいがちですが、基本をしっかり守り、ブラッシュアップすることを忘れないようにしたいものです。

Twitterで記事を紹介して下さい（-人-）

北海道WEBコンソーシアム定例会「デザイナー・プログラマーの連携のベストプラクティス」

WEBデザイナーは、WEBサービスやCMS等の制作で、プログラマと協業することが多くなっています。
私はまだプログラマさんとの協業経験は少ないですが、かなりの確率でトラブルが起こって、ひどいときは業務に影響するようです。
何故そんなことになってしまうのでしょうか。

今月のWEBコン定例会はLocalのPHP部と共同開催という形で、“デザイナーとプログラマの双方の不満から、それを解決するためにはどのようなことをしたらいいのかを導き出すセミナー及びディスカッション”が行われました。

セミナーでは、デザイナー側の長谷川さん（@h2ham）、プログラマ側の松井さん（@ketaiorg）がそれぞれ

1. 協業で困ったこと
2. 自分の業種側が歩み寄るべき点
3. 相手の業種側に希望する点

を挙げていきました。

…のですが、打ち合わせをしたわけでもないのに、お互いの内容がほぼ一致する結果になりました。
表にしてみます。

デザイナーとプログラマの反省点・要望は、ほとんどの形で一致しています。
つまり、お互いの歩み寄りが足りないまま協業している状況に、原因の一端があります。

これ以外の細かい部分は、

• 思想的な問題（オープンソース至上のプログラマ／著作権と意匠を重視するデザイナー）
• 業態の問題（初期から入り納品まで集中するプログラマ／中期から入り納品後も改修を続けるデザイナー）
• 金銭的な問題（長期案件をまとまった見積で請け負うプログラマ／短期案件を手頃な見積で請け負うデザイナー）
• 雇用関係の問題（プログラマが雇用側／デザイナーが雇用側／どちらもフリー）

が複雑に絡んでくると思います。
こればっかりは、コミュニケーションを重ねるしかないでしょう。

また、表を見たらすぐわかることですが、トラブルの半分は相手の性格によるもので、業種以前の問題です。
WEBコンの定例会に参加するような人たちは勉強熱心だったり、自分からコミュニケーションを望むような人たちだから、上の表に載るような人はそもそも今回のセミナーを聞いてないのです。

じゃあどうするのか。

改善意識を持ったデザイナー・プログラマが結束して、外堀を埋めてしまうしかなさそうです。
情報を交換して、協業経験をためて、ワークフローやルールを整えて、困ったさんが出たら注意できる環境を作るということです。

簡単ではないですけど…＞＜

「本当は歩み寄らなきゃならないのは、僕らプログラマの方なんだよね」

と、懇親会でプログラマさんに言われました。

確かにデザイナーはよくしゃべる人間が多いですが、それがコミュニケーション能力につながっているのでしょうか？一方的に文句言ってるだけかもしれません。

それに、私は最近の案件ではじめてSubversionを使うことになったのですが、正直「難しそう…めんどくさい（´A｀）」と思いました。実際にちょっとがんばって使ってみると、バックアップも楽だし協業相手に迷惑をかけないし、とてもいいツールなのに。

どっちかが引くのではなくて、双方が歩み寄れればいいですよね。

Twitterで記事を紹介して下さい（-人-）

2009年6月27日に開催された、CSS Nite LP, Disk 6 「CMSリベンジ編」の参加レポートです。

最後のコマは

• bingo!CMS
• Jimdo
• Power CMS for MT

によるミニセッションと、パネルディスカッションでした。

セッションについては短くて書きようがないので、製品の概要と私の感想のみ。

追加参入の三社は、製品に関するセッションが5分程度しか与えられていません。
…が、プレゼンターの皆さんの集中力がハンパなく、5分でも各製品の特徴や魅力までは充分知ることができました。

bingo!CMS

特に凄かったのが、一番手のbingo!CMS。
もともとbingo!CMSは、DTPデザインの感覚でレイアウトできるという方向性なので、ドラッグ・ドロップを駆使したダイナミックなデモ動画は観客の目を引きます。

それを「時間がないので…」と言って爆速で流しながらの、よどみないライトニングトーク。
（ちゃっかりまだ開発中の機能も混ざっているwww）
ラストに「参加者全員にシングルライセンスをプレゼントします！」という太っ腹発言があったこともありますが、会場は大いに沸きました。

素晴らしい製品はじっくり使ってもらえば必ず分かってもらえるけれど、使ってもらうには魅力を最大限に引き出す交渉術がなければならない。
CMSを勉強するために上京したつもりが、プレゼンの勉強にもなってしまいました…東京オソロシス。

Jimdo

Jimdo（ジンドゥー）は、SOY CMSの少し前にブックマークサイト等で話題になったWEBサービスです。
コアはドイツ製なので「国産CMS」とは少し違いますが、KDDIが提供しているのでシステムは完全に日本語化されています。

最新技術のCMSを無料サービスとして利用できるので、私もアカウントを取っています。
カスタマイズまではできてませんが、LP6に参加した他のCMSと同等の「公開画面と全く同じ管理画面」がWEBサービスとして利用できるのは注目です。
有料版の9割は、法人やWEB制作会社とのことですから、充分に業務利用も可能なようです。

現状では「仕事に利用したい」の割合は高くないのですが（前後のセッションと比べて割と控えめだったのもあるのかも）、今年の秋からテンプレートを一般ユーザーが公開・販売できる、「ストア機能」を実装予定だそうです。

FC2ブログの共有テンプレートを連想させる、ストア機能。
久しぶりに販売用テンプレート作りに挑戦してみましょうかね…

Power CMS for MT

「Power CMS for MT」は、MovableTypeにCMSとして不足している機能を追加するプラグインパックです。
他のCMSと比べると高価ですが、MTのノウハウの踏襲と、手厚いサポートを売りにしています。

プレゼンターの野田純生(junnama)さんといえば、MovableTypeのエヴァンジェリストの一人で、MovableType・CMSに関するたくさんのアウトプットをされている方です。

つまり、「MovableTypeから乗り換えられる国産CMSはどれだ？」というイベントに、何故かアウェー参加していたわけですw
シックスアパート社の人も実は見に来てるしwマテwww

このセッションで、junnamaさんは強烈な一言をぶつけてきました。

もう、MTでいいじゃん。

ぶっちゃけ。 何だかんだいっても 今までに身につけたスキルが 活かせた方が幸せじゃね?
(人間だもの)

junnamaさんによると、この発言はこれまでのセッションを見て追加したアドリブだったそうです。
以下の記事を併せてお読みください。

そろそろ「もう、MTでいいじゃん」についてひとこと。 (Junnama Online (Mirror))

MovableType5発表の件と併せて、この発言については、また別にグダグダ書こうと思います。

パネルディスカッション

「MTでいいじゃん発言」は、その後のパネルディスカッションに響いてくることになりました。

パネルディスカッションは、これまでのプレゼンター全員が出席して

1. MovableType・WordPressについてどう思うか
2. 他のCMSに負けないと思っていること
3. デザイナーに向けて考えている戦略
4. 全体構築・部分構築どちらに向いているか

に、順番に答えていくというものです。

ところが、そもそも国産CMSのほとんどがMovableType・WordPressを意識して作られたものだからなのか、自然と回答が全社似通ってしまうのです。
元々部分開発目的に開発されているCMS Designerは、はっきり発言が違っていましたが、流石に三番目の「デザイナーに向けて考えている戦略」は皆さん答えに困っていたようでした。

札幌に帰ってから他の参加者のブログを見てみても、「MTでいいじゃん発言」とこのパネルディスカッションに関して
「MovableTypeから乗り換えるほどの差別化は感じられなかった」
と感想を述べている人も多く見られました。

ともあれ、CSS Nite LP6はこうして閉会となったのでした。

これで終わりじゃないぞい。あとちょっとだけ続くんじゃ。

Twitterで記事を紹介して下さい（-人-）

2009年6月27日に開催された、CSS Nite LP, Disk 6 「CMSリベンジ編」の参加レポートです。

17:45～

「a-blog cms」
ベンダー：
アップルップル

【使用経験なし】

正式公開になりました

a-blog 2004年～　有料ライセンス契約2000件以上

→CMSへのニーズの変化に対応するためパワーアップ

本当は「a-blog」自体が「CMS」を名乗るはずだったが諸々の事情で「ブログ」となった経緯がある
（つまりはじめからCMSとして開発されたもの）

WEB制作会社が作るCMS

いつも制作をしているから「欲しい機能」をすぐ反映できる

使う機能ははじめから！

• フォーム機能
• ユーザー権限別の管理
• カスタムフィールド
• SEOとLPO
• キャッシュ機能
• モバイル対応

＋オプション

公式オプション機能の充実：開発情報を公開し自主制作が可能

テンプレートのしくみ

システム内の「themes」フォルダに静的サイトをそのまま投げ込む

テンプレートの設定画面で

1. 「使用するテーマ名」を投げ込んだフォルダの名前にする
2. 「トップページにするHTMLファイル名」を指定する（任意）
3. 「アーカイブとして扱うHTMLファイル名」を指定する（任意）

…といきなり静的サイトが反映される（らしい）

サイトに含まれている画像ファイルの相対パスも自動で補正されるため、事前の修正作業がいらない

独自タグはSSIを使用

例）サイト内にログインフォームを作りたい場合は表示したい箇所にSSIのincludeを記述

DreamweaverはSSIに対応しているためローカルで構築作業が可能

管理画面もDreamweaverでデザインできる

入力項目＋hidden要素で必須項目等の設定をする
（WebbingStudio追記：CGIのメールフォーム等と同じ形式？）

例）ジェイプロジェクト硬式野球部の試合結果：スコアボード部分は実際の表示画面に限りなく近くなっている

記事表示フォーマットはいろいろモジュール化されているのでHTMLには開始/終了タグを書けば出力される

カスタムフィールドの内容はメタデータで登録されているので、簡単な絞り込み検索等はすぐ作れる

a-blogから進化した更新画面

WYSIWYGではなく、カスタムフィールドのオプション項目でレイアウトなどを指示する

フォームオプション

文字種・文字数制限だけではなく自動修正も行う（全角数字を半角数字に変換など）
メール取得のほか、CSVによるログ取得
入力ステップの分割→モバイル用に複数ページの管理画面も作れる

ルール機能

条件分岐トリガーも色々あります

ユーザーID / カテゴリーID / エントリーID / ユーザーコード
カテゴリーコード / エントリーコード
ユーザーエージェント（PC・モバイル等）

まとめ

• がんばるWEB制作者のためのCMS
  クライアントのために使いやすい管理画面を作れる
• a-blog cmsひとつでシステム構築いろんなモジュールが付いている
• HTML/CSSという現在の知識で使える
  Dreamweaver等のツールでそのまま作成

リリース記念パック（8月末まで）
基本ライセンスパック　52500円　→オプションパックも付いてくる！

感想

今回のLP6で、いちばん（いい意味で）予想を裏切られたのがこの「a-blog cms」でした。ブログシステムとしての実績もあり、デモサイトを見た感じでは管理画面のUI・構築システムもかなりわかりやすいです。
参加前にざっと各CMSの公式サイトを見てはいたのですが、やはり細かい機能はきちんと話を聞かないとわからないものですね。

デザイナーの視点として注目したのが

1. 管理画面フォームもデザインできる
   （他のCMSもできますが、プレゼンテクでしょうか）
2. Dreamweaverとの連携
3. 文字種・文字数制限だけではなく自動修正も行う
4. テンプレート側でエントリー内の画像サイズを制御できる
   （MTも難しいですができます）
5. 安価なサーバーでもほとんど設置できる

という点で、特に三つ目の「表記ゆれ」への対応は、CMS構築後にデザイナーが頭を悩ませる問題のひとつなのでかなり興味を持ちました。

Dreamweaverでのデモンストレーション画面で、独自タグを「スニペット」として登録しているのが気になったので、懇親会で代表のやまもとさんに聞いてみたところ
「モジュールのスニペットを公開しているので使ってください＾＾」
とのことです。

むー、WEBデザイナー・コーダーのかゆいところに手が届いてます。

結果として「乗り換えたいCMS」のアンケートでは一位に選ばれました。私も同感です。
（ちなみに、仕事で使えそう！はSOY CMSが一位だそうです）

というわけで、SOY CMSと並んで、今後の対応を予定しているのです。
うわーまずは設置しなくちゃ…

欠点をあげるとすれば、毎度細かいですが

<meta name="generator" content="a-blog cms v1.0.1" />

がヘッダに著作権表記として入るところです。
外せるかどうかは今の時点ではわかりませんが、ダウンロードページで警告しているところを見ると強制ぽいです。
何のツールを使っているか徹底的に隠したい方はご注意ください。

Twitterで記事を紹介して下さい（-人-）

2009年6月27日に開催された、CSS Nite LP, Disk 6 「CMSリベンジ編」の参加レポートです。

16:50～

「RCMS」
ベンダー：
株式会社ディバータ
【使用経験なし】

RCMSは設計思想が独自

Relational Contents Management System
＝「関連性を使ってコンテンツを管理するしくみ」
コンテンツをフォルダ単位ではなく「メタデータ」として扱う

長所：

情報設計がされたサイトを構築しやすい
サイトの成長に対応できる

短所：

デザイナーにはややハードルが高い

リリースの経緯

在籍していた早稲田大学ラグビー部のために2000年頃開発
今ではサイトは月間300万PV
Youtube公式チャンネルとも連動予定

※WebbingStudio注：サービス開始したようです。各試合に沿った動画が案内されてますね＾＾

CMSを入れたことで…
「スポーツマンが広報なんかするもんじゃねえ」
→「ファンや身近な人の評価を聞けて楽しい！」
→学校も活動をよく知ることができて予算出してくれたり…
→いい循環

CMSの利点がよくわかってRCMSをシステム化→2009年3月に正式版をリリース
「だれでも」「どんなウェブサイトでも」作れるCMSへ

設計思想に関して

会社概要など、項目が決まっているものはシステム側で入力フォーマットを用意している
各種スポーツの試合情報 / ブログ / カタログ / 画像 / 動画 / 物件管理 / 用語辞典 etc…

ページ内のコンテンツは細分化できる
画像 / 人 / 文章 / 日時 / 場所 etc… 200個くらい

コンテンツをひも付けできるようにすれば無限のサイトが作れる

コンテンツをどう配置するか＋コンテンツをどう表示するか
＝Information Architecture

SaaS版について

• サーバーもセットになっているのでインストール不要（ディバータがシステムを保守してくれる）
• モジュールがたくさんあるのでプログラミング不要
• 要望が多ければすぐ対応

更新の負担を軽減

ログインすると実際のページに小さなツールバーが表示され、更新したいところをその場で編集
記事を書くときに「関連のある情報」を管理画面で指定→横リンクが生成される
写真の一括アップロード機能も有

100種類以上の機能

全て自社開発
機能ごとの連携なども充実

安定性

「バージョンアップしたら動かなくなった」というようなことはSaaS版での経験が長いので少ない

Googleの各種サイトマップ規格に全て対応

動画サイトマップ
記事サイトマップ
ニュースサイトマップ
地図サイトマップ　…etc

モバイル対応

マルチデバイス対応といった方がいい
「コンテンツは蓄積し、WEBサイトは進化させる」思想なので配信媒体の融通がきく

SEOに強い横リンク

関連付けによる横リンクの充実→ページ数の増加

多段式承認ワークフロー

執筆した記事が現在どこまでOKをもらっているかがわかる

SaaS版の性能

500万PV / 月以上の処理実績

独自の開発モデル

β版を無償リリース←→フィードバック
ライセンスコストを軽減

実演デモ

感想

RCMSは、「情報の関連付け」に重点を置いたCMSです。

ブログの記事を見ると、「カテゴリー」「タグ」がブログの記事同士を時系列とは別の方向につないでいるのが分かります。この記事でいえば「CMS」「CSSNite」がそうです。

ディバータさんの説明によると、RCMSはコンテンツ内の一要素だけではなく、全ての要素に対して共通項を探したり、絞ってのリストアップが簡単にできるというシステムのようです。

例えば早大ラグビー部の6月28日の招待試合のページを見てみると、関連する試合・試合の動画・出場した選手・試合を行った場所の地図が一連表示されています。
さらに出場した選手のページへ行くと、各選手が何年生で、どんな性格で、過去にどんな試合に参加したのかまでワンクリックで知ることができます。
これはMovableTypeでもやろうと思えばできるんですが、構築にとんでもない手間がかかります。ここまで細かいことを想定したCMSは少ないと思います。

また、ソフトウェアを配ってインストールしてもらうよりは、SaaSでの提供をメインとしているようです。

SaaSとは、ソフトウェアを開発元のサーバーからブラウザ等のネットワークを通して提供するシステムのことです。
ディバータさんが最も適していると考えるサーバー環境から、常にメンテナンスした状態で提供しているのと、買い取ると100万円を超えてしまうライセンス料を月額という形で抑えられるのがいいところです。

しかし、プレゼンが全体を通してわかりにくかったです。

話が前後していたり、デザイナーには概念がわかりにくい言葉（Relational / SaaS）の説明が少なかったり、いまいち口調に抑揚がなかったりで…
すみません、最後の実演デモのところで力尽きて寝てしまいました…
今後(6)でまた触れますが、プレゼンテーションというものが製品の売上げ、印象に直結する恐ろしいものだということを改めて実感することになりました。

Relationalに関してはわかったけど、SaaSがよくわからない。ASPとはどう違うのかとか、じゃあレンタルブログもSaaSの一種なのかとか。誰か説明キボン。

この記事の内容の大半は、帰りの飛行機でいただいた小冊子を読んでおさらいしています。
RCMSの小冊子は、機能面の説明などすごく充実してて良いです。興味があるけどこの記事ではよくわからないという人は、ディバータさんに請求してみるのがいいかと思います。

私の現時点の印象としては、

1. 人物・店舗などの多くの属性を扱うサイトにはかなり有用ではないか
2. SaaS版メインなので新規サイト構築には有利
3. だけど既存サーバーがある場合には移転を即さなければいけないので、サーバー知識が深い人がチームにいなければクライアントへの説得が難しいのでは
4. モジュールをほとんどディバータさんが提供しているので、コアの詳細なカスタマイズはできるのかが気になる

というところです。

Twitterで記事を紹介して下さい（-人-）

2009年6月27日に開催された、CSS Nite LP, Disk 6 「CMSリベンジ編」の参加レポートです。

15:50～

「CMS Designer」
ベンダー：
アル・デザインワークス

【使用経験あり】

レポートを書き始める前に、一点フォローがあります。

セッション後の質問コーナーで、
「CMSDは文書宣言より前にPHPスクリプトを書き込む仕様になっているので、テンプレートをローカルで見たときにIE6で互換モードになってしまうのですが、なんとかなりませんか」
という質問をしたのは私です。

この質問を聞いて
「サーバーにアップしたあとも互換モードになってしまうのか！」
と誤解した人がいるらしく、アル・デザインワークスさんにご迷惑をかける事態になってしまいました。

私はCMSDの使用経験がありますが、後方互換モードになるのはローカルで見たときだけです（当然ですがこんなふざけたバグがあるIE6だけです）。
PHPのコードおよび各種CMSの独自タグは、実行時は出力されることはありません。

なんかすみませんでした　o…rz

この質問をした細かい理由については最後の感想で書きます。

アル・デザインワークスについて

福井県の制作会社
東京から3時間 / 越前カニ美味しい / オバマ大統領を勝手に応援する会…申し訳ございません

これからのWEBはどうなっていくのか？

それぞれが独り勝ちを狙っている→もちろんCMSも…
ひとつのプラットフォームに依存しすぎないことが大事

• バージョンアップでプラグインが使えなくなる
• 構築の仕事が「CMSの部品を作るだけの簡単なお仕事」になりかねない

MovableTypeの問題点

1. 一か所の修正がサイト全体に影響する
2. MovableType以外のブログ・CMSへのデザイン移行が面倒
3. プラグインの保証がない

（もう一点あったのですが失念してしまいました）

CMS Designerは…

ページ単位でCMSを作れる
既存のHTMLの中にCMSを「埋め込む」発想

実績

下村楽器店
武生刃物卸 など

構築をした株式会社アーキテクチャウェブシステム様の声
「お客様へのレクチャーが短かった」
「制作の費用を抑えられた」

CMSDは管理画面の入力項目を自由に構成できる
余分な説明・よくわからない専門用語がない

ここでプレゼンター新出さんの主張：
FCK Editerにも対応しているけれど、こんな入力支援を使わなくてもきれいなサイトを構築できるのがCMSDの理想です。

構築の流れ

テンプレートはXML＋XSL

1. フィールドの定義（スキーマ）
   →XMLファイルでテキスト、ファイルアップロード等の入力仕様や順序、ラベルを既定
   →XSLファイルで動的部分の出力HTML、細かい条件分岐などを既定
2. コンテンツを保存する場所としてコンテンツ毎に格納フォルダを用意する
3. 既存静的ページのHTMLの先頭・末尾におまじない（＝PHP構文）を入れる
4. 既存のHTMLコードを
   <cmsd:entrylist name=”hogehoge”><cmsd:design>
   ～
   </cmsd:design></cmsd:entrylist”>
   で囲み、XSLタグを書き込んでいく
5. ファイルの拡張子を「.php」にする（サーバーでmod:rewriteが使用可能であればHTMLでもできる）

URLによる動的ソート

URLに引数（?hoge=xxx&huga=yyy）を付けることで、記事の項目内容による絞り込みが簡単にできるようになっている
他のCMSの場合は各ページを書き出すことを想定しなければならないがCMSDは引数で条件に沿ったページを自動生成するので、複雑な条件分岐はあまり必要ない

その他

1. 日時指定（コンテンツごとに任意で要・不要を設定できる）
2. ユーザー権限
3. コマンド制限（記事の作成はできても削除ができないユーザーを作るなど）
4. 表示制限（管理画面で自分が書いた記事しか表示されないなど）
5. ページキャッシュ

感想

私がCMS Designerのことを知ったのは、制作会社で働いていた頃に社長から「これは使えるだろうか？」と聞かれたのがきっかけです。

当時はサーバー等の条件が合わず導入は見送りましたが、WEBの知識がない（しかもCMSには慎重だった）50代の社長が興味を持ったということは、それだけ簡潔なインターフェースだったということです。

「埋め込む」「データベースがいらない」「世界共通技術のXMLベース」という概念のため導入しやすく、マニュアル、サンプルデータもきちんと完備されています。今回のCSS Niteでも「プレゼンうまいなー」という印象を受けました。

CMSDの方が「救世主」には近い気ガス　´・ω・）

でも、進行役の鷹野さんが指摘している通り、カスタマイズの工数は規模の割に多いです。

また、テンプレートエディタはなく、「スキーマ」という概念が理解しにくいため、レンタルブログ等でのカスタマイズ経験がない人、XMLが分からない人にはややハードルが高いです。

ここで冒頭の質問の件になるのですが、
私が一人で構築をするのであれば、ローカルプレビューの件は全く気にならないのです。レンタルブログのカスタマイズのときは全てブラウザで作業しますし、そもそもIE6なんか、あと一年くらいでゴミ箱に放り込んでもいいブラウザです。

でも、自分以外の（CMSDのスキルがない/そもそもコーディングの技量も未熟な）同僚・後輩などとチーム制作をする場合、細かい説明をしなければならない点が多いと、じわじわと最終的な作業時間に関わってきます。

ぶっちゃけ、PHPとXMLをいろいろ書きこまなければならないのであれば

「MovableTypeかWordPressで記事リストだけ作って、includeでよくね？」

となってしまいます。

そのようなわけで、私の中では、導入したいけれど残念なCMSとして位置づけられてしまっているのです。
公開後に撤去できるようなテンプレートエディタができたり、PHP構文がいらなくなってほしいところです…

Twitterで記事を紹介して下さい（-人-）