Design Wedge バックナンバー：No.90

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



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

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2004/07/13｜no 90｜ http://www.karadesign.com/designwedge/ ｜post>>magmag

((！))

ちょっと6月は発行を休んでしまいました。今月からはまたいつも通り発
行していきます！

前々号で少し書きましたが、今号より「デジタルデバイスのゆくえ」の
コーナーを不定期コーナーとし、新コーナーがスタートさせます。技術
系の話題が続いていましたが、新しいコーナーでは、ウェブサイトにお
ける表現の方面で追求してみようと思っています。

WebCreators8月号「WEBクリエイターの週末トレーニング28の方法」コー
ナー内にデザインポータルのことを中心にオススメなサイトを書いてい
ます。詳しくはお知らせにて。


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

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

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

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

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

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


    ≫ c o n t e n t s


   +01 特集１：ワールドサイトデザインレポート
            -- howies
            -- Neubix Studios
            -- EMILIANO RODRIGUEZ
            -- twothirty media inc.
            -- Photos.com
            -- Image * After
            -- prefad
            -- BP
            -- ColorToy
            -- DEUTSCH Magazine
            
   +02 特集２：価値表現のテクスチャ
               「はじめに」
               「モダンな使い方としてのクラシックテクスチャ」

   ---
   +03 インフォメーション
   ---
   +04 Design Wedgeよりお知らせ
   +05 編集後記

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


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

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

 " howies "
 ( http://www.howies.co.uk/ )

イギリスのスポーツブランドhowiesのサイトは、商品の紹介だけでなく
同じくらい自社コンテンツにも力を注いでいます。その力の入れ具合は、
トップページで同等の面積で仕切られている状態を見ることでわかりま
す。自社コンテンツは単に会社の詳細や歴史だけでなく、閲覧者に向け
たメッセージのコンテンツ「Truth」、様々な本が紹介されている
「Library」などウェブサイトに来るような人にターゲットを絞ったコン
テンツが置いてあります。

 " Carter Wong Tomlin "
 ( http://www.carterwongtomlin.com/ )

がデザインを担当しています。



 " Neubix Studios "
 ( http://www.neubix.com/ )

テレビの画面をパソコンで表示させてみて、画面の荒さにびっくりした
経験はありませんか？　特にノンインターレスで表示させると、テレビ
本来の画像の荒さがはっきりと見えてしまいます。ブラウン管のように
発光する部分と発光しない部分があるような画面で、なおかつインター
レスの表示がされている場合、映像の荒さが間引かれてかなり自然な雰
囲気になります。Neubix Studioのトップで使われているドットによる一
種の間引きは、本来は荒い動画を自然に表示する役目を果たしています。



 " EMILIANO RODRIGUEZ "
 ( http://www.emilianorodriguez.com.ar/ )

様々な場所で紹介されているグラフィックデザイナーであり写真家でも
あるEmiliano Rodriguez氏のサイトです。個人を紹介するのにこれほど
自分を前面に出したデザインもないのではないでしょうか。サイトマッ
プは右上部に表示された全身像であり、もはや説明はいらないでしょう。
音楽と小鳥の音のボリュームが別になっています。



 " twothirty media inc. "
 ( http://www.230.ca/ )

twothirty mediaのサイトは、ウェブに関わるいろいろなジャンルの人を
うならせることができるサイトなのではないかと思います。シンプルで
美しいビジュアルはもちろんのこと、XHTML+CSSにおけるレイアウトの問
題、基本的に必要とされるナビゲーション要素を全て使用しながらも、
スマートにまとめあげた手法は素晴らしいの一言です。



 " Photos.com "
 ( http://www.photos.com/en/ )

最近写真素材を求めて様々なサイトを見て回っています。ロイヤリティ
フリーのストックフォトを専門に扱うphotos.comは、非常に印象的なナ
ビゲーションアローをもっています。各ナビゲーション要素は目立つ赤
い背景に右上がりの矢印で統一されており、質の高い写真と共にアクセ
ントの役割も果たしています。



 " Image * After "
 ( http://www.imageafter.com/ )

独特な配色を持ったImage Afterのサイトも一見そうは見えませんが写真
素材のサイトです。ハイレゾリューションのものをメインに取り扱って
います。多くの写真があるため、それらを選んで一時的にクリッピング
しておくことが出来ます。このサイトではクリッピングする際にハサミ
でクーポンを切って自分のフォルダにいれるという演出がなされていま
す。Termsをよく読んで利用しましょう。



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

prefadは最近チェックしている制作会社の一つです。彼らの生み出す音
楽系サイトのクオリティは高く、使いやすくて気持ちいいです。そんな
彼らの制作したサイトの一つ、

 " Distort Entertainment "
 ( http://www.distortent.com/ )

は、各コンテンツが正方形のグリッドモジュールを生かしたデザインル
ールに沿って規則正しくレイアウトされています。彼らの生み出すサイ
トで特徴的なものの一つに丁寧に作られているオーディオプレイヤーが
あるのですが、このサイトのモノも使いやすいです。



 " BP "
 ( http://www.bp.com/ )

緑と黄色のコントラストが美しいBP社のサイトは、複雑なレイアウトを
していますがテーブルは使っておらず、XHTML+CSS2で書かれています。
オペラやIE5、ネットスケープでの表示もバッチリで、こういうサイトの
研究をしている人には大いに参考になることでしょう。タブ式のナビゲ
ーションの表現方法を素晴らしい解決策で処理しています。



 " ColorToy "
 ( http://defencemechanism.com/color/color_toy_fr.htm )

デザインしていて配色に悩んだ経験誰にでもあると思います。配色の参
考書を見ると様々な色の組み合わせが載ってはいるものの、求めている
のはそういうものではなくて、突発的なインスピレーションを与えてく
れる何かだったりします。そんな状況にピッタリなのが、このColorToy
です。このウェブアプリケーションは自分で色を練ることもできるので
すが、RANDOMを押して突発的な色の出会いに期待するという使い方がよ
い気がします。うっかり気に入った色を飛ばしてしまっても履歴が残っ
ているので安心です。



 " DEUTSCH Magazine "
 ( http://www.deutschmagazine.org/ )

オンラインマガジンやオンラインでページもののコンテンツを見せる表
現のうち、紙の雑誌をマウスでめくるという表現のものをいくつか紹介
してきました。雑誌の読み方には、ページを1ページずつめくりながら読
むほかに、パラパラとめくって全体を把握するという読み方があり、オ
ンラインでこれを実現するのはローディング時間の関係や反応速度の関
係もあり、なかなか難しいところです。
deutsch magazineでは、ロールオーバーと適度にセレクトしたページを
うまく使ってペラペラとダイジェストを本屋で立ち読みする感覚を表現
しています。



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

   +02 特集２：価値表現のテクスチャ
       ￣￣￣￣￣￣￣￣￣￣￣￣￣￣

--- はじめに ---

ウェブサイトのデザインを延々と眺めていると、時代によって変化して
いくものと、あまりそうでないものを見つけることが出来る。その中で
も特に、ウェブサイトのヴィジュアルを演出しているテクスチャは時代
によって、業種によって、制作者によってもめまぐるしく変わるものの
一つといえるだろう。

本コーナーでは、ウェブサイトの価値感や雰囲気を決定付けるテクスチ
ャにスポットを当て、「価値と時代とテクスチャー」この３つをキーワ
ードに考察してみたい。


 -- ここでいうテクスチャとは？

ウェブページは、現時点では二次元の平面であるディスプレイに表示さ
れるので、サイトに表示されているビジュアルはウェブページに貼られ
ているテクスチャと見立てることができると思う。テクスチャとは一般
的には3Dなどの表面に貼られている画像のことを指すが、ここでは、ボ
タン、背景画像、立体の形状・角度・影、角の処理、ベベルの具合、リ
ストのブレット、見出し、セパレータといった、ウェブページを構成し
ている要素のヴィジュアル的ありかたのことを指すものとしている。

例えば、リストのブレットが丸か三角か、といったことは、ウェブサイ
トのイメージに影響を与える以外はあまり重要視されない。機能的な変
化もあまりないだろう。が、しかし、こういった小さな要素のヴィジュ
アルが積み重なることでサイトの雰囲気を生み出していることは確かな
のだ。


 -- テクスチャの面白さ

ウェブデザインを構成する要素は様々あり見どころも多いのだが、中で
もその時代時代に変化していくテクスチャを見ていくことは結構面白い。

例えばページ内に矢印を置くとする、この矢印に要求されている機能は
時代によってそう変わるものではないが、画像として張られているテク
スチャは大きく変わってくる。流行り廃れがあるからだ。ある時代には
丸い角を持つ矢印が流行し、ある時期は丸の中に矢印を書くことが流行
ったりする。これは、単にその時のサイト全体のイメージによって矢印
のテイストが変わるからとか、担当デザイナーが変わったからとかいう
話ではないと思う。



--- モダンな使い方としてのクラシックテクスチャ ---

移り変わりの激しいウェブサイトのテクスチャには時に変わった様式の
ものが出現する。僕がこの「モダンな使い方としてのクラシックテクス
チャ」様式（とつけてみた）を見るようになったのは、2003以降だった
ように思う。

こういったクラシックな飾りは、昔からクラシックな関係のものを扱っ
たサイトでクラシックな雰囲気を演出するために使われてきた。
それが、一部のサイトで、飾りのデザインをピクセルベースでミニマル
なものに変化させて使うようになり、モダンな要素として使われるよう
になってきたのである。

当時デザインポータルのデザインといえば、テクノ系の流れをくむもの、
ピクセルアートで精密につくられたもの、北欧系のタイポグラフィが活
かされたものが主流を占めていた。そんな状態のところへクラシカルか
つミニマルな飾りを上品に使ったデザインの登場は、古めかしいものと
してではなく、まったく新しいものとして映ったのである。僕はこの使
われ方のちょっとした変化が面白くて、それ以後しばらく追いかけてた。

このスタイルはサイトに上品さを加えただけでなく、クラシックなもの
として使われていた時に持っていた格調性や権威性、安心感といったも
のを引継ぎ、サイトをよい方向へ導いていったのではないかと思う。


この様式は、主にセパレータや背景などで使われており、例えば、

 " PhotoCase.de "
 ( http://www.photocase.de/ )
抽象化されているがページの背景画像と、メニューやコンテンツ内の背
景画像、左部にあるニュースとフレンズの間にあるセパレータなどが、
この様式である。

 " BACKGROUNDS "
 ( http://www.cafeblu.com/freeBackgrounds.htm )
このサイトでは、フリーのそれっぽい壁紙や要素が置いてある。

 " Reservocation "
 ( http://www.reservocation.com/ )
Reservocationは、この様式を発見するきっかけになったサイト。
Reservocationは、元々こういう飾りは使っておらず、シンプルで美しい
タイポグラフィをデザインの中心に置いたサイトだったが、2003年の終
わり頃にリニューアルして以降、この独特なヴィジュアルを手に入れた。

 " Webmaster Republic "
 ( http://www.webmaster-republic.it/ )
ヘッダーの背景、および各セパレータはミニマライズされた形で使用さ
れている。特にセパレータの、ミニマライズ具合は素晴らしい。

 " Gapers Block "
 ( http://www.gapersblock.com/ )

以前紹介したBLOGでは、この様式が自然な形で使われている。ほぼ、記
号化されており、上品さを出すために一役買っている。こういった飾り
は、何もないただの破線や実線では出せない雰囲気を出す。


といった感じである。上に挙げたサイトを見るとなんとなく雰囲気がわ
かってもらえると思う。次回は、この「モダンな使い方としてのクラシ
ックテクスチャ」様式について更に掘り下げてみる予定だ。



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

   +03 インフォメーション
       ￣￣￣￣￣￣￣￣￣

((！))

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

 → mailto:info@karadesign.com



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

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

((！)) 

WebCreators8月号「WEBクリエイターの週末トレーニング28の方法」コー
ナーにある「先端を行くデザインサイトをチェック。デザインの目を肥
やそう」というページでデザインポータルを中心に執筆しました。一ペ
ージですが、情報をぎゅうぎゅうに詰め込んで内容が濃くなってます。
是非読んでみてください。

 " 月刊 [web creators] "
 ( http://www.mdn.co.jp/webcre/ )

 - - -

Design WedgeのAtomを実験的に公開してます。対応していないRSSリーダ
ーでは読めないので、その際はRSSをご利用下さい。

 " 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 )

 - - -

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

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

 - - -

制作者同士のコミュニケーションがメインとなったメーリングリストを
やってます。参加資格は、最低限の礼儀を守れてメーリングリストに参
加していく意志がある人としています。技術レベルなどは問いません。

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

 → mailto:dwml@karadesign.com

 - - -

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

 → mailto:designwedge@karadesign.com



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

   +06 編集後記
       ￣￣￣￣

下請法改正の影響ってどれくらい出ているんだろう。この下請法、よく
よく調べてみると僕自身勘違いしていた部分が見つかったりして、もっ
とよく勉強しなければと思う。こういう制度がいかされるためには、ま
ずそういうものがあるという存在を知ってもらう必要性があり、次の段
階としてそれに則った取引を実施していくというのがあるんだろう。専
門家の方に解説していただければ最高だけど。


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

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

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 スタジオ１×１行プチニュース

       " もうそろそろDesign Wedgeが6周年を迎えます "
       ( http://www.karadesign.com/designwedge/ )

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