lablog

Webアクセシビリティのセミナーに参加しました! by 2015年11月3日

こんにちは。
デザイナーのMacoです。
10/24(土)に名古屋で開催された「アクセシビリティからはじめる、WebサイトのUXデザイン」に参加しました。
今回の講師であるBAの太田良典さんの本「デザイニング Webアクセシビリティ」を会社で買ってもらい、少し予習してから行きました。
株式会社Gaji-Labo 山岸ひとみさんによるワークショップもありました。
講習会の会場写真名古屋トライデントコンピューター専門学校 ロビー付近写真
初めて「トライデント コンピューター専門学校」に足を踏み入れました。
入り口にはコンテストの実績やトロフィーの数々。学園祭ではゲームの体験ができるらしく、学生の子が意気込んでいました。

●講演内容

講習の中で特に印象に残ったことを記します。

SESSION1 マークアップからの取り組み

「代替テキスト」には十分気をつけよう!
キャプションがある場合の画像の代替テキストにいつも悩んでいたので、太田さんに質問しました。
画像があることを伝える必要がなければ空にしてもいい。ただ、そのキャプションが画像を説明しているものであれば、
(写真)と付けることでここに写真があってそれを説明している文章だと伝えることができる。

「ハイコントラストモード」では背景画像は表示されない。
視力の弱い方は背景が白だと画面が見にくいため、ハイコントラストモードを使用して背景を暗くする。
そうすると背景に使用した画像も暗くなって表示されないので、背景画像には意味のある画像は使用しないこと!
例:グローバルナビのaタグに背景画像を使用して表現している場合など

SESSION2 デザインからの取り組み

デザインでは下記の点に気をつけよう!
・コントラスト
・行間
・どこが押せるか分かりやすいボタンデザイン(矢印をつけるなど)
・タッチデバイスを考慮したボタンの大きさ
・デザインスタイルの一貫性
見た目を良くするために視覚に頼りすぎてるところはないか?
画像に頼らなくても伝わるレイアウト・デザインはできているのか?
代替テキストを頑張ってつけるのではなく、なくても伝わるデザインを目指そう!

「カルーセル」問題
カルーセル(スライダー)は視力の弱い方にとって、読み終わる前に動いてしまって理解がしにくい問題があります。
動いているためタイミングによっては自分が思っていたリンク先とは違うページが開き、誤操作につながる原因にもなります。
今でもカルーセルを使用しているサイトは多数あるので、カルーセルを使用する理由を改めて考えました。

SESSION3 アクセシビリティ方針

WCAG2.0(アクセシビリティガイドライン)に目を通そう!
レベルAからAAAまであり、レベルAはどんな条件でもアクセスできる最低ラインです。
すべてクリアするのが良いサイトというわけではないですが、特に官公庁のサイトなどでは「アクセシビリティ方針」のページを公開しているようです。

ワークショップ

セッション前に4色の付箋が配られ、セッション後に色分けで決められたテーマの内容を書きます。
3〜4人で近くの人とグループを作り付箋に書いた内容の話し合いをします。
各テーマは
・「アクセスのしやすさ」について
・「運用のしやすさ」について
・他にこんな方法があります!
・太田さんへの質問 など

私は最初のうちは何を書いたらいいのか全く思い浮かばなくて苦戦していましたが、とっても新鮮なワークショップでした。
たいてい勉強会に参加すると話が難しくて言葉を発せれなかったり、ただ聞いて終わることの多い私ですが
こんなふうに講習を聞いてすぐに意見の話し合いができるのは刺激的でした。
セッションで集まった付箋の写真

まとめ

・アクセシビリティは0か100ではない
・アクセシビリティによってより多くの人に多くの情報を伝えることができる
・少しでも…の取り組みが少しずつ広がっていき結果に繋がる

誰にでも簡単に始めれることはたくさんあって、少しの意識が意味のあることに繋がることもある。
今回の講習の内容を本でも細かく説明されているので、また参考にしたいと思います。

WCAN 2015 Autumn に参加しました! by 2015年9月14日

こんにちは。
デザイナーのMacoです。
9.12(土)に名古屋商科大学 名古屋キャンパス 伏見ビルで行われたWCAN Autumnに参加しました。
前回のWCAN Summerに参加出来なかったので私にとって半年振りのWCANでした。

秋のWCANはマルチセッション方式で、事前に聞きたいセッションを選んで予約します!
去年は予約するのが遅くなって、聞きたいセッションを逃してしまったこともあったので今回は早めに予約しました!

●SESSION 1 「Sketch VS Photoshop Webデザイン4番勝負!」
以前から気になっていたSketchの機能をたくさん聞けたし、さらに気になりました!
OSがMacのみなのは気になりますが、コストも安く動作が軽いのは本当に魅力的!
ぜひSketchセミナーを開催していただきたいです!
弊社ではまだまだFireworksに頼っているので、移行を考えつつPhotoshopも使っていきたいと思いました。

●SESSION 2 「定時に帰れる!カタツムリのディレクション方法」
株式会社アットノエルさんでは、定時の18:00になると皆さん残業無しでスパッと帰るそうです。
そのためには、

・クライアント様との信頼関係を構築する
・自社での制作に対しての考え方を理解してもらう
・企画書の質を上げる

プレゼンまでの間がポイントになるので、電話やメールでの対応の仕方も見直してみるといいそうです。
アットノエルさんでは、スタッフの方が提案した社内ルールを実施したりとスタッフ皆さんがとても仲の良いのが伝わってきました。

●SESSION 3 「ランディングページ成約率UPのための失敗しないデザインレシピ」
WCAN2014のロゴに採用された田中さん。その後のライトニングトークも覚えています。
LP(ランディングページ)を制作することはほとんどないですが、コンテンツの見せ方などとても参考になりました。
LPでの最重要なのは、コンテンツが70%でもまずは1日でも早く公開すること!
ユーザーの反応を検証でき、サイト最適化を目指し改善しいくことが大切!!

●SESSION 4 「デザインの根」
あなたがデザインする上で大事にしていることはなんですか?
ドキッとする質問から始まったセッションでしたが、「デザインの根」のお話でした。
根がしっかりしていないと方向性がずれ、デザインが崩れる。
根をしっかり持つことで
・デザインに説得力が増す→修正が減る
・アイディアの質が上がる
・指示をより理解できるようになる

私もまだまだ「デザインの根」を模索していますが、一時期壁にぶつかって悩んだ時は
技術ばかり追っていたように思います。

●まとめ
今回のWCANもとってもいい刺激をいただけて勉強になりました!
毎度毎度、参加する度に新たな目標ができてまた頑張ろうと思わせていただけます!
次のWCAN Winterも楽しみにしています。

参加満員!レスポンシブWebデザインセミナーに参加しました by 2015年5月11日

コーディング業界No.1の納品実績を誇る、コーディングファクトリー様のセミナーに参加しました。

参加者人数、1000名近く!
東京、大阪、福岡、名古屋で参加開催され、毎回参加満員の豪華な内容のセミナーです。

コーディングファクトリーでの制作を隅々まで公開!
普段、他の会社ではどんなふうに制作をしているか気になるところだと思いますが
なかなか知ることができない…
セミナーでは業界No.1の実績から得たノウハウを公開し、どのように対応して
制作しているかなど教えていただきました。
それは自身で本やネットで調べることよりも明確で、検証も行っているため情報が正確。
実績があるからこそ信用があり、私たちもすぐ実践できるところが本当に素晴らしいです。

<内容>
内容は3部作です。

1,要件定義

2,設計
高解像度ディスプレイでは、2倍画像の作成しやすい640pxで画像ファイルを作成すると良い。
それは余白なども分割しやすい数字であり、分かりやすいため。
解像度が3倍のデバイスもあるが、3倍だと容量が重くなり他にも影響が出てしまうので2倍で対応しても目立ったボヤケは発生しない。

3,実装
制作の効率・クオリティの向上、均一化のために行うべきこと
よく使うcssはクラスを付けてパーツ集を作成する
制作者全員が同じパーツを使うので、それぞれがコーディングする必要がなく時間の短縮になり見え方にもズレが無く表現の統一ができる。

セミナーに参加するとスライド資料に使われていたものを冊子にして配布していただき、
「実装」のお話であったパーツ集の参考データもいただきました。
レスポンシブ制作での基本から改めて知ることができ、今後の制作に活用できることばかりでした。