s-style-arts blog

プログラムのコードを書かなくても（書けなくても）CMSの機能を使い込めるデザイナーに優しいa-blog cms。ページに必要な機能はモジュールという部品になっているので、必要な機能を必要な場所に配置する事で作り上げて行きます。そのモジュールをページに組み込む時もコーディングに悩む事無くDreamweaverのスニペットを選んで貼り付けるだけ。簡単です。
ですが、初めて使う人にとって「Entry_Headlineモジュール」「Entry_Summaryモジュール」「Category_EntryListモジュール」などいきなり言われてもなかなかイメージ出来ないんじゃないだろうか。と思い、それぞれのモジュールを図形化してFireworksの共有ライブラリにしてみました。

• エントリー本文（Entry_Body）
• エントリーリスト（Entry_List）
• フォト（Entry_Photo）
• ヘッドライン（Entry_Headline）
• サマリー（Entry_Summary）
• アーカイブ（Entry_ArchiveList）
• カテゴリーリスト（Category_List）
• カテゴリーエントリーリスト（Category_EntryList）
• リンク集（Links）
• バナー（Banner）
• ナビゲーション（Navigation）
• トピックパス（Topicpath）
• コメントリスト（Comment_List）
• タグクラウド（Tag_Cloud）
• カレンダー（Calendar_Month）
• フラッシュトップイメージ（Plugin_FlTopImage）
• ユーザープロフィール（User_Profile）

今のところ全てのモジュールではありませんが、ページを作るのにだいたい必要なモジュールはあると思います。zipファイルをダウンロードして解凍したら「a-blog cms wireframes」フォルダをまるごと「Users/<ユーザ名>/Library/Application Support/Adobe/Fireworks CS4/Common Library/」
の中へ入れてください。
Fireworks を起動すると共有ライブラリパネルに a-blog cms wireframes のフォルダが表示されその中に各モジュールのパーツが表示されます。

Macのみ検証しています。WindowsのCS4は持っていないので検証していません。同様のパスに置けば動くかもしれませんがよくわかりません。
一通り画面設計でパーツを配置したら、ファイル→ブラウザでプレビューでプレビューします。アイコンにマウスをホバーさせると何をするモジュールかツールチップで出ますしクリックするとa-blog cmsのリファレンスにある各モジュールのスニペットのページが開きます。説明用の動画を作りましたので、そちらも参考にして頂ければ。

YouTubeでは大きくみやすくご覧いただけると思います。

ま、慣れてしまえば、モジュール名だけで普通に作れるはずなので必要無くなると思いますが、何かのヒントになれば幸いです。
実際の制作ではワイヤーを元にここからデザインを作りこんでいって、最終的にコーディングになるのでそのフェーズまではコードスニペットは必要ありませんが...。

• ダウンロードはこちら。（a-blog cms wireframes.zip）←DropboxのPublicフォルダの中にリンクしています。

共有パーツに関してはFireworksで何か描いた物を選択して、シンボルに変換→共有ライブラリとするだけで簡単に作成可能なので、各自、自分で使い易いものを作ってストックしておくと独自のライブラリが育ってくると思います。
今後、Omni Graffle用のステンシルも作ってみようかなとも思っています。