【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブサイトの「不自然さ」をCSS3で解消する方法

レスポンシブサイトの「不自然さ」をCSS3で解消する方法

不自然な挙動を最小限に

こんにちは、ロックウェーブの岡本です。

ヤコブ・ニールセンが書いた2003年の文献に、レスポンシブデザインに関係するような言及があって少し驚いています。

守られていないホームページのガイドライン・トップ10

記事自体はPCのユーザービリティについてであるため、「リキッドデザイン」についての言及ではありますが、モバイルまで視点を広げると「レスポンシブ化すべき」というニュアンスにも取れるのではないかと思います。

今回はレスポンシブサイトを閲覧していて、前から感じていた「ちょっとした違和感」についてまとめてみました。

突然大きくなるメインコンテンツ

レスポンシブサイトを閲覧しているとありがちなこと。それは「突然コンテンツが大きくなる」ということです。

これはmediaqueryでwidthがデフォルトサイズよりも大きくなるように設定されている際におこる現象です。

参考:Skeltonで2カラム→1カラムに設定した場合のcss(抜粋)

/*メインコンテンツ*/
.container .two-thirds.column               { width: 620px; }
/*サイドバー*/
.container .one-third.column                { width: 300px; }

/*タブレットでは1カラムに*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
/*メインコンテンツ*/
.container .sixteen.columns                 { width: 748px; }
/*サイドバー*/
.container .sixteen.columns                 { width: 748px; }
}

ここではディスプレイのサイズが768px以下になった時、メインコンテンツが1.2倍(620px→748px)に拡大されているのがわかります。

このようなスタイリングは、ほとんどのレスポンシブサイトで実装されている「コンテンツ最適化法」です。

不自然な拡大・膨張=威嚇

ただ、「目の前のものが突然大きくなる」というのはあまり自然な動きではありません。

アイキャッチとして利用している画像のようなサイズが大きいものが突然膨張すると、少し気圧されるような印象を受けることが(個人的に)あります。

「なぜ気圧されるのだろうか」と思い、少し調べてみたところ、どうやら「威嚇」の要素が含まれている様でした。

wikipediaより「威嚇」

 威嚇の手段
  ・自らの体またはその一部を大きくして自らの力を誇示する。(主に鳥類に多くみられる)

有名ドコロではハリセンボンや孔雀などでしょうか。

サイトを制作・運用している側としては、コンテンツが大きくなる現象は見慣れたものかもしれません。

ですがサイトを訪れる人が皆レスポンシブデザインの「仕様」に慣れているとは限りませんので、できれば「自然な動き」で拡大させたいものです。

そこで利用したいのが「CSSのアニメーションプロパティ」です。

cssアニメーションで、「自然な拡大」に

利用するCSSプロパティは「transitionプロパティ」です。

transitionプロパティで指定できるもの

transition: [property] [duration] [timing-function] [delay];

property: アニメーションを適用するプロパティを指定する
duration: アニメーション時間を指定する
timing-function: アニメーションの加速・減速を指定する
delay: アニメーションの開始タイミングを指定する

このサイトではトップページの記事一覧にスタイルを適用させていますが、以下の様な指定を行なっています。

transition: width 1s ease-in-out 0.01s;

<意訳>widthが変更された0.01秒後に、1秒間でゆっくり始まりゆっくり終わるアニメーションを開始する。

開始を少しだけ遅らせているのは、コンテンツの位置が少し変更されるために「位置変更→サイズ拡大」という動きを見せるようにしたためです。

これで多少強引かもしれませんが、コンテンツが自然に拡大するようになりました。

Compassで楽をする

CSS3で面倒なのがベンダーフィックス、ここではcompassを使って楽をします。

scssファイルに以下の2行を記述すれば、ベンダーフィックスは完璧です。

@include transition(width 1s ease-in-out 0.01s);

これをコマンドプロンプトなどでコンパイルすると、以下のように変換されます。

/*コンパイル後*/
  -webkit-transition: width 1s ease-in-out;
  -webkit-transition-delay: 0.01s;
  -moz-transition: width 1s ease-in-out 0.01s;
  -o-transition: width 1s ease-in-out 0.01s;
  transition: width 1s ease-in-out 0.01s;

compassについてはLIGに素晴らしい記事がありますので、そちらを御覧ください。

→CSSの常識が変わる!「Compass」、基礎から応用まで!

まとめ

「威嚇・不自然」などと仰々しく書いた割りにはtransitionで片付けてしまいましたが、いかがでしたでしょうか。

ちょっとしたことですが、不自然さを解消することでUIの改善につながります。

本当に自然な動作を目指すならば、それぞれに個別のブレークポイントを設けるのが一番かもしれません。

そのためにはデフォルトのコンテンツサイズと%で指定したサイズが一致する点を探し出す必要がありますが・・・

FlexBoxなど、今後のアップデートで使用できるようになる(と言われている)プロパティもありますので、レスポンシブデザインはまだまだこれから発展していきそうです。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+