【WD EXPRESS 2007/08/18】“わかったつもり”のWeb知識
===【WD EXPRESS 2007/08/18】============================================
Web Designing 2007.08.18
Information EXPRESS http://book.mycom.co.jp/wd/
========================================================================
おはようございます。WD EXPRESSです。本日発売のWeb Designing 9月号は新
連載2本に付録つきと、盛りだくさんです。まずはいよいよ連載としてスター
トしたAIRアプリケーションの解説記事。AIRアプリと言っても、Ajaxを駆使し
たフォトギャラリーをDreamweaverで作るので、なじみやすいはずです。さら
に集中連載として、簡単にプログラミングを行えるProcessingの制作解説。付
録の小冊子では、Expression Blendを使ったリッチコンテンツを作成していま
す。まだどの制作環境にも手をつけていない方が多いはず。まずはどこから始
めてみますか?
■ C U R R E N T I S S U E ■
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
本日発売『Web Designing』2007年9月号のご案内です。
【特集1】“わかったつもり”のWeb知識
—GIFとPNG、StrictとTransitional、わかったふりをしていませんか？—
「GIF」と「PNG」、「Strict」と「Transitional」など、普段何気なく扱って
いるこれら形式にも当然、向き不向きがあるのはご存じですよね。では、いっ
たいどういう条件の場合に、どちらを選択すべきなんでしょうか？ この特集
では、胸をはってWebクリエイターを名乗れるよう、これだけは説明できるよ
うにしておきたい22のトピックを紹介。歴史的背景や意外な落とし穴といった、
解説書には載らない（X）HTML、CSS、Flashなどの基礎に迫ります。
—W3Cが推奨するXHTML 1.1にも意外な弱点が
—Web標準の優等生ならStrict？
—ハイパーリンクは相対パスと絶対パスがどっちが便利？
—Flashのフレームレートは標準の12fpsが最適？
—わかってる？ JPEGとGIFとPNGの違い ほか
【特集2】映像表現のバックステージ
—百戦錬磨のWebディレクターが語る—
クライアントから、映像を使ったWebサイトを作ってほしいと言われるケース
が増えてきています。その一方で、Web制作者にとって、映像制作の現場は身
近とは言い難い状況。この特集では、GT INC.の伊藤直樹氏をはじめ、映像を
使ったWebサイトを数多く手がけてきたWebディレクターやプロデューサーに話
を聞いています。ぜひ「Webで最大限の効果を発揮する映像制作」について、
考えるきっかけにしてください。
GT INC. http://gtinc.jp/
パズル http://www.puzzle-inc.jp/
葵デジタルクリエーション http://www.aoi-dc.com/
ビーコンコミュニケーションズ http://www.beaconcom.co.jp/
ビジネス・アーキテクツ http://www.b-architects.com/
ベースメントファクトリープロダクション http://www.bfp.co.jp/
farfar http://www.farfar.se/
【特別付録小冊子】Microsoft Expression Blend チュートリアルブック
—エクスペリエンス・デザインを極める3Dリッチコンテンツ作成講座—
Expression Blendを使った実際のワークフローを体験することができる、特別
付録小冊子を収録。ステップバイステップ形式による96ページの詳細な解説に
より、「WPF（Windows Presentation Foundation）」による3Dユーザーインタ
ーフェイスモデル「Flower Viewer」の制作を体験することができます。
Microsoft Expression Blend
http://www.microsoft.com/japan/products/expression/expression-blend/
【新連載】Hello, AIR WORLD :-)
Dreamweaverで作るAIRフォトギャラリー
Adobe Systemsが開発を進める、クロスOS対応のアプリケーション実行環境
「Adobe AIR」。この新連載では、AIRアプリケーションの作り方をわかりやす
く解説するとともに、AIRの最新動向を紹介していきます。今回は、拡張機
「Adobe AIR Extension for Dreamweaver」を入れたAdobe Dreamweaverを使っ
て、Ajaxを駆使したAIRフォトギャラリーを作ります。
Text：酒井克幸／須賀正明
Adobe AIR http://labs.adobe.com/downloads/air.html
【短期集中連載】MITが生んだアート志向の開発環境「Processing」
「Particle Typography + Mail」の第一歩
画像の色情報で変化するグラフィック
「Processing（プロセッシング）」とは、デザイナーやアーティスト、学生な
どプログラムを専門としない人でも学べる「表現のためのプログラミング」環
境として構想されたオープンソースソフトウェアです。誰でもグラフィックや
インタラクションを扱うプログラムを簡単に作ることができ、プログラミング
を基礎から学ぶことができます。今回の短期集中連載では、Processingを使っ
た作品を紹介するほか、その作品の簡易版となるサンプルを制作していきます。
Text：前川峻志
Processing公式サイト http://processing.org/
Processing日本版サイト http://processing.jp/
【one's view】
「未来がやってきた。」
Text：伊藤直樹（GT INC. http://gtinc.jp/）
UNIQLOCK http://www.uniqlo.jp/uniqlock/
「テレビの人が本気を出すと」
Text：馬場鑑平（バスキュール http://www.bascule.co.jp/）
HBO | VOYEUR http://www.hbvoyeur.com/
「世界を流れるデータの渋滞情報」
Text：須賀正明（http://blog.thebadtiming.com/）
Visualizing the Internet http://www.akamai.com/visualize
【Worldwide Creator's Archive】
LIA http://www.strangethingshappen.org/
「すべてのWebサイトがアートを持つべき」
【Website Front】
GREGORY MOUNTAIN PRODUCTS、家造.net、WOW10
ハーズ実験デザイン研究所、求ム天才 ほか
※今月掲載しているサイトへのリンク集はこちら
http://book.mycom.co.jp/wd/currentissue/websitefront.html
【Website Front＿In-Depth Report】
親しみやすさとワクワク感で、ゆるやかに人をつなぐ
KDDIデザイニングスタジオ http://www.kds.kddi.com/
（株）ラナデザインアソシエイツ http://ranadesign.com/
◆◆ Editor's Recommendation◆◆
────────────────────────────────────
今月号でいち押しとなる連載ページを、各編集担当者がちょっと踏み込んで紹
介するコーナーです。編集部の思い入れとともに、本誌をお楽しみください！
＿＿【新連載】Hello, AIR WORLD :-)
Dreamweaverで作るAIRフォトギャラリー
これまで、特集やOnClickなどで、頻繁に取りあげてきた「Adobe AIR」。今月
号からはいよいよ連載として、AIRアプリケーションの作り方やAIR関連の最新
情報を、毎月解説していくことになりました。連載タイトルは、プログラミン
グでおなじみの「Hello World」をもじったもの。この連載を機に、ぜひWebデ
ザイナーの皆さんにもAIRの世界へ足を踏み入れてほしい、という想いを込め
ています。
＿＿【Website Front＿In-Depth Report】
親しみやすさとワクワク感で、ゆるやかに人をつなぐ
「KDDIデザイニングスタジオ」
今回ラナデザインアソシエイツさんにお話をうかがったのは、「KDDIデザイニ
ングスタジオ」という施設（ビル）のサイトについて。施設のサイトは情報量
も多く、画一的なデザインになりがちですが、Kスタの楽しさや親しみやすさ
を盛り込むため、他に類を見ないデザイン上の試みを行っています。確かな技
術力とデザイン力に支えられた遊び心には、読者の皆さんも刺激を受けること
でしょう。
＿＿【短期集中連載】
MITが生んだアート志向の開発環境「Processing」
「Particle Typography + Mail」の第一歩
画像の色情報で変化するグラフィック
デザイン教育の現場から生まれた開発環境がこのProcessingです。聞き慣れな
いかもしれませんが、Web上のインタラクティブコンテンツやアート作品、大
規模プロジェクトの制作にもProcessingは用いられています。この短期集中連
載では、毎回実在する作品を例にサンプルを制作していきます。Flashともち
ょっと違うProcessingの世界をのぞいてみませんか？
■ N E W S I T E S I N F O R M A T I O N ■
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編集部に寄せられた新作＆リニューアルサイト情報から、選りすぐりのものを
制作者の方々からのコメントとともにご紹介します。
▽Xbox 360 Games
http://xbox360games.jp/
「マイクロソフトのゲーム機『Xbox 360』夏のキャンペーンサイト。“100タ
イトルで遊べる”をキーワードに、自分の好きなゲームタイトルをカテゴリで
絞り込んで、お気に入りのゲームとXbox 360を『お気に入りセット』として組
み合わせて印刷したり、ケータイやPCメールに送ることができます。トップ画
面ではバラバラに散らばったゲームタイトルのケースでXbox 360ゲームタイト
ルの豊富さを演出しています」
制作：大日本印刷（株）
（株）DNPデジタルコム http://www.dnp-digi.com/
▽CASIO EXILIM ADDICT
http://k-tai.casio.jp/products/w53ca/special/
「EXILIMケータイのスペシャルサイト。5.1Mの高画質・広角のカメラ機能が中
心の携帯電話。EXILIMに夢中になっている女性がサイト上で、部屋の壁にケー
タイの情報をスクラップしながら解説していく構成になっています。一つひと
つの解説をイメージしやすい映像で表現したことで、ユーザーをこの携帯の魅
力に引き込まれていくようにしています」
制作：（株）ピラミッドフィルム クアドラ http://www.pfq.co.jp/
▽コープしずおか
http://www.coop-shizuoka.or.jp/
「店舗・共同購入・個人宅配で静岡全県をカバーする、組合員数45万人の生活
協同組合コープしずおかのオフィシャルサイト。職員の方が自分たちで更新で
きるように、ほぼ全てをMovable Typeで構築しています。また、これまで一方
的な情報発信だったサイトに、おすすめ商品ランキングやオフィシャルblogな
ど、誰でも参加できるコンテンツを加えています」
制作：ウサくま有限会社 http://www.usakuma.co.jp/
▽アキレス株式会社 コーポレイトサイト
http://www.achilles.jp/
「シューズをはじめとして、産業及び農業用として多方面で活かされるフィル
ム製品など幅広い事業を展開するアキレス株式会社のコーポレートサイト。い
ままでの深い階層構造を排除して、サイト内の分類ごとにイメージと概要を説
明するインデックスページを設け、訪れたユーザーが探したい情報を探しやす
くしました。製品の分類も事業部の垣根を取り払い、ユーザーのための製品カ
テゴリーに分けてより製品情報への到達が容易になっています」
制作：タスクラボ（有） http://www.tasklab.co.jp/
▽Atsushi Watanabe Portflio site
http://www.atsushiwatanabe.com/
「Webディレクター・デザイナーのAtsushi Watanabeのポートフォリオサイト。
“和（Jpananese taste）”“四季(4 season)”“一日(day)”をイメージして
各画面を構成しました。また、全体的な世界観の創作には浮世絵の要素も盛り
込んでいます。ミニチュアのようなPIPを使用している点と、随所に3Dムービ
ーを使用した点がポイントです」
制作：渡邊敦志
▽HYATT REGENCY FUKUOKA WEDDING STORY
http://www.hyattregencyfukuoka.co.jp/w-special/
「結婚式を行うことができるホテル“ハイアット・リージェンシー・福岡”の
サイト。“終わりからはじまる結婚式という物語”をテーマに、新婦の語りか
ら、実際の結婚式に携わったゲストそしてスタッフをエンドロールで紹介して
います。
それぞれのエピソードの中から、結婚式への想いやおもてなし、そしてホテル
ウエディングの魅力を体感してもらえるようにしています」
制作会社：（株）利助オフィス http://www.risuke.co.jp/
▽顧客(会員)管理 カスタマーダイレクト
http://www.c-direct.jp/
「顧客情報を管理する自社パッケージサービス『カスタマーダイレクト』のサ
イトリニューアル。サービスへの理解を深めてもらうために、単純明快かつ洗
練された配色やデザインで統一しました。デザイン性、ユーザビリティ、SEO
対策の強化という課題をサイトリニューアルで改善しました」
制作：(株)フューチャースピリッツ http://www.future-s.com/
▽tempsgraphie : isao naruse photography
http://www.tempsgraphie.com/isao/
「フォトグラファーisao naruse氏のポートフォリオサイト。氏の写真が持つ
空気感を伝えるために、デザイン、フォント、色、インタラクションなど、徹
底してシンプルに制作しました。また、Flash部分にもMovable Typeを導入し、
簡単に更新できるようにしています」
制作：TWISTCUBE,INC. http://www.twist-cube.com/
▽DECOSTER｜株式会社ブリングス
http://www.brings.jp/
「上海のレディス・プレタポルテ・ブランド『DECOSTER』の日本国内公式サイ
ト。DECOSTERブランドの持つコンセプト（ハンドクラフトテイスト×トレンド
テイスト）をそのままサイトのデザインコンセプトにすることで、同ブランド
の世界観表現しています。また、Ajax、JavaScriptを随所に多用することで、
Webサイトにもトレンド感も演出しています」
制作：（株）ヴァイスヴァーサ http://www.vice-versa.jp/
▽NIKE ZOOM選手権
http://nikezoom.jp/
「この夏、NIKEが『人類の瞬発力を鍛える選手権 − NIKE ZOOM CHAMPION
SHIPS』と題して、8/18から9/7までの期間『超短距離１ｍ選手権ワンフット』
と『ケータイ瞬間応答選手権モバスロン』の2種目を開催します。どちらも一
瞬の瞬発力勝負。10万の1秒の世界でタイムを競う。男女年齢を問わず、サイ
トから選手登録をして、競技に無料で参加できます。1,2,3位には、金銀銅メ
ダルと新商品NIKE ZOOM TRとRS+を贈呈されます」
制作：ケミカルビル6F（カイブツ、イマジナティブ）
■ E D I T O R' S R O O M ■
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
最近はWeb上で映像を観ることに違和感がありません。画面全体に広がる映像
や高画質コンテンツを観る機会も増えてきています。そうした、Webで映像を
制作して展開していくこととは、どういうことなのか。その考えるきっかけと
なる誌面を組みたいと思い、立ち上げたのが今回の特集2「映像表現のバック
ステージ」です。
今年のTIAA（東京インタラクティブ・アド・アワード）でベストクリエイター
賞を受賞した（連載one's viewでもおなじみ）伊藤直樹さんをはじめ、映像コ
ンテンツ制作に定評のある会社5社のディレクターなどを中心に話を訊き、事
例となるサイトとともに誌面を構成しています。
同じWeb映像を制作する会社でも、TVCM制作系列や広告代理店系など、その出
自はさまざま。その皆さんの声は、実状を知るからこそ出てくる、重みと説得
力ある言葉に満ちています。特に映像制作の現場に身近でない方々に読んでい
ただけると、いろいろと新たな発見が出てくると思います。（office-endoy）
========================================================================
サイト構築のためのトータルデザイン誌「Web Designing」
定価1,280円／毎月18日発売
バックナンバー揃ってます -> http://book.mycom.co.jp/wd/backnumber/
配信中止、アドレス変更 http://book.mycom.co.jp/wd/mm/
メールマガジンへのご意見・お問い合わせ wd_exp@mycom.co.jp
配信設定に関するお問い合わせ mailpub@mycom.co.jp
Copyright(C) 毎日コミュニケーションズ 2007 禁無断転載
========================================================================
