第一回 ： 構造化文書を見直してみよう
新テーマということで、今回焦点をあてたのが【構造化文章】です。
昨今では、RIA(リッチインターネットアプリケーション)ばかり注目され、いつだって見栄えや動きばかりに注力されがちなweb業界ですが、形式だけのアクセシビリティや資本主義を盾にして、非健常者にとって辛いwebサイトが増え続けていている事実には耐え難い憤りを感じています。
もし、ご自身のお子様や伴侶がなんらかの病気で目が見えなくなってしまったとしましょう、仮にネットユーザーだった人間が急にパソコン端末から離れるでしょうか?
いままでお洒落をしていた人がネットの通販で商品を買っていたとします、おそらく何らかの形でそのサイトにアクセスしてしまうとは思いませんか?それが人ってもんじゃありませんか。
クライアントはもっともっと学習するべきだと思います。ユーザーが健常者だけでないことを。もしもうちょっと脳みそに余裕があるのならば、ユーザーがどういった環境でそのサイトを閲覧しているのかも考えてみて欲しいです。
乱暴かも知れませんが、派手なことばかりをwebに求めるバブル世代によって、いつだってクリエータは泣かされてきました。
本当にその動き必要あるのか?
はたまた、ただ思いつきで言ってるだけじゃないのか? と。
さぁて、堅苦しい話はここら辺で抑えて、音声ブラウザとかも考慮して構造化文書について書いてみます。
以下の画像をご覧ください。
よくあるパターンのデザインです。えー言葉で説明するならば、「矩形のボックスに横一の見出しがあり、その左下にそのボックスいっぱいになるような縦長の画像（矩形ボックスに対して幅４割）、画像の右側にはその説明、説明の下にはソレに関連する情報へのリンク」がある状態です。
これをどうマークアップするのか考えて見ましょう。
やろうと思えば全て<p>（パラグラフ）で解決もできますが、それは構造化されていません。
何を見出しと定義し、画像がどんな意味をもっていて、画像には非健常者に対してのAlt属性での説明をし、本文にあたる部分ではこの見出し定義に対する説明があるわけで、それをマークアップするだけなのですが、思いやりなんすかねぇ、webって。なかなかソレができない方が多い。最終的にデザインしたとおりになることを終着地点としてしまうが為、マークアップがないがしろにされがちです。
てことで、次回はマークアップと、CSSの作例をいろいろなパターンで書いてみようと思います。
最後までお読みくださいましてありがとうございました。
photoshop 調整レイヤーについてのまとめ
「色調補正」のためのレイヤーです。
トーンカーブ、レベル補正、色相・彩度、カラーバランスなどの多くの色調補正機能は「調整レイヤー」で利用が可能です。
元画像への直接編集との違い
・ピクセル値を変えることなく色調補正できるので、画像の劣化を最小限に留めることができる。
・何度でもやり直しができる。
元画像へ通常レイヤーにて直接色調補正をかけたものでも、やり直すことができる。
ただし、”やりなおし”、”ヒストリー”、もしくは画像を最後に保存した状態に戻す”復帰”で戻る、という方法となる為、photoshopを一度終了させると、戻れない。
・いくつも重ねることができる。
・選択的な編集ができる。マスクを使って画像のどの部分に調整するのか制御できる。
・画像のファイルサイズが大きくなる。（デメリット）
作成方法/photoshop CS3の場合
メニューバー＜新規調整レイヤーから、使用する色調補正の種類を選択すると作成できる。
使えるwebデザイン データベースサイト
「くっそ～、なんかいいネタねぇのか！！」なんてwebデザインのネタが詰まった時に使えるサイトをご紹介いたします。
- DesignLink Database
更新頻度も高く、デザインテイストや、キーカラーで検索できる機能が強力です。機能性いいせいかサイト自体がちょっと重め。
- WEB de DB
ユーザビリティが高く、構成がシンプルなサイトなので、利用者はいっぱいいるはず。こちらもカテゴリ分けや、カラーで絞れるので便利。
- Weblog Japan
サイト自体がダーク系の色でデザインされており、サムネールを引き立たせているのが特徴かな。サムネールでのインパクトって大事だし、このサイトのデザイン自体がすごくレベルが高いと個人的には思います。そんなセンスのある方のデータベースですから、羅列されているデータにも安心感があります。（個人的に）