NP Log

カテゴリー: Design

  • アクセシビリティに関するメモ

    Twitterでアクセシビリティについて話し合うようなメッセージが流れていて、都合で参加できなかったのでわかる範囲でまとめておきます。

    どちらかというと、視覚障害者（音声利用者）寄りの内容です。

    音声利用（スクリーンリーダー）をするには、それぞれのOSについて下記のようなツールがあります。
    私自身は晴眼者で、音声利用をする機会はほぼなくて、盲ろう者（視聴覚重複障害）のボランティアの経験が少しある程度です。
    紹介しているツールについての詳しい知識はありませんのであらかじめご了承お願いします。

    音声利用ツール

    Mac, iPhone, iPad

    VioceOver for Mac
    VoiceOver for iPhone

    Windows

    ナレーター for Windows
    PC-Talker for Windows
    NVDA for Windows

    Android

    Android ユーザー補助機能の概要
    Android TalkBack を有効にする

    WordPress

    当サイトもそうですが、仕事でWordPressを使う機会が多いので、WordPressのアクセシビリティについて探してみました。
    Make WordPress Accessible
    ここから辿っていくと良さそうです。
    例えば Readability を開いてみると、

    Good practice:

    Start with a short summary of the content
    Divide the rest of the text in short blocks
    Use headings and lists and meaningful link text
    Avoid large blocks of text

    という説明があります。

    音声利用の場合、コンテンツを全て読み上げてからでないとそこに何が書かれているかわかりませんので、あまり階層が深くて複雑なページ構成になっていると、読みたい記事があってもなかなかたどり着けないと思います。上に引用したように、先頭にサマリーがあって、テキストが比較的短いブロックに分かれていて、見出しやリンク文字列が理解しやすい、大きなブロックは出来るだけ避ける、といった配慮が必要と思います。

    参考資料

    Web Content Accessibility Guidelines (WCAG) 2.0
    論文作成・発表アクセシビリティガイドライン（Ver.3.0）
    総務省:みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)

  • レスポンシブウェブデザインのメモ書き

    レスポンシブウェブデザインのメモ書き

    WordPressによるウェブサイトの制作で、TwentyThirteenをカスタマイズする場合。

    課題

    • ヘッダ下のメニューは非表示
    • サイドバーにメニューを配置
    • プルダウンメニューに切り替わるところでサイドメニューを非表示

    ヘッダ下のメニューは非表示

    Basic Structureにて、

    .nav-menu {
	visibility: hidden;
}

    とする。

    サイドバーにメニューを配置

    .site-main .sidebar-container {
	height: auto;
	margin: 0 auto;
	max-width: 240px;
	position: absolute;
	top: 0;
}

    テンプレート上、
    header -> contents -> sidebar -> footer
    という順番になっているので、
    例えば左上に絶対座標で位置を指定し、
    コンテンツ領域はサイドバーの幅＋アルファの左マージンを設定する。

    プルダウンメニューに切り替わるところ

    幅が狭くなったところでサイドメニューを消して、メインメニューを表示させる。

    @media (max-width: 643px) {
...
    #sidemenu {
        visibility: hidden;
    }
    .nav-menu {
        visibility: visible;
    }

    まとめ

    Basic Structureで基本的な設定をしておいて、
    @mediaで幅の大きいものから順にCSSをカスタマイズしていく。
    上の方（基本またはサイズの大きい方）で設定したものは、
    下の方（サイズの小さい方）に引き継がれる。

  • UX パターン (Windows)

    http://msdn.microsoft.com/ja-jp/library/windows/apps/hh770552.aspx

  • 「早春CMS祭り」を開催しました。

    「早春CMS祭り」を開催しました。

    2013年2月16日（土曜日）にCreator’s village in EHIMEさんとWordBench愛媛の共催で「早春CMS祭り」というセミナーを開催しました。

    開催内容はこちら(ATND)
    http://atnd.org/events/35423

    ツイッターのまとめ
    http://togetter.com/li/458104

    僭越ながら、私の発表資料はこちら
    http://www.slideshare.net/twikaz/cms-festa0216

    昨年秋、WordBench愛媛を作る際にお世話になった三好さん。@takayukister
    WordBenchのメッセージでやり取りをしていたところ「愛媛」というキーワードがあったので勢いで講師をお願いしたところ、快く引き受けてくださいまして、はるばる松山まで講演にきていただきました。

    ということで、せっかく三好さんに来て頂くので少しでも多くの方にご参加いただこうと思い、Creator’s village in EHIMEの@bornknow108さんに共催をお願いしたところ、快く引き受けてくださいましてトップバッターとして登壇をしていただきました。

    そして、最近いろいろなコミュニティに積極的に参加され、プレゼンもされている@0310lanさんにお声がけしたところ、快く引き受けてくださいまして、ウェブサービスのCMSをメインにご紹介いただきました。

    さらに、@bornknow108さんからのご紹介で@netachoさんにも劇画調に各種CMSをご紹介いただきました。さすがWebディレクターです。プレゼン内容はまさにエンターテインメントでした。

    ショートセッションでは昨年のWordBench愛媛で自作のプラグインをつくってこられたわたなべさんに、プラグイン開発の技術要素についてご紹介をいただきました。プレゼン資料がきれいに作られていて尊敬。

    ラストのセッションはオートクチュールの中村さん。@shinyajp
    ソーシャルアプリで益々ご発展の様子。お忙しい中ありがとうございました。

    それと、今回のセミナーで会場を提供してくださったイヨテツケーターサービス様には会場設営から当日の受け付け、ドリンクの提供など大変感謝しております。さらに、開催当日の午前中にコワーキングスペースを無料提供してくださったシトラス・スペース・カンパニー様にもお世話になりました。

    ご参加いただいた皆様もふくめ、お礼申し上げます。
    ありがとうございました。

  • Inkscapeの練習

    以前の記事でも紹介をしたのですが、Androidアプリのアイコンを作る際に少し作り方を変えてみようと思って Inkscape を使い始めました。何かのセミナーでこのツールを教わったような…

    で、あらためて使い方を勉強してみようと調べたところ
    Inkscaper というサイトが見つかりました。

    ということで、簡単なサンプル。

  • 引き続き WordPress のテーマ

    比較的シンプルなテーマを2点ほど取り上げて
    ざっとHTML5の対応について調べてみました。

    • Suffusion
      http://wordpress.org/extend/themes/suffusion
    • Fiver
      http://wordpress.org/extend/themes/fiver

    Suffusionの場合、トップページにはsectionタグが見つからなかったのですが、
    コンテンツの詳細ページで使われていました。

  • PageLines – WordPressのテーマ

    先日、CSS Niteというセミナーに参加しました。
    http://cssnite-matsuyama.com/vol01/
    http://cssnite.jp/
    HTML5とCSS3を中心に、各講師の方それぞれの切り口で
    貴重なお話を聴かせていただきました。

    せっかく勉強したので何か実践してみようと思い、
    WordPressのテーマを HTML5 というキーワードで検索。
    #実践という割には、やる気が感じられないですね。(汗

    まぁともかく、PageLinesというテーマを見つけてインストール。
    最近のテーマは各種SNSへの対応はもちろんのこと、
    ダッシュボードの設定画面がとても充実しています。

    以下、1点気になったので、メモ書き。
    フッターに Twitter Bar があって、
    アカウントを設定すると最近のツイートが表示されるとか。
    ですが、どうもうまく動作せず。

    そこで、非表示にしようと思ったのですが、
    設定の場所がすぐには見つからず。
    ということでスクリーンショットを貼っておきます。

  • IE9プレビュー版リリース

    IE9プレビュー版がリリースされたようです。
    http://ie.microsoft.com/testdrive/Default.html
    「Acid3テストでのスコアは55」

    Acid3とは、
    http://ja.wikipedia.org/wiki/Acid3
    http://ja.wikipedia.org/wiki/Acid2

    YoutubeがIE6のサポート終了
    http://internet.watch.impress.co.jp/docs/news/20100315_354818.html

    Web標準から大きく外れたものは対象から外していきたい今日この頃です。

  • [Flash]テキスト入力の背景（備忘録）

    Flashのテキスト入力で、[テキストの周囲にボーダーを表示] を選択すると
    白い背景と黒い枠線で表示されます。このオプションを外すと、透過になります。

    詳しくは、
    ヘルプ：「 テキストフィールドの作成と編集」
    ->「ダイナミックテキストおよびテキスト入力オプションの設定」
    を参照。