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

 　　　　　◆
 　　　　◆　◆
 　　　◆　＼　◆
 　　◆　＼　◆
 　　　◆　◆
 　　　　◆

D e s i g n  W e d g e                internet/web design mail magazine 
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2002/06/15 ｜ no.50 ｜ http://www.karadesign.com/｜ post  ->  magmag
        

((！))
ワールドカップ盛り上がってます。今回のサイトレポートはだからとい
うわけではありませんが、グローバルな企業のデザインの今を探ってみ
ようという趣旨です。Design Wedgeのウェブサイトもようやくリニュー
アルが終了しました。

今号から購読された皆様、はじめまして。購読ありがとうございます。
Design Wedgeは、現在月刊にて発行中のウェブデザインの専門誌です。
ウェブデザインの世界を様々な角度から探究していっています。これか
らもDesign Wedgeをよろしくお願いします。

-PR-----------------------------------------------------------------------
　◆　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　◆　
◆　◆（祝）Design Wedgeのウェブサイト遂にリニューアルオープン！！！◆　◆
　◆　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　◆
  
                  http://www.karadesign.com/designwedge/
-PR-----------------------------------------------------------------------

    ≫ c o n t e n t s

   +01 特集１：ワールドサイトデザインレポート
   +02 特集２：ハンドヘルドモバイルのブラウザが抱える問題
   ---
   +03 募集・告知
   +04 Design Wedgeよりお知らせ
   ---
   +05 編集後記


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

   +01 特集１：ワールドサイトデザインレポート
       ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
ここ最近はFlashを多用したサイトばかりを扱ってきました。Flashを自
在に使ったサイトは素晴らしいものがありますが、どのサイトにも必要
というわけではありません。

今回はビジネスサイト、それもフォーチューン誌のトップ500選ばれてい
るような、海外のグローバル企業のサイトに焦点を当てて、レポートし
てみようと思います。
普段こういう大企業のサイトに真正面から入っていくことはあまりない
かと思いますが、今のグローバル企業のトップページはどのようになっ
ているのでしょうか。

グローバル企業イコールウェブサイトにも力を入れている企業とは必ず
しもいえず、明らかに力を入れてないところ、制作はしたもののほった
らかしになっているところ、更新を失敗してデザインが崩れてしまって
いるものなどがある一方、力を入れて取り組まれている企業のデザイン
は素晴らしいです。そのため未だ落差がはげしい状態と言えるかと思い
ます。

情報を大量に抱えているサイトほどトップページはすっきりしているの
が象徴的です。どうしてもあれもこれも、となってしまいがちなトップ
ページをいかに取捨選択するか。この方法もこれら企業のサイトにヒン
トを見つけることが出来そうです。情報の見せ方という観点から少しサ
イトを眺めてみることにします。

 " Zurich - Welcome "
 ( http://www.zurich.com/)
Zurich社のサイトが持っている、限られたスペースの中に必要事項から
投資家向け情報まで余裕を持って綺麗に納めたデザインは見るべき価値
があります。

 " ING.com "
 ( http://www.inggroup.com/)
間の取り方が非常に上手いサイトです。画像はほとんど使っていません
が、空白を退屈に感じさせないデザインは見習う点が沢山あります。お
そらく時間をかけて洗練された結果、このデザインになったんだと思い
ますが情報の整理のされ具合は見事です。

 " RWE One Group. "
 ( http://www.rwe.com/)
１００年以上の伝統を持ち、電力・ガス・水などで知られる世界でもト
ップクラスの企業として知られるドイツのRWE社のサイトも見ておくべき
サイトといえると思います。情報のデザインとビジュアル面でのデザイ
ンを両立させた見ていてストレスを感じさせない所はすごいです。

 " bpamoco "
 ( http://www.bpamoco.com/)
一方、bpamocoのサイトのレイアウトはこういうタイプのサイトにしては
変則的なスタイルを採用しています。グローバルメニューがページのフ
ッターに来るサイトはいくつかありますが、ほとんどすべてのページで
下部にグローバルメニューを置いているのも珍しいです。

 " HypoVereinsbank Startseite "
 ( http://www.hypovereinsbank.de/)
大手銀行であるHypoVereinsbank社のサイトは、ウェブインターフェイス
という面において見どころ満載です。本当に隅々まで丁寧にデザインさ
れており、ユーザーがアクションを起こすTOOLBOXやFINDER、ナビゲーシ
ョン部分は浮かない程度に差別化してあり、アイコン表現もシンプルで
分かりやすいです。ウェブサイトをデザインするってこういうことなん
だろうなあと改めて感じさせるサイトでした。

 " Welcome to the new HP "
 ( http://thenew.hp.com/)
この項目の最後にコンパックと合体して生まれ変わったヒューレット・
パッカードのサイトを紹介します。内部にはまだ以前のデザインのペー
ジも残っていますが、このトップページの情報デザインの素晴らしさは
一見の価値有りです。注目はジャンプメニューで、２段階に分けて豊富
な選択肢をわかりやすく分類しています。項目が沢山になってしまう場
合は、ジャンプメニューもこういうほうがいいかもしれません。

グループ企業が何十何百とあるグローバル企業のサイトのデザインは、
一見僕らの日常に扱うウェブサイトと無縁な気がします。でも中小企業
・個人のサイトでも更新され続ける限り、情報がそのうち膨大になり、
内部に楽にアクセスできるようにするためには、適切な情報デザインが
必須となってきます。

それに、サイトにある情報には様々な側面（サイトが提供している情報、
こちらが見せたい情報、ユーザーが見たいと思われる情報）があり、こ
れらをうまくページ内に配置する必要があります。そういう意味でもこ
れらグローバル企業のサイトデザインの分析がなんらかのヒントになっ
ていくのではと思いました。

現在のグローバル企業のサイトのトップページには、共通の要素という
のがいくつかあるのではないかと思います。その傾向を挙げてみると、

・国別のサイトがあり、それらへのリンク
・表示言語の選択肢
・最新情報をを伝える項目
・比較的軽めにテキスト中心に作られており、情報の選択が洗練されて
　いる
・ライブラリの検索もしくは各文書への適切なナビゲーション
・片手で数えられる程度のサービスの分類
・企業のアイデンティティを表すグラフィック・配色を使ったデザイン

などが要素として存在しているのではないかと思います。確かに様々な
サイトを見てもこれらの情報がアプローチの方法は違えど含まれていて
ます。実際サイトが持つ情報・サービスは多岐にのぼるはずなのですが、
トップページに上記以上の項目を掲載してしまうとごちゃごちゃとして
しまうため、そぎ落としてあるのだと思われます。

次は最後の項目にあった「企業のイデンティティを表すグラフィック・
配色を使ったデザイン」という観点から印象的だったサイトを見てみる
ことにしましょう。
 
" shell "
 ( http://www.shell.com/)
shell社のサイトは、各国ごとにサイトが開設されていますが、どこの国
も基本的に同じデザインフォーマットで作られています。ロゴや配色と
もにぱっと見て、すぐにshell社のイメージを得ることが出来るようにデ
ザインされています。

トップページのナビゲーションは膨大な量の情報をいかに見つけるかと
いうことを意識して組まれていて、ページ上部には普通のジャンプメニ
ューとキーワードサーチの他にQuick Findというナビゲーションも作ら
れています。

このナビゲーションは、カテゴリを選ぶと小窓が出て、下の階層を選ぶ
よう促されます。そして選ぶと次に第３階層のメニューが出てきて、国
を選んで検索結果が出てくる仕組みになっています。変わっていますが
直感的にメニューを選んでいけるので、項目だけでも膨大になってしま
うサイトでは有効ではないかと思いました。

 " Mobil "
 ( http://www.mobil.com/)
MobilのロゴマークはIBMのロゴと並んでデザインの教科書には必ず出て
くる程有名です。サイト自体は非常にシンプルな造りですが、このロゴ
マークとトレードカラーがこのサイトを他のサイトと異なる印象にして
いるといってもいいと思います。

 " Totalfinaelf.com - Site officiel du groupe in... "
 ( http://www.totalfinaelf.com/)
フランスの石油会社のTOTAL FINA ELF社のサイトは、円、曲線が主体と
なっています。石油系の企業ではオイルのなめらかさを表現した曲線を
使ったサイトを比較的よく見かけます。

 " Eni - Home Page "
 ( http://www.eni.it/)
イタリアの国有企業グループで、石油・ガスなどを主に扱うEniのサイト
は、巨大な企業の力強さを表現したトップページで、その力強さは他の
サイトと一線を画しています。
トップページは濃い青い背景色を使っていますが、内部のテキスト中心
のページでは、読みやすさを考えて白地に見やすい配色を使用していま
す。


グローバル企業のサイトを眺めていて一番考えるのは、なんでこのデザ
インを採用したのかということです。中小企業に比べて予算があり、制
作会社の選択肢は山のようにある。やはり、数々の選択肢からこのサイ
トになったという事を考えるとそれぞれのデザインに秘密があるのでは
と思ってしまいます。注意深くサイトを見ていけば今の時代の企業のト
ップはどういうデザインを選ぶのかということが見えてような気がする
のです。


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

   +02 特集２：ハンドヘルドモバイルのブラウザが抱える問題
       ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

バイオUをはじめとする超小型ノートパソコンの登場で、Windows CEを搭
載したハンドヘルドタイプのマシンはすっかり肩身が狭くなったものの、
起動のスピーディーさや手軽さなどの面で未だに他の追随を許さない部
分は多い。

前号の編集後記でも書いていたjornada728が、日本でも発売になるそう
でうれしい限りである。jornada728には、Windows CEというOSが内蔵さ
れており、Windows CEの現行バージョンは3.0である。キーボード付の
Windows CEマシンに搭載されているものは、Windows CE 3.0のハンドヘ
ルド向けにカスタマイズされたHPC2000というOSで、ウェブブラウザには
Internet Explorer 4.0相当のものが搭載されている。

HPC2000が搭載されたマシンには、シャープのテリオスやビクターのイン
ターリンク、有名なところだとNTT DOCOMOのシグマリオン2やjornada 710、
720などがある。

これらHPC2000デバイスの合計出荷台数は現時点でもかなりのものにのぼ
ると思われる上に、バッテリーの稼動時間もノートパソコンよりも長く、
場所もとらないため、Air H"などと併用して通勤時など外でウェブにア
クセスする人も多いと思う。

そんなHPC2000搭載のブラウザが抱える問題に関して、知っておいたほう
がよいと思われることがあるので書いてみようと思う。

このブラウザでは、一部の透明化GIFが透明化されず、白、または灰色や
黒のイメージとしてそのまま表示されてしまう。特にこの問題が起きや
すくなるのは、単一の色で構成されたGIFファイルや、スペーサーとして
使われている透明のみのGIFである。また多色のGIFでも色数が少ないも
のはまれになるらしいので、デバイスで確認しながら作業するとよいと
思う。仕様ではなくバグだそうなのでなったりならなかったりもするそ
うだ。

実際、デザイン的に細かくコントロールされたサイトで見かけるスペー
サーとして使われている透明化GIFファイルは、きちんと意識的に対応し
ていないサイトはほぼ全滅で、今回のサイトレポートで紹介したサイト
内で使われている透明化GIFも、このバグにより表示がおかしくなった。

あまりこの問題が知られていないせいもあり、未だにマイクロソフトの
サイトですら透明化がきちんとできていない状態である。マイクロソフ
トでもこの問題をサポート情報のなかでとりあげているが、解決策は明
記されていない。（JP417284）

ではHPC2000デバイスでもきちんと表示されるにはどうすればいいのか。
僕自身どういう仕組みで起きるのかよくわからないので解説は出来ない
が（何か知っている方いましたらメールください）、フォトショップで
の対処の仕方はわかったので書いておこうと思う。

対処法はGIFファイルの保存方法に気を使うだけなので、やっておくに越
したことはないと思われる。またこの問題への対応の結果、普通のブラ
ウザで表示不能になるわけでもないので、是非HPC2000にも対応したサイ
トにして欲しいと思う。


- スペーサーなどで使う単色透明GIFの場合 -

フォトショップやイメージレディなどで簡単に済ます際、よくカラーパ
レットの最適化方法を「知覚的」や「特定」などにして保存していると
思う。これだと透明色1色で保存されてしまってこれがバグにひっかかる
ようだ。スペーサー GIFを保存するときは、WEBという項目を選んで保存
することで、黒がパレットに追加され（実際には使わないが）この問題
を回避できることが確認できた。
簡単な事なので、とにかくスペーサーGIFだけでもきちんと透明になる対
応をして欲しいと思う。


- 数色で構成されている透明個所を含んだGIFの場合 -

単色もしくは数色で作られているGIFは近似色を追加し色数を4色以上増
やすことで解決できる場合が多いようだ。微妙に色数を増やして元のイ
メージを崩さないようにすることで、見た目に変化なくHPC2000対応のカ
スタマイズが終了する。

これまでスペーサーGIFはマージンやスペースをうまく作ったり、テーブ
ルのつっかえ棒になったりして、ウェブデザインを支えてきた。未ださ
まざまなブラウザのバグが存在する現状では過渡期のHTMLとともにまだ
しばらくは厳密なデザインに欠かせない存在といえるだろうと思う。

それから、HPC向けのサポートは、Pocket PCと違いかなりおざなりにな
っているのが現状であり、例えば、Pocket PCにはPocket PC向けのFlash
プレイヤーがあるがHPC用のFlashプレイヤーはない。是非ともHPC2000用
のFlashプレイヤーも出して欲しいと思う。


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

   +03 募集・告知
       ￣￣￣￣￣
((！))
もしウェブ関係のイベント・セミナーなどにいかれた方がいらっしゃい
ましたらどんな感じだったか軽いレポートとか感想とか送っていただけ
たら是非掲載したいと思います。また、以前この欄で紹介したイベント
に行った方でなにか感想などがあれば是非編集部まで送って下さい。

Design Wedgeでは引き続き告知や求人募集スペースも提供しています。
コンテスト、プロジェクトへのお誘いやウェブデザイナーを募集してい
る場合ここで募集をすることが出来ます。まずは、メールにてお問い合
わせ下さい。

  ↓
 mailto:info@karadesign.com

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

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

Design Wedgeのサイトようやくリニューアルオープンしました！　スプ
ラッシュページから階段を降りるとDesign Wedge編集部。まだがらんと
してますが、ここで今までのアーカイブの編集やウェブデザインの研究
なんかを日々やっていきたいと思っています。

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

 - - -

現在月刊・無料で発行中のDesign Wedgeをお知り合いやお友達にも薦め
てください。リンクなども歓迎です。多くの人に是非読んでいただきた
いです。感想や情報提供投稿などもお待ちしてます。

 → mailto:designwedge@karadesign.com

 - - -

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

 → mailto:ad@karadesign.com

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

   +05 編集後記
       ￣￣￣￣
　前号で、eMacとjornada728について日本でも発売されたらいいなあと
書いていたらどちらとも本当に日本での発売が決まってしまった。
jornada728については、Pocket PC全盛であることから日本での発売はな
いだろうと思っていたが嬉しい限り。なので、今回のDesign Wedgeでは
ハンドヘルド機器が抱えるちょっとした問題をとりあげてみました。

　それにしてもeMacに関するここ１ヶ月の動きはすさまじかったと思う。
最初はアメリカの、しかも教育市場でのみ販売、その後しばらくして日
本でも教育関係者は購入可能になり、それからそれほど経たないうちに
一般ユーザーも購入が可能になった。

iMacは現在は液晶モデルにモデルチェンジしていることから、CRTマック
の最後の機種といえると思う。液晶の性能がよくなったといってもやはり
色の再現性などはCRTディスプレイのほうがすばらしい。

そして、このeMacは17インチのディスプレイを内蔵しているため、SXGA
並(1280×960)の表示が可能になったので作業もしやすいだろうと思われ
る。もう既に店頭に並んでいたので見てきたが、ブラウン管がシャドウ
マスクだったのが少し惜しいなあと思った。


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

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

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 現在の購読者数：8500人
   +04 Design Wedge公式ページ：
       http://www.karadesign.com/designwedge/
       登録・解除はもちろんのことメーリングリストへの参加もここ
       でできます。[ オープンしました ]
   ---
   +05 お便り：
       mailto:designwedge@karadesign.com
       感想・情報提供・お問い合わせなどはこちらまで。お便り待っ
       てます。
       >> Guest Book
       http://www.karadesign.com/studio/abtst_c01.html
   ---
   +06 配信：まぐまぐ
             ( post  ->  magmag )    id:0000005412
             ( http://www.mag2.com/)
             Pubzine
             ( post  ->  pubzine )   id:225
             ( http://www.pubzine.com/)
   ---
   +07 コピーライト（著作権）：
       Copyright(c),1998-2002  KaRa designstudio
       許可無く転載することを禁じます。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿