VERSION510 - sky-cloud pictures

[SESSION-1] Flash CS3をPhotoshop、After Effectsと連携させよう!
サブリン　さん　(株式会社ロクナナ、アンカーテクノロジー株式会社)

新しくでたFlash CS3とPhotoshop CS3、After Effects CS3を連携させて高レベルのFlash作品を作ろう、というお話。

まず、Photoshop CS3の起動を初めてみました。はっや！
CS2とはえらい差ですね。やっぱりIntelMacユーザとしてはほしい・・・。

続いて、実際の作品を見ながらどういった素材の使い方をしているか(jpgやpng、ムービー)などを解説していただきました。FINAL FANTASY VII ADVENT CHILDRENの.flaファイルも見せて頂きました。貴重ですね。笑

僕はFlashもAfter Effectsもやったことがないので圧縮やエンコードなどの詳しい内容はわかりませんでした＞＜
ですが、Flashのビジュアルにこだわった画面がどのように考えて作られているかというお話は、Flashでも一枚の画面でもデザインをする際に共通していると思います。参考になりました。

さらに、PhotoshopとFlashの連携のお話になりました。

CS2ではあまり連携がとれてなかったらしく、その点でFireworksの方がよかったそうです。(同じMacromediaの製品ですしね。)今回CS3になり、優秀なインポータがFlash CS3に搭載されたおかげでPhotoshopのレイヤーごとに細かな設定をしてFlashにインポートできるようになっていました。これは相当便利になったみたいですね。
このインポータのためだけにCS3にアップグレードしてもその価値はあるとおっしゃっていました。

僕の場合、Photoshopは豊富なレイヤー効果があることが魅力だと思います。ですのでFireworksを使ったときこれが使えなかったのが一番の不満でした。逆にオブジェクトの扱いはFireworksの方が便利だと思ったのですが。

Fireworks CS3ではこれらの効果をすべてインポートできるそうなので、品質が必要なパーツはPhotoshopやIllustratorで作っておいて、レイアウトはFireworksというワークフローをとれば効率的に作業ができそうな気がします。まだもってないけども。orz

最後に、関係ない話だけどAfter EffectsとかLightroomのウィンドウってなんで黒いんでしょう？特別だから？

[SESSION-2] アクセシビリティ? やってやるって!!
植木 真　さん　(株式会社インフォアクシア)

CSS Nite in Nagoya 2007(自分が書いたレポートへのリンクです)でもお話された植木さんのセッション。

このときオオトリだった植木さんですが、時間がおしたためにかなり巻きでお話されてもやもやされていたそうです。笑
今回2時間たっぷりの時間と共に名古屋に帰ってこられました！

お話の流れとしては、

1. Flashのアクセシビリティ
2. アクセシビリティとは?
3. Web標準/SEOとの関係
4. 明日からすぐに使えるTips
5. チェックツールの使い方
6. まとめ

という盛りだくさんな内容でした。一部CSS Nite in Nagoya 2007でお話しされた内容と共通している部分もありました。気になった点をピックアップして書きます。

Flashのアクセシビリティ

Flashのアクセシビリティの確保は、そのコンテンツにより難しいことがありますが、最低限タブインデックスと代替テキストはいれておきましょう、というお話でした。

アクセシビリティとは?

ユニバーサリティ=「いろいろな使い方ができること」が重要だとおっしゃり、Webコンテンツはさまざまなメディア(紙、ビジュアル、音声、点字など)に替えることができます。つまり、アクセシビリティを確保するということは、これらのあらゆるケースでも十分サイトを閲覧できることであるということです。

そして、実際の盲目の方や弱視の方がブラウジングしている動画をみせていただきました。これほどわかりやすい例はないでしょう。

音声対応については、Web標準という波もあって結構知られていると思われますが、弱視の方への配慮、特に背景と文字や画像とのコントラストが低い場合があります。(うちのサイトも足りないですね。)

先ほどの弱視の方は画面の色調を反転した状態で閲覧されていました。Macをお使いの方は「Command + Option + Control + 8」を入力してみてください。おそらくMacの画面の色調が反転されるはずです。少なくともこの反転された色調でも十分コントラストがとれている必要があるということですね。

明日からすぐに使えるTips

まず、ページタイトルのお話をされました。

ページタイトルとは、音声ブラウザ・スクリーンリーダーが最初に読んだり検索結果ページで一覧表示されたりするものであり、サイトの内外で、他と区別がつくことがページタイトルに必要な条件であるとおっしゃいました。

これを踏まえると「ページタイトル」 + 「サイト名」がよいのでは、とのこと。このページは逆ですね。

さらに見出しの話になったのですが、少し前の話題で<h1>を複数使用するという意見がでていました。植木さんは<h1>はページに一つだけとおっしゃっていました。
これはどれがいいんでしょう？もちろんそのサイトの構成を考えて適宜マークアップするのがよいのでしょうが、うむむ、迷ってしまいます。

• カラクリエイト：「両方がh1」というのはh1要素が複数という意味
• securecat's exblog : Re: 見出し要素に関する議論

つづいて、リンクのお話。一気にまとめて植木さんの法則。

リンクのラベル(アンカーで括られた文字列)
= リンク先の大見出し
= ページタイトル
= パンくずリストの現在位置

このようにすれば、ユーザが迷いにくくなり、アクセシビリティにもよいですね。これをなるべく目指すとよいとおっしゃっていました。
さらにイメージの代替テキストのお話に続きました。

チェックツール

会場の誰かのサイトを祭りあげて例にして、実際のチェックの様子をみせていただけるはずだったのですが・・・時間の都合上残念ながら割愛･ﾟ･(ﾉД`)･ﾟ･｡

植木さんが使われていた、上で述べたようなテキストと背景のカラーのコントラストをチェックするツールはかなり便利そうでした。IE専用っぽかったですが。
懇親会で聞いた話によると、現在Firefoxのアドオンに移植されているそうです！

まとめ

詳しくは後日アップされる植木さんのスライドをご覧ください。

本当にかなーり濃い内容で、満腹って感じでした。

タイトル、見出し、リンク、代替テキストなどについて、いくつかの例からどれがいいかをみんなに質問し、植木さんが正解を出すというスタイルはとてもおもしろかったです。もっと色々な要素について議論してみたいですね。WCAN mini Markup vol.3でやりますか?笑

そんな植木さんは明日からWeb標準の日々で講演されます。
懇親会が終わったらそのまま東京に帰るそうです。すごいスケジュールですね。汗

懇親会

世界の山ちゃんにて40名ほどで懇親会。非常に楽しかったです。

席がちょうど植木さんと同じになったので、先ほどの<h1>の疑問をぶつけてみました。

確かに仕様書としては間違っていないけど、自分は<h1>は一つかなぁ、だそうです。複数派?の意見にも興味があるらしく、あとでその記事みてみるよ、っておっしゃっていました。

他にも初めてお会いした方々と色々お話できました。何回も「君学生じゃないでしょ」って言われました。汗
久しぶりに飲み会って感じで楽しめました！

今回のWCANにいって本当によかった。落ちていたモチベーションはかなり復活できたし、生き生きできた、って感じです。しばらく本業(学生)に集中しなくてはいけませんが、どにかくがんばろう。

関連記事

公開され次第追加していきます。

• [開催情報] WCAN 2007 summer
• [報告] WCAN 2007 summer
• [SESSION-1] Flash CS3をPhotoshop、After Effectsと連携させよう！
• [SESSION-2] アクセシビリティ？　やってやるって!!