WEBの最近のブログ記事
Saturday, November 22, 2008
カテゴリー：WEB,イベント,感想
先日19日、リクリと京都大学情報学研究科のインクルーシブデザインユニットとの共同主催で行ったイベント、「インクルーシブデザインワークショップ」が無事終了しました。
今回も快く会場を貸してくださった、デジタルハリウッド大阪校さんに感謝いたします。
インクルーシブ＝巻き込む
インクルーシブデザインとは何か？ですが、詳しくはインクルーシブデザインユニットの概要ページを参考にしてもらうとして、簡単に言うと、普段の身の回りに存在するデザインされた物・事の対象として、あまり積極的に取り入れられない障害者や高齢者、幼児の意見をメインストリームにインクルーシブ＝巻き込んでデザインすることです。
ユニバーサルデザインと一緒じゃないのか？って思ってたんですけど、ユニバーサルデザインは、ターゲットが誰かが明確でなくなり、具体的な解決が見つからなくなるとのことです。
ワークショップの流れ
ワークショップは、6~7人で作ったグループに分かれて作業します。それぞれにリードユーザとして障害をお持ちの方が入り、そして進行をつとめるファシリテータ、塩瀬先生の元で勉強をしてらっしゃる学生さんが入ります。
まずは、リードユーザさんにテーマに対しての質問をしていき、気になったことをどんどん付箋に書いていきます。
ある程度付箋がたまったら、アイデア出し。奇想天外でありえないと思えるアイデアでも、批判はしないことが大切とのことで、出て来たアイデアをイラストにしていきます。
次にイラストを基にプロトタイプを作成。プロトタイプは、できるだけ実物大で作成するのが大切だそうです。
そして最後に、プレゼンをするという流れです。
携帯電話をインクルーシブデザインする
今回はリクリとの共同主催ということで、webに近しい存在の携帯電話がテーマでした。
携帯のメニューやモバイルサイトをテーマにするのかな？と最初は思ったのですが、いきなりソフトの話をするよりも、まずは外側ということですね。
私のチームのリードユーザは、視覚障害をお持ちのS川さん［誰］。S川さんは普段から携帯電話をよく利用されていて、かつPCやwebなどにも詳しい、知識が豊富な方です。
目の前で初めて繰り出されるS川さんの携帯操作を目の当たりにして、我がチームは興味津々。
始めはどこに携帯を仕舞ってますか？という質問から始まったのですが、いつの間にやら、メールはどうやって？とかメニュー操作ってどうやってわかるの？…などなど、web人間らしくソフト面の話で盛り上がってしまい、脱線しまくり…。
残り時間あと１０分で、ようやくプロトタイプ作りに入ったのでした…。
イヤフォン内蔵なら良音質でいいんじゃない！
「イヤフォンなら雑踏でも聞こえやすいけど、わざわざ付けるのが面倒くさい」という点をフィーチャーして、それに耳に近い二の腕なら着信音が聞き取りやすいという意見も混ぜて、二の腕常時装着型イヤフォン内蔵携帯というなかなか近未来的？！な携帯電話になりました！
- 他にも電波の本数は音声読み上げされない→バイブレーションで分かるようにしよう
- 機種が変わったらその都度操作を覚えないといけない→任意のソフトがインストールできてカスタマイズできる
- 短縮電話はあまり使わない→動作のショートカットボタンに変えよう
という感じで、ソフト面も充実しております。
プロトタイプでは伝わりづらいですけど。
あとは、順次プレゼンをしていき、時間もオーバーしていたのでお開きに。どのチームも若干かぶるアイデアはあっても、まるっきり一緒ということもなく、個性あふれる携帯電話が誕生したのでした。
って正直に言うと、自分のチームの準備をギリギリまでしてしまい、大まかには聞いていたのですが、ちゃんと他のチームの発表を聞けてませんでした。すみません＞＜
やっぱり、ちゃんと時間通りにしないといけませんね…。
意識しないで会話できれば…
今回、初めて視覚障害の方とお話したり一緒に作業した感想は、目が見えないだけで何もかわらないんだなーと言う事でした。
まあ、当たり前じゃんと思うでしょうけど…。やはり実感しないとわからないものです。
ワークショップが始まる前に、塩瀬先生から「話に熱中するとコソアド言葉が多くなってしまうので、それだけは注意してください」と言われていたので、その点だけは注意して話していてもやっぱり、パーッ、ザーッなどの擬態語を使ってしまいました。難しい…。
でも！作業中、同じチームの西畑さんが、イヤフォンを耳に付ける動作と擬態語を使ったのですが、それまで一緒に会話をしていたことでS川さんにはちゃんと理解して頂けていたのが、一体感を感じれて嬉しかったです。
我がチームの学生さんK川さん［誰］と終了後お話したとき、どうやったら目の前のことを上手に伝えられるか意識してしまって上手に会話できなかったことを伝えたのですが、K川さんが意識してはいけない普通に喋りなさいっていつも言われるんですと仰っていたので、次回参加の際には上手に喋れたらいいな、と。
あと、他のチームの発表中もK川さんが、逐次他のプロトタイプの形状を言葉と携帯のモックをS川さんに持ってもらい説明していた姿が、印象深かったです。
自然とフォローできるってカッコいいですね。
次回は土日でwebサイト？
ワークショップというのは、自分から率先して動いてナンボなので、時間があっという間にすぎてしまい、もう終わっちゃった！もっとやりたい！という感覚でした。
今回は平日ということもあって、土日なら…という意見もあるとのことで…。なので、次回は土日にwebサイトのインクルーシブデザインワークショップができればいいなあ。頑張って協力していきますー。
ちゅーわけで、一仕事終えたので、のんきに渡米してきます。
coyummy
Monday, November 17, 2008
カテゴリー：CSS,WEB
右図のようなページがあったとします。
id「nav」を付加しているdiv内にあるナビゲーションのリストを、どのようにcssで表現しますか？
大まかに４つの方法。
書き方は色々あると思いますが、以下の４つの方法に分けられると思います。
１、各liに対してidをつけることで、それぞれのリストを表現する
li#top {
color: #FFF;
}
２、idを付加したdivでulを囲み、各liにclassを付加する
div#menu ul li.top {
color: #FFF;
}
３、ulにidを、各liにclassを付加する
ul#menu li.top {
color: #FFF;
}
４、各liにclassを付加する
div#nav ul li.top {
color: #FFF;
}
４つの書き方の解説。
１、まず初歩的なやり方として、各liにidを付加するやり方。
この場合のhtmlはあまり汚れることがないのですが、idを利用していることで、ページ内で２度目の出現が許されないのが、難点です。
例えば、「div id="footer"」に見た目は違うけど、内容が同じナビゲーションをつけたいと思った場合、再度idもしくはclassを付加して表現しないといけなくなります。
２、cssに慣れてきた頃によくあるdivを作ってその中で展開してしまうパターン。
確かにdivで囲んでしまえば大概のことはできてしまいますが、divばかりが増えて、htmlが汚くなってしまうのが難点。
３、２の状態から少し進化した形。
htmlの要素に対して、idやclassを付加することに臆しなくなるとしめたものですね。
４、最後に外の大枠で括っているdivを利用して指定する方法。
「div id="nav"」内に２つのリストが必要な場合は、３の方法をとらざる得ないですが、もし「div id="nav"」内に１つのリストだけが存在する場合は、４の方法がよりhtmlを汚すことなく表現でき、かつ拡張性も高いので望ましい形と言えます。
以上４つのやり方を書きましたが、cssレイアウトをしていく中で、３か４の方法を身につけて行けばいいと思います。
coyummy
Wednesday, November 12, 2008
カテゴリー：WEB,イベント
リクリのイベント情報でも書きましたが、来週、11月19日（水）に インクルーシブデザインワークショップ をデジタルハリウッド大阪校にて開催します。京大のインクルーシブデザインユニットさんと共同主催という形で今回は、「携帯電話」を障害をお持ちの方々と共にリデザインしようという企画です。
webをやってるとユーザビリティやアクセシビリティなどなどが気になってくる訳で、どんな人にでも快適にwebを利用してもらおうと頑張っちゃう訳ですが、実際自分以外の人がどうやってwebやらその他の物に触れているのか想像するだけで実感したことがないわけです。今回は、その実感ができる貴重な体験になること間違いないでしょう。
というわけで、平日の18時30分スタートというお仕事している人には、ちょいと時間の調整が難しいかもしれませんが、興味のある人は、ぜひともご参加いただけると嬉しいです。
参加申し込みは、cotocotoお申し込みページにて行っております。
coyummy
Monday, November 03, 2008
カテゴリー：Photoshop,Tips,WEB
自分では普通に使用していたPhotoshopの機能を知らない人が周りにいたので、メモしておきます。
自由変形の際に高さと幅のデフォルトが%なので、それを他の単位にする場合は、入力欄で右クリックすることで、pixel、inch、cm、mm、point 、pica、%と単位を選択できるようになります。
昔からある機能だったと思うのですけれど…。
coyummy
Thursday, October 30, 2008
カテゴリー：CSS,Dreamwever,WEB
今回は、HTMLファイルやCSSファイル内でよく使うコメントのスニペットです。
DIVの終了タグ前に配置するコメント：IDセレクタ用
HTML内では多くのDIVが使用されるので、どのDIVの終了タグかをわかりやすくするために使用します。
コメントアウトで見れなくなっちゃうので、「!」を全角にしてます。ご注意。
<！-- / div#selector_name -->
DIVの終了タグ前に配置するコメント：CLASSセレクタ用
ID用と何が違うかって、divあとが「#」か「.」かだけなんですけどね。ちょっとしたことだけど、これで分かりやすくなります。
コメントアウトで見れなくなっちゃうので、「!」を全角にしてます。ご注意。
<！-- / div.selector_name -->
width（及びheight）のオリジナルサイズを記載しておく
%で指定してると必要ないんだけどね。そうじゃない場合も往々にしてあります。
paddingを使用した際に、想定していたwidthの値がpaddingにとられちゃいますね。で、もし再度paddingを設定し直すことがあったときに、わざわざ足し算したりするのが面倒くさいので、このコメントを入れておいてオリジナルサイズを分かりやすくしておきます。
/* original size = ***px */
主張したい説明を挿入する
長めの説明文を入れたいときに使います。
/*---------------------------------------------------
せつめいぶん
-----------------------------------------------------*/
プロパティを書く順序ヒント
プロパティを書く順序をサイト内で決めておけば、他人が触ることになったときに少しは見やすくなります。そのための順序アンチョコ。
/* Suggested order:
* display
* list-style
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
CSSのコードの最後に表記しておく
Dreamweaverで1000行を超えるcssを書くと急にぶっ壊れる現象が起きたことがあって、どこまで読み込んでいるのかわからなくなったことがあったので、とりあえずここが最後ですよ、という目印をつけておきます。
/*EOC*/
coyummy
Tuesday, September 30, 2008
カテゴリー：CSS,Dreamwever,WEB
今回は、CSSのファイル用に登録しているスニペットを公開します。
使えそうなのがあれば、ご自分のスニペットに登録して、手間を省くと楽チンです。
自分はこんなのスニペットにしてますよ！ってのがあれば教えてください。
リセット設定用
/* RESET */
html,body,div,
ul,ol,li,dl,dt,dd,
h1,h2,h3,h4,h5,h6,
pre,form,p,blockquote,fieldset,input {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6,p,
ul,ol,li,dl,dt,dd,
pre,code,address,caption,cite,code,em,th {
font-size: ***;/* 好みのフォントサイズを入力 */
font-weight: normal;
font-style: normal;
}
html {
overflow-y:scroll;
}
ul,ol {
list-style: none;
}
fieldset,img {
border: none;
}
caption,th {
text-align: left;
}
img,abbr {
border: 0;
}
clearfix
div {
zoom: 1;/*for IE 5.5-7*/
}
div:after {/*for modern browser*/
display: block;
visibility: hidden;
clear: both;
height: 0px;
line-height: 0;
font-size: 0em;
content: ".";
}
dtとddを横並び
dt,
dd {
margin-bottom: **px;
}
dt {
float: left;
}
dd {
margin-left: **px;
}
hrを装飾
hr {
border-top: 1px dotted #999;
border-right: none;
border-bottom:1px solid #FFF;
border-left: none;
width: **px;
margin: 0px auto;
}
min-height IE対応版
div {
min-height: 100px;
height: auto !important;
height: 100px;
}
coyummy
Monday, September 29, 2008
カテゴリー：Dreamwever,WEB
ドリームウィーバーの機能に「スニペット」というものがあります。
ソースコードなどを記憶させておいて、簡単に表記させることができます。
たとえば、使用頻度の高いclearfixなどを登録させておいて、いつでも使えるようにしておくと超便利！
また使うかも？って思うソースコードは、迷わずスニペットに登録して、ラクしちゃいましょう。
coyummy
Saturday, September 01, 2007
カテゴリー：WEB,感想
CSS Nite in Osaka, Vol.5に行って来ました。
今回はFireworks、色、そしてSEOのお話と、今やってる仕事に繋がる話ばかりで（いつもそうですがｗ）どのセッションも興味深かった。
竹内聡さんによる「Fireworksで効率的カンプ作成」
Fireworksというと、週に一度立ち上げたらいいぐらい使っておりません。
そんな私ですが、初めてWeb関係のソフトで買ったのは、Fireworks無印でした。99年ぐらい？
当時は簡単にボタンが作れたり、シャドーのついた画像を作れたことにいたく感動したのを覚えております。
しかし、ゴチャゴチャしたMacromedia特有のインターフェイスに馴染めずに、結局Photoshopに鞍替えしたんだけどね…。
そんなフォトショッパーな私も、今日紹介されたグラデーションとガイドのパネルが結構使えそうだったので、週2ぐらいでFireworksを立ち上げようと思いました。
他にも便利なアドオンパネルがありそうなので、調べてみよう。
坂本邦夫さんによる「使いやすさのための色の識別」
ボタンやジャンル別の表現を結構色の差だけで表現してしまいがちなので、坂本さんの話は原点に立ち戻ると言うか、ユーザビリティなどを考えるとごく当然の話なのだが、身にしみた～。色のみで区別しないってのは、大切だね！
文字のリンク色というと、a：#0000FF、a-visited:#800080の組み合わせが最強だと思うんだけど、これに負けない組み合わせってないもんだろうかね…。
住太陽さんによる「SEOからSMO（Social Media Optimization）へ」
一番楽しみにしていた住さんのSEOの話。本当に楽しかったし、ためになった。
特に最後のおまけコーナー・住さんの秘密には、感動した。頑張んないとなー。
今の仕事でSMOを利用するのは、他部署やら理解が進んでいないのでちょいと難しいけど、住さんの言っていた必殺技を使えば効果的なWebサイトになるのにもったいないなーと思うけど、頭の固い…以下リバース。
懇親会は、鷹野さんが見せてくれたiPhoneがスゲースゲーcoolで燃えた。
欲しいなー欲しいなー。
10月はセミナー月間
次のCSS Nite in Osaka, Vol.6は10/27に開催とのことで…。
10月はセミナー月間だなー。
できるだけ参加して、昇華してスキルを身に付けていけたらよいよい。
coyummy
Monday, July 16, 2007
カテゴリー：WEB
『Web標準の日々』がはじまりましたー。
昨日の封入ボランティアでは、久々に動いたおかげで超筋肉痛に…。
そのせいかワクワクのせいかどうかはわかりませんが、（なにせ宿がカプセルホテルですから！）1時間ぐらいしか眠れませんでしたよ？
マジこの1日乗り切れるのかと不安になったものの、取ったセッションがどれも素晴らしく充実した時間を過ごせたので、楽勝でした。これなら明日も問題なし！
取ったセッションの内容や感想は、また後日書く予定ですが、どのセッションを取ったかは明記しておこう。
X1 従うのは面倒だがWeb標準はイケてる
Z2 W3Cのこと、本当にご存知ですか？
X2 名前のウェブとXHTML文書のプロファイル
V3 デザイナーズ・ハイ デザインタイトルマッチ！
X4 転ばぬ先のプロジェクトデザイン
ちなみに明日は、
U5 ゼロから考えるユーザ・エクスペリエンス概論～使いやすければいいの？～
X6 ブラウザ表示モード解説：傾向と対策
D7 ビジネス・アーキテクツのコミュニケーションデザイン
D8 情報アーキテクチャ入門
を受講します。
またワクワクして寝れなくなってきた…。
coyummy
Saturday, July 14, 2007
カテゴリー：WEB
ついに明後日開催の『Web標準の日々』。
なんだか、お金の話でもりあがっちゃってるみたいです。
ぶっちゃけ儲けてくれないと、これから鷹野さんがCSS Niteを開催してくれなくなるかもしれないので、『Web標準の日々』で存分に儲けて欲しいです。
まあ、こういう考え方になるのは、私が大阪というセミナー枯渇地帯でWebに携わる仕事をしているからだと思うんだよねー。本当に大阪は、Web関連のセミナーがすくなくて（お金儲けセミナーとかはたくさんあるのにね）まあ、言い過ぎかもしれないけどある種の鎖国ですわ、鎖国。
そんな大阪の地に、CSS Niteという商売のにおいがほとんど感じられない、純なセミナーが登場してくれたわけですよ。CSS Niteが大阪であるって知ったときは、嬉しかったなー。アドレナでまくったｗ
ぜひまた開催して欲しいと思って、早めに行って配布資料封入のボランティアしたり（明日も行きますよー、ってもう今日ですね）、受付もしたり、懇親会の引率ボランティアやったりしたよ。自分から参加することで、他の参加者とも仲良くなれたし。
もちろん、セミナーの内容も（私が無知なこともあるけど）PC上だけでは得られない情報がいっぱいだったよ。もうWebやめようと思ってた私を引きとめる力が、少なからずあったパワフルなセミナーだったよ。
だから、お金お金って寂しいこというなー。CSS Niteの存在価値はプライスレスッ！
確かにサイト見づらいなーとか思ったりするけど！
CSS Niteでイイ思いしかしてない私がいうのもなんですが！
148 Vivian Dr.は『Web標準の日々』をCSS Niteを応援していますよ～！
coyummy
« Tips |
メインページ
|
moblog »
このブログを購読