【リリース】障害攻略課様 – HP

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

障害攻略課公式サイト

障害攻略課プロジェクトとは
ハード面のバリアフリーだけでなく、「心のバリアフリー」を推進する。障害攻略課は、バンクーバー・パラリンピック銀メダリストの上原大祐(うえはらだいすけ)氏、こころのバリアフリークリエーターの加藤さくら氏、世界ゆるスポーツ協会代表の澤田智洋(さわだともひろ)氏と中能登町がタッグを組んで立ち上げたプロジェクト。社会にあるいろいろな障害を「攻略士」と呼ばれる方々と一緒に楽しくゲーム感覚で攻略していく世界に類をみないプロジェクトです。
障害を攻略していく攻略士として、地域の学生や住民ら約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);
}

無事、問題が解決してリリースに間に合いました!
このプロジェクトがこれからどのように発展していくのか、私たちも楽しみです!

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