スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
『WEB標準の日』 レポート8
 今回は株式会社インフォアクシア植木真さんの『Web標準、SEOにも通じる"攻め"のアクセシビリティ』です。

攻めのアクセシビリティには何が必要か?
正しくマークアップをすること
代替テキスト、コンテンツを提供すること

この二つのことにより、サイト制作者(企業)が伝えたい情報を100%ユーザーに伝えられる

100%伝えるための手段として効果的なのが、WEB標準に準拠したデータの作成なのである。
そうしてソースコードを見れば、そのコンテンツの情報・構造・意味が理解出来る状態にすることが大事である。

そのためには(X)HTMLの正しい記述が何よりも大事になってくる。
・正しく見出し・段落・リストなどをマークアップする。
・titleを工夫してつける。サイト名を全部に付けるのではなく、そのページのタイトル+サイト名にするといい。
例)サイト名:SOCCER。ページタイトル:世界の名プレイヤーFW編ならば、タイトルはこのように付ける。「世界の名プレイヤーFW編・SOCCER」
・画像には必ず代替テキストを記述する。
・単語の途中で改行や空白文字を入れない。
・リンクを貼る際、「詳しくはこちら」などどリンクを貼らずに、"○○○のホームページへ"このようにする。

正しくマークアップしてアクセシビリティを確保することで、必然的にSEO対策になる。

最後に植木さんが提唱していた言葉で終わりたいと思います。
「これからのWEBは、とにかくWEB標準に準拠することが大事。
どんな制作者/運営者であっても、WEB標準やアクセシビリティを実践できないプロは使えない。
Webは、常に進歩していて、もっとユーザーが来るように、もっとアクセシブルかつクリエイティブにならなければいけない。
とにかくすべてが速くなっている。」


植木さんのスライドのダウンロード
音声のダウンロード
スポンサーサイト
『WEB標準の日』 レポート7
 さて今回は株式会社ロクナナの中村京介さんと河内正紀さんによる『すぐに役立つWeb標準テクノロジーの効率化テクニック』です。

 作業の効率化を図るにはどうしたらいいのか?

ミスを減らす

これに尽きると思います。ミスを減らすことで、その空いた時間をクオリティの追及に回すことが出来る。

XHTML

 その為には、XHTMLを書いていく段階から、ID/classの名前のつけ方や文書型宣言の統一などを図り、制作チーム内の誰が書いてもXHTMLの構造が均一になることが望まれる。
 それにより、単一のサイトの効率化が後に複数のサイトの効率化に繋がっていく。

CSS

CSSを記述していく時、1枚のCSSに全てを記述するのではなく、複数のCSSに分けて記述していくとメンテナンスがし易い。

カテゴリ単位…サイト内で共通の部分とページごとに異なる箇所のCSSを分けて作成していく。
この作成の利点は、TOPページとカテゴリページでデザインが大きくことなるサイトなどに対応しやすいが反面、スタイルの検証がしにくかったり、同一スタイルの重複が起こる可能性が出てくる。

モジュール単位…CSSをモジュールごと(header部分、navi部分、footer部分など)に分けて作成していくやり方。
この利点は複数のプロジェクトで共通する部分の再利用が可能になるし、スタイルの検証や修正時間の短縮を図ることが出来る。

JavaScript

・再利用が可能
・制作効率を高めるのに非常に有効

XHTMLやCSSで行おうとすると、かなりソースコードが増えてしまうようなモノでも、JavaScriptを使用すると非常に簡単なソースコードで済ませることが出来る。

例)ロールオーバーやTableを使用して1行ずつカラーを変更するときなどに便利

お二方のプレゼン資料は見ることが出来ます。JavaScriptを使用したサンプルなどもご覧いただけます。
音声ファイルはこちらからどうぞ。
『WEB標準の日』 レポート6
 オーガナイズしていく時に注意すること

情報の設計図を作成する
共通言語を作成する
共通言語を使用する

情報の設計図を作成…サイトマップのようなもので、出来るだけ詳しく、全体を見渡せるようなものを作成すると便利

共通言語を作成する…使用する属性や使用言語などを決める。加えてファイル名を共通化しておくと便利。
ボタンに使う画像なら「btn_ファイル名.拡張子」などにすると誰の目にも分かりやすい。
cssファイルの頭には、タイトルや作者名、作成日などの情報を記述しておくと便利。

共通言語の使用…会社内などのコミュニティ内でのみ共通の言語を使用してもよいが、「microformats」などの簡単で柔軟性があるものを使用してもよい。
「microformats」の使用言語としては、hCalendar(予定)、hCard(プロフィール)、hReview(レビュー)、re-license(ライセンス)、rel-tag(タグ)などがある。このうちの幾つかはyahooやgoogleで使われている。

まとめ
常に全体を見渡し、共通のルールを使い、柔軟な頭を持ってサイト制作に望むのがよい。DreamWeaverを使ったスニペッツの簡単な作成手順などを、教えて欲しかったです、残念。

長谷川さんのスライドがご覧になれます。
音声はこちらからダウンロードできます。
『WEB標準の日』 レポート5
 さてさて今回は長谷川恭久さん(COULD)の登場です。『WEB標準テクノロジーの上手なマッシュアップ』という講演テーマでした。メガネ姿の長谷川さんに場内騒然。

最初に「Take Control」という文字が目に飛び込んできました。インパクトかなりあります!

 コントロールしたいと考えている人は2パターンいるとのこと。サイト利用者サイト製作者・開発者です。サイトの利用者は、自分のパソコンで見るために文字サイズやレイアウトをカスタマイズします。しかしサイト製作者は、自分が指定したとおりの文字のサイズとレイアウトで、サイトを閲覧してもらいたいのです。そこで格闘があります。

 ではサイトを作成する時はどうしたらいいのでしょう! そこで重要なのは『Web Standards Thinking』という考え方です。
 
 なぜWeb Standardなのか? 利点は2つ。

共通言語を用いる
拡張性がある

共通言語というのは、W3Cが提唱しているものや、クライアント間でのもの、友人同士の共通のものなど様々あります。

拡張性というのは、CSSと画像を変えることで簡単にサイトのデザインを変更することが出来るという利点があります。今までのTableレイアウトでは、デザインを変更する時には全て一から作り直さなければなりませんでした。その点Web Standardは融通性があります。

Webサイトを作成していく時には、パターン化するのもいいでしょう。パターン化するものとしては、マークアップファイル管理があります。

ここでファイルを管理するもので、長谷川さんは「スニペッツ」の利用を提案しておられました。自分はサイト作成していく時、この機能を使ったことがなかった(頭からCSSを記述していた)ので、とても興味深いお話でした。この機能はDreamWeaverにもあります。

スニペッツの利用の際は

ページをパーツごとに分けておく
必要な属性などはあらかじめ記述しておく
柔軟性のあるものにする
ID/class名は意味の通じる英単語で記述する
コメント


こうしておくことで、後々色々なサイトを作成するときに再利用が可能になるので便利である。

今回のテーマも2回に分けたいと思います。続きはまた明日。
CSS Nite.10
 本日、CSS Nite.10に参加してきました。
今日は仕事があまり忙しくなかったので、早めに切り上げ、銀座アップルストアへ! 1時間前に到着したのですが、既に行列が出来ていました… 『CSS Nite』大人気です。
 今日のゲストは神崎正英さん。「フォーマルで行こう!」 というテーマで、HTMLとXHTMLでのマークアップの仕方や要素名の名前の付け方などのプレゼンでした。非常に興味深いお話でした。レポートをまとめて、後日アップします。
『WEB標準の日』のレポートの続きは、明日にでも。
『WEB標準の日』 レポート4
 昨日の続きです。

制作前に決めておくこと
1.更新作業はどちら(サイト制作側かクライアント側)が行うのか?
2.クライアントが使っているソフトウェア・ツールは何か?
3.ドメインの取得、サーバーの保守・管理はどちらが行うのか?
4.WEBアプリケーションの保守・管理はどちらが行うのか?
5.アクセスログ解析とデータレポートなどはどちらが行うのか?
6.ホワイトリストの作成

ホワイトリスト…利用できる要素・属性(値)をまとめたもの。これに加えて、Flashのembed要素の使用をどうやって避けるか? JavaScriptは使用するのか? など細かな点まで決めておく必要がある。
 そうしておくことによって、のちの制作がスムーズに運ぶようになる。

制作段階の注意点
製作段階に入ったら、バリデーション作業を行う必要がある。
無料ツールとして有名なのはこの3点。
1.W3C Markup Validation Service
2.W3C CSS Validation Servide
3.Fujitsu WebInspector

Bulletproofテストの実施
~Dan Cederholmの提案(木達一仁さんによるMYCOMジャーナル:@media2006レポートより)~

1.10秒間ユーザビリティテスト(CSSを無効にした状態で理解可能かを確認する)
2.画像を非表示にする(それでもコンテンツを読解できるか確認する)
3.マークアップとスタイルシートの文法チェックを行う
4.ディグダグテキストテスト(ファミコンのソフト「ディグダグ」でプレイヤーがモンスターをポンプで膨らませるのになぞらえている。文字サイズを大きくしてみるテストの意味。)

 最後に、WEB標準=XHTML+CSSとの考えがある。本当にそうなのだろうか? 確かにこの技術を使うことでの利点がかなりある。でもWEB標準はあくまで制作時のツールの一つとして考えるものだと思った。
 クライアントはどのようなモノを望んでいるのか? ガイドラインやホワイトリストは用意したのか? こういった項目の一つとして考えるのがベストなのではないだろうか。そのように感じた講演だった。
『WEB標準の日』 レポート3
mashiko.jpg

午後のトップバッターは益子貴寛さん(サイバーガーデン)。講演テーマは『WEB標準を最大限に生かすディレクション&ガイドライン』でした。

1.WEB標準は「中長期的」が前提
初期投資としてはXHTML+CSSの方がコストが高いというのが一般的。しかしその後の更新作業やリニューアルではXHTML+CSSの方が費用を低く抑えられる。
初期投資をあまりかけられない場合は、Tableレイアウトという手段もあるが、クライアント側に「中長期的」な視野を持ってもらい、WEB標準のメリットをきちんと伝えることが大事。

2.中長期的の経済効果
最近のユーザーは「検索エンジン」からキーワードを打ち込んで、ページにたどり着くことが多い。この点から検索結果の上位に表示されることは、ビジネスチャンスを獲得出来るチャンスが生まれる。

3.アクセシビリティの重要性
人口の10%前後が何らかの障碍を持つといわれています。
アクセシビリティ/ユーザビリティの欠如で、ECサイトなどで商品の購入を断念する人が出たとする。これは機会損失(opportunity loss)になる。これは絶対に避けなければならない。

4.しかし時間が掛かる
しかしWEB標準が浸透するまでには、時間が掛かる。現在WEB標準に興味を持ち、積極的に準拠したいと考えているデザイナーが、数年後にディレクターなどになった時に、WEB標準は本当に浸透する。
現在47都道府県のうち22道府県でCSSレイアウトが取り入れられている。

このテーマは2回に分けたいと思います。続きは明日。
『WEB標準の日』 レポート2
 続いてはアドビシステムズ株式会社プロダクトスペシャリスト 林岳里さんによる特別講演『The Spry framework for AjaxとWEB標準技術』でした。
 『The Spry framework for Ajax』とは、HTML、CSS、JavaScriptの基礎知識があるWEBデザイナーが簡単に使えるように考えられたJavaScriptのライブラリ集のことです。

 spryの利点としては、次の3点が挙げられます。
1.クロスブラウザのフレームワーク
2.HTMLに追記するコードは最小限で済む
3.WEBデザイナー用のJavaScriptライブラリ(Ajax,Widgets,Effects)

 現在サンプルとして、『PhotoGallery』『Product Table』『RSS Reader』がダウンロードできます。サンプルはAdobe Labsからダウンロードできます。
 ただしマニュアルはまだ英語版しか提供されていないそうです。でも英語版のマニュアル(←そんなに難しくないと林さんはおっしゃっていました! ホントかなぁ…)に沿って読み進めていくと、それほど時間がかからずに、作成できるそうです。
 とりあえずどんなものなのか画面を見たいという方は、labs内のshowcaseをご覧ください。
 
 自分はリッチインターネットアプリケーションについての知識はほとんどないので、これを機会に勉強していこうかなと思いました。何だか難しそうな気がするんですよねぇ… 完全に個人的な意見ですが…

 林さんの講演の資料がダウンロードできるようになりました。音声ファイルのダウンロードも可能です。

ちなみにspryは、「活発な、元気の良い、すばしこい」という意味です。

 これにてレポート2終了!
『WEB標準の日』 レポート1
 『WEB標準の日』最初の講演は、木達一仁氏(ミツエーリンクス)の「The Right Tool for the Right job」でした。
 これまでどのようにマークアップ言語・スタイルシート言語、ブラウザが発展してきたかの説明が最初にありました。
 そしていよいよXHTML+CSSでのメリットの説明がありました。メリットは5つです。

1.アクセシビリティの確保
2.機械可読性の確保
3.通信帯域の節約
4.より簡易な更新作業
5.前方/後方相互性


でも今現在の課題も挙げられていました。

1.ブラウザ間での実装差異
2.高い学習曲線


・ブラウザ間での実装差異とは、IEと他のブラウザ(Firefoxなど)でのWidthの解釈の違いなどでした。
・高い学習曲線は、XHTML+CSSでのページの作成技術を習得するまでは時間がかかるということです。

確かにこの技術を取得するには、時間がかかります。最初は難しいと感じるかもしれません。
ですが、今後発表されるオーサリングツールやWEBブラウザは「WEB標準準拠を念頭において作成されていく」らしいので、今きっちりと身に付ける必要があると感じました。

なお後日、講演の際に使用したスライドは『WEB標準の日の公式サイト』で閲覧できるようになるみたいです。音声も配信されるみたいです。アップされ次第、お知らせします。

これにてレポート1終了!
WEB標準の日に参加してきました
 本日『WEB標準の日』に参加してきました。興味深い話が色々聞くことが出来て、非常に有意義でした。途中で眠ってしまった箇所もありましたが…
 レポートをまとめて、こちらのブログにアップしていきたいと思います。一日の内容を一つにまとめるよりも、各セクション毎にまとめてアップしていこうかなと思っています。
WEb標準の日~明日です~
 ついに明日『WEB標準の日』が開催されます。明日は終日六本木ヒルズです。
 丸一日勉強するなんて、久しぶりですよ。眠くならないかが心配です…
DTPデータの活用
 現在、このような話が舞い込んできている。以前に作成したDTPデータをPDAなどの携帯端末で閲覧できるようにするというものだ。
 XMDF(Mobile Document Format)制作というらしい…
基本的にはDTPデータにHTMLタグを挿入。そしてHTMLタグに「T-Timeタグ」なるものを追加して、XMLで編集して、それをXMDFに変換するみたいなんだけど…
 果たして上手くいくのだろうか…
Tableの使用
 久しぶりにCSSとTableを使ってデータの作成を行っている。しばらくTableは使っていなかったので、少し忘れてしまっていることに気がつく。
 以前のノートやら参考書などを見直してみないことには… 新しいことをやると古いものを忘れてしまっている…
強敵現る!
 う~ん、ムズカシイ… 今までは単純な構造化しかやっていなかったからなぁ。
 今までの中での最強の敵です。
 しばらく四苦八苦してみます。
 
Flash Videoを作成
 Flash Videoを作成してみました。スキンをカスタマイズしない単純なVideoなら、簡単に作成出来ました。
 デジカメで動画撮影して、パソコンに読み込んだらQuickTimeに変換されているので、それをFlashに読み込んで…
 あとはUIパネルからドラッグ&ドロップして、各種プロパティを設定すれば終了。動画作成にハマリそうです…
 けれど、撮影した時間が夕方で、天候が曇りだったこともあってか、色味が悪いんですよねぇ。
 天候のいい日に撮影し直さなければ…

ご覧になりたい方はこちらから
 
出力解像度
 セッターから出力されるフィルムは、黒い部分と何も印刷されていない(透明)な部分の2種類で表現されている。
 それぞれのフィルムを印刷の際に、カラーで印刷すると、それぞれの色の階調が出来る。

出力解像度2400dpiの場合
2400dpiの場合は、1インチの中に2400個の小さな点を印刷できる。点(ドット)のサイズは1/2400インチ=約0.01mmの大きさになる。

 階調を表現するには、網点と呼ばれる小さな点の集合を利用する。網点1つは、「ハーフトーンセル」という非常に小さなドットの集まりによって表現される。

ハーフトーンセル
ハーフトーンセルは。16×16=256個のドットで構成されたマス目があって、そのうちのいくつを塗りつぶしたかによって256階調の表現を行う。256個のうち半分が塗りつぶされたなら、50%を表現する網点になる。
東京ビッグサイトにて
 本日と明日の2日間、東京ビッグサイトにて『第13回東京国際ブックフェア』が開催されています。
 土、日は一般公開されていて、文芸書、実用書などの一般書からコミック、児童書、学術書、洋書などのあらゆるジャンルの本が割引価格で買えるそうです。
 ちなみに洋書はモノによっては、3割~8割引きで売っています。

→東京ブックフェアのホームページ

 同時開催として、デジタルパブリッシングフェアも開催されています。出版、制作物など、コンテンツのデジタル化・配信に関する最新技術・サービスが見られるそうです。
 
→デジタルパブリッシングフェアのホームページ

 興味のある方は是非!
CSS Nite9の『MovableTypeで行うWEbサイト管理』
 昨日、CSS Nite9の『MovableTypeで行うWEbサイト管理』(上ノ郷谷太一氏)の動画を見た。
 まめさんの『マメノメモ』でCSS Nite9でMovableTypeをテーマに講演があったのを知ったのだが… 気づいた時には終わっていました。
 しかし7月よりCSS Niteに『ヘテムル』がスポンサーについたみたいで、その講演が動画配信されています。ありがとうございます! 鷹野さん。すかさずチェック!
 その後、第二部の『DreamWeaverとMovableTypeの連携』(鷹野雅弘氏)の動画もチェック!
 MovableTypeでいろいろなことが出来るんだなぁ、というのが率直な感想。まだまだMovableTypeは始めたばかりだけど、少しずつ勉強していきます!
イメージセッター
 イメージセッターとは、RIPを搭載しているPostScript対応のモノクロプリンタのことです。
 一般的に2400dpi以上の高解像度での出力が可能です。イメージセッターでは、網点生成の管理もできます。管理の対象としては、出力線数、出力解像度、網点パターンなど様々です。
 セッターは精密な機械なので、設置場所、振動や摩擦、ほこりやレーザーの調整、現像液の調整などが定期的に必要である。

※dpi…(dots per inch)の略。1インチあたりどのくらいのドットがあるかを示す単位。
DDCPとは?
 DDCPによる色校正について
 DDCPとは(Direct Digital Color Proofing)の略。DTPの作業ではデジタルデータから直接色校正をとるDDCPが可能です。
 一般のプリンタよりも高性能で、CMYKのトナーを使用し、ドットゲインのシュミレーション機能を持ったプリンタのこと。

DDCPの利点
①フィルムを出力しないので、時間的・コスト的メリットがある
②刷版をとらないので、時間的・コスト的メリットがある
③従来に比べ安定したプルーフが作成出来るので、刷り具合による色のバラつきがあまりない

DDCPの欠点
①定期的なカラーマッチングが必要不可欠
②印刷用のインクを使うわけではないので、色の完全な再現は無理
③オーバープリントがトラップなどのチェックが完全ではない
④RIPが変わるとデータの解釈が変わるため、DDCPのRIPとイメージセッターのRIPが違う場合は、フィルムのチェックが必要

※DDCPによる色の完全再現は無理なので、色味をきちんと確認したいもの(カバーなど)は、従来通りフィルム出力をしてからの色校正が望ましい。
CTPとは?
 CTPとは(Computer to Plate)の略です。CTPを行うと、フィルム出力の工程を飛ばし、直接RIPから刷版を行えます。

利点
①刷版を飛ばすことが出来るので、時間的に余裕が生まれる。
②フィルム出力をして刷版をとる必要がないので、コスト的にも余裕が生まれる。
③露光時間の差によって大きさが狂ってしまう小さなドットも焼付けることが出来る。

欠点
①フィルム上での修正が行えない(ストリップ修正・流用フィルムの使用など)。
②DDCPをきちんと行える環境でないとカラーの品質が一定でない。
③出力コストは従来の刷版に比べ割高。
④印刷する機械によって版が違うので、フィルムほど汎用性がない。
CTP
 会社でCTP用のデータ作成を行っているのだが、面付けしたデータをPDF変換する際、何故だかエラーが出てしまうことがある。
 データ的には問題ないし、他のテーマはきちんとPDF変換出来るのだけれど…
 エラーメッセージには「フォントを埋め込む時にエラーが発生」と出ていた。特に変わったフォントも使っていないのになぁ。
 また明日挑戦してみることにします。
 
QuarkXpress6
 前回のQuarkにはEPS画像は貼れないということでしたが、QuarkXPress6からはEPS画像が取り込めるみたいです。
 OSXからの対応なので、OSX環境でのDTP作業ならば、Illustratorの保存形式を気にしなくてもいいのではないでしょうか?
 CSやCS2の透明効果を使っていた場合は、EPS環境で保存した場合、出力エラーが起きることがあるし… その場合ははAI保存してInDesignに貼りこんだりして出力していたし…
 バージョンアップしていくにつれ、やはり便利にはなっていきますね。
DreamWeaverを使ってのMT
CSS NiteのDreamWeaverを使ってのMT(MovableType)の編集をいう記事を見た。今現在はMovableType上で色々変更等をしていたので、使い慣れているDreamWeaverでそういうことが出来るのかと思った。
 早速試してみたいと思います。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。