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

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



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

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2004/01/29｜no 80｜ http://www.karadesign.com/designwedge/ ｜post>>magmag

((！))

Design Wedgeもようやく80号を迎えました。

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

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

まぐまぐからのバージョンにはヘッダーもしくはフッターにはお知らせ
がはいっています。当分はフッターだけのようです。

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

-PR-----------------------------------------------------------------------
◆Design Wedgeに広告を掲載してみませんか？┌──────────────┐
◆掲載場所はヘッダー部分のここです        │ [self AD - No.009]         │
◆広告スペースを全角３７文字×７行です    │ -------------------------- │
◆メールにてお気軽にお問い合わせ下さい    │             Thanks Pubzine │
                                          │          KaRa designstudio │
                                          │ http://www.karadesign.com/ │
>> mailto:designwedge@karadesign.com      └──────────────┘
-PR-----------------------------------------------------------------------


    ≫ c o n t e n t s

   +01 特集１：ウェブデザインニューストピック
               「最近のブラウジング状況を考える
               　　　　　　　　　　　　〜 ブラウザシェアより 〜」
               「リッチクライアントによる検索結果デザインの一例」
   +02 特集２：ハニーモジュール
               「制作用CMSへの挑戦その１」
   ---
   +03 プレスブース
   ---
   +04 Design Wedgeよりお知らせ
   +05 編集後記

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


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

   +01 特集１：ウェブデザインニューストピック
       ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

--- 最近のブラウジング状況を考える　〜 ブラウザシェアより 〜 ---

ターゲットブラウザに関しては、極論を言うと、あらゆるブラウザに対
応したければ純粋なHTMLで書けばいいし、もっと普遍的な文章ならテキ
ストのみで書くのもいいと言えます。ただ、イメージを伝えること、使
い勝手のこと、フィーリングやファーストインプレッションなどが重要
になってくればなってくるほど、このブラウザシェアをめぐる問題が重
要になってきます。

最近Internet Watchで紹介されたOneStat.comによる世界のブラウザシェ
ア調査結果

 " IE下位バージョンのシェアが減少〜世界のブラウザシェア調査 "
 ( http://internet.watch.impress.co.jp/cda/news/2004/01/19/1772.html )

と、そのソース元の

 " Microsoft's Internet Explorer global usage share is 94.8 percent
  according to OneStat.com "
 ( http://www.onestat.com/html/aboutus_pressbox26.html )

によると、Microsoft IE 5.0〜6.0、Mozilla、Opera、SafariといったCSS2
対応のブラウザの合計シェアは計算すると「96.78%」になっています。


OneStat.comでは、定期的にこのような調査を行っていて、過去の調査報
告も見ることができます。2回ほどさかのぼってくらべてみると、2003年
の7月28日

 " Microsoft's IE 6 global usage share continues to rise according
  to OneStat.com "
 ( http://www.onestat.com/html/aboutus_pressbox23.html )

の段階では、CSS2対応のブラウザの合計シェアは「95.7%」であり、2002
年の12月16日

 " Microsoft's Internet Explorer global market share is  95% according
  to OneStat.com "
 ( http://www.onestat.com/html/aboutus_pressbox15.html )

の段階では、CSS2対応のブラウザの合計シェアは「94.7%」となっていま
す。約１年前のCSS2対応のブラウザシェアが94.7%だったのが現在96.78%
に上がっており、今年中にはひょっとしたら98%くらいになるのではない
だろうかと推測できます。

ちなみに、僕が運営しているサイトの訪問者のブラウザシェアをあげて
みると、

InternetExplorer/6.x                    64.2%
InternetExplorer/5.x                    26.0%
Netscape/5.x                             8.2%
Netscape/4.x                             0.7%
Opera/7.x (Windows NT 5.1; U) [ja]       0.2%
InternetExplorer/4.x                     0.2%

このようになっています。もちろん僕のサイトに来る人はデザインの何
かがあるとあらかじめ知っててくると推測されるので、訪問者が使って
いるブラウザは若干偏っている可能性はあります。


また、OneStat.comでは解像度に関する調査結果も載っていて、
2003年の6月26日の調査結果は、

 " More and more internet users choose for 1024 x 768 screen
  resolution for exploring the internet according to OneStat.com  "
 ( http://www.onestat.com/html/aboutus_pressbox22.html )

800x600以上は99%で、1024x768以上は67.3%という結果が出ています。
2002年の11月11日に行われた調査結果では、

 " Screen resolution 1024 x 768  is most popular for exploring
  the internet according to OneStat.com "
 ( http://www.onestat.com/html/aboutus_pressbox14.html )

800x600以上は98.9%で、1024x768以上は64.6%となっています。

この数字を見る限りでは、標準はまだ800x600であり、解像度の標準を
1024x768とするのはまだ時期尚早かも知れないなあと思います。

OneStat.comには、このように様々なユーザーの閲覧環境に関する統計が
載っていますが、これはOneStat.comがアクセス解析の専門会社だからこ
そ導き出されたことであり、データは地球上の様々な国にあるサイトへ
のアクセスデータが元になっていると思われます。アクセス解析のサー
ビスは無料版も用意されていて、僕も試しに申し込んでみましたが、OS
やブラウザなどのほかにも細かな分析結果が出ます。



--- リッチクライアントによる検索結果デザインの一例 ---


ブラウザシェアに関する資料を集めようと検索をしていたら、素敵なサ
イトにめぐり合ったので紹介します。

 " ChannelMinds "
 ( http://www.channelminds.com/ )

このサイトはマーケティング関係のサイトですが、デザインへの投資が
かなり強く行われています。サイトのコンテンツとして、Blog形式の記事、

 " ICTjournal "
 ( http://www.channelminds.com/ictjournal.php3 )

があったりします。オススメなのは

 " MyChannelMinds "
 ( http://www.channelminds.com/login/index.php )

で、最近のRSSなどのXML技術を使って実現している「MyChannelMinds」
には独自にチョイスした400近いサイトから更新情報を自分の見たいジャ
ンルを選んで表示することができます。こういうサービスで最近話題に
なっているものは「My Yahoo!」で提供が予定されているRSSサービスで
はないでしょうか。ここではいち早く似たシステムを実現しています。


このサイトのもう一つの見所は、検索システムです。

トップページより検索をすると、Flashを使用した一風変わった検索結果
が出ます。この結果は、入力したキーワードがマッチしているページの
他に、マッチしたページにあるキーワードが含まれているページ同士を
つなげてマップを作っています。検索語に、それらキーワードを追加し
て再検索させることも出来、慣れてくるとマウスだけでキーワードを入
力できる手軽さが便利になります。

このサイトでは同様のサービスをFlashではなく、HTMLで結果を表示させ
ることもできます。

「ChannelMinds」で使われている検索システムは、

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

で提供されているものをカスタマイズしたものです。Flashで作られた検
索エンジンをここでも体験することが出来ます。このサイトでは、カス
タマイズされていない検索窓は無料で自分のサイトに検索窓としてつけ
ることが可能です。

例えば、「karadesign」で検索すると、マッチした僕のサイトが赤く表
示される他、キーワードとしてマッチしたいくつかのほかのページも表
示されています。例えば「siq」と「pixeleye」と「melma」は、design
というキーワードでつながっているなどと検索結果同士の情報を関連付
けて調べるのに非常に有効なデザインとなっています。

 " kartoo Site Map "
 ( http://www.kartoo.net/a/en/ )

よくわからない方のために英語版の解説ページもありますので是非試し
てみてください。



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

   +02 特集２：ハニーモジュール
       ￣￣￣￣￣￣￣￣￣￣￣￣

--- 制作用CMSへの挑戦その１  ---

前回は、制作用CMSについての概念について書いた。自分用の制作用CMS
は仕事や移動の間などに長い時間をかけてちょこちょこと作ってきたも
ので、最近ようやくおおまかな部分が完成した。今になって前回の文を
読み返して見るとすこしずれている部分があったかもしれないなあと思
う。今回からは５回に渡って制作用CMSを作っていく際に気をつけたいこ
とを書いていくことにする。

予定としては、

・制作用CMSに必要な機能
・実装すると便利な機能
・保存するコンテンツのデータ形式を考える
・HTMLにおける頻繁に変わるものと不変のもの、将来変わるかもしれな
　いもの
・Dreamweaverとの連携のためのアイデア

という順番でコラムを展開していこうと思う。CMSは最近Blogなどの影響
で脚光を浴びているが、制作用CMSという概念は今にはじまったことでは
なく、僕が見聞きした部分だけでも90年代末の中規模から大きな規模の
会社を中心として業務に使われてきているとのことだ。そういうことも
あってかCMSを制作するための数多くのドキュメントが揃ってきたおかげ
で、デザイナーレベルまでCMSが降りてきたことは素晴らしいことと思う。


 -- 制作用CMSに必要な機能

制作用CMSは、デザイナーの要求によって機能はまったく変わって来るの
で一概にこういう機能が必須ということはない。だが、様々なCMSを見て
きた結果、CMSに共通して必要だと思われる機能がいくつか存在すると考
えている。

機能を大まかに３つ分類すると、「コンテンツ自体を情報や属性を含め
た形でデータを保存する機能」「決められた規則に従ってデータを加工
しアウトプットする機能」「サイトの構造に従ってドキュメントを配置
しリンクできる機能」になるのではないだろうか。


  - コンテンツ自体を情報や属性を含めた形でデータを保存する機能

CMSはコンテンツマネージメントシステムの略であるが、その名前の通り
ずばりコンテンツをマネージメントする機能を備えている必要がある。
コンテンツは、コンテンツ自体とコンテンツの名前や管理するid、画像
の場合なら幅や高さなどのコンテンツのプロパティが存在している場合
が多い。

これを管理し（管理といっても様々なスタイルが考えられ、Flashやウェ
ブフォームを使って管理する方法や、GUIアプリケーションを作って一覧
編集できるようにする方法、テキストベースで管理する方法など様々な
やり方がある）、データを保存する（これについても、保存には、デー
ターベースを使うとか、テキスト形式を使うとかあり、保存の形式にも
XMLを使うとか、CSVの応用したものを使うとかいろいろなやりかたがあ
る。とどのつまり制作サイドが理解しやすく好みにあったものを選ぶの
がいいと思われる）機能が最初の基本的な機能と言えると思う。

最も簡単な例として、属性名と属性値を含んだCSV形式（値を"，"で区切
る形式。CGIなどでよく利用されている）で保存するやり方で表現してみ
ると（これも各人のスタイルによるところが大きい）、

<IMG SRC="../images/gazou.gif" HEIGHT=20 WIDTH=100 ALT="画像">

は、

_type==img， _id==gazou， _imgType==gif， _height==20， _width==100， _alt==画像

という具合になる。ポイントは、CSVである必要性はなにもなく、形式は
どうあれ加工前のデータのみの状態に変えてしまうという所だ。こうい
う風にしておくと、必要ならXHTML形式で

<img src="../images/gazou.gif" height=20 width=100 alt="画像" />

と出力させることもできるわけである。でも、考えていくとこれも必須
ではないと思える。ニーズとして、HTMLのままでいいからコンテンツと
ナビゲーションを分離出来、自分のスタイルで出力できればいいという
人もいるからである。

突き詰めると、コンテンツ自体を情報や属性を含めた形でデータを保存
する機能というのは、ページ内に存在していた種類の異なる要素を個別
に管理できる機能ということでいいのかも知れない。


  - 決められた規則に従ってデータを加工しアウトプットする機能

上でも少し取り上げたが、コンテンツをデータとして管理するだけでは
CMSの仕事は終わらない。デザイナーが決めた通りにコンテンツをウェブ
ページとして出力することも制作用CMSに求められていることの一つだか
らだ。

ウェブデザイナーはコードの書き方が事務所や会社によってそれぞれユ
ニークであり、出力されたコードが制作用CMSを使う前のほうがよかった
というのでは導入した意味がないのである。また、制作用CMSの醍醐味の
一つといえるテンプレートやプログラミングによるナビゲーションの自
動化なども魅力的な機能の一つといえる（こちらのほうは後ほど詳しく
書いていこうと思う）。

制作用CMSを作っていて、ふと思うのは、ウェブページで実際に使用する
タグの種類というのは驚くほど少ないということだ。使用頻度の多いタ
グを出力させるプログラムを作っておいてその他のタグは必要なときに
随時ルーチンを加えていけばいいかもしれない。ウェブページを構成し
ている要素を分解して見つめなおすことが出来るのも制作用CMSをつくる
ことの利点の一つと言えそうだ。


  - サイトの構造に従ってドキュメントを配置し、リンクできる機能

ウェブページを個々に出力するだけでは、まだ制作用CMSとしては不十分
だ。サイト全体の構造をデザインし、各ディレクトリにページを配置、
それらをリンクで結んではじめてウェブサイトになりうる。というわけ
で、この部分の機能も必要となってくる。

僕の場合だと、制作用CMSはウインドウズで使うように作ってあって、
現在はエクスプローラなどのファイルツールを使って、各ディレクトリ
にページごとにまとめたコンテンツファイルを配置し、それを出力する
とそのディレクトリ構成どおりにウェブサイトが丸ごと出力されるとい
う形式をとっているが、サイトの構造デザインをどうやれば楽に出来る
かということについてはいくらでも改良や新しいスタイルを作ることが
出来そうである。

CMSの醍醐味の一つであるサイトの一括構築を使うと、ナビゲーションの
テストのために、全てのページにダミーテキストを入れて、一括で全体
を出力するということも出来るようになる。こうなってくると、例えば
、実際にテストしてもらいながらサイトの階層構造やページの配置をダ
イナミックに変更して検討するという提案も可能になるわけである。

サイトの構造をダイナミックに変更する仕組みには、ページをファイル
名やタイトルでリンクしたり呼び出したりせずに、各ページに固有のid
をつけて、そこを参照してリンクをつけるという方法がよく使われてい
る。

ページをidで管理し、リンク先のURLやリンクテキストを呼び出すという
仕組みにしておくと、リンク先やリンクテキストが万が一変わった場合
でもページを書き換えずに済み、リンク関連のわずらわしい作業からデ
ザイナーは開放されるのである。


以上、この３つが制作用CMSに最低限必要な機能ではないかと思える。基
本的には今までしてきたウェブ制作の中で不便に思った部分を効率化出
来るように置き換えればいいのではないかと思う。

次回は「実装すると便利な機能」をお送りします。



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

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

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

  ↓
 mailto:designwedge@karadesign.com



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

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

((！)) 

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月２回発行のご案内です。
現在１１日と２６日の発行を予定しています。１１日発行予定号では
サイトデザインのレポートとモバイルデザイン関連＋α、２６日発行予
定号ではニューストピックとウェブアプリケーション関連のデザイン＋
αという感じになっています。

ウェブデザインの探求を目的に始まったDesign Wedgeですが、これから
もその方針は変わりません。今後は、アドバンスドな方向に向かいつつ
も、わかりやすく伝えるということに力を入れていきたいと思います。

＋α部分では、今まで散発的にやってきたコーナーなどがはいったり、
はいらなかったりする感じになります。

 - - -

リーダーズリンク、引き続き随時募集中です。現在も募集してますんで
是非申し込んでみてください。サイト名とＵＲＬ、サイトの紹介コメン
トのみ必須です。

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

 - - -

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

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

 → mailto:dwml@karadesign.com

 - - -

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

 → mailto:designwedge@karadesign.com



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

   +05 編集後記
       ￣￣￣￣

昨年４回に渡って取り上げたブラウザプラグインの特許訴訟問題ですが、
どうやら特許侵害の可能性が出てきた結果になっているようです。今後
の動向を見守っていきたいと思っています。IEの仕様変更に関する正式
な発表などが出たら、また特集を組む予定です。

 " プラグイン特許訴訟--米連邦裁：「MSのIEブラウザはやはり特許侵害」 "
 ( http://japan.cnet.com/news/media/story/0，2000047715，20063699，00.htm )


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


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

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 現在の購読者数：7800人
   +04 Design Wedge公式ページ：
       http://www.karadesign.com/designwedge/
       登録・解除はもちろんのことバックナンバーも見ることが出来
       ます。
   ---
   +05 お便りはこちら：
       mailto:designwedge@karadesign.com
       感想・情報提供・お問い合わせなどはこちらまで。お便り待っ
       てます。
   ---
   +06 配信：
           + まぐまぐ
             ( post  ->  magmag )    id:0000005412
             ( http://www.mag2.com/ )
           + Pubzine
             ( post  ->  pubzine )   id:225
             ( http://www.pubzine.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-2003  KaRa designstudio
       許可無く転載することを禁じます。参照としてのバックナンバー
       へのリンクや引用は自由です。

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

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

       " 仕事場に最近ようやく光ファイバがやってきました。 "
       ( http://internet.watch.impress.co.jp/cda/news/2003/12/26/1640.html )

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