投稿者: exa-nishimura

ここ最近、背景やメインイメージに動画を使用したウェブサイトが増えてきています。当ホームページのトップページでも、メインイメージの背景に動画を使用しています。

HTML5の登場で動画挿入が簡単に

この傾向の最大の要因は「HTML5」の存在にあります。HTML5とは、ウェブサイトを構築する基本的な言語である「HTML」の最新バージョンで、表現力を向上させる新しい機能を想定して作られていることが特長です。
これまでウェブサイトに動画を挿入するには、複雑なスクリプト(プログラムの一種)を記述する必要がありましたが、HTML5の機能を活用することで、大幅に簡略化できるようになりました。

動画をデザイン要素のひとつとして

動画を背景に使用することも簡単になったため、例えば製品写真の背景に動画を使用したり、当ホームページのように上に重ねたコンテンツをスライドショーにする、といったこともできるようになりました。
また、あらかじめ動画にキャッチコピーなどのエレメントを組み込んでおくと、動画の画質が低い場合ボケて視認性が落ちてしまいますが、動画とエレメントを別々にしておくことで、画質に左右されることなく表示することができます。

注意点としては、ユーザーがHTML5の動画機能に対応していない古いタイプのブラウザを使用している場合と、表示が変わってしまう一部スマートフォンへの対策です。この場合動画ではなく、代替えの静止画を用意しておく必要があります。

エクサホームページで使った、最新のウェブデザインテクをご紹介

今月始めにエクサホームページをリニューアルしました。今回はこの新ホームページで使用している、最新のウェブデザインテクニックについてご紹介します。言われなければ気づかないような“さりげない”テクニックもあるので、ホームページ担当者のためにも、この記事を読んだらゼヒともじっくり見てあげてください…！

1、ガツンと目を引くムービースライドショー

トップのサービス紹介をスライドショーにしました。背景には“さりげなく”動画を使用しています。実はこれ、今までのウェブデザインではとっても手間のかかる技術なんです。

さりげなく、それでいて目をひく背景動画

2、ボンヤリ背景色の変わるリンクボタン

ボタンになっているリンクにマウスカーソルを持っていくとボンヤリとボタンの背景色がかわります。微妙すぎてボンヤリなのかわからないという人のために、後日くわしく解説いたします！

3、いつからそこに？！突然あらわれる「TOPへ」戻るボタン

いまどきのホームページなら必ずある、ページの「TOPへ」戻るボタン。でもこのホームページには見あたりません。…でも気がつくといつのまにか画面右下に！

使っている技術はまだまだありますが、今回はトップページで注目してほしいポイントをご紹介しました。

後日あらためて当ブログにて「実際どんな技術」で「どんな目的があるのか」といった詳しい話をさせていただきます。お楽しみに！