忙しい人のための楽習塾　利益を上げる読書術とは？

UI新時代

特集1は、ユーザーインターフェース。

ついつい、使い慣れた型を使いがちだけれど、
ユーザビリティも考慮しつつ、ユーザーに新たな体感を与えたい。

特集2は、Webを絡めたアートの話、この分野に興味があれば･･･

連載の読みモノの中に、結論が出ず、言いたいことがウヤムヤに
なっている文章が多くなってきたのが残念。

されど1ピクセル

神は細部に宿ると言いますが、
さらなる作り込み、1ピクセルのうっかりボケ対策から、
ピクセルにかける情熱的な特集。

アクセス解析&SEO特集では、Google Analyticsの基本をメインに取り上げつつ、
宣伝も込みでか、他の有料アクセス解析サービスも紹介している。

アクセス解析やサイト改善点のうわべ的なコトしか
掲載されていないので、今号を入り口にしつつ、専門書を買った方がイイ。

中村勇吾さんの雑談は、『現場のプロから学ぶWeb制作ワークフロー』と
同じような内容なので、ホントにホントにおまけな読み物として。

自社の宣伝本

ベースメントファクトリープロダクションの仕事術

著者 ベースメントファクトリープロダクション 北村健

代理店や中抜きをスッ飛ばすための、自社宣伝本。

普段から真面目に取り組んでいる人は、読む必要が無いし、
不真面目な人が読んでも、心を入れ替えるコトは無いだろう。

対象読者としては、ウェブやクリエイターの世界に、変な憧れを持っている人。
本書を読むと、いかに地味でベタな仕事かが理解できる。

中村勇吾さんとの雑談 （インタビューではない）では、
狩人と、罠を仕掛ける人の違い、SとMの属性が語られているので、
オマケの読み物として楽しみたい。

jQueryがイッパイ

Ajax、jQuery （JavaScriptのライブラリ）を特集。

今月号は、ほとんどが広告的内容なので、見送りも可。

• アコーディオン
• タブ
• ツールチップ
• 角丸表現

• ドロップダウンメニュー
• スライドナビゲーション
• 右クリックでのアイコン付きメニュー
• Mac OSX風 Dock

• Lightvbox風ギャラリー
• 画像のスライド （カルーセル）
• フルスクリーンの画像ギャラリー
• マウスオンで画像の一部を拡大表示

• カレンダー
• 行を並び替えるソート機能
• チェックボックス
• リンク先のスクリーンショットを表示

サイト制作時のスパイスとして活用したい。

制作会社の選び方
&愚痴

出版社は、MdN

作業の流れや、ウェブ制作会社の選び方と同時に、
制作会社の愚痴も掲載されいるので参考に。

「全国WEB制作会社リスト」という、テキストだけの画像が無いリストで、
ページ数を稼ぎ、カサ増ししているのは、いただけない。

新しい情報がお好みなら、同時期にマイコミから出た
『Web制作会社年鑑 2010』を選んでもイイ。

今号で廃刊

ウェブサイトでの連載に移るということで、
紙媒体では今号をもって休刊、というか･･･
事実上の廃刊。

悪い意味でMdNがヤバイ、という噂を聞いていたので、
驚きはしなかったが、長年、お世話になりました&お疲れ様でした。

最後の記念に買う、というには厳しい内容だが、
巻頭特集は、プロデューサー、プロマネ、ディレクターを未経験の人にとって、
少々の価値あり。

巻末特集は、ウェブ制作のための無料ツールを紹介。
毎日のようにネット技術系のブログ等を読んでいれば、不要だが
新しい情報と疎遠気味ならば、痒いトコロに手が届く道具に、
どんなものがあるのか、把握しておいて損はない。

キーワードの羅列

プランニングからデザイン、そしてシステム構築まで。
Webの「仕事」がトータルに理解できる
プロフェッショナル養成講座

• 著者／編集 MdN編集部
• 監修 松岡清一

知識の少ないプロデューサーや、ウェブ制作の入門者向け。

タイトルや表紙に、完全ガイド全網羅とあるが、
あくまで、入り口的な手引き書に過ぎない。

他書と比べて、視認性だけは高いが、
キーワードを羅列しているだけなので、当然、深いところまではわからない。

上っ面の言葉だけを懐に入れて、場シノギの
会議や打ち合わせでは、恥をかかないかもしれないが、
その先まで見越していないと、大変危険。

ホンノリ未来の
サイト構築

『Web Designing』は、半分に薄まってきている。

記事の密度が薄まっているのではなく、
方向性に迷いが生じているように感じられる。

未来のワクワク感と、旬の技術
このバランスが狂ってきているようだ。

良く言うと多様性を持たせていて、悪く言うと迷走している。
以前のように、一冊丸々の満足度は半減してしまった･･･

特集の取り上げ方は、丁寧で細かくて、優しくて好きなのだが、
何かが薄まっている。

（マイコミからのリンク切れが、多数発生していて
使い勝手が悪かったり、誤字脱字が目立つのも一因だ）

特集1　加速度的に新ブラウザや、様々なデバイスが登場する昨今、
下記を新たなワークフローとして取り入れたい。

• Fluid Grid （フルードグリッド）レイアウト／横幅と画像の同時可変
• 文字デザインからCSSを組み始める

詳細な手順が掲載されているので、参考になる。

高速化、CSS3、HTML5については、
最近の『Web Designing』と重複する内容もあるが、
補完されている部分もあるので、購入前には事前確認が不可欠だ。

特集2　一眼レフでの動画撮影。

特に求めていない人には、まったく必要無いが、
ハード面の特集も、たまには面白い。

見送りで

第1特集は、普段、ビジネス書籍を読んでいない人向け。

第2特集は、ネットの有名人やサイト、出来事を改めて振り返る。
正直どうでもいい･･･

飾りの小ネタ

特集1は、jQuery、CSS3などを用いた、
下記の部分での小ネタ特集。

1. メニュー&ナビゲーション
2. グラフィックの配置と制御
3. フォーム、グラフ

演出の幅が少しだけ広がりそうな、装飾テクニックだった。

特集2は、ヘッダやフッタ、ナビゲーションメニューから、
ちょっとしたボタンやアイコン類の参考ギャラリー集。

今号は、肝のような部分が見えず、全体を通して表層的な感じ、
自分にフィットする内容がなければ、見送りで。

細かいコトは
気にすんな！

中村勇吾さんへのインタビューが掲載されています。

人の生き死にが関わってるワケではないので、
細かいコトは気にすんな、っていう雰囲気で語られています。

とはいえ、中村勇吾さんの仕事は、適当ではない緻密さがあるので、
氏の振り幅が垣間見えるインタビューでした。

肩のチカラを抜いて、感じなさい、とも受け取れました。

CSS特集と、
効率アップテク

知っている人は、すでに知っている
CSSのテクニックをまとめた特集。

ルーティンワーク作業や運用の効率化を図る
操作テクニックでは、Dreamweaverをはじめ、Adobe系アプリの小技を紹介、
宣伝か知らんが、Expression Webのテクも掲載されているのは珍しい。

「ケータイWEBサイト制作事情」も、ほんの少しだけアリ。

Ajax vs
ユーザビリティ
& Flash高速化

「WEFAIL」 （イギリス人とアメリカ人のコンビ）へのインタビューは、
人を喰ったような応対。
制作者なら頷ける内容で、少し元気が出た。

今後のウェブ技術

サイト設計から、デザイン、制作の流れを解説。

HTML5や、CSS3の動向を知らないのなら、
目を通しておいてもイイかもしれない。

ハイパフォーマンス
ウェブサイト

表示が速いウェブサイトの作り方、即行テクニックを、
こもりまさあきさんと、浜俊太郎さんが解説。

Google、Yahoo!、Youtube等の大手サイトでも取り入れられている手法、
画像、CSS、XHTMLのソース、JavaScript、jQueryでの注意点。

チューニングを施したい理由は2つ。

1. 閲覧ユーザーにストレスを与えない
2. 検索エンジンからの評価基準
   （将来的に、ロード時間がアルゴリズムに組み込まれるとか！）

運用や更新頻度が低い （もしくは、まったく発生しない）サイトなら
よりいっそう効果的だ。

以下簡単にできる技。

1. 画像の最適化 （容量削減）
2. @importの使用を避ける
3. 複数のCSSファイルを結合
4. Minify化 （ソースの無駄な部分を削除）

以下は、少々手間がかかる。

1. gzip圧縮
2. CSS Spriteの活用 （画像の結合）
3. キャッシュの有効期限を延長

オマケ記事として嬉しかったのが、
WordPressやMovable Typeでのスピード改善術。

速さと、メンテナンス性はトレードオフ
なので、十分に考えてから実施したい。

役立つ付録

jQuery、HTML5を使用した、
メニューまわりのアニメーション効果や、
フォーム系を中心に解説。

過度な情報量や装飾に埋もれている
メタボリック・サイトのダイエットも行う。

付録の小冊子は、「CSSレイアウト 表現手帳」

基礎的なコトや注意点を復習しつつ、痒いところにも手が届く。

バナー
CMS
ケータイFlash

付録は、テーマ別に分けられたWebツールのガイド、便利っぽい。

特集では、実在のFlashバナーのActionScript、ブログパーツの肝を解説。

案件によって異なる、CMSのベストマッチを探す。

比較にWordPress （ワードプレス）と
Movable Type （ムーバブルタイプ）が入っていないのが残念なところだが、
導入時のチェックリストと、運用までを見越した項目は、策定の参考になる。　

対応サーバー、使用言語、対応データベースの仕様から、
導入事例が紹介されているのが嬉しい。

管理画面、モジュール管理画面のスクリーンショットを
掲載しているのは、細かい配慮だ。

（以下、掲載順）

オープンソース CMS

• Drupal （ドゥルーパル）
• Joomla! （ジュームラ）
• modx （モドエックス）

特化型 CMS

• EC-Cube （イーシーキューブ）　eコマースサイト用
• OpenPNE （オープンピーネ）　SNS構築ツール

有償 CMS

• WebRelease 2 （ウェブリリース 2）
• tsumiki 2.0 （ツミキ 2.0）
• vibit CMS （ヴィビット シーエムエス）
• Jimdo （ジンドゥー）

ただし、本誌スポンサーの広告も混入していて、
嘘臭い記事もあるので注意が必要だ。

各CMSの将来性に関するコメントにも目を通し、
流れの中で、メリット、デメリットを見極めたい。

「Web Designing Lab.」では下記を紹介。

• シンプルな検索フォーム、問い合わせフォーム
• 同一ページでリストを表示するAjax
• Webカメラを利用した連続写真ツール

「モバイルコンテンツ最前線」は、
処理の軽いFlashを作るためのアドバイス。

ケータイでは、グラデーションをかける方向も
考慮しておかないといけないようだ。

プラグイン無しの
Web 3D

誤字脱字が多過ぎ。

その他の記事はケータイ用のSEO、SEM、リスティング広告導入の基礎だったり。

Webタイポグラフィ、フォントのトレンドや、
和欧混植（異なるフォントの組み合わせ）の基礎とコツ、などなど。
タイポ慣れしてない人や、フォントが苦手な人にお薦め。

Web創りを
楽しむ！

保存版小冊子「WD one's view 100」が付いてくる。
集録内容は、2001年～2009年まで、100号分に掲載された
グッドサイト・コレクション

30人それぞれのWeb考察

100号記念の書き下ろしコラムとはいえ、散々な内容。
テーマが漠然とし過ぎで、もったいない。

30人もいるが大半は、難しいコトを難しく、浅いコトを浅く言ってるだけ。
（意味もわからず掲載してるのか？　単なる人数合わせなのか？）

ヒドイのになると、自身の経歴や宣伝、売り込みを述べてるだけ。
そんなモノはなぁ、糞の役にも立たねぇんだよ！

暇で暇で死にそうな人以外は、下記の方々の文章のみを読めば事足りる。

木谷友亮さんの物作りと、食い扶持に関する考えを読んで。

作り手が楽しんだかどうか、
ユーザーに見透かされてしまうのだろうか？

そして、それは熱意のこもったメッセージとして伝わるのだろうか？
そんなことを考えさせられた。

また下記のようにユーザーへの接点、その重要度やアプローチを
考察しているコラムもあった。

• 文字で （川上俊さん）
• 1つの視点で、強くハッキリ （稲本零さん）
• 顔写真、アイコンで （川島高さん）
• 消えたカルチャーと思想、通心とインタラクティブついて (高広伯彦さん）

変わり種として、箭内道彦さんは、「インターネット家族」というタイトルで、
J-POPの歌詞のように、インターネットの現状を表現。

嫌でもネット用の自分キャラに気付かされてしまう。

Webサイト
骨組み設計の本

Webサイトの設計で、普段、
何気なくおこなっているコトを、体系的に説き明かす。

情報が過多になり、余計混乱するかもしれないが、
情報アーキテクチャ（Information Architecture）を網羅し、特化しているという、
他には無い内容なので、プロは再確認のため、初心者は知識の土台作りに、
手元に置いておくのも良い。

全体を把握するための本書だが、サイトの初期の骨組み、
ストラクチャーの作成法、
解説本として使うことも可能だ。

基本ページ
構築解説

サイト構築の際に必要なページ、
新着情報や地図、会社概要、お問い合わせ、よくある質問等、
それらを基本ページとして、各々の機能や作り方を解説

巻末特集は、デザイナー自身のサイトや名刺、
自社グッズ（ノベルティ）を掲載

いざ作る時の参考に。

携帯ナウ！

ケータイサイトの特集、
下記、執筆者リスト （敬称略）

• 高橋剛 （Flash Liteの今後）
• 岡田昇三 （Flash Liteの飛躍）
• 中谷建一 （ケータイアプリの解説）
• 石野純也 （高校生のケータイ文化と、未来への考察）

以下のような企業やジャンルを取り上げている。

• クラスブック
• ピノ
• アディダス×サッカー日本代表
• AXE
• マクドナルド
• マピオン
• H&M

中でも気になったのは、
高校生に限定されたSNSの「クラスブック」

実際に使われているかどうかはさて置き、
運営側で、プロフィールや日記を掲載する場所を提供しているだけ
かと思ったら、手作業で利用者の顔認証をおこなって、
クラスメイトと実名でコミュニケーションできるそうだ（リアルモード）。

さらに、匿名で利用できる、オープンモードを
行き来できる設定になっているのも、
サイト内で貯めたポイントを、図書カードやQUOカード、
音楽ギフトカード等と交換できるのも凄い仕組み。

Flash Liteの動向をチェック

• ゲーム
• 位置情報
• 動的生成
• AR（Augmented Reality:拡張現実）
• CMS管理

NTTドコモ、au、ソフトバンクモバイルの
公式ページからユーザビリティや視認性を比較

iPhoneやAndroid等のスマートフォンの未来も探る。

他誌（web creators）でも年一回のペースでやっているけど、
「Web デザイナー白書」を読むと、世知辛さに落ち込む。

他の作り手の趣味や秘密兵器、コメントなどは
読み物として興味を惹くけれど、統計データを掘り下げ、
グラフを並べたりしてページ数を割くのは、
そろそろお腹イッパイになってきた･･･

P.98 「CSS Lab.」では、ライブドアの浜俊太郎さんが
様々なナビゲーション、そのレイアウトを解説。

自分が普段作り慣れていない形を作る時に参考になる。

SSLで
安心感を与える

約3ヶ月に1度のペースで出版される
レンタルサーバーのカタログがようやく発売されました。

下記のお題で、価格帯別に別れて記載。　芸が細かい。

• 「3年間の総費用ベスト20」
• 「ディスク容量（100MBあたり）の3年間のコスト」

巻末にある、サーバーリストが見やすい！
こちらも価格帯で分けられていて、さらに詳細項目が多く、
ABC順、あいうえお順に整理されているので、
現状契約しているサービスとの比較も素早く行える。

（でも、何故、3GBと3000MBの表記が別なんだろ？　ほぼ一緒でしょ？）

特集は、SSL解説やSSL申請時のトラブル把握なので、
関連するニュースや広告も豊富。

SSLは、ユーザーにクレジットカードや、個人情報の入力をさせるなら
あったほうが良いでしょう。

ついでに、コンバージョン率も上がるとか･･･
あえて、口車に乗ってみるのもイイかもしれない。

SSLもレベルによって段階分けされていて、
通信相手の信頼度まで確認したいのなら、当然、費用もハネあがる。

1. EV SSL証明書　年間予算 約7～23万円
2. OV SSL証明書 （組織認証）　年間予算 約3～8万円
3. DV SSL証明書 （ドメイン認証）　年間予算 約1～4万円

SSL以外にも、クラックされたDNSサーバーに騙されないように、
DNSウソ発見器の「DNSSEC」という形態もあるそうだ。

P.69 アメリカでのレンサバ話が怖い。

サーバー上のデータが消えたのではなく、サーバーの
契約記録が丸ごと消えていた･･･　という。

こちら側では対応できないだけに、バックアップの重要性を再確認。

無料ツール解説
だけでも買い！

ウェブサイトやモバイルサイトの企画、運用を
扱っていたMdNの専門誌も、今号で休刊 （事実上の廃刊･･･）

サイト制作や、運営に役立つ無料ツール×41の紹介が、
便利そうだったので購入。　下記は、興味を惹かれた項目

1. ログ解析（動画）
2. プロジェクト管理
3. フォーム機能の導入
4. パフォーマンス計測
5. SEO用キーワードツール
6. サイト監視

吉本興業のお笑い動画を、Yahoo!で配信する「Yahoo!バラエティ」

1分程度の動画を、次々と自動再生し、
動画の検索機能は、敢えて捨てている。

代わりに「関連オススメ動画」へとユーザーを脱線させ、
その中にいくつかのスポンサード動画（宣伝）が混じっているそうだ。

単なる広告動画ではなく、それ用のコントも作られているという。

ユーザーにダラダラ閲覧させつつも、しっかりと広告も視聴させる仕組みは、
TVとネット（インタラクティブ）の便利なトコロを融合
させている1つのスタイルとして類比したい。

ナムコのオフィシャルサイトでは、
個人情報を取得せずに、サイト訪問者の行動分析をしているようだ。

トップページから、
ユーザー層を振り分ける
施策は、他の業種でも参考になるハズだ。

ちなみに、CMSはDrupal （ドルーパル）を採用している模様。

後半は、ケータイサイト、ケータイ動画の今後について。

頻度の高い
CSS 抜粋

特集「CSSプロパティに強くなる」では、
頻度の高い5大プロパティについて解説されている。

1. float
2. position
3. font
4. background
5. border

問題が起こりそうなCSSに焦点を当てているので、
プロパティを全て覚えるという重圧から逃れられる。

基本的なことが簡潔に述べられており、
トラブル時のソースと、解決後のソースが解説されているのも嬉しい。

P.54 田中宣匡さんが紹介する
デヴィッド・リンチ監督の「INTERVIEW PROJECT」
http://interviewproject.davidlynch.com/

アメリカ全土を旅して、そこで出会った人々にインタビューを
していくという動画コンテンツ。
田中さんの視点が細かいのは、そのサイトのインターフェースについての考察。

地図上の顔サムネールにマウスオーバーすると、
3秒ほどの音声が流れる。
（音声のみ、というのがポイント）

複数の動画コンテンツがあると、
静止画のサムネール、説明文だけにしがちだが、
音声での先行アプローチによって、ユーザーの興味をそそる。

この考え方は、他にも代用が効きそう。
動画を多数プレビューさせたいなら、是非取り入れたい手法だ。

簡易
オンラインゲーム
開発環境

特集は、CSSまわりの実装方法

多人数参加型のネットゲームやコンテンツを
作る時に重宝しそうなのが、「nine for FLASH」

機会があったら、見返したい内容です。

見栄えや
仕事へのこだわり

特集、「カッコいいWEBをつくる30の条件」は、
見栄えを良くするテクニック

イメージにしっくりくるのがあるかも。

巻末特集は、クリエイターの仕事や発想のコツ
7名の方が、こだわりや仕事の姿勢を公開しています。

各々のバックグランドや、誌面では伝えきれない、
文字で表現するのは難しい、想いのようなモノを読み取れれば。

Flashで変わる
ゲーム業界

特集1 「Ajaxデザイン自由自在」
使ってみたい機能はこんな感じです。

• シールめくり
• 階層型ドロップダウンメニュー （半透明）
• スライドギャラリー各種
• グラフィカルな棒グラフ

特集2 「Progressionが変える」

プログレッションは、Flashの開発環境です。
下記に該当するなら、使用をお薦めします。

• 各ページにユニーク（個別の）URLを持たせたい
• 階層が深い、遷移が多い
• 外部も含めて、複数のスタッフで構築・更新する
• 画面遷移時に何か演出をしたい

以前、実験的に使用してみましたが、
画面遷移時（切り替わる時）にフェードイン、フェードアウトさせたり
ってのが簡単にできて感動しました。

慣れるまでに、少々時間がかかりますが、痒いところに
手が届くようなフレームワークです。
ただし、習得期間以外のデメリットも考慮しておきたいところです。

例えば、ユニークURLを持たせると、SEO的に有利になったり、
ユーザーの使い勝手が向上したり、宣伝的に便利だったりしますが、
Flashのメリットでもあり、デメリットでもある、サイト全体の流れを
制作側でコントロールして演出する、（ユーザーにどんな順番で閲覧してほしいか）
という部分が削がれてしまいます。

闇雲に導入すれば良い、というものでもないので、
構成と演出を合わせた結果、判断したいものです。

そして、ゲーム会社の人に朗報です！
（ゲームクリエイター vs Flashクリエイター　～UIデザイナー戦国時代～）

Flashで家庭用のゲームが作れる「Scaleform GFx」
ってのが存在したんですね･･･

swf形式→gfx形式に変換するみたいなんですが、利点が嬉し涙モノ。

• Flashライクな動きがデザイナー側で表現できる
  （もう、プログラマー陣から、なんやかんや言われないで済む！）
• テクスチャにベクターデータを使用できる
  （つまり、データ量が軽くなる！）
• 高速化した上に綺麗（特に文字まわり）

便利になって、精神的な負荷が減る分、
結局、UI周りのデザイナーのライバルが発生し、同時に仕事が増えるとゆー

撮影術基礎

プロマネやディレクターが必要とする
スケジュール管理のための、
ガントチャート作成ツールをチョットだけ紹介。

後半は、写真撮影とその後の補正テクニックなので、
カメラの専門誌や、撮影テクニックを扱った書籍を読んでいない人向け。

ActionScript 3の連載は、掴んで放すマウス操作系

Webばっか
創ってないで
外へ出ろ！

今月号は、ウェブに限定せず、もの創りをする人達にオススメです。

「中村勇吾さん×松本弦人さんの対談」は、
松本弦人さんのキャラが、
Web Designingとは違ったテイストなので、面白い。

対談の流れは、デザインやモノ創り、
新しいモノを投下することについてですが、
何かをクリエイトしている人にとって、励みにもなります。

松本弦人さんの本音に、中村勇吾さんが落ち込んだ？

P.84 松本弦人さん

新しいものを作ろうっていう時は、そういうもんだって。

最初からみんなに受け入れられるってことは
新しくないんだよね。

多くの人が共有してるんだけど、まだ気づいていない、
刺激されてないツボを誰かが刺激する。
最初は小さくて気づきにくい。

でも、嫁さんとか恋人とか、
まず身近な誰かが言うんだよね。
「なんか私、これ好きかも」って。

その「好きかも」が伝播すると、あるクリープ点を過ぎてから
「新しい」ってことになって今につながる。

グラフィックデザインは外と肉体で、
ウェブデザインは、内と精神？

P.85 中村勇吾さん

密室でしか作れないもの
があるんじゃないか、と思うんです。

絶対に人に読まれてはいけない日記があったら、
やっぱり読んでみたくなる。

そういう密室感が、Webにはあると思う。

ヒリヒリするような、
コイツおかしいんじゃないか、
みたいな感覚。

狂気ってのは、端から観てたら面白いし、
その人のコアになる、大切な部分ですよね。

「WordPressを選ぶ理由」

折角、MT（Movable Type）を覚えたのに･･･
ってのはあると思います。

そして、MT→WordPressに移行した他のブログのコトを聞く度に、
取り残されたようで、ソワソワします。

P.91 Matt Mullenwegさん

僕がWordPressを作りはじめた頃、
米国では9割のユーザーがMovable Typeを使っていました。

でも、どのユーザーもMovable Typeの
再構築の遅さにはイライラ
していましたし、遅々として進まない開発にも不満を持っていたようです。

だけど･･･　移行めんどくぇせ！
って感情も真実でしょう。

特集では、大藤幹さんが、MTとWordPressを比較、
そして、WordPressへの移行の手順まで･･･

さてあなたのブログはどーする？

デザインエンジニア、田川欣哉さんへのインタビュー

将来創りたいモノ、作るべきもの

P.141
この世界はテクノロジーの進歩のスピードが速い。

ですから、何をつくりたいか、つくるべきかは
時代によって変わるわけで、今決めても意味がないと思うんです。

それよりも、常に自分に幅を持たせておいて、
"その時"に、ものづくりの現場にいられるように
することが大事だと思います。

スペシャリストになるか、ゼネラリストでいくか、
自分としては、どうしたいの？　どっちが儲かるの？

など、正直な気持ちと、不純な動機が混沌するものです。

そんな悩みや、背中をポンと押してくれるような、アプローチ。
今月号では、そんな話が多かったな、と思います。

トラブル予測

「WEB制作 トラブル速戦即決術」
下記の技術で、頻発しそうな事柄と
解決策を掲載。

• Webデザイン
• CSS
• Flash
• ディレクション
• JavaScript
• PHP

各トラブルのタイトルだけを流し見するのではなく、
内容を読み進めておくと、どの技術を使うとどんなトラブルに
見舞われそうか、将来への予測になる。

本格的な携帯サイトを作る予定があるのなら、
今号の特集が役に立つだろう。

+100円増しになった今号の付録は
「CSSプロパティデザイン ミニ辞典」
内容は、2007年5月号のものを再編集した模様･･･

自分の体験を
増やして
感動をストック

福田敏也さん 777interactive （トリプルセブン・インタラクティブ）

子どもの頃のワクワクした体験や、
誰もが持っている記憶をどう呼び起こすか、
見る側のエモーションを考えるのがいかに大切かということです。

ビルのように巨大なものを自分の思い通りに動かしてみたい、
高価な宝石を合法的に盗み出すことができたら痛快だ、
ということは、子どもの頃に誰もが思い描いたことのある空想でしょう。

感動や楽しさを題材にしたサイト作りを解説、
具体的な事例も掲載されている。

感動の種類

佐藤可士和さん、中村勇吾さんがディレクションした
ユニクロのCM 「UT LOOP! TVCM」

普段映像を創る時は、最初か最後にロゴ、というのが
定番だが、最初から最後までUTロゴが出続けているのは、
まさにウェブ的。　今後、映像を創る時に、意識したい。

大失敗しない

2008年、ヨドバシカメラのリニューアルサイト
大ゴケで、さらに深手を負ったとの噂、
そんなキノトロープさんの書籍

あの事件と本書から学び取れるのは、
いくら綿密な実行計画があっても、現場では、
いつでも大失敗に捲き込まれる可能性がある、ということ。

受注側が身を守る術は、
「できないコトは、やらない」
挑戦するなら合意を得て、注意深く。

発注側が身を守る術は、「相手ができないコトを見抜く」

受注側には、誠意。　発注側には、学習が必要になる。
だが、目の前の利益に目が眩んだり、勉強するのが面倒だと感じた瞬間に
すでに問題は発生しているのだろう。

修正と変更、
言葉の違いによって、見積内容も変化する。

修正とは、間違い、不十分な点を正しく直す

変更とは、仕様や内容を変えること

混同して使っているかもしれないので、
言葉ひとつひとつの定義を、全員で明確にしておきたい。

特集の「Flash最新表現の設計図」、
「読ませるための技術」は、
それほど深く掘り下げていないので
取っ掛かりのひとつとして参考に。

下記3つは、個人的に役立っている記事です。

• Papervision3D 2.0 rev.883
• Flashで使うサーバー
• 校正補助ツール

Flash Media Serverや、ColdFusionと言われて、
何となくどんなコトをするのか、わかったフリはできても、
違いを説明するとなると、途端に困る。

普段活用している方から観れば、 違うよ。全然違うよ！
ってなるのでしょうけど、外側（まったく使っていない）にいると、
霧の中にいるみたい。

そのモヤモヤを解決してくれるのが、「新学期 Flashの学校」での相関図

チャットや、複数のユーザーが参加するゲームなど、
Flashとサーバー周辺に、どのようなツールが使われているのか、
概要が解説されています。

これで、ミーティング中に、ウロ覚えの単語が飛び出してきても
脂汗を発汗せずに済みますネ･･･

本書の対象者

• ひとつの方法しか知らないwebサイト制作者
• サイト制作を外注に出す、企業の担当者

ウェブ制作について、手取足取り教えてくれる優しい職場ならまだしも、
ある程度の基礎を独学で通してきた人も多いでしょう。

そんな方にとって、どうしても自前の情報に偏りがあったり、
抜けがあるもの。　できれば本書でその穴を埋めておきたいところです。

ひとつの表現方法に対して
何通りかのヤリ方があるのも、悩ましさを倍増させる原因

そんな中、本書で取り上げている記事の一部を紹介すると、
下記のように細かいところへの配慮がされています。

• サイトID（ロゴ）のマークアップ法
• ナビゲーションメニューの記述場所
• h1の数
• よく利用されているID名、クラス名の一覧

構造、レイアウト、デザイン、見積作成、その後の金銭的トラブルまで、
過不足なくまとめられていて、項目ごとに分けられているので、
無理なく読み進められます。

忙しい時に限って、トラブルは発生するものなので、
時間がある時にコツコツと読み溜めておくのが正解です。

英単語の区切り方で、区切った単語の頭文字を大文字にする
形式のコトを、キャメルケースっていうのか･･･

• 例 ActionScript　アッパー・キャメルケース
• 例 actionScript　ローワー・キャメルケース

各々このような呼称があったんですね。　知らずに使ってた･･･

ほらね、抜けがあったでしょう？
本書で出逢った新たな発見は、きっとアナタの脳ミソを喜ばせてくれる。

「卓越したWEBビジュアル表現のエッセンス」では
様々なレイアウトのセオリーを体系化
それと同時にデザインの傾向やメリットなども提示

下記、使い勝手が良さそうなものをまとめると

1. 白地　黒字
2. 横方向のスクロール
3. グリッドで整える
4. 清潔感
5. 大量の写真
6. インパクト
7. にぎやか
8. ゴージャス感
9. 余白を生かす

MT4.x（Movable Type）のデザイン・カスタマイズ（前半）は、
頻度の高そうなレイアウトに特化して解説されている。

特集「ひと目でわかるWebサイト」

視覚情報の整理に優れているサイトを例に、
文字で説明できる限界を解説。

『ブラックジャックによろしく』や、『海猿』の作者、佐藤秀峰さん。
自身のサイト内のプロフィールが凄い。
http://satoshuho.com

経歴から始まり、出版社や編集者、アシスタントとのゴタゴタが
漫画化されている。　それにしても、
黒塗りの部分が気になり過ぎる･･･

佐藤さんの一人称視点とはいえ、
漫画業界の一部ってかなりルーズなのかな、と。

特集は、
「WEBパーツ装飾デザイン辞典」

• XTHML
• CSS
• JavaScript
• Photoshop
• Illustrator
• Fireworks
• 透過PNG

「～したい」に対して、
上記の必要技術の項目が、表示されているので見やすい。

P.161のウェブ関連参考、情報源サイト一覧。
見逃しているサイトもあると思うので、チェックされたし。

Photoshopの基礎、使い倒し！
フォトショップを覚える前に、
まったく違う分野のツールから入った経緯を持つ人にお薦め

特集は、ブラジルのウェブデザイン。
カラフルな色遣いや、逸脱したレイアウトが、
日本とはまるっきり逆な感覚です。

一発当てて
継続させる

風変わりなウェブコンテンツを作っている
面白法人カヤックさんのアイデア本

十箇条の中で、シックリきたのは下記

1. つくりたいからつくる。　ただそれだけ。
2. まず、はじめに技術ありき。
3. 一言で伝わるか？　あるいはすぐに体験できるか？
4. 出したら終わりじゃないぞ。

MBAのスクールから追い出されそうな心構えは続く。

P.17
あえて失敗については検証しないのが
カヤックのやり方です。

失敗＝犯人捜し　晒しあげ　を行わない潔さがある。
　（今回は特別に、失敗の理由が検証されている）

アイデアの切っ掛けとなるツールや、
ブレストの流れと実況解説もアリ。

上手く一発、二発と当たったコンテンツの
気になる採算や儲けにまつわる数字まで、具体的に掲載されています。

光あるスマッシュヒット・コンテンツの影には、
ドロドロした人間の欲望も渦巻いている。

Director（オーサリングソフト名）黎明期から
ゲームコンテンツを制作している高木敏光さんの話は、
契約や口約束、著作権など、
ヒットの兆しが見えた時に注意する体験談が載っていて興味を惹かれる。

そこのページだけ雰囲気違います。

ウェブ業界の先輩方が何を考え、
どんな生活リズムで現在に至っているのか。
是非、知りたかったので手に取りました。

1度読んだ後、再度開くような書籍は少ないのですが、
珍しく、何度か読み返しました。

インタビュアー も作り手なので、深めの質問ができるのでしょう。
良質の答えが導き出されています。

自分で作業エリアの制限をしてみたり、
あえて壁や限界を作って、それを越えてみたり。

また、スタンスの取り方ではなく、視点の置き方などを、
本書に登場する様々な方から読み解けます。

各々が共通のアンケートに答えているのですが、
「集中できる　好きな時間帯」　という項目があるのも珍しい。

早朝が好きだったり、真夜中が気に入っていたり、
答えは千差万別ですが、きっと共感できるハズです。

自分では的確に言葉に出来なかった感情を、
裏表紙で如実に表現してくれていた･･･

作られては消え、消えてはまた作られるウェブサイト

その速い流れの中で、
人の記憶に残り続けるために必要なものとは何なのだろうか？

そのためのエキスを、本書から抽出すると。

• シンプル
• 素直
• 誰もやっていない
• 振り切る狂気

上記の3番目までは、意識するかもしれませんが、
意図的に振り切っちゃう。　ってのは、なかなかできないものです。

メーターを振り切った狂気、それらが生み出すものに、
みんな感動したり刺激されるのでしょう。

P.113
伊藤直樹：
途中のプロセスはどうでもよくて、
上のレイヤーと最後のレイヤー
を一番気にしているんですよ。

出口がもやもやしていたら、
そこが抜けるまでやめないですよ、僕はね。

後は、狂気が重要なんです。
密度とか強度とかいうものには、人間の狂気を感じるんです。
この狂気ということは絶対に重要なんですよね。
やっぱりいいデザインはどこかに必ず狂気がある。

川上俊：
狂気ですか。　つまり･･･　メーターを振り切っている感じ？

伊藤直樹：
そう、振り切っている感じは、絶対に重要なんですよ。
どんなものにしても、です。

平和だったら平和でもいいんだけれど、平和の中に狂気がある、
平和の狂気みたいなものがあるから、
その狂気の振り幅について、
ピーンと針が振れちゃっているかどうか、
そこが重要だというような気がするんですよね。

果てしない世界を表現する。理由とは？

P.140
西田幸司：
俺が作るサイトには目的があんまりなくて、
何か目的を持って訪れて、それが解決されて帰っていく･･･
みたいな、そういう行為はここでは絶対に発生しない。

要するに遊びに来るためのサイトなわけでしょう。
遊びに来たのに、いっぺん見ただけで
全体がパッと分かっちゃって、
それでパッと帰られたらもう二度とは来ないだろうから、
そういうサイトにはしたくないと思う。

ユーザビリティを保持したまま、
訪問者が持つ予定調和を裏切ったり、一筋縄じゃいかないサイト
という印象を与えて、ユーザーの感情を揺さ振るのも大切なことですね。

ウェブサイトに限らず、
何かを創り始めようとする直前に、読んでおきたい一冊。

WEBディレクター必見。
初回ブリーフィング時の、ヒアリング項目一覧。

その他、特集記事はこんな感じ。

• JavaScriptのライブラリ「jQuery」
• フリーランスの不安や疑問解決

急に仕様が変更になると、慌てたり、怒りが込み上げてきたり･･･
様々な感情に襲われますよね。

その時に、こんな初動を取れれば、少しは感情が抑制されるのかな、と。

P.47
表面的な要件変更に反応するのではなく、できる限り

「そのこころ」を聞くようにすべきだ。

Flashのモーション特集は
興味をそそられる動きばかり。

• イージング
• キラキラ
• "歩き"を感情で描き分ける
• 万華鏡
• ジワッと浮かび上がる
• sin関数モーション
• 落下する文字
• マイク入力のインタラクション
• 時間を三次元で表示

気持ち良いアニメーションを表現するのに、貪欲な方は是非。

サイト構築テクニック反映時の、
危険度が表示されていて、
CSS3も視野に入れられている。

特集は下記

1. CSS実戦アイデアファイル
2. Dreamweaver徹底活用法

IE8の対応も悩ましところですが、
解決の糸口が紹介されています。

ドリウィの使い勝手特集は、
痒いトコロに手が届きそうな設定テクがメイン。効率化の一助に。

紙媒体の経験を通過せず、
ウェブ業界に入った人にお薦めな
タイポグラフィ特集。

英語に負けてられるか！
ってことで、日本語見出しをCSSで制御する企画ページは、
ソースコードが掲載されているので便利。

散々AS3 （ActionScript 3）の話をしておいて、
制作サンプルにAS2入れちゃダメだろ　笑

サンプルデータのファイル名と紙面が一致してないし･･･

このあたりはMdNクオリティというか、
ウェブ・クリエイターズ品質というか･･･

最低限、どっちのバージョンに対応しているか
一行でイイから記載して欲しいところ。
各記事をまとめて特集ページにブッ込んだだけっぽく、
企画全体の統一感が取れていないのが残念。

サイトで使える小パーツ作りに悩んでいるなら、
下記のようなスパイスを効かせてみても良さそう。

• 立体感
• グラデーション
• 質感表現

ローディング中に飽きさせない工夫。
ローディング画面の演出方法や、
Ajaxを使用した最新ローディングも紹介。

もう、ユーザーの時間を奪う罪悪感に襲われない！

CSSを使用したデザインに、ちょとしたエッセンスを加える。
ついでに、ロゴデザインのトレンドも把握。
JavaScriptライブラリをダウンロードせずに使うテクなど。

河内康和さんの海外Web制作事情
アメリカ大統領選挙で共和党からマケイン、
民主党からはオバマが選出にいたったウェブ的な事情とは？

P.131
両Webサイトでは、ニュースレターのサインアップ、候補者のブログ、
動画、画像、グッズの販売やオンライン献金など、
コンテンツはかなり充実している。
特に、オンライン献金はこれからの選挙において
重要なコンテンツとなっていくだろう。

大統領選挙では莫大な選挙資金が必要となる。
この大統領選挙の選挙資金の調達において大きな成功を収めたのが、
マケイン、オバマ両氏である。

両氏の集めた選挙資金は総額2億ドル（約220億円）にも
上ることが明らかになった。

これらの資金の多くは、Webを通じて全米から献金されたものだ。
Webをうまく活用した両氏は莫大な資金の調達に成功したのだ。

「Facebook」「MySpace」「Flickr」「Twitter」にも精力的に
ページを公開し若者向けにアピールする両氏。
その姿勢は、日本の政治家にもマネして欲しいところ。

PNG（ピング）の圧縮専用ソフトで最適化、
レイヤー構造を利用した奥行き感の表現など。
普段PNGを使ってない人に朗報になるのか！？

スペインの4人組、「OnClick Studio」へのインタビュー

P.35
OnClickのような小さなスタジオは、センスだけでなく、
技術とトレンドを常に追い続けて、クライアントにとって
安心感のある制作者でなければなりません。

他のデザイン会社と競争する土俵に立つことがまず大切ですから。
例えば自社プロジェクトによる技術的・サービス的な
アピールも大切なことです。

クライアントから見れば、デザインの嗜好が近いだけではなく、
制作料、納期、アフターケア等、どこまで守ってくれて、
またどこまで面倒見てくれるのか、お金を払う以上は、不安を払拭したいもの。
この安心感というのは、重要なことですよね。

中村洋基さんが考える志向性とは？

P.105
「この会社に入りたくなる」指向、
「この会社と仕事をしたくなる」指向である。
どんなにカッチョよくても、これがない自主サイトはグッとこない。

デザイン理論に沿って、理路整然としていても、見た目のセンスだけでも、
頭でグッとこさせる前に、見る人の感情を揺さ振るような表現が必須ですよね。
人間は感情の生き物ですから、ねっ

友人がWeb Designing（ウェブデザイニング）っつー
業界月刊誌にコラムを書いていたのですが、
多忙につき連載終了。

ションボリしていたところに、
同じよーにコラムを書いていた
中村洋基さんの書く文章が気になり、
本書を購入。

鎌田貴史さん
「商品が持つ力をしっかりと伝えること、あわよくば二割増しで」
作り手の作家性が商品とマッチするかどうかも含め、
ユーザーの感情を「動かす」
そのため、構成要素はシンプルで明解に。
サイト独自のオリジナルルールは使用しない。とのこと

中村洋基さん
「ボタンが10個、並んでいないか？」
俺ってカッコイイ？的なコトが見え見えのサイト創りを、
勘違いの恥ずかしさという視点で語る。

客観視を持つ大切さと、「つかみ」
「○○だから、おもしろいよ！」と、
一言で、そのサイトが言え。また誰かに言いたくなるか？

スラムダンクのその後キャンペーンの話は、思わず目頭が熱くなる。

水藤祐之さん
プロジェクトを頓挫させないために、引き受ける前に
必ず相手と直接会う

「すべての仕事は、クライアント
担当者の力量を超えられない」
嗅覚を研ぎ澄ませ、統括者は誰で、どんな人かを探る。

「仕事は、なにをするか、ではなく。誰とするかである」
これは、なにを言うかではなく、誰が言うか、
といった考えに似たものがある。

組織をむやみに拡大してゆくことの
デメリットについての考察もあるので、
規模を大きくしようとしているデザイン事務所の方は、目を通しておくと吉
外部に仕事を振るときの方針についても触れることができるので併せて。

「いったい誰が、貴重な時間を割いてまで、自分が望みもしない
企業からのメッセージに耳を傾けるというのか？」
つくり手の論理や感覚に染まりすぎてしまう危険性を指摘

遠崎寿義さん
インターネットの魅力であり、本質は
「Webサイトを通じて、別の人がそこにいることが感じられる」
ことだと言う

想像力を総動員して、コンテンツを発想する重要さ。

情報過多の時代にメッセージを届けるために
「覚醒度の高い経験、感情を動かすような経験をつくればいい」
ユーザーの感情を揺さ振り、興奮状態にしてあげる

閲覧者をドロップ（サイトからの離脱）させないための、
ユーザー登録画面での試行錯誤は大変勉強になりました。
人間の心理を上手く掘り下げています。

佐野勝彦さん
他の広告媒体では味わえない楽しみ。
それは、「インターフェースを自由に考えられること」だと。
そこには、理論では説明でいない気持ち良さや
感性の部分で伝わる展開があるはずだ。と

ウェブに限らず、
「多くのサービスが、誰かのために利用される」
その「誰かに対する思い」をサイト構築の足がかりとする。