記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

レスポンシブサイトの「不自然さ」を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のサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

レスポンシブWebデザインカテゴリの最新記事