石川県能登町で発足した、「障害攻略課」の公式サイトを制作のご依頼をいただきました。
障害攻略課プロジェクトとは
ハード面のバリアフリーだけでなく、「心のバリアフリー」を推進する。障害攻略課は、バンクーバー・パラリンピック銀メダリストの上原大祐（うえはらだいすけ）氏、こころのバリアフリークリエーターの加藤さくら氏、世界ゆるスポーツ協会代表の澤田智洋（さわだともひろ）氏と中能登町がタッグを組んで立ち上げたプロジェクト。社会にあるいろいろな障害を「攻略士」と呼ばれる方々と一緒に楽しくゲーム感覚で攻略していく世界に類をみないプロジェクトです。
障害を攻略していく攻略士として、地域の学生や住民ら約20名がメンバーとして参加する。誰もが分け隔てなく、気軽に交流し暮らすことができるまちづくりを、中能登町の基幹産業の繊維などあらゆる技術をあわせて活動し、心のバリアフリー先進地エリアを目指す。
出典：中能登町Webサイトより 「障害攻略課プロジェクトのスタートについて」
遊び心あるデザインを目指して
「社会にある障害を、ゲーム感覚で楽しく攻略していく」というテーマで、ご要望としていただいたのは、「遊び心あるデザインを」とのことでした。
行政のWebサイトというと少々堅苦しいイメージがありますが、そのイメージを拭うようなデザインを目指しました。
障害攻略課公式サイト
明るいビビッドな色調を使うことで、POP感をプラス。
一方、ただ色合いだけで表現すると、子供っぽくなりすぎてしまうので、空間を活かして落ち着きも取り入れました。
料理の盛り付けとおんなじですね。
大きなお皿の真ん中にちょこんと盛り付けると、大人な高級感がでませんか？
また、見て楽しめるサイトを意識して、背景に動画を流したり、要素を斜めに配置したり、スクロールで要素がずれていったり、と動きをつけているのもポイントです。
利用シーン、閲覧シーンを考えて、スマートフォンでもスムーズに扱えるサイトとして構築しています。電話番号をクリックするとそのまま電話かけられたりします。
動画を埋め込む際の注意
最近は、TOPに動画を流すサイトが多くなりました。
それだけでサイトのオシャレ度がアップしますよね！
「障害攻略課」のサイトでも、TOP部分と「ムービー」コンテンツの2箇所で動画を埋め込んでいます。ムービー部分で動画の全編がご覧いただけます。
今回は、動画を流したサイトを制作したい！という方に、動画の埋め込みでつまずいたポイントをお伝えしたいと思います。
1. <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>
2. 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);
}
無事、問題が解決してリリースに間に合いました！
このプロジェクトがこれからどのように発展していくのか、私たちも楽しみです！
障害攻略課公式サイトはコチラ
