石川県能登町で発足した、「障害攻略課」の公式サイトを制作のご依頼をいただきました。障害攻略課公式サイト障害攻略課プロジェクトとはハード面のバリアフリーだけでなく、「心のバリアフリー」を推進する。障害攻略課は、バンクーバー・パラリンピック銀メダリストの上原大祐(うえはらだいすけ)氏、こころのバリアフリークリエーターの加藤さくら氏、世界ゆるスポーツ協会代表の澤田智洋(さわだともひろ)氏と中能登町がタッグを組んで立ち上げたプロジェクト。社会にあるいろいろな障害を「攻略士」と呼ばれる方々と一緒に楽しくゲーム感覚で攻略していく世界に類をみないプロジェクトです。障害を攻略していく攻略士として、地域の学生や住民ら約20名がメンバーとして参加する。誰もが分け隔てなく、気軽に交流し暮らすことができるまちづくりを、中能登町の基幹産業の繊維などあらゆる技術をあわせて活動し、心のバリアフリー先進地エリアを目指す。遊び心あるデザインを目指して「社会にある障害を、ゲーム感覚で楽しく攻略していく」というテーマで、ご要望としていただいたのは、「遊び心あるデザインを」とのことでした。行政のWebサイトというと少々堅苦しいイメージがありますが、そのイメージを拭うようなデザインを目指しました。障害攻略課公式サイト明るいビビッドな色調を使うことで、POP感をプラス。色合いだけで表現すると、子供っぽくなりすぎてしまうので、空間を活かして落ち着きも取り入れました。料理の盛り付けとおんなじですね。大きなお皿の真ん中にちょこんと盛り付けると、大人な高級感がでませんか?また、見て楽しめるサイトを意識して、背景に動画を流したり、要素を斜めに配置したり、スクロールで要素がずれていったり、と動きをつけているのもポイントです。利用シーン、閲覧シーンを考えて、スマートフォンでもスムーズに扱えるサイトとして構築しています。電話番号をクリックするとそのまま電話かけられたりします。最近は、TOPに動画を流すサイトが多くなりました。それだけでサイトのオシャレ度がアップしますよね!「障害攻略課」のサイトでも、TOP部分と「ムービー」コンテンツの2箇所で動画を埋め込んでいます。ムービー部分で動画の全編がご覧いただけます。今回は、動画を流したサイトを制作したい!という方に、動画の埋め込みでつまずいたポイントをお伝えしたいと思います。動画の埋め込みには、HTML5の<video>タグを使用します。ボリュームなどを操作できるコントロールバーを表示するオプションです。今回、TOP部分の動画の上にドットのカバーを配置していますが、このドットのカバーが開始数秒でずれてしまう現象が発生しました。これは、コントロールバーが動画のロード数秒後に表示される為、動画の縦幅がコントロールバー分大きくなってしまうことが原因でした。解決策:controls属性を外してあげることで解決できます。今回は、コントロールバーの上に別の要素を重ねていた為、すぐに気付けなくて苦労しました・・・。z-indexが効かないスマートフォンで動作確認すると、ムービー部分の背景が表示されなくなってしまう現象が発生しました。<video>タグが犯人か!?と思いきや、z-indexを指定してないだけでした。z-indexは、要素の重なりの順序を指定するCSS3のプロパティです。集合写真を一番下にして、その上に動画コンテンツを重ねています。z-indexの指定がなかったので、写真の後ろに動画が隠れてしまっていたんですね。解決策1:ムービー部分を囲むようをにz-indexを指定してあげました。position指定も忘れないでくださいね。3;}しかし、iOSで確認すると直っていません!!実はこれ、iOSでよくあるバグなんです。iOS8で、z-indexを使っている要素をJSで操作すると、重なり順がおかしくなってしまいます。メニュー部分をJSで動かしている為、このバグに引っかかってしまったみたいです・・・。解決策2:z-indexではなく、transformのtranslate3dで重なり順を設定する方法に変更しました。種類の多いオーダーカーテンをタブメニューにすることで、機能や利用イメージを比べやすく表示しています。現在の挑戦や課題にも目を背けず、着実に解決していく必要があると考えます。