TCD FAKE(TCD074) カスタマイズ事例 – ヘッダー動画をレスポンシブに

当オフィスではTCDのFAKE(TCD074)の特別ライセンスを取得しておりますが、たまに、このFAKE(TCD074)テーマについてのカスタマイズのお問い合わせが入ることがあります。

そして最近実際にあったお問い合わせなのですが、

「トップヘッダーに動画を使っているが、スマートフォンでの閲覧時にヘッダー動画の一部分しか表示されない。PCとスマホ、それぞれで別の動画を表示できないか」

とのご要望でした。

確かに、FAKE(TCD074)のヘッダーには画像スライダーだけではなく動画を設定できるんですが、動画は一つしか設定できないので、パソコンでの閲覧を想定した横長の動画で、かつ、動画が左右に動きのあるものだと、スマホで閲覧した際に動画の一部しか表示されず、肝心な部分が伝わらない等の問題が確かにあります。

この問題に対応するには、PCおよびスマホのどちらで閲覧してもそれなりに表示されるような構成で、フレームサイズもPCとスマホのどちらにもフィットするようなアスペクト比の動画を用意するしかないのですが、これにも限界があります。

そして一番良いのは、PC用とスマホ用それぞれのバージョンの動画を用意する事。

実際にヘッダー部分に動画を用いているサイトで、PCとスマホで動画を出し分けているサイトがあります。それが下のスキンケア商品のショッピングサイトであります「ピカイチ」さんのサイトです。

ピカイチ公式ショッピングサイト | さぁ、しあわせなお肌になろう。 (pikaichi.co.jp)

このサイトにアクセスするとまず飛び込むのがCM調の動画です。そして、このサイトではパソコンで見てもスマホで見ても動画は最適に表示されています。理由は、アクセスユーザーの端末に応じて(PCかスマホか)2種類の動画を出し分けているから。

なぜ知っているのかというと、以前、合同会社アシスト様という会社様から、「自社が取り扱う商品の紹介サイトを作成して欲しい。商品動画はあるのでヘッダーに動画を用いたい」とのご依頼があり、イメージ参考サイトとして頂いたのが上記「ピカイチ」様サイトでした。

この際に調べて分かったのは、ピカイチ様のサイトのヘッダー動画はPC用(1920×1080)とスマホ用(1080×1920)の2種類があって、メディアクエリ768pxをブレークポイントとして動画を出し分けているという事でした。

特にCM調の動画とかだと左右に動きがありますし、やはり、そのような場合は動画は2種類用意して出し分けて表示するレスポンシブ仕様としたいところですよね。

話が長くなりましたが、今回のお問い合わせを頂いた際に、FAKE(TCD074)テーマのヘッダー部分に独自カスタマイズを加え、PC用とスマホ用の動画を出し分けれるように改修を加えてみました。以下、そのデモサイトです。

FAKE(TCD074)動画ヘッダーレスポンシブ化デモサイト

このデモサイトでは次の2種類の動画を使っています。

そして実際にデモサイトにアクセスしていただき、ブラウザの幅を縮めたり、または、PCと合わせてスマホでも閲覧いただくと分かるのですが、それぞれの動画が出し分け表示されるのが分かる筈です(このデモサイトのブレークポイントは768pxで設定しています)。

PC閲覧時のスクショ
スマホ閲覧時のスクショ

実際のデモサイトはこちら⇒FAKE(TCD074)動画ヘッダーレスポンシブ化デモサイト

FAKEはコンテンツビルダーに動画アップローダーが搭載されていますが、登録できるのは一つだけ。今回のカスタマイズにおきましては、スマホ用動画はPC用動画のファイル名末尾に「-sp」を付加してワードプレスの管理画面「メディア」にて別途アップロードする方法としております。

例えば、PC用動画のファイル名が「test.mp4」の場合、スマホ用のファイル名は「test-sp.mp4」として頂き、スマホ用動画はメディアアップローダーでアップしておくだけです。それだけで上記動画のレスポンシブが実現できます。

以上、TCD FAKE(TCD074)テーマのカスタマイズ事例のご紹介となります。

ご興味のある企業様ございましたら是非お問い合わせください。お待ちいたしております。

  • 今回ご紹介するカスタマイズ事例は、TCD FAKEテーマのテンプレートファイルにコード追記等の改修を加える手法となりますので、子テーマ化が必要となる手法となります。
  • TCDテーマを使ったサイト制作やカスタマイズを承る場合、当オフィスにおきましては、基本料金としまして、68,400円(税込)を頂いております。
  • 今回ご紹介するカスタマイズ事例の料金は基本料金のみの68,400円(税込)となります。
  • 従いましてTCDテーマのカスタマイズのご依頼の際には、サイト制作からご依頼頂く、または、その他カスタマイズも併せてご依頼頂くのがお得です。
  • TCDテーマのサイト制作およびカスタマイズにつきましては、既にTCDテーマを購入済の方のみ承っております。

コメントを残す

メールアドレスが公開されることはありません。