アクセシビリティからはじめる、WebサイトのUXデザイン に参加してきました。

日時 2015年10月24日
場所 河合塾学園 トライデントコンピュータ専門学校
講師 BA太田さん、Gaji-Labo山岸さん

アクセシビリティからはじめる、WebサイトのUXデザイン に参加してきました。アクセシビリティ関係のセミナーは久しぶりでこの秋受講したいなと思っていたところ、名古屋でのセミナー開催を知り申し込みました。大田さんはこの夏『デザイニングWEBアクセシビリティ』という本を出し秋口にスクーで連続授業をされていました。大田さんの話が聞けるということで楽しみにしていました。

冗長なaltと組織図問題

大きな組織になると、組織図をホームページに掲載するシーンがあるけど、altなりキャプションはどうするかなという話もでました。視覚障害者への図の情報提供は難しいです。スクリーンリーダーでの読み上げ時のこともありますが、点字で提供された表でさえも点字を掲載するので紙が大きくなるのもあり、表全体の把握することが難しいという話も聞いたことがあります。組織図の例で行くと・・・
(1)全部かく。
(2)主な役職だけかく。
が紹介されていました。


 

組織図 イメージ


この他にも、
必要でしたら、以下連絡先までお問い合わせください。連絡先◯◯◯と記述してもいいですね。


cssでの画像置換は避けて!

意味のある画像はcssで指定するのではなくHTMLに書き出しましょう。

カルーセル問題

案件でやったことはないのですが、トップページで画像を3から5枚あって勝手にスライドしていくやつです。
(こんな説明で分かる人いるのか?)
この手法はまずスククリーンリーダーで読まれない。
その上で・・・
この手法はしばしばサイト所持者の政治的利用に使われる
サイト所持者の怠慢でトップにのせる順番を決めれないときにつかわれる手法
↑部署間の対立を抑えるための政治的利用←サイト所持者の怠慢
肢体障害の自分でも使いにくいです。クリックしようとすると次の画面に行ってしまうケースが多々あります。

自分に(が)できること

セミナーの最後は“自分にできること”を付箋に書くワークでした。この頃はあまりコードをガリガリ書かないので、すぐに思い浮かびませんでした。しばらく考え以下のことを書いてみました。

・変な画像説明を改める
・コントラスト比について調べてみる
・NVDAのシュミレーターをみる

冒頭に書いた冗長なaltをつけないのは今後きちんと徹底させたいです。何でもかんでもaltをつけるのではなくきちんとスクリーンリーダーユーザーにもページ全体の構成がわかるようなalt付けを心がけたいです。
JIS8341が制定された時のWCANで取り上げられたコントラスト比これも改めて調べてみたいと思いました。
自分のパソコンに入っているNVDA。シュミレーター機能があることは知りませんでした。
もう1つ思いついたのが、大手企業ページのアクセシビリティポリシーを見てみる。企業ごとで書いてある内容も違っておもしろい様です。

最後に、じゃんけんで『デザイニングWEBアクセシビリティ』をもらいました。どうもありがとうございました、

障害を持つ身として「アクセシビリティ大事だよね」とわかっているつもりなのですが、実作業でなかなかとりくめていないなぁという中で参加したセミナーで、次にすることも見えてきたと思います。
大田さん・山岸さんありがとうございました。

考える場所、必要ですね。


WordFes 2015に参加してきました。

WordFes 2015に参加してきました。3年連続で参加しています。もう自分の中でも夏の終わりの風物詩です。

日にち 2015年8月29日
場所  名古屋工業大学 52号館

ブログ IWAIMOTORS BLOGのいわいさんのセッションでした。いわいさんとはいろんな場所で話したことがあるのですが、全体的な話を聞いたことがなかったと思い受講しました。

ブログ開設後は検索エンジンのクロールがくるように毎日の更新をがんばったこと・無料wifiではログインしないなどご自身の中でのルールを決めブログの運用をスタートされたそうです。何か決めてやっていくとたいがいぶれないなと。

僕がWordPressを使う理由 運用効率を高めるシンプルなフィジビリティすすめ

タイトルに惹かれて選択したセッションでした。セッションはじめでFBの「WEBディレクーターズ・マニュアル」の中の方だと聞いて驚きました。FBで気になったときにたまに見ています。

とても元気な方だなという印象を持ちました。成果を出すWEBを創りだすために熱をもってロジカルにプロジェクトを回しているという話でした。仮説を立てその達成のための細かいタスクを創りだすという話が印象深かったです。

森野と日比野が語る アクセス解析&WordPressサイト運用術

お題に対し、日比野さんが語り森野さんがきるというセッションでした。アナリティクスを確認するためにはとお題に対し、日比野さんはマイレポートを活用してとおっしゃったのに対し、森野さんは「ログインする」という回答でした。森野節炸裂でございました。

ディレクション夏の陣! 東西ディレクターあるある座談会

表立ってかけないような話やこれ使えるよ!的なサービスやツールの話まで。制作サイドとしてチームを組んでいう経験は少ないですが・・・。誰かのモチベーションを上げるために自分のモチベーションを上げるという話がありました。さっきの話と合わせると、成果をだそうとすると熱が必要で、成果をだすために使われるもの(WEBなど)を外注する場合、クライアント(お客さん)との間の“熱”と、制作サイド内での“熱”が同じぐらいになってはじめてプロジェクトとしてうまくいくのだと思いました。自分自身がモチベーションを上げるためにはということをもっと考えたいなと。

懇親会から

思い切っていろいろな方に声をかけてみました。今回のWordFesの前にツイッターでつながった方、いつも使っているサービスの開発元の方、知り合いさんが紹介してくれた方・・・・お酒も入っていたので会話を楽しむことができました。

懇親会がおわってからもう一軒いってましたというとこまで書いておきますね。

全体を通して

運営側の WordBench Nagoyaの方々のチームワークの良さにただ感服しました。何セッションもある中でそれらすべてをなんなく時間通りにこなすのは、簡単なことではないです。

ありがとうございました。来年も、お願いします。


WCAN 2014 Autumnに参加してきました。

ものすごく遅くなってしまいました。
今の自分にぐさぐさきたWCANでした。

日時 2014年9月20日(土)
場所 名古屋国際会議場

「ボクらは誰でもセカイと未来を変えられる +1スキルのご提案」

フィーバー柳橋というスペースを開設された西岡さんのセッションでした。フィーバー柳橋では何かをプロジェクターに映し出して実験や遊びをやっているそう。キーワードは「(プロジェクターに)映し出す」。主語ー被写体をとりあえずどんどん変えてみているという話が心に残りました。

何かにこだわって何かを貪欲に試行錯誤していった記憶があまりなかったのでその点反省だなと思いました。テクノロジーで遊ぶという言葉もぐさぐさ来ました。

岐阜出身のWeb系フリーランサーが名古屋で起業する話

クラウドで請求書管理ができる「Misoca」というサービスを開発された豊吉さんのセッションでした。スライドは子どもの時の写真のみでした。いろいろ赤裸々でした。最後のほうで言われた「いいタイミングなんかこない」の言葉にとても共感しました。詳しくは書きませんけど・・・・。

Webクリエイティブに活きる抽象化思考力

抽象化の反対が具体化という話からはじまったセッションでした。「余分な性質を排除したものが抽象的。」「学びは上位に行けば行くほど抽象的になる。」「コンセプトを作るには抽象的思考力が必要である。」ある物事に対して次々と問いを投げかけてラダーリングという方法があるようです。物事を具体化させる問いかけをラダーアップ、物事を抽象化させる問いかけをラダーダウンというそう。何かを考えていくときはじめはとぎれとぎれの単語しか思いつきません。その言葉を操作すれば大抵考えはまとまっていきます。マインドマップやマンダラートなど言葉を操作する時に使える手法やソフトが最近はいろいろあるよう。あせらず、そういうこともあるんだなとアンテナをはっておこうと思った次第です。

ディレクターのお仕事

このセッションもぐさぐさでした。できて当たり前なのに、セッションで上げられたことの半分ぐらいしかできていないなと。

なんとなく始めたサイト制作などなど・・・。いろいろなことをしれば知るほどなんとなく始めた頃の自分の気持ちとかを忘れていたなと。昔のことなんて忘れているのに、ややもすると、その時の自分の心の動きとかが一番大切なような。


wordfes2014に参加しました。

wordpressの祭典wordfes2014に参加しました。テーマを作るわけでも、サイトそのものを納品する予定は今のところないのですが、去年に引き続き参加しました。
あっ写真とるのわすれました。

日にち 2014年8月30日
場所  名古屋工業大学 52号館

ustやクロージングトークなどでは「今回は魅力的なセッションが固まりセッション選択に困られた方も多いでしょう」という声を何回も聞きましたが、今回は「基本にかえる」という自分の中のテーマで受講するセッションをえらびました。
簡単に振り返ります。

「WordPressをつかったことない人大歓迎、wordpress.comでコードをかかずにブログ付きサイトを作ろう・・」

wordpress.comというサイトからブログサイトが作れるよというセッションでした。ただしプラグインとCSSはさわれないので本当にできることが制限されます。ですが、そこを気にしなきゃ小規模なブログサイトに使えるのかなと思いました。

「テーマ作成で困らないためのイマドキ HTML 再入門」

わかりやすく受講して良かったと思っています。コード周りの最新動向も追えていません・・・

後半は製作工程の変化の話。

書いたものがそのまま表示されるってすごいことなんですよ。 気づかなかったでしょ?

当たり前のように触っているコード。ブラウザでみるとちゃんと意図したように表示されて。HTMLとかCSSはアルファベットで表記してていてそれが当たり前ですが、アルファベットを母国語としている人たちとアルファベットではない文字を母国語としている人たちでなにかコードの解釈が違っているのかなと言うことを最近考えました。

すみません。横道それました。ビルドツールとしてのドリームウィーバー。それとおなじような解釈でマークダウンがHTMLになり、LessがCSSになる。Lessは触ったことないのですが、なるほどと思った説明でした。

XPのサポートがきれInternet Explorer 6のサポートが切れて、できないブラウザの勢いが縮んでいる今が再学習のチャンスという締めくくりでした。

後半へ続きます。 いつになることやら たいていこう書くと後編ないパターンなんですが・・・。


リストまわりを調べる

名古屋マークアップ勉強会に来ています。

リストタグとは

<ul>,<ol><li><lh>,<dl>,<dt>,<dd>
<ul> リスト形式であることを定義 *
<ol> 番号付きのリスト形式であることを定義*
<li>リストの各項目であることを定義(ulタグ,olタグに内包される) **
<lh>リストのヘッドタグ HTML3.0で消滅した??

* ブロック要素 中に入れれる(ネストできる)のはliタグのみ
** ブロック要素 中に入れれる(ネストできる)タグには制限なし(pタグでもdivタグでも何でもOK

<dl>定義リストタグという名称のタグ 定義リストであることを定義  #
<dt>定義語 ##
<dd>定義語などの説明 ##

# 中に入れれる(ネストできる)のはdtタグ、ddタグのみ
## 中に入れれる(ネストできる)のはインライン要素のみ
### 中に入れれる(ネストできる)タグに制限はなし
定義リスト 定義する用語とその用語の説明を一対にしたもの

閉じタグを省略できるタグ

<li>,<dt><dd>