石川県能登町で発足した、「障害攻略課」の公式サイトを制作のご依頼をいただきました。

障害攻略課プロジェクトとは

ハード面のバリアフリーだけでなく、「心のバリアフリー」を推進する。障害攻略課は、バンクーバー・パラリンピックアイススレッジホッケー銀メダリストの上原大祐（うえはらだいすけ）氏、こころのバリアフリークリエーターの加藤さくら氏、世界ゆるスポーツ協会代表の澤田智洋（さわだともひろ）氏と中能登町がタッグを組んで立ち上げたプロジェクト。社会にあるいろいろな障害を「攻略士」と呼ばれる方々と一緒に楽しくゲーム感覚で攻略していく世界に類をみないプロジェクトです。障害を攻略していく攻略士として、地域の学生や住民ら約20名がメンバーとして参加する。誰もが分け隔てなく、気軽に交流し暮らすことができるまちづくりを、中能登町の基幹産業の繊維などあらゆる技術をあわせて活動し、心のバリアフリー先進地エリアを目指す。

出典：中能登町Webサイトより　「障害攻略課プロジェクトのスタートについて」

遊び心あるデザインを目指して

「社会にある障害を、ゲーム感覚で楽しく攻略していく」というテーマで、ご要望としていただいたのは、「遊び心あるデザインを」とのことでした。

行政のWebサイトというと少々堅苦しいイメージがありますが、そのイメージを拭うようなデザインを目指しました。

http://shogai-koryaku.com/

明るいビビッドな色調を使うことで、POP感をプラス。

一方、ただ色合いだけで表現すると、子供っぽくなりすぎてしまうので、空間を活かして落ち着きも取り入れました。

料理の盛り付けとおんなじですね。大きなお皿の真ん中にちょこんと盛り付けると、大人な高級感がでませんか？

また、見て楽しめるサイトを意識して、背景に動画を流したり、要素を斜めに配置したり、スクロールで要素がずれていったり、と動きをつけているのもポイントです。

利用シーン、閲覧シーンを考えて、スマートフォンでもスムーズに扱えるサイトとして構築しています。電話番号をクリックするとそのまま電話かけられたりします。

動画を埋め込む際の注意

最近は、TOPに動画を流すサイトが多くなりました。それだけでサイトのオシャレ度がアップしますよね！

「障害攻略課」のサイトでも、TOP部分と「ムービー」コンテンツの2箇所で動画を埋め込んでいます。ムービー部分で動画の全編がご覧いただけます。

今回は、動画を流したサイトを制作したい！という方に、動画の埋め込みでつまずいたポイントをお伝えしたいと思います。

<video>タグのcontrols属性

動画の埋め込みには、HTML5の<video>タグを使用します。

<video>タグの属性の一つであるcontrols属性は、再生・一時停止・ボリュームなどを操作できるコントロールバーを表示するオプションです。

今回、TOP部分の動画の上にドットのカバーを配置していますが、このドットのカバーが開始数秒でずれてしまう現象が発生しました。

これは、コントロールバーが動画のロード数秒後に表示される為、動画の縦幅がコントロールバー分大きくなってしまうことが原因でした。

<解決方法>

controls属性を外してあげることで解決できます。今回は、コントロールバーの上に別の要素を重ねていた為、すぐに気付けなくて苦労しました・・・。

動画の上に何か要素を乗せる場合に参考にしてくださいね！

■タグサンプル:TOP

<video autoplay loop muted="" poster=“{初期表示するサムネイル画像へのパス}”>

<source src=“{動画へのパス}” type="">

</video>

■ムービー

<video poster="{初期表示するサムネイル画像へのパス}" controls="">

<source src="{動画へのパス}" type="">

</video>

z-indexが効かない

スマートフォンで動作確認すると、ムービー部分の背景が表示されなくなってしまう現象が発生しました。

また<video>タグが犯人か！？と思いきや、z-indexを指定してないだけでした。

z-indexは、要素の重なりの順序を指定するCSS3のプロパティです。

集合写真を一番下にして、その上に動画コンテンツを重ねています。z-indexの指定がなかったので、写真の後ろに動画が隠れてしまっていたんですね。

<解決方法1>

ムービー部分を囲むようをにz-indexを指定してあげました。

position指定も忘れないでくださいね。

#movie {

position: relative;

z-index: 3;

}

しかし、iOSで確認すると直っていません！！

実はこれ、iOSでよくあるバグなんです。

iOS8で、z-indexを使っている要素をJSで操作すると、重なり順がおかしくなってしまいます。

メニュー部分をJSで動かしている為、このバグに引っかかってしまったみたいです・・・。

<解決方法2>

z-indexではなく、transformのtranslate3dで重なり順を設定する方法に変更しました。

ベンダープレフィクス-webkit-を忘れずに！

#movie {

-webkit-transform: translate3d(0, 0, 1px);

transform: translate3d(0, 0, 1px);

}

無事、問題が解決してリリースに間に合いました！

このプロジェクトがこれからどのように発展していくのか、私たちも楽しみです！

障害攻略課公式サイトはコチラ