Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

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

名古屋のトライデント コンピュータ専門学校で開催されたアクセシビリティの勉強会「【名古屋】アクセシビリティからはじめる、WebサイトのUXデザイン」に参加してきました。
株式会社ビジネス・アーキテクツの太田良典さんの講演、そして、株式会社Gaji-Laboの山岸ひとみさんのワークショップという二本立てのイベントでした。
アクセシビリティと言えば、個人的に視覚に障害のある人たちのための対策というイメージが強かったのですが、考慮する点は他にもいろいろあるなと今回のイベントで気づかされました。
以下に今回のセミナーを聞いて考慮しないといけないなと考えさせられた点をいくつかピックアップします。

  1. 印刷時の事
  2. スクリーンリーダーの事
  3. Windowsのハイコントラストモード
  4. 位置に依存した説明を入れない
  5. 読者の注意を散漫にさせるものをおかない

1. 印刷時の事

印刷時にそのページが伝えたい内容が印刷されないことがないようにしないといけないなと感じました。例えば商品一覧をdivなどの背景画像に指定していたら印刷時には全く表示されない事があります。
なので、見せたいコンテンツはなるべくimage要素で指定しておくことが大事ですね。
ついつい便利なので背景画像をつかってしまうのですが。

2. スクリーンリーダーの事


例えば、左の図のように画像のaltタグに"堀 悟大"と書かれていて、その下にテキストでまた"堀 悟大"と書かれていたらスクリーンリーダー上では同じ名前が二回読まれることになってしまいます。
だから意図的にalt属性を空にする事も手なのだそうです。


組織図など複雑で重要な情報が画像で表現されている場合


また、上のような組織図がイメージ要素で、altに「組織図」としかかかれていなければ、スクリーンリーダー上で読み上げたとき「組織図」としか読まれないので、どのような組織図なのかが判断できません。なので、alt属性にしっかり構成図の詳細を記述することも時には必要かもしれません。普段の業務でもこれは意識したいです。

3. Windowsのハイコントラストモード

表示されているものを見やすく表示するためにWindowsではハイコントラストモードというものが用意されています。背景が黒く表示され、文字が白く表示されます。この設定にしておくと意図しない場所がハイコントラストモードで全く表示されない事があります。例えば背景画像を設定している要素等は要注意だそうです。意識的にWindowsのハイコントラストモードでどう表示されるかという事も確認するようにしたほうがいいかもしれませんね。

4. 位置に依存した説明を入れない

少しタイトルからだと何を言っているのか分かりにくいのですね。例えば、「右上のボタンをクリックしてください。」と書いてあったとします。そのサイトを閲覧している状況によっては本当にそのボタンが右上にあるとは限りません。例えばスクリーンリーダーでそのサイトを見ていた場合、上にそのボタンがあるかもしれませんし、下にそのボタンがあるかもしれません。ですのでどうしても説明を入れたい場合は、「ページ下部の『送信する』ボタンを押してください。」などボタンの情報を具体的に記載することが大事と話されていました。位置関係に依存せずにユーザに分かってもらえるサイト作りを心がけたいです。

5. 読者の注意を散漫にさせるものをおかない

例えばカルーセル等がとても速いスパンでぐるぐる回転しているようなサイトだと、そこにだけ意識が集中して記事の内容をおえなくなってしまう人もいらっしゃるそうです。
なので記事の内容をしっかり読んで欲しいページではカルーセル等は使わない方が良いかもしれませんね。

講義のスタイルについて

このイベントはただ、講師の話を聞くスタイルではなく、グループを作ってアクセシビリティについて話し合う機会がありました。その中で聞いた事を自分なりに整理して意見をだせたので、アウトップットした分、今日聞いた内容がしっかり頭に残っています。
インプットだけでなく聞いた内容をアウトップットできる講義スタイルはいいですね。

アクセシビリティの向上は手段であり目的ではない

アクセシビリティ自体が目的になっているサイトも結構あるということを仰っていました。結局誰に読んで欲しいか、そして読んでもらうためにはどういった配慮が必要かという、当たり前のことが大事になってくるんですね。
また、アクセシビリティを追求しすぎるといくら時間があっても足りないですし、運営が大変になってしまうことがあります。なのでそのサイトに応じて、考慮できる点からアクセシビリティの対策をしていきたいと思います。


WCAN2015 SummerのLTで発表させて頂きました。

会場


7月11日(土) に弊社が運営する、WCAN2015 Summerが開催されました。
今回のWCANは名古屋商科大学様の丸の内キャンパスの14Fをお借りして開催させて頂きました。凄く立派な建物で左がその外観になります。


デジタルサイネージ


さて、今回ライトニングトークで発表した内容は「マークアップエンジニアによるデジタルサイネージ実装について」でした。
なのですが、会場にいくまで実際ちゃんと動いているデジタルサイネージをみていませんでした。会社のデスクトップ上で確認作業をしていましたので。ですので真っ先に会場に行ってちゃんと動いているか確認しました。
実際見てみると想像以上にかっこよかったので嬉しくて思わず写真を取ってしまいましたw


発表内容

5分ではおさまり切らない内容だったので、比較的会場にいる皆さんが理解しやすいCSSに的を絞って技術的な紹介をさせていただきました。下がそのスライドになります。

他にも下記のような技術を使用して今回のサイネージを作成しました

  • Ajax
  • Deferred Promise
  • Video要素
  • LocalStrage
  • FullScreen API
  • CSS flexbox
  • CSS Animation
  • CSS Filter

興味のある方は...

アップルップル社内勉強会ですが、外部の方にも一般公開している勉強会なのでお気軽に下記のイベントに参加登録してください。
技術的な話やどのような設計になっているかといったお話もできると思います。

■日時 2015/07/21 (火) 19:30 ~ 21:00
■場所 ベースキャンプ名古屋



WCAN2014 Winterに参加して


名古屋国際会議場で開催されたWCAN Winterにスタッフとして参加しました。今回のWCANは技術的な話よりもコンテンツ重視の話でとても新鮮でした。
今回の話を聞いて感じた個人的な感想をまとめたいと思います。
セッションの順番は以下の通りでした。


  • 「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
  • 次世代Web制作成功の法則
  • Web制作者がやるべきこと

「なんとなく」を共有する、コンテンツを活かしたデザインプロセス

なんとなく、トップページにはメインビジュアルをいれて、3カラムに記事をいれてというのが今までのサイトのデザインの仕方でした。しかしスマートフォンが普及した今、同じ方法でサイトをデザインしていいのか?ということを仰っていました。
演出を派手にするとスマートフォンではパフォーマンスがよくありませんし、ページスピードにも影響が出ます。そこで、まずはどの内容をサイトで見せたいかということを整理するために、シングルカラムで情報設計を始めるという話にはなるほどねと納得させられました。


また、Google Analytics等を使って、制作したサイトの「利用者は誰なのか」、「どのように訪れたのか」「どの順序で利用したのか」といったストーリーを把握することが大事ということを仰っていました。ただ閲覧者数の増減を眺めているだけじゃなくて、こういう所も意識してGoogle Analyticsを使っていきたいですね。

最後に、スライドに連動させて関連するツイートを自動投稿されてらっしゃいました。こういう新規性も登壇に織り込むと面白いですね。

次世代Web制作成功の法則

お客様にとってはすべてがトップページというお話が印象的でした。たしかにGoogleから検索をしてサイトに訪問して頂いたお客様がトップページからやってきてくれるという保証はないです。作成したサイトのどのページもお客様からすれば顔になります。なので、どのページからもお客様が目的のコンテンツに到達できるように導線を用意しないといけないなと感じました。

Web制作者がやるべきこと

生田さんの喝がとても印象的でした。WCANの会場が緊張感につつまれ、みんな登壇者を見つめていました。このような空気を作り出せることはすごいなと圧巻されました。
表示したい情報をコンポーネント化してそれをテンプレートに並べていくというサイトの構築方法を仰っていましたが、それってまさにa-blog cmsのモジュールIDのことでは?と思いながら聞いていました。
a-blog cmsというCMSを制作している会社に勤める私にはとても参考になるお話でした。

また生田さんは、自宅ではパソコンでhuluをみて、通勤中はiPhoneやiPadでhuluを見ているそうです。利用者がそのサイトを利用する環境に応じて使うデバイスが変化するので、それに応じたコンテンツの出し分けが大事ということを仰っていました。たしかにその通りだなと感じます。
個人的に、ラーメン屋さんのサイトだと移動中はラーメン屋さんへのアクセス方法を一番最初に提示してもらいたいです。

感想

普段コンテンツについて深く考えたことはなく、与えられたデザインを制作していくということだけにフォーカスをしていたので、今後はコンテンツの更新のしやすさや、どうすればお客様が求める情報を提示できるかということも考えられるマークアップエンジニアを目指していかなければならないなと考えさせられました。


HTML5感に参加しました

12月12日(金)にLPI-Japan様主催で行われたHTML5感というイベントに参加しました。HTML5でこんなことも出来ちゃうんだという驚きがたくさんあったのでそれを共有したいと思います。


私が今回受講したセッションは下記のようになります。

  1. 面白法人カヤックのウェブフロントエンド術 HTML5をつかった演出手法大公開
  2. HTML5技術によるマルチメディアコミュニケーションの可能性
  3. 企業サイトとHTML5
  4. これからのWebに必要なHTML5

1. 面白法人カヤックのウェブフロントエンド術 HTML5をつかった演出手法大公開

おおむね、SVGやCanvasの話がメインでした。

Canvas

Canvasは機能の多さという面ではFlashに劣りますがとても高速に動作するAPIです。
今回はベレの方法という分子の位置を計算するための公式を使った、DEMOなどをみせてもらいました。
下がそのDEMOになります。

WebGL

またWebGLに関するお話ではthree.jsがWebGLを扱う上でのデファクトスタンダードになっていること。そして、スマートフォンでもWebGLの対応が進んでおりAndroid は4.1から iPhoneは5以上であればWebGLに対応しているとのこと。
面白法人カヤックさんのページでもWebGLが使われているそうです。


SVG

またSVGに関するお話では、画面幅に応じておっぱいが上下に震えるページをDEMOとしてみせていただきました。実装にはPaper.jsというライブラリを利用していて、Path.segments[0].handleIn.xなどIllustratorを使っている人間には分かりやすくパスの操作などが行えるのだそうです。



2. HTML5技術によるマルチメディアコミュニケーションの可能性

こちらはWebRTCに関するお話でした。WebRTCとはプラグイン無しでSkypeのようなリアルタイムコミュニケーションを実現するための技術です。この機能に関連したブラウザのAPIをWebRTC APIと呼ぶのだそうです。現在Chrome,Android,Firefox,Opera等のブラウザで、使うことが出来るの出そう。今回自分もWebRTCを試そうと下記のURLにSkyWayをつかったWebRTCのデモページを作ってみました。
https://steelydylan.herokuapp.com/
環境によってはうまく動かないかもしれません

企業サイトとHTML5

IEのシェア

ブラウザのシェアでIE6, IE7, IE8, IE9, IE10で半数以上を占めることに驚きました。自分の苦手なブラウザのシェアが予想以上に多いのでこれらのブラウザにも対応出来るようなマークアップエンジニアを目指したいです。

HTML5で実現できること

HTML5ではマークアップの意味だけでなく、ローカルストレージなどのAPI的な面でも出来ることが増えました。例えばカメラの機能であったり、位置情報を取得するGeologication APIなどです。
しかしその分対応しなければいけない、クライアントの要求も増えそうです。

発声しうる課題HTML5で実現できること
マルチでバイス対応メディアクエリ/タッチイベント
モバイルアプリGPS/コンパス/カメラ
グラフィックスCanvas/SVG/CSS3
ユーザビリティの向上フォーム機能の拡張
アクセシビリティの向上セマンティックスの強化/ビデオ字幕/音声認識

これからのWebに必要なHTML5

フォーム機能の強化

HTML5ではフォームで入力するための機能が強化されました。
例えば、inputのtype属性にdateを入れるとカレンダー式のフォームに、またrange属性を入れるとスライダーになります。
また、サーバ側にデータを渡す前に未入力項目のチェックやメールアドレスのチェックなどもHTML5だけの機能で出来るようになってきました。

input typeによるフォーム部品生成

<input type="date" />
<input type="range" />

ブラウザによるフォームのチェック

必須項目 required

フォームに未入力のまま送信すると、ブラウザで「このフィールドを入力してください」というエラーメッセージを出してくれます。

<form>
<input type="text" required/>
<input type="submit" value="送信" />
</form>





メールアドレス

以下のソースで入力フィールドに@が含まれているかをチェックできます。

<form>
<input type="email" required/>
<input type="submit" value="送信" />
</form>





感想

CanvasにVideo要素から画面のイメージデータを渡してそれにグレースケールをCanvas側でかけるデモを「HTML5技術によるマルチメディアコミュニケーションの可能性」で見せて頂きました。Canvasにゲームを作る以外の可能性を見いだせてよかったです。また、ブラウザ上で画像などを保存できるFileSaver.jsなど様々なjQueryプラグインを「これからのWebに必要なHTML5」で見せて頂いて、自分もいろんなライブラリを試してみようとおもいました。
いままで、Flashなどのプラグインが必要だったウェブの世界もHTML5の発展でもっといろんなことが出来そうですね。


名古屋マークアップ勉強会でSublimeTextについて勉強しました

今回はSublimeTextの教科書など、いくつかの本を出されている前川 昌幸(まえかわ まさゆき)さんにお越しいただきました。



前川さんにとても親切にSublimeTextのチップスをいくつか教えて頂いたので今回はそのチップスを紹介したいと思います。

1.行単位選択


ctrl+shift+十字キーで複数の行を選択し、その行に対して同一の操作を行えます。

2.同一の文字列の全選択

探したい文字を選択し、cmd+f、さらにopt+enterで同一文字の全選択が行えます。

3. ショートカットキーの衝突を検出

keybindconflictというプラグインをインストールすると、ショートカットキーの検出が可能になります。インストールをしたらcommand+shift+Pよりconflictと検索し、下のようにAll Conflictsを選択します。


すると、下のようにどのキーに対してどのショートカットコマンドが有効になっているかを確認できます。


3.インストールしたパッケージの一覧を見る

command+shift+Pよりlistと検索するとインストールしたパッケージの一覧をみることができます。


4.zipファイルやjsファイル,cssファイルを落としてきて展開する

正直この機能は本当に便利だなと思いました。Nettuts-Fetchというパッケージです。ダウンロードしたら,command+shift+Pよりfetchと検索してください。そしてfetch:Manageを選択し、ダウンロードしたいパッケージの編集をします。
私は以下のように設定しました。

{
	"files":
	{
		"Bootstrap": "https://raw.githubusercontent.com/twbs/bootstrap/master/dist/js/bootstrap.js",
		"Bootstrap.css": "https://raw.githubusercontent.com/twbs/bootstrap/master/dist/css/bootstrap.css",
		"Bootstrap.min.js": "https://raw.githubusercontent.com/twbs/bootstrap/master/dist/js/bootstrap.min.js",
		"Atlas.js": "https://raw.githubusercontent.com/steelydylan/Atlas.js/master/Atlas.js",
		"jquery": "http://code.jquery.com/jquery.min.js"
	},
	"packages":
	{
		"a-blog cms": "http://ablogc.ms/129NDpL",
		"Atlas.js": "https://github.com/steelydylan/Atlas.js/archive/master.zip",
		"Bootstrap": "https://github.com/twbs/bootstrap/archive/master.zip",
		"callisto": "https://github.com/steelydylan/Callisto/archive/master.zip",
		"html5_boilerplate": "https://github.com/h5bp/html5-boilerplate/zipball/master"
	}
}

設定をすると以下のようにサーバ上からフォルダに自分の好きなフレームワークを持ってきて、展開したりすることが可能になります。



最後に

今回はvagrantを使ってローカルにOSの仮想環境を作ってそこにa-blog cmsなどのCMSをダウンロードするデモを見せて頂きました。すこし難しそうですが、実際に公開する時と同じ状態を自分のパソコンで再現できるところは便利だなと感じました。また、vagrantやdockerなども勉強していきたいと思います。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド