ホームページに動きを加える装飾を追加しました

装飾のアクション機能を一部修正・追加し、また背景の部分色に動きのあるタイプを追加しました。
動きのあるコンテンツでホームページに「活き」をプラスしましょう。
ここでは新機能の紹介と、使い方を説明します。

アクション

見た目を編集できる「装飾」機能の中でも、動きを与える「アクション」は人気で、多くのまめわざユーザーの皆様にご利用いただいております。
今回は、このアクションの一部を修正しました。

既存のアクションにボヨヨン効果

アクションの中で上下左右からのスライドを除く「ズームイン」「ズームアウト」「圧縮」「起立」「回転」「上下反転」「左右反転」の7つに「ボヨヨン」という感じの跳ね返りの効果を与えました。
微妙な違いですが、画面スクロールに応じたコンテンツの登場を、より強調できます。

このボヨヨン効果は自動で適用され、除外することはできません。

ズームイン
ズームアウト
圧縮
起立
回転
上下反転
左右反転

画像を時間差でアクション

画像ブロックに複数の枠を設定している場合に、左上から右下へと順番にアクションが適用されるようになりました。
コンテンツの登場がより強調され、また華やかさが演出できます。

この時間差アクションは自動で適用され、除外することはできません。
時間差でアクションが適用される単位は「画像」ではなく「枠」です。1つの枠に含まれる複数の画像は、時間差でアクションが適用されません。

ブルブルなど常時微動も追加

これまでのアクションは、ページスクロールに応じて1回のみ動作するもので、主に「登場」を表現するものでした。
ここに今回、「注目」を目的として利用できる微動を追加しました。
コンテンツの一部を微動させることで、目を引くことができます。
上の2つのボタンにはこの常時微動を設定しています。

同一ページ内での利用制限などはありませんが、使いすぎると非常に見づらいページになってしまうので注意が必要です。

動く部分色

配色の幅を広げる部分色に、動きのある波型の「形状」を追加しました。また、既存のストライプ系も動きを設定しました。
波はゆらゆらと動き、ストライプ系は理髪店の看板のように横移動します。
アクションとは異なり常に動作をするので、デザインのアクセントとして利用いただけます。

この背景はシンプルな2色のストライプです。ひな形にもあります。

この背景は、画像の上下位に波のように揺れる白の部分色を設定しています。
複数画像を登録した場合、スライド系とは両立できませんが、唯一フェードアウトとは両立可能です。

動的コンテンツを考える

ホームページは紙媒体と違い、動きを与えることができます。
一方で、テレビや動画と違い、詳しい読みものとして提供することも可能です。
静的にも動的にも使えるのがホームページの特徴の1つです。

動的コンテンツはホームページから動画へ

数年前にはFlashという動的コンテンツを扱うプログラムの全盛期がありました。その頃の方が動的なホームページが多かったように思います。
時代は変わり、動的なコンテンツの現在の代表は動画です。
動的なホームページが減った一方で、動画という動的コンテンツはその地位を確立しました。
動的コンテンツの主役が、動的ホームページから動画に移ったのが現状のように思います。

動的ホームページはウザい?大手企業はどうしているか

動的なコンテンツは、「うるさい」「ウザい」印象を与える危険性をはらんでいます。
どこまでなら不快感を与えないのかは、ホームページ管理者にとっては大きな関心事です。

画面いっぱいの動画が強制再生されるようなホームページがあるのは、制作者が発注者を満足させるため、または発注者が自己満足した副作用のように思われます。そこには、ホームページ閲覧者の視点がありません。
広告たるホームページで不快感を与えては意味がありません。

ユーザビリティに配慮しているであろう大手企業のホームページを見ると、動的なコンテンツが少ないことに気づきます。
これは、動的なホームページが思いのほか不快感を与えやすい証拠のように思われます。
そんな大手企業のホームページでも、スクロールに応じでテキストや写真が微動するような不快感を与えないアクションは採用されています。
また、再生ボタン付きの動画コンテンツが用意されており、動的コンテンツの選択肢も同時に提供されているケースが散見されます。

現在の最適解とまめわざの取り組み

はじめに紙媒体と動画との違いを説明しましたが、紙媒体と動画の中間というのがホームページの立ち位置と言えそうです。
動的コンテンツを強制することなく、不快でないアクションを取り入れ、可能であれば動画も同時に提供するのが、現在の最適なコンテンツの提供方法というのが、まめわざの考えです。

まめわざでは、背景に動画を埋め込む機能は用意せず、不快感をなるべく与えないようなアクションを用意しています(使いすぎると不快になる可能性がありますのでご注意ください)。もちろん、Youtubeの貼り付けによる動画コンテンツの提供も可能です。

ページ読み込み速度

Googleは検索順位決定要因の1つとしてページの読み込み速度を利用しています。
動的なコンテンツは、速度を遅くする要因になり得ますので、注意が必要です。
まめわざでは、アクションの動作をなるべく軽くする工夫を施しています。しかし、多用すれば読み込み速度の低下に繋がることもありますので、適度な利用を心がけましょう。

2019/3/20