新しい本

11月下旬発売

CSSを習得するための本ではなく、CSSの解説書でもなく、Web標準の啓蒙書でもない‥実験的なデザイン本です。長〜いPodcast（60分）を発売日に配信します。CSSルール・サンプルのサイトも同日に公開されます。

その他、最後のわがまま‥ワークフロー本は年内発売予定。

plan book［メモ］No.2

7 rule x 7layer ［ plan 49 ］
Webデザイン（プロトタイピング・モデル）49個の部品
LEGOとPost-itで構築する積み上げ型プロトタイプ（教育デザイナー向けカリキュラム／※パソコンは使用しません／2007年受講者募集）

plan book［メモ］

Web本の執筆メモ［EX-001］

web design magazine RWaCe

Web本の執筆メモ［R-017］

Webデザイン
レイアウト・ビルダー（コンストラクションキット）

●過去の執筆メモ：
［制作日記（不定期更新中）］
BOOK-V ［V-001, V-002, V-003, V-004, V-005, V-006, V-007, V-008, V-009, V-010, V-011, V-012］
BOOK-R ［R-001, R-002, R-003, R-004, R-005, R-006, R-007, R-008, R-009, R-010, R-011, R-012, R-013, R-014, R-015, R-016］

Web本の執筆メモ［R-016］

CSS Nite LP, Disk 1のお知らせ［3］は、後ほど投稿

Web本の執筆メモ［R-015］

・IE 7 [ page zoom ]
・body background-image

Web本の執筆メモ［R-014］

・１／２広告（ディスカウント）フォーマット
・2x2-Tgifバックグラウンド技法

Web本の執筆メモ［R-013］

・１／２広告（ディスカウント）フォーマット
・ノンSEO割引
・2x2-Tgifバックグラウンド技法

行方不明ではありません‥

Web本の執筆メモ［R-012］

CSSプランブック［色彩計画モデル／意見交換用のプランニング・ツールとして活用］

Web本の執筆メモ［R-011］

CSSプランブック［55p part - color］

Web本の執筆メモ［R-010］

CSSプランブック［感性訴求編］

Web本の執筆メモ［R-009］

Adobe Photoshop CS2［Action］
Dreamweaver 8 & CSSEdit
Photo：素材辞典（DATACRAFT）

※レタッチなし、レイヤー合成のみでメイクアップ（化粧）／アクション（自動処理）を活用

Web本の執筆メモ［R-008］

劇場版「Serendipiter」プロダクションノート

Web本の執筆メモ［R-007］

msm magazine - web 7 -
構造化とターゲットマニピュレーション
［ポストカードを衝動買いする心理とGenerally］
［魅力と訴求力］
［ノンブランド商品のブランド化］

Web本の執筆メモ［R-006］

■ヒアリング：
インターネットを利用するためにパソコンを購入した初心者を対象とした教室（高齢者が多い）

１）ヒアリング１：文字の拡大とページの拡大

文字の拡大（テキストズーム）機能

［便利］なし
［不便］拡大されない文字がある（※グラフィック文字を意味する）

ページの拡大（ページズーム）機能

［便利］クリックするだけで拡大できること
［不便］水平スクロールの操作

まとめ：

なぜ、テキストズーム（文字だけ大きくする）という機能があるのか理解できないようだ。そもそも「今までページズームがなかったことがおかしい」という感想だった。IE 6を知らないユーザーなのでしかたない。
ページズームの場合はステータスバーのアイコンをクリックするだけで拡大できるため、利用者に対しての強制的選択が働く（テキストズームは完全に埋もれてしまった）。IE7が普及した場合、ページズームは利用頻度の高い機能として定着しそうだ。今回、対象とした人たちは「Webブラウザ = Internet Explorer」であり、他のブラウザは選択肢にはならない。
購入されたパソコンは安価なモデルでも高解像度ディスプレイが多く、高齢者の方々にとってページ全体が大きく表示される機能は有効であった。拡大表示された画像は劣化するが、思っていたより不満の声は少なかった。
（講習の後、IE 7からIE 6にもどすのだが不便を感じるのではないだろうか‥）

閲覧サイト：

自治体サイト、企業サイト、個人ブログなどから30ほど選択して閲覧してもらった。サイドバーが中央のコンテンツに重なってしまう致命的なトラブル、多々あり（CSSに影響されない機能だが、なぜかCSSハックが原因？のようだ）。フルFlashのサイトは位置が大きくズレてしまうものが多かった。ただ、閲覧した大半のサイトは問題なく表示されていた。
※IE 7 RC1では水平スクロールバー関連が修正されている

ページズームの操作：

ステータスバーのズームアイコンをクリックする度に125%、150%、そして100%に戻る。メニューからの選択もできる。また、拡大率を入力することも可能。

Web本の執筆メモ［R-005］

OmniGraffle Professional - Structure Design
OmniPlan - Project management

・デザインに使用した技法：42
・訴求案：10
・クライアント提出：6
・ブランドカラーのチェックおよび意見のまとめ
・修正デザインに使用した追加技法：4
・新たに作成した訴求案：4
・クライアント提出：3
・デザイン決定
・カバーバリエーションの作成開始

［拡大表示］

［拡大表示］

［拡大表示］

業務連絡：小説 Serendipiter

予定変更のご報告：
韓国取材、かなり先になりそう。また、インドの資料もまだ不完全。ノベルの執筆は、10月下旬もしくは11月より再開の予定。
尚、設定を2011年から2020年に変更、「ネオ・ニート」という呼称も週刊誌等で目にするようになってきたので変更。次世代無線技術、携帯アコーディオンスクリーン、ペットボトルなどに貼り付ける動画シール、その他、第二少子化問題なども絡めることに。

Serendipiter（←※効果音入り）旧設定：

日本は、ステイタスの格差をあまり感じることのない「中級社会」であった。ネットで巨大な匿名掲示板が維持できるほど、誰もが「中級」の意識を持っていたのだ。しかし、リスク社会が到来してから一変してしまった。二極化が拡大し、「希望」を描けない人たちがたくさん出てきた。そこそこ豊かな日常生活を送っているのに将来の見通しがたたないという状況が続く。いくら努力しても現状を打破できないことが分かった若者たちは、「現実逃避」にエネルギーを注ぐようになる。
2011年、世界中で共通の異変が起こる。
実社会には一切、姿を見せず、ネットで自我を確立しようとする「ネオ・ニート」が急増。どこで、どんな生活をしているか、まったく明かさず、実社会から逃避し続ける。
米magic社は、ネオ・ニートをターゲットにした実社会代行サービス「エージェント」を開始。半年で数千万のユーザーを獲得する。後に世界中の非難を浴び、同社はサービスを中止するが、エージェントを回収することはできなかった。現在、世界各国で起こっている「エージェント」事故は、ネオ・ニートたちの過激なメッセージである。

ノベルにはビデオバッジレーベル「frog motion」も登場。ビデオ再生できる缶バッジが流行っている設定で象徴的なアイテムとしてストーリーに組み込む。
（※FlashPlayer 必須）

Web本の執筆メモ［R-004］

WBS specification - process design

Web本の執筆メモ［V-012］

background designing（スケッチ）：

●過去の執筆メモ：
［制作日記（ほぼ毎日更新中）］
BOOK-V ［V-001, V-002, V-003, V-004, V-005, V-006, V-007, V-008, V-009, V-010, V-011］
BOOK-R ［R-001, R-002］

Web本の執筆メモ［V-011］

Advertisement（例：standardized size）：

color designing（スケッチ）：

●過去の執筆メモ：
［制作日記（ほぼ毎日更新中）］
BOOK-V ［V-001, V-002, V-003, V-004, V-005, V-006, V-007, V-008, V-009, V-010］
BOOK-R ［R-001, R-002］

Web本の執筆メモ［V-010］

CSSコンポジション・モジュール・サンプル

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］［V-006］［V-007］［V-008］［V-009］
［R-001］［R-002］
［制作日記（2006.8.21-start）］

Web本の執筆メモ［V-009］

CSSデザインのルール化：
64パターンでビジュアルデザインの自動化（エレメントの置換えでバリエーションをデータベース化）

人に訴えるビジュアルを分類してみる
・ポストカードの魅力
・CDジャケット、レコードジャケットの魅力
・ファッションマガジンの魅力
・グッズの魅力

「理由はわからないが、なんとなく欲しくなるデザイン」を考察、自然の中にある形、色、配置についてまとめる

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］［V-006］［V-007］［V-008］
［R-001］［R-002］
［制作日記（2006.8.21-start）］

Web本の執筆メモ［V-008］

ウェブデザイン・オーサリングツールの開発仕様書カバーとPART扉のビジュアルサンプル

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］［V-006］［V-007］
［R-001］［R-002］
［制作日記（2006.8.21-start）］

Web本の執筆メモ［V-007］

「トップページを起点とした階層構造」が前提の旧ページデザインから、SFO（Search, Find & Obtain）およびRSS対応の「ページ単位」ユーザビリティへ。米国のNew York Timesを事例として検証する。
モダンパブリッシャーLPOプラグインに反映できるか模索してみる。

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］［V-006］
［R-001］［R-002］
［制作日記（2006.8.21-start）］

Web本の制作日記について

現在、VOXにて更新中

サービスのフィードバックを兼ねて、試用している。ミクシィとブログをつなぐミディアムサービスを探していたので、利用してみようという動機になった。［mixi　←→　vox　←→　blog］という構造になるので（あくまで私の場合は‥）ブログと同時に活用することで利便性が高まる。特に注目したのは公開レベルの機能である。

●記事ごとに公開のレベルを設定できる

レベル1
［myself］自分だけ
レベル2
［Family］家族のみ
レベル3
［Friends］友人のみ
レベル4
［Friends & Family］家族と友人
レベル5
［Friends,Family,Friends & Family,Neighborhood］パブリック

学校全体がコミュニティとして、ある先生のブログで例えるなら‥

・記事Aを閲覧できるのは「学校全体」、コメントできるのは「全生徒と先生」
・記事Bを閲覧できるのは「学校全体」、コメントできるのは「Aクラスの生徒」のみ
・記事Cを閲覧できるのは「Aクラスの生徒」、コメントは誰からも受け付けない
・記事Dを閲覧できるのは「本人だけ」

等々、記事の公開とコメント許可を複数のプライオリティで自由に組める。
‥という例でいいのかな？
（3日前から利用し始めた初心者なので‥

一般のブログサービスと比較した場合、とてもシンプルに感じてしまうが、用途がSNS寄りなので‥意外と洗練されているのかもしれない。

Web本の執筆メモ［V-006］

CSSデザインの上流工程となるページビルディング・プロセスの自動化を試す。
昨年MdNさんのweb creatorsで紹介したネタを素材として使用してみる。手作業を分解して、12のパターンでオートメーション化。商店街の総合サイトとして売り込むパッケージを想定、可能性を探ってみる。可能なら事例としてまとめる。

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］
［R-001］［R-002］

Web本の執筆メモ［diary-002］

Web本の制作日記は、Six ApartのVOXを使うことに（mixiお知り合いの皆さんが早速Neighborsに追加してくれる）。しばらく試用してみよう。
このブログでは、引き続き執筆メモのアップをしていきたい。

Web本の執筆メモ［diary-001］

1週間ほど、Web本の制作日記‥始めてみよう

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］
［R-001］［R-002］

Web本の執筆メモ［R-003］

ピクトグラムでプロジェクトワークフローを視覚化

・閲覧保証するブラウザ・アイコンをドラッグして集めると、ドキュメント（HTMLもしくはXML）の仕様候補、移行プランが表示される

・ブラウザ閲覧保証プログラムのバージョンを採用時に確認できる

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］
［R-001］［R-002］

Web本の執筆メモ［V-005］

構造化ドキュメント（XHTML等）を視覚的に作成するためのツールを選出、検証する。優れたツールの機能をまとめ、他と比較してみる。

Aptana (beta)：
ココログのテンプレートを読み込んでみる

RapidWeaver 3.5 Public Beta 3：
ブログを作成してみる

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］
［R-001］［R-002］

Web本の執筆メモ［R-002］

ピクトグラムでプロジェクトワークフローを視覚化
・ズームアップすると詳細な作業が表示される
・アイコンをクリックすると関連する「上流工程の作業」とラインが結ばれる

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］
［R-001］

※このエントリーは秋に出版される予定の書籍-執筆メモ（およびスケッチ）です

Web本の執筆メモ［V-004］

業務用CMSのデザイン・ルールブックを解析、ページビルディングの自動化によってデザイナーは「不自由さ」を感じるか？
ディスプレイ・プレゼンテーション（キオスク、DVD、TV、PC、携帯電話等）におけるビジュアル言語および設計思想についてまとめる

CSS 6ルール・コンビネーション：

●過去の執筆メモ：
［V-001］［V-002］［V-003］
［R-001］

※このエントリーは秋に出版される予定の書籍-執筆メモ（およびスケッチ）です

Web本の執筆メモ［R-001］

オーサリングエンジンを活用して独自のデザイン・ワークフローを開発する試み
CMS（もしくはブログでもよい）との連動で個人のページビルディングツールとしても威力を発揮する可能性がある

※このエントリーは秋に出版される予定の書籍-執筆メモ（およびスケッチ）です

Web本の執筆メモ［V-003］

構造化ドキュメント（XHTML等）を視覚的に作成するためのツールを選出、検証する。

複数のツールを組み合わせて、ワークフローに沿った「新しい使い方」を考える。
いずれ強力なツールがリリースされ、ページビルディングのプロセスも自動化されるはずだ（DreamweaverやGoliveの進化の過程を振り返れば、次の展開が想像できる）。そのイメージを現在使用可能なツールで膨らませてみる。

CSSEditからスタイルガイドに変換する試み：

●過去の執筆メモ：
［V-001］［V-002］

※このエントリーは秋に出版される予定の書籍-執筆メモ（およびスケッチ）です

Web本の執筆メモ［V-002］

構造化ドキュメント（XHTML等）を視覚的に作成するためのツールを選出、検証する。

CSSEditは、ページの骨格作りをマウスドラッグしながら試行錯誤できる。「ページビルディングのためのスケッチ」が可能となる。教育目的でも使用できる可能性あり。

［構造をデザインする］QuickTimeムービー（音声なし）

●過去の執筆メモ：
［V-001］

※このエントリーは秋に出版される予定の書籍-執筆メモ（およびスケッチ）です

Web本の執筆メモ［V-001］

構造化ドキュメント（XHTML等）を視覚的に作成するためのツールを選出、検証する。優れたツールの機能をまとめ、他と比較してみる。