パフォーマンスのためのデザイン

UXとパフォーマンス

UXを向上させる1つの要素としてパフォーマンスがあります。
UX界隈では見落とされがちになるのですが、Googleもパフォーマンスに関しては検索結果上位の条件にいれていますし、パフォーマンスアップは、デジタルマーケティングにおいて無視できないものになっています。

アマゾンではパフォーマンス向上させたことで、ユーザーを待せずに申し込みまで繋げて売上がアップしたというデーターを出しています。

パフォーマンスのチェック方法

GoogleからPage Speed Insightを利用するとそのサイトのパフォーマンスをチェックすることができます。
2012年のGoogle I/Oではモバイルで85点以上パソコンで90点以上が望ましいと言われています。

ちなみに、UX DAYS T 2016では、モバイルで85点以上パソコンで90点以上を獲得しています。

パフォーマンスアップのデザイン

「パフォーマンス」というカテゴリが確立され専門チームを作る企業も現れ、弊社でもパフォーマンス案件の相談を数年前からいただいています。しかし、相談の中にはデザインが既に決定しているケースがあります。

UIは違う会社で、パフォーマンスだけをお願いします。というケースなのですが、デザインが既に存在してパフォーマンスを向上させるには限界があります。そこで、今回はパフォーマンスアップのためのデザインとして少しだけご紹介いたします。

ボタンデザイン

今までのWebサイトで良く利用されていたリアル（スキューモフィック）なボタンデザインを例に考えてみましょう。

上記のボタンデザインは、画像、CSS3で実装が可能です。

画像での実装はソース上簡単ですが、HTTPリクエストが画像分増えるためパフォーマンスが弱くなります。hoverした画像なども考慮すると2枚以上の画像が必要になるためその分遅くなります。CSS3での実装は以下のソースで実現でき、HTTPリクエストは他のデザインも含まれたCSSの読み込み1回だけになります。


.css_btn_class {
font-size:20px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #d83526;
padding:14px 72px;
text-decoration:none;
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );
background-color:#fe1a00;
color:#ffffff;
display:inline-block;
text-shadow:1px 1px 0px #b23e35;
-webkit-box-shadow:inset 0px -2px 0px 0px #702434;
-moz-box-shadow:inset 0px -2px 0px 0px #702434;
box-shadow:inset 0px -2px 0px 0px #702434;
}.css_btn_class:hover {
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
background:-ms-linear-gradient( top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ce0100), color-stop(100%, #fe1a00) );
background-color:#ce0100;
}.css_btn_class:active {
position:relative;
top:1px;
}

１回のリクエストで読み込むことができるので画像よりパフォーマンスは良いですが、デザインを変更するだけでパフォーマンスが良くなったらいいですね。ということで、次にパフォーマンスがより向上するデザインについて考えてみましょう。

デザインそもそもを見直す

上記のような立体的なボタンは一見わかりやすいのですが、以下のようなボタンデザインであればコードの量が少なくても実装が可能です。

上記のボタンを実装するコード。半分くらいの量で実装が可能。

｛ display: inline-block;
min-width: 300px;
max-height: 60px;
border-radius: 30px;
font-size: 1.5rem;
line-height: 60px;
transition: .3s;
｝
{
padding: 0 20px;
background-color: #ce0000;
color: #fff;
font-weight: bold;
text-align: center;
vertical-align: bottom;
}


パソコンを含むデジタルの世界では、このようなフラットなデザイン合っていると考えられ、数年前からフラットデザインが注目されています。
Googleのマテリアルデザインもこのフラットデザインのコンセプトをベースに構成されています。

ブラウザのレイアウト表示には時間がかかる

CSSレイアウトは１つづつの要素に余白を設定することができます。要素ごとに余白のサイズを変更しているコードを見ることがありますが、個別に余白を指定しているため余分なコードが多くなります。

ブラウザはレイアウトの表示に時間を要してしまう傾向があります。みなさんも背景だけが見えて、コンテンツが後からレイアウト（配置）されるものを見たことがあると思います。

このように、レイアウトは時間が要してしまうのにも関わらず、要素ごとに個別の余白が指定されているとより時間がかかることは容易に理解できます。以下は同じページの画像の右と左の余白が異なる例です。

フォントサイズや色指定もできるだけ統一

デザインの中で、デザインを一貫性を持たせる「トンマナ」という用語がありますが、Webサイトにおいてもできるだけ統一させコードを短く書くことが有用です。

色の違いに意味があれば利用すべきですが、その違いに意味がなく利用しているケースがあります。

以下のように横に並べて比べてみれば色の違いはありますが、Webサイトは、パソコン、モニター、デバイスの違いで多少の色が異なります。
グラフィックではこだわることに意味のある色の違いはWebの世界では意味がありません。

なのにも関わらず、多少の色の差の異なるカラーをほぼ変わらない場所で利用しているケースを目にします。簡単に言うと、h5とH6のフォントカラーをほぼ同じ色でフォントサイズもわからないようなケースです。これは単純に無駄なコードでしかありません。

パフォーマンスは最後にチューニングだけのものではない

パフォーマンス設計は最終的に行うものではなく、横断的に行う必要があります。ご紹介したようにパフォーマンスに適したデザインも存在しますし、ルールも存在します。パフォーマンスはデザインの早い段階で検討する要素にしていきましょう。

また、運用していくにつれてパフォーマンスが悪くなるようなことがないように、インターフェースインベントリーやCSSスタイルガイドも作成しておきましょう。

いいね0