岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

レスポンシブ対応画像スライダー『Easing Slider』のご紹介

f:id:yamato-ugaki:20160415153042j:plain


こんにちは。
ユーザー視点からのUIを気にかけられる
web制作の宇垣です。


現在のホームページはスマホ対応が必須になってきましたよね。
スマホ対応というとやはりレスポンシブ。

最初に疑問に思うのが、スマホ対応とレスポンシブって違うの?
ということだと思うのです。
私も最初は疑問でした…。


ざっくり説明すると、レスポンシブはスマホ対応の方法の1種だと認識しています。


スマホ対応とはスマートフォンでも難なく見れるサイト。

PC用のサイトとは別に、スマホの時だけスマホ専用のページを表示させても「スマホ対応」になります。

一方、レスポンシブデザインでスマホ対応を行うと
PC用の表示とスマホ用の表示は同じです。
どちらも同じindex.htmlにアクセスしている状態を指します。
その上で、CSSやJSを効かせて順番を変え、レイアウトを変え…でスマホでも難なく見れるサイトにしていくことを言います。



まあ、そんなスマホ対応が必須の世の中
更にフルスクリーンでのスライダー、動画をホームページの
一番最初(ファーストビュー)に持ってくる企業も増えてきました。


ワンクリックでレスポンシブ対応ができる
フルスクリーンスライダーをご紹介しています。
(フルスクリーンでなくてもできます)


レスポンシブ対応画像スライダー『Easing Slider』


wp-notebook.com



このスライダーの場合、画像の切り替えはフェードかスライドしかありませんが
上にマスクを被せてしまえばあたかも背景に動画を流しているような
デザインに簡単にできてしまいます。

f:id:yamato-ugaki:20160415154250j:plain

実際に動画を流しているわけではないのでスマホのときも
自動再生ができます
ので重宝しています。

スマホでも動く、動画を編集する手間もいらないなんて。

ページトップ