Web-ContentsSketch

ここ最近、GoogleアラートでXHTML関連の話題でHTML5の情報が送られてくるな〜と思っていたら、

■W3CがXHTML 2の策定打ち切りを決定、HTML 5の標準化に注力へ

■W3C，マークアップ言語「XHTML 2」を「HTML 5」に統合へ

■5分で把握するHTML5 - Google Developer Dayセッションリポート


■グーグルが賭けるHTML 5の未来

という訳らしい。
個人的にはマークアップはXHTMLから入ったけれど、Google依存症なので、HTML5がイケテルならGoogleとともに歩みたいですね、そっちを。

以前から、HTML5とXHTML2の2つの流れが、、、みたいな話はマークアップ関連の本とかでも紹介されていて、2010年には草案になるらしい。
ちょっと調べてみるがけでいろいろ情報が出て来ます。

• ●HTML 5 ― HTML 4 からの変更点



• ●HTML5 で試しに Web ページを組んでみた - VERSIONFIVE



• ●HTML5.JP



• ●HTML5の新要素



• ●HTML5が話題になっているので試しに書いてみた。｜CSS HappyLife

いつも参考にさせていただいてるCSS HappyLifeさんの記事とかは見ていたのですが、本格的に調べたのは初めてかも。

・Googleがイケテルと判断している(^^;
・javascript関係とかインタラクティブな動き、動作がより取り入れやすい。というか「HTML5はアプリケーションプラットフォーム」らしい。
・2次元のベクターグラフィックを扱う「Canvas」とかでリアルタイムに動かせる？なんかスゲー予感。
・videoタグとかすげーっす。ナナメ、回転とかCSSで制御できるのね、、、。
・headerとかnavとかsectionとかfooterとかfigureとかarticleとか、、、いままでidやclassに与えていた名前と役割がタグになっていて作りやすそう。
・互換性は大丈夫かも、、、。

まだまだ、いろいろ斜め読みの状態ですが、
マークアップに関して言えば、今までidやclassで無理矢理？表現していた部分がタグとして明確化されたのが良いですね。構造化しやすいかも。h1-6もhxになってるし〜〜。
あとはプリケーション的な、動的な部分をどれくらい実践できるか？この辺はプログラマな方達のほうがなじみやすいのかな？私はデザイナーなんです、ついていけるように予習？しなきゃだめかな〜？

とりあえず、忘備録。まだまだ今のブラウザ状態とHTML5の技術情報だとレイアウトおかしかったりするので、テストで組んでみながらゆっくり移行できると面白いかも〜。
HTML+CSS+JSというDOMな感じはそのままなので個人的には一安心。

あとはHTML5って普通に今までみたいに静的HTMLだけ作っていていいのかな〜？とか、やっぱ動的なタグ（videoやcanvas）とかをきちんと使いこなしてこそ移行する意味ってあるのかな〜？とか、が今日の感想でした！

昨晩のフットサル練習は、相変わらず10秒キープとドリブルキープの練習が楽しかったな〜。
でも、やっぱあの体育館は足がつりそうになる、、、、。

おかげで、いつもの勢いで切り返しやキックフェイント、ディフェンスができない。
ついでにシュートも強く打つとつるorz

ん〜〜。
シュートチャンス2回とも、決定的だったのに外したし、、、、、。


セーブしたからか、パスさばきが多い紅白戦でした。（おかげで今日疲れてないです）
ついでに、いつもと違う狙いのフォーメーションだったので、頭ばかり疲れた、かなぁ。

やっぱダイヤで、ピヴォ当て（ポスト）をしたいですね。これは当てる方（アラ／フィクソ）でも当てられる方（ピヴォ）でもどっちでも良いです。

最近はキープやルックアップが落ち着いてできるので、もう少しドリブルで仕掛けたりしても良い状態にはなってきたのかな。

単純なインサイドのパス、トーキック、ボールキープとルックアップが楽しくなって来ているので、もっと磨いていきたいですね〜〜。

設計者とデザイナーとコーダーと高品質なサイト | Takazudo Clipping*

いつも情報デザインとビジュアルデザインを分けてDTPな人に教えたり、社内マニュアルへの言及も行っているのですが、上記記事はとても参考になりますね。

ウチの会社の場合だと、マークアップ／コーディングできる人間が自分以外いない(^^;ので
自分のスタンスとしては、企画書を書く時もあれば、ビジュアルデザインとマークアップを行う案件もあり、DTPデザイナがビジュアルを担当するときは、各素材のフィニッシュ（これしないと全然良くない、てことが多いです）とマークアップ／コーディング。
上流工程から下流工程までいろいろやっています。

そろそろ今までの実績から、もっと高品質を目指す環境を「外」か「内」に求めないといかんよなぁ、とひしひしと感じています。

また、ディレクター（プロデューサー／プランナー／設計者等も含む）とデザイナーとマークアップエンジニアの三者のクオリティでサイトのクオリティになる。

上記記事のNEXT STEP以降の内容もまさにその通り。

各工程の担当のステップアップ要素も同意。
特にデザイナーなので

引用//
デザイナーは、情報デザインという観点で突き詰めていけば、構造の設計にかかわっていけるし、上で挙げたUIも設計者に提案できるし、Flashができれば、情報設計の面でもビジュアル的な表現の面でも、もっと幅が広がる。
//ここまで

これ、本当にその通り。情報デザインというかコンテンツの構造化ができれば、その時点で情報のプライオリティが決定されているはずなので、これはまじめにWeb以外のメディアのデザインにも使えると思うんだけどなぁ。というか、構造化できると、デザインしやすくなると思うんだけど。

んでもって、Webでどういった表現ができるのか。今ならFlash使わなくてもできるモーション表現も多いし。機能も多い。一からそれを作ることができなくても、内容を理解してる、カスタマイズできる、程度でも、すごくビジュアルデザインが変わって来たりする。
DTPデザイナでなんだけれど、この前は、こういったことができる、できない、こんなのもあるよ！という話をしたら、本当に素敵なビジュアルデザインが出来上がって来ました。やっぱその辺を知りたい／知りたくない？でクオリティの差が歴然とするよなあと。

自分としては、今のままでは器用貧乏になりそうとも感じているし、次のステップとしていろいろな意味でベストな選択ができるようにしたいです〜〜


追記：上記記事コメント欄よりこんな記事もありました！情報構造設計と費用対効果 - Identity Not Found
関連情報として情報アーキテクトに関する役職あったほうがいいんじゃないか？という話。
住宅の例えや論旨、こちらもそうだよなぁと納得の部分が多いですね〜〜。

背景画像に凄くこだわったWebデザイン15 | CSS Lecture

やはり、ビジュアルのクオリティ高いサイトは観ていて気持ちいいですね。でも使いやすいというかインタラクションンの部分も犠牲になっていないし。
あと掲載されてるサイトは、メタファがいい感じに組み込まれたデザインであったり、グラデーションのクオリティが高かったり。
当然素材レベルでの作り込みの良さも素晴らしいし、ページレイアウトも素晴らしいのではないでしょうか。

なんだろう、アタリマエに美しい、としか言いようの無いお手本になるDesignですね。良い刺激になりました〜。

以前からいくつかの紹介記事で見ていたCSS-Tricksより、サンプルダウンロードできるjQueryプラグインをご紹介。
この人すごいっすね。Designもマークアップも、インタラクション、jQueryベースのプラグインも作ってる。ほんと、すげー。というか目標としてこう在りたいなー。と思わせます(^^;

今はこういったものをいかに説得力を持ってサイトに実装できるか、理解してカスタマイズできるか、で精一杯〜〜。

●Moving Boxes [Demoはこちら]

縮小したグループ要素が並んでいて、ボタンを押すと、スライドしてグループ要素が拡大。要素はdivでくくったり。当然画像やhx、テキストリンクなんかもOK。カスタマイズもいい感じ。スライド幅や拡大率なんかもjsの方でいじれます。
実装予定アリ。

●GarageDoorMenu [Demoはこちら]

メインナヴィゲーションで使えそう。ボタンのロールオーバークロスフェード（アニメーションっぽいやつ）もキレイで好きなんですが、こんな感じにロールオーバーでのアニメーションも面白い。シャッターの開く速度とか当然カスタマイズ可能。
サンプル作ってみたのですが、良いですね。メインナビとして実装が面白そうです！

●FeaturedContentSlider [Demoはこちら]

こちらもスライダー＋拡大画像表示プラグイン。当然HTMLの表示も可能。写真＋簡単な解説かhtmlをエリア内に表示するか。以前実装してみたcoda-slider.1.1.1.pack.jsも使ってますね。そこからこんだけオリジナルな感じで作れちゃうのもすごいな〜。ビューワーっぽくflash無しでクールに？実装できそうなプラグインだと思いました。

●Fade Out Bottom [Demoはこちら]

以前からキレイにやりたかったこと。エリア内スクロールの境界線をうまくぼかして、文字がフェードインしてくる感じができたらなーと思っていました。
そんなページに使えそうなプラグイン。



他にも小技というか細かい演出、心地よさに良い影響を出せそうなプラグインも。

●Dynamic FAQ Page [Demoはこちら]
アコーディオン系の振る舞いを実装できるFAQ.表示プラグイン。

●RoundedCorner [Demoはこちら]
角R表示プラグイン。サンプルの上部はCSS、下部はJSで丸くしてます。印刷対応を考えるとCSSの方が良いかもと思ってますが、JSだと、装飾用のdivとか入れなくて良いので作りやすいですよね。
アコーディオン系のFAQ.表示プラグイン。

●Transparent PNG Fills Pack [Demoはこちら]
コチラは様々な透明度のPNGファイルのセット。実装例のhtmlも付いてます。

---

サンプルを見て思うのは、HTMLとCSSとJSで構造化してあって本当にカスタマイズしやすい、実装しやすいということ。そして、やりたいなーとか思っている動きができること。Web Designerのサイトとしてお手本みたいな、クリエイティブな刺激にあふれたCSS-Tricksはこれからも要注目で行きたいと思ってます！