Design Wedge | backnumber No.86

最新号 | 目次一覧
アーカイブ：
96 | 95 | 94 | 93 | 92 | 91 | 90 | 89 | 88 | 87 | 86 | 85 | 84 | 83 | 82 | 81 | 80 | 79 | 78 | 77 | 76 | 75 | 74 | 73 | 72 | 71 | 70 | 69 | 68 | 67 | 66 | 65 | 64 | 63 | 62 | 61 | 60 | 59 | 58 | 57 | 56 | 55 | 54 | 53 | 52 | 51 | 50 | 49 | 48 | 47 | 46 | 45 | 44 | 43 | 42 | 41 | 40 | 39 | 38 | 37 | 36 | 35 | 34-9 | 34-3 | 34-2 | 34-1 | 33-2 | 33-1 | 33 | 32 | 31 | 29 | 28 | 27 | 26 | 25 | 24 | 23 | 22-1 | 22 | 21 | 20 | 19 | 18 | .....
Design Wedge バックナンバー：No.86

　
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━



◆     D e s i g n  W e d g e           internet/web design mail magazine 

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2004/04/12｜no 86｜ http://www.karadesign.com/designwedge/ ｜post>>magmag

((！))

前号で特集したprocessing、いかがでしたか？　僕は少しずつですが
processingを使った作品を作ってみています。processingは、シンプル
な言語なだけに発想勝負な部分が強いです。こんなの作ったよっていう
方いましたら是非教えてください。誌面で紹介したいと思います。


今号から登録された皆様、はじめまして。ご登録ありがとうございます。
Design Wedgeは、現在月２回発行のウェブデザインの専門誌です。
毎月１１日と２６日の発行を予定してます。

１１日発行予定号では、サイトデザインのレポートとモバイルデザイン
関連＋α、２６日発行予定号では、ニューストピックとウェブアプリケ
ーション関連のデザイン＋αという感じで、ウェブデザインの世界を様
々な角度から探究していっています。これからもDesign Wedgeをよろし
くお願いします。

―――――――――――――――――――――――――――――――――――――

-PR-----------------------------------------------------------------------

◆Design Wedgeに広告を掲載してみませんか？
◆掲載場所はヘッダー部分
◆広告スペースは横幅全角３７文字×７行です
◆メールにてお気軽にお問い合わせ下さい
                                     >> mailto:designwedge@karadesign.com

-PR-----------------------------------------------------------------------


    ≫ c o n t e n t s


   +01 特集１：ワールドサイトデザインレポート
   +02 特集２：デジタルデバイスのゆくえ
               「Atom手書き入門：自分のサイトにもAtomを置いてみよう」

   ---
   +03 プレスブース
   ---
   +04 Design Wedgeよりお知らせ
   +05 編集後記

   今号のバックナンバーは、
   ( http://www.karadesign.com/designwedge/backnumbers/0086.shtml )
   にてご覧になれます。


 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +01 特集１：ワールドサイトデザインレポート
       ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

 " method products inc. "
 ( http://www.methodhome.com/ )

台所やシャワールームといった水周りの洗剤のメーカーのサイトです。
汚れたものをクリーンにする商品を、効果からではなくイメージからユ
ーザーにアプローチしていて、洗剤という商品を美しくスタイリッシュ
に演出している点が素晴らしいです。「products > soaps」から見るこ
とができるハンドソープはまるで香水のように見えます。



 " CafePress.com "
 ( http://www.cafepress.com/cp/info/ )

自分のオリジナルロゴ入りグッズを売ることが出来るページとサービス
を無料で開設できるということで有名なcafepressのサイトは、非常にオ
ーソドックスなデザインになっています。このサイトは開設されてかな
りの時間が経過していることもあって非常に膨大な量のオリジナルグッ
ズがそろっています。見ているだけで熱中してしまうのですが、その中
に自分がしっているサイトのグッズや面白いグッズを発見してしまうと、
思わず人にしゃべりたくなります。その中の一部を紹介してみます。


     " American Design Awards Store "
     ( http://www.cafeshops.com/designawards )

    なんと過去にDesign Wedgeで紹介したことがある
    「American Design Awards 」のグッズを見つけました。
    おそらくここでしか入手できないでしょう。


     " KratzMedia <body> Shop "
     ( http://www.cafeshops.com/kratzmedia1 )

    以前参加したorkutのとあるオフ会で、ある人が<body>タグのついた
    T-シャツを着ていたのを見てずっと興味があったのですが、それを
    見つけることが出来ました。ちなみに<head>タグのついたキャップ
    も売っています。


     " At Stuff "
     ( http://www.cafeshops.com/atstuff )

    これはアットマークがついているものです。


     " O'crikey "
     ( http://www.cafeshops.com/ocrikey5 )

    これを見つけたときは思わず笑ってしまいました。ウェブでプログ
    ラムをちょこっとかじった人なら誰でも知っているであろうオライ
    リーのパロディT-シャツです。O'CRIKEYという名前で、様々なパタ
    ーンが全部で5種類あります。



 " Pixeldam "
 ( http://www.x-panded.com/pixeldam/ )

皆でオンラインシティを作っていこうというコンセプトのサイトです。
ユーザは、街の１ブロックをGIFのピクセルアートで作ることになります。
GIFアニメで制作することも可能で、既に出来上がっているブロックを見
ると様々な建物や建物以外の構造物が動いていたりします。

各ブロックにはコメントを記入することが出来、ピクセルクリエイター
同士の交流の場になっています。また、街の看板のデザインコンテスト
も行われていて、ピクセルアートとして楽しむことが出来ます。素晴ら
しいのは、RSSを使って街の完成の様子を配信していることで、これによ
りBLOGの更新をチェックするのと同じ感覚で街の発展の具合を知る事を
可能にしています。



 " one9ine "
 ( http://www.one9ine.com/ )

過去に制作会社のREELを紹介しましたが、one9inのREELがどういうもの
なのか非常に興味があります。現在はN/Aとなっており、見ることは出来
ないのですが、そのうちきっと見ることが出来ると楽しみにしてます。
one9inのウェブには、最近の仕事としてar-mediaのサイトが公開されて
います。


     " AR "
     ( http://www.ar-media.com/ )

    これはJavaのバックエンドにフルFlashのインターフェイスをかぶせ
    たものなのだそうで、フルFlashのサイトとしては複雑な階層構造を
    もっていると思います。一見１コンテンツごと丁寧に仕上げられて
    いそうなイメージ優先のサイト裏ではいろいろな自動処理が行われ
    ているということを考えるとわくわくしてきます。



 " selfstock "
 ( http://www.01ccd.com/ )

Flashを使ったショッピングカートのシステムはいくつも見たことがあり
ますが、ストックフォトを販売しているサイトselfstockのものは非常に
シンプルかつスピーディです。

イメージを検索し、ディテールを見たらカートに入れるという作業を何
度かしてみればわかりますが、インターフェイスが学習性高く作られて
おり、HTMLベースのものでは考えられないスピードでカート内にアイテ
ムを放り込んでいくことができるようになっています。

最初は、イメージを表示し、ディテールを見てカートに入れるとなりま
すが、慣れてくるとサムネイルの上部が情報の取り出しで、真中部分が
イメージの拡大表示、下部がカートに入れるということを発見し、次々
にカートへストックフォトを放り込めるようになります。

他にも、XTRAでは、壁紙のダウンロード、PREFでは、大きなカラーパレ
ットが出てきて、その中の選んだ色にサイト全体を変えることが出来た
りします。この機能は単に自分の好きな色にするという役目だけのもの
ではなく、写真と背景色とのマッチングをシュミレートする役目を持っ
ていたりするのです。



 " extrajetzt FastFroots "
 ( http://www.fastfroots.de/ )

Flashで作られたゲームの中でもFastFrootsはかなり高度なものと言える
と思います。スムーズに動かすために画面は小さくなっています。おか
げで描写スピードも上げることが出来、細部の描写を可能にしています。

ちなみにFastFrootsのようなFlashゲームでは、一体どの程度のマシンの
性能が要求されるのか調べてみました。300Mhz前後のノートではしんどく、
500Mhz前後のデスクトップでそこそこ遊べるレベルです。1Ghz超のマシ
ンではゲーム機並に動作しました。Flashでゲームを作ろうと考えている
方はこのサイトを見ると勇気が湧くのではないでしょうか。



 " core77 design magazine and resource "
 ( http://www.core77.com/ )

Blogがサイトの中心となってきているウェブサイトは結構あるのではな
いかと考えます。そういうBlogを抱えたウェブサイトのデザインとして
是非紹介しておきたいのがcore77です。core77では、Blogと、ポータル
的なサイトの造り、そして地味にマッチしているGoogleのアドワーズ広
告が見事にマッチしています。



 " ICFF Home "
 ( http://www.icff.com/default_flash.cfm )

赤い色調が非常に印象的なicffのサイトは、上にあげたcore77に貼られ
たバナーより訪問しました。美しいこのサイトはXHTML+CSS2で作られて
います。CSSで作られたサイトというのは、いくつも見ている人はわかる
と思いますが、どんなに巧妙に作られたものでもなんとなく見分けるこ
とが出来たりします。どこがどう、というわけではないところが不思議
なのですが。



 " Muller photography "
 ( http://www.mullerphoto.com/ )

Design Wedgeでこれまで幾つも紹介してきた写真家のサイトは、どれも
写真の見せ方にこだわって作られているものばかりでした。
Muller photographyでも、膨大な写真を次々と見せるためにまったく新
しい手法で演出を試みています。写真の切り替えにマウスの動きを利用
し、写真の全体像をいきなり見せるのではなく隅から見せるようなしか
けが施されています。デザインはMore，というスタジオが担当しています。
要チェックです。

     " More， "
     ( http://www.more-better.com/ )



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +02 特集２：デジタルデバイスのゆくえ
       ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

--- Atom手書き入門：自分のサイトにもAtomを置いてみよう ---

前回予告した通り、今回は手書きでAtomを書いてみようという企画をや
ります。AtomもRSSと同じように、ウェブサイトのメタデータをXMLで記
述します。AtomやRSSをサイトで公開すると、ニュースリーダなどのツー
ルを使っている人やニュースポータルなどを見る人に向けて更新情報や
記事のヘッドラインを配信することが可能になります。これからのネッ
トサーフィンに重要な役割を担ってくる分野の言語だと考えています。

Atomは、GoogleのBlogger.comで採用されていたり、

 " グーグルの「ブロガー」サービス、RSSを見捨てAtomへ鞍替え "
 ( http://japan.cnet.com/news/media/story/0,2000047715,20064274,00.htm )

米My YahooではRSSとAtom両方を採用していたりと、RSS、Atom両方共に
業界内で利用されていくことが考えられます。

 " RSSとAtomに統合の見通し--配信フォーマット戦争で停戦の申し入れ "
 ( http://japan.cnet.com/news/media/story/0,2000047715,20064791,00.htm )

RSSに関しては、2003年9月28日発行のDesign Wedge No.71にて手書き講
座をやってますのでよかったらそちらのほうも参考にしてください。

 " Design Wedge No.71 "
 ( http://www.karadesign.com/designwedge/backnumbers/0071.shtml )

 " Design Wedge RSS "
 ( http://www.karadesign.com/designwedge/dwrss.xml )



 -- Atom手書きへの学習ステップ

Design Wedgeでは、Atomを楽に学べる方法として目的別に３ステップの
学習法を考えてみました。用意するものは、テキストエディタ、自分の
サイトへアップロード出来る様に設定したFTPソフト、そして、

 " FEED Validator "
 ( http://www.atomenabled.org/feedvalidator/ )

のページを表示したブラウザのみです。

流れとしては、テキストエディタでAtomを書き、それをFTPでサーバにア
ップロード、「FEED Validator」にAtomのあるアドレスを入力してVALID
かどうかを確認ということの繰り返しになります。あやふやな部分はわ
ざと間違って書くことで、エラーが出るので「FEED Validator」で詳し
い説明を受けることが出来ます。各ステップごとにこれを行っていきます。



 -- Atomの構成

AtomはRSSと同様XMLで書かれていますが、少し勝手が違います。RSSが、
RDFとして書かれ、channelタグで概要とエントリー先のURLを書きitem欄
で参照して各サマリーを記述していたのに対し、Atomではfeedというタ
グ内に各情報や各サマリーを記述していきます。

各サマリーはentryというタグ内に書く形となり、記事数が増えるに従っ
てentryタグをどんどん追加していくことになります。手書きという点で
考えると、コピー＆ペーストを２箇所しないといけないRSSより、１箇所
で済むAtomのほうが楽ということが言えます。



 -- Atomに関する情報

Atomは、

 " AtomEnabled "
 ( http://www.atomenabled.org/ )

にあるプレドラフトの仕様

 " The Atom Syndication Format 0.3 (PRE-DRAFT) "
 ( http://www.atomenabled.org/developers/syndication/atom-format-spec.php )

を見ることでわかるようになっています。このページは学習していくの
に必須なのでブックマークしておきましょう。



 -- Atomへのステップその１

1.1  Example にある、「A minimal， single-entry Atom feed serialized as XML 1.0」
は、最小限の構成のAtomフィードです。解説に使われたりするので、最
も有名なAtomといっていいでしょう。まずはこれを自分の情報に置き換
える所からAtomの学習は始まります。

このミニマルなAtom内に出てくるタグは、 <feed> を起点に <title> 
 <link>  <modified>  <author>  <entry> となっています。

この中にある、 <modified> には最後に修正された時間を書きます。時間
は決まった書式があるのでそれに従いましょう。

また、 <author> 内には <name> 。 <entry> 内には <title>  <link> 
 <id>  <issued>  <modified> のタグが内包されています。

この中の <issued> にはエントリーが出された時間を書きましょう。

要注意は <id> で決まった書き方があります。エラーを出してみると仕
様を確認できますが、サンプルとしていくつか載っているのでそれを参
考にするとよいでしょう。

Design Wedgeでは各エントリー固有のidに年数とナンバーをふった

<id>tag:karadesign.com，2004:DesignWedge85</id>

とやってみました。

これらのタグ内のものを自分の情報に置き換えればAtom完成となるので
すが、一つ入れておきたい項目があります。それはタグラインです。
タグラインとは紹介文のようなもので、キャッチコピーといってもいい
でしょう。大抵のサイトにはmetaタグ内にはいってますよね。タグライ
ンをつけるためのタグはこんな感じです。

<tagline>あなたのサイトの紹介文</tagline>

これで、サイトの情報と更新状態を知らせることができるようになりま
す。このタグラインのタグ一つをミニマルな状態のAtomフィードに追加
した状態のものをDesign Wedgeではステップ１と呼ぶことにします。



 -- Atomへのステップその２

ステップ２では、RSSのように記事の要約もつけます。

記事の要約を入れるには、各エントリータグ内にサマリー用のタグ
 <summary> を挿入します。

<summary>記事の要約</summary>

こんな感じです。ステップ１にこのサマリーを追加したものをステップ
２とします。早いですが、これでステップ２は終わりです。

これで更新されたコンテンツのダイジェストを伝えるRSSと同等の機能を
持つフィードが簡単ながら出来上がりました。



 -- Atomへのステップその３

ステップ３では、加えてコンテンツ自体の配信を行うことも考えます。

コンテンツは、各エントリータグ内にコンテンツ用のタグ <content> 
を挿入し、コンテンツはそのタグ内に書くことになります。

コンテンツをつける方法は２種類あり、

<![CDATA[ 内容 ]]>

の内容の部分にコンテンツを記入する方法と

コンテンツを入れるタグに

xmlns="http://www.w3.org/1999/xhtml"

などと名前空間を書く方法

があるのですが、僕は上の <![CDATA[ 内容 ]]> を選択しました。
コンテンツを加えたら、これで更新されたコンテンツ自体を伝えるAtom
フィードのひとまずの出来上がりです。

ステップ３まで行ってみたDesign WedgeのAtomです。何度か試行錯誤し
てみると、あーこういうことかとわかってくると思います。

 " Design Wedge | Atom "
 ( http://www.karadesign.com/designwedge/dwatom.xml )



ご意見、ご感想、ご質問、お問い合わせは
info@karadesign.com へ



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +03 プレスブース
       ￣￣￣￣￣￣

((！))
Design Wedgeでは、企業の皆様からの広告記事、プレスリリースやイベ
ント情報、企業情報や求人募集スペースとして場所を提供しています。
掲載場所はこのスペースで、３２文字×２０～２５行くらいとなります。
掲載のご依頼お待ちしてます。ヘッダー広告についても募集しています
ので、メールにてお気軽にお問い合わせ下さい。

  ↓
 mailto:designwedge@karadesign.com



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +05 Design Wedgeよりお知らせ
       ￣￣￣￣￣￣￣￣￣￣￣￣

((！)) 

Design WedgeのAtomを実験的に公開してみました。

 " Design Wedge | Atom "
 ( http://www.karadesign.com/designwedge/dwatom.xml )

 - - -

Design WedgeのRSSを公開中です。Design Wedgeはメールマガジンなので、
ニュースの一覧というよりはバックナンバーの参照用にと思って公開し
てます。

 " Design Wedge | RSS "
 ( http://www.karadesign.com/designwedge/dwrss.xml )

 - - -

ハニーモジュールでは、ウェブアプリケーションのデザインに焦点を置
いたメーリングリストを開設しました。概要を読んで参加してみてくだ
さい。

 " Design Wedge | WAD_ML参加申し込みページ "
 ( http://www.karadesign.com/designwedge/wad_ml.shtml )

 - - -

リーダーズリンク、随時募集中です。お申し込みフォームはサイト名と
ＵＲＬ、サイトの紹介コメントのみ必須です。

 " Design Wedge | リーダーズリンク "
 ( http://www.karadesign.com/designwedge/readerslink.shtml )

 - - -

制作者同士のコミュニケーションがメインとなったメーリングリストを
やってます。大きなコミュニティ形成を主としてはいませんので、クロ
ーズドな形式を採用してみてます。資格は、最低限の礼儀を守れてメー
リングリストに参加していく意志がある人としています。技術レベルな
どは問いません。

参加方法に関するお問い合わせは、登録したいメールアドレス、簡単な
自己紹介など添えまして、dwml@karadesign.com までお便りください。

 → mailto:dwml@karadesign.com

 - - -

現在Design Wedgeではヘッダー部分に掲載する広告を募集しています。
全角３５文字×７行。詳細はメールにてお問い合わせ下さい。

 → mailto:designwedge@karadesign.com



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +06 編集後記
       ￣￣￣￣

最近OSを移行しつつあるせいか、メーラーの未来に不安を感じてきた。
僕はメインのアドレスではEUDRAを使っているが、メールマガジンなど
を受信するアドレスはネットスケープのメッセンジャーを使用している。

これは97年くらいからずっとなので、もう乗り換えようとは思わない。
メーラーに関するかぎり、もう僕はまったく進歩の必要を感じていなく
て永遠にこのままでいいとすら思っている。しかし、OSのバージョンが
変わっていくと古いアプリケーションが動かなくなる時が必ずやってく
る。ブラウザのブックマークと違って１０万通を超えるであろうスパム
も含めたあらゆるメールをそのまま移行させるのは困難なことである。


次号の発行は４月２６日を予定しています。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

D e s i g n  W e d g e

    ≫ M a g a z i n e  i n f o

   +01 発行：KaRa designstudio
       http://www.karadesign.com/
       mailto:info@karadesign.com
   +02 編集・発行人：原　一浩　[Kara_D]
       mailto:khsoul@alles.or.jp
   ---
   +03 現在の購読者数：7000人
   +04 Design Wedge公式ページ：
       http://www.karadesign.com/designwedge/
       登録・解除はもちろんのことバックナンバーも見ることが出来
       ます。
   ---
   +05 お便りはこちら：
       mailto:designwedge@karadesign.com
       感想・情報提供・お問い合わせなどはこちらまで。お便り待っ
       てます。
   ---
   +06 配信元：右上部の「post」というところで配信システム名がわかり
       ます。
             
           + まぐまぐ
             ( post>>magmag )    id:0000005412
             ( http://www.mag2.com/ )
           + melma!
             ( post>>melma! )    id:m00103069
             ( http://www.melma.com/ )
           + カプライト
             ( post>>kapu )      id:8588
             ( http://kapu.biglobe.ne.jp/ )
           + E-magazine
             ( post>>e-mag )     id:deswedge
             ( http://www.emaga.com/ )
           + めるまる
             ( post>>melmal )    id:deswedge
             ( http://www.melmal.com/ )
   ---
   +07 コピーライト（著作権）：
       Copyright(c)，1998-2004  KaRa designstudio
       許可無く転載することを禁じます。参照としてのバックナンバー
       へのリンクや引用は自由です。

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +99 スタジオ１×１行プチニュース

       " LightWave 3DのLaunch Partyに行ってきます "
       ( http://www.dstorm.co.jp/event/LW8Launch/ )

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Design Wedgeが今月から月二回の発行となりました。
どんな人が読んでるんだろうということでリーダーズリンク作ってみました。よかったらご参加下さい。
クローズドなタイプのウェブデザインのメーリングリストを開催中です、詳しくはメールにて
ヘッダーなどに掲載する広告を募集しています。詳しいことはメールにてお問い合わせ下さい。
現在月二回・無料で発行中のDesign Wedgeをお知り合いやお友達にも是非薦めてください。リンクも歓迎です。
よかったらDesign Wedgeを発行しているKaRa designstudioのサイトにも遊びに来てください。