速度制限でもストレスのないWEBページ

Pocket

現在主流の4G通信回線の実行速度は、
15Mbps(15,000kbps)程度といわれています(規格上は150Mbps~225Mbps)。
※「bps」=バイト・パー・セカンド/1秒間に受け取れるデータ量

そんな中、利用者は、契約ギガバイト数を超過すると厳しい速度制限を受けることになりますが、その「128kbps制限」を体験している利用者は65%程度いる様ですので見過ごせません。
※『スマートフォンに関する意識調査』NTTコミュニケーションズ調べ

今回はそんな方のなかでもデータ容量の追加購入せずに月末を乗り切る利用者を考慮して、
「128kbps制限でもストレスの少ないWebページ」
を考えてみました。


回線速度の変遷リスト

まずは、通信の歴史、
固定電話回線と携帯電話回線の変遷をリストにしました↓


<固定電話回線>

電話回線(アナログ回線)1990年代  ※銅線
28.8kbps

ISDN回線(デジタル回線)      ※銅線
64kbps/128kbps(2チャンネル時)

ADSL回線              ※銅線
512kbps/47Mbps

光回線               ※光ファイバーケーブル
100Mbps前後


<携帯電話回線>

3G回線
2Mbps程度(実行速度)(規格上数Mbps/14Mbps)

4G回線
15Mbps(15,000kbps)程度(実行速度)(規格上150Mbpsや225Mbps)
速度制限を超えると通信速度が最大128kbpsに制限

※記載の速度実数値は参考程度となりますのでご了承ください。


上のリストは1990年代から「通信」を経験してきた年代には懐かしく、若年層には見慣れない項目が多いと思われますが、
制限状態にある「128kbps」という通信スピードがいかに遅い回線状態だったか理解いただけるのではないでしょうか。


128kbpsでできること

それでは速度制限を逆手にとって、
制限中もストレスなくサービスを利用出来ないかと考え、
分析を進めてみます。

まずは過去のFP時代のページ総容量レギュレーションを確認してみると…

・1ページあたりの容量は100kバイト以内(※概ねの指標)

とありますので

128kbps制限下でも、容量数字上は2秒もあれば表示されます。

FP(フィーチャーフォン)向け程度のページ情報を表示する分には十分なスピードです。


文字中心のページ製作へ

テキストは1文字につき、

・半角英文は、1バイト
・全角が必要な日本語は、2バイト(アジア地域などは「2バイト圏」と呼ばれます)

容量を使います。

単純計算すると、
128kバイトであれば、タグやスタイル、JavaScriptを含めて、
128,000文字の文章が書けます。
ブログ記事は2,000文字(4kバイト)程度が多いので、テキスト本文だけで考えると十分足りる計算です。
今回、
1秒程の読み込みを目指すのであれば、
タグや画像に、残りの124kバイト使用できます。
読み中心の静的ページであれば十分なのではないでしょうか。

さっそくサンプルページ作りを始めます。


読み物中心のページを作る

画像を載せる場合は容量制限を設定し、
大きすぎず適切な減色による容量削減が必要です。

ポイントとしてこちらでしょうか。
・グラデーションは使わない
・PNG8形式(インデックスカラー)で保存
・CSSスプライトで画像を1ファイル化(アクション発生件数を減らす)

今回、この記事ページ自体をサンプルとして扱い、使用画像含め128kバイト以内で作りました。
本文テキスト部分の文字数は2,000文字程度です。

ページ内容のみの容量は25kバイト程度ですので、
通常の電波状況ではストレスなく表示が出来ると思われます。


最後に

動画や画像中心のリッチなコンテンツページは、128kバイト以内では作れませんが、
制限下でも情報を問題なく表示できるページ作成は可能です。

ここまで詰め切る需要も少ないと思われますが。
FPのころの通信インフラにやさしいエコなサービス作りに挑戦するのも新鮮ではないでしょうか。
是非お試しください。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Pocket

デザインと錯視

Pocket

ロゴやフォント、イラストなどの大きさ・長さ・色・角度は、特定の条件が重なると、想定していた見え方と実際の見え方とで異なった見え方をする事があります。これを「錯視」と呼びます。いわゆる“目の錯覚”です。

デザインを行う前にはある程度錯視を理解しておく必要があります、なぜなら数値上は同じ位置・同じ間隔で揃えていても、実際に目で見て確認すると、錯視により同じ間隔ではないように見えてしまったり、ある要素だけが小さく見えてしまうという事が起きるからです。“なぜこの見え方になるのか”を知っておく事で錯視が起きた場合の修正をスムーズに行うことができます。今回はそんな錯視についてご紹介いたします。


フィック錯視

突然ですが問題です。①~③の図形のうち「A」「B」の長辺が同じ長さの図形はどれでしょうか?

正解は

「③」です。同じ長さに見えましたか?
フィック錯視とは同じ長さの図形でも、水平にされた図形よりも、垂直にした図形の方が長く見えるという錯視です。(なぜこのような見え方をするのか詳しいメカニズムは解明されていないそうです)ロゴデザインやイラスト製作などで、このような組み合わせが発生する場合は、数値に囚われず、自分の目で見て調整を行う必要があります。(下図参照)

また、同じ幅の図形でも、垂直にされたものよりも水平にされた図形の方が太く見えるため、ロゴやフォント制作の際は、縦線を太めに製作し錯視を調整する事があります。太さの変化は顕著に現れるわけではないので、調整は微調整程度に行われます。そのため普段目にするロゴやフォントでは、このような調整が行われていることに気づく人はいません。

エビングハウス錯視

同じ大きさの図形でも、周りに大きい物を置いた場合と、小さい物を置いた場合とでは大きさが異なって見える錯視です。

図のような配置をした場合、自分の想定よりも中心の図形のサイズ感が変わってしまうため、中心の図形のサイズを目で見て調整する必要があります。

デルブーフ錯視

同じ大きさの図形の周りに描く円のサイズによって、囲われた図形のサイズが異なって見える錯視です。

上記の錯視とは若干条件が異なりますが、同じ大きさのドット柄でも、枠(イラスト)のサイズの関係で左のドット柄よりも右のドット柄の方が大きく見えます。(Tシャツの柄という先入観もあるためより大きく見えるのかもしれません)


ロゴやフォントを制作した時やレイアウトを行った際に大きさ・長さ・色・角度などに違和感が出るようならば、何かしらの錯視が起きている可能性があります。数値的にサイズや位置が整えられていたとしても、最終的には目で見て確認を行うことをおすすめします。
このほかにも錯視は沢山あります、また、今回ご紹介した大きさにまつわるものだけではなく、色や角度に関する錯視も存在します。こちらはまた別の機会にご紹介したいと思います。
 
 

Pocket

ホワイトスペース【余白は怖くない!】

Pocket

こんにちは!
今回のテーマは「ホワイトスペース【余白は怖くない!】」です。
ホワイトスペースとは何なのか、どのような時に使うのかなど、アプリ開発の観点から説明していきたいと思います。

ディレクターや企画職などノンデザイナーの方、これからデザインを勉強する方向けの内容になっています。


ホワイトスペースとは

ホワイトスペースとは、簡単に言うと「余白」です。
アプリで言うと、画面の両端や上下に設けられている空間、要素と要素の間など、何もない空間を指します。

画像と画像の間だけでなく、字間と行間などの余白もホワイトスペースとなります。

“ホワイト”スペースと言っていますが、白い余白だけに限定されている訳ではありません。無彩色・有彩色・柄・写真でも、「余白」があればそこはホワイトスペースとなります。


なぜホワイトスペースが必要なのか

ホワイトスペースは視覚的な表現をする上で必ず必要な物です。
なぜ必要なのかと言うと、ホワイトスペースがあることで「見やすく」「わかりやすく」「使いやすく」なるからです。

1番大事なことは、ホワイトスペースを“余った場所”ではなく、重要なレイアウトの一部として捉えることです。

余白があると柄や要素を入れて隙間を埋めたくなったり、余白がありすぎると手抜きに見えるのでは…と不安に思う余白恐怖症の人もいるかもしれません。
ですが、余白がないと視認性が悪くなったり、そのページに設定した意味が薄れてしまったり、目的を果たせなくなってしまうなどデメリットが出てきてしまいます。


見やすさ

デザイン制作はもちろん、パワポでの資料作成やテキストだけの表現でも、ホワイトスペースのレイアウトは大切です。
ギチギチに画像や文字が詰まっているより、見やすく読みやすくなりますよね。みなさんも日常、自然と行っているのではないでしょうか。

アプリ画面で言うと、読んだり押したりする要素がある画面の両端には、必ずホワイトスペースを設けましょう。
5%ほどホワイトスペースがあれば十分視認性と押しやすさが保てます。
上下のホワイトスペースについては状況にもよる為一概に言えませんが、「目立たせたいものは多めにホワイトスペースを設ける」「優先度や項目ごとにホワイトスペースのルールを統一する」ことに注意するだけで見やすさが変わってくるかと思います。


わかりやすさ

十分なホワイトペースを設けることで、その中にある要素が強調され、ユーザーが目的を達成しやすくなります。
注目して欲しい要素や、優先度の高い要素を強調したい時に効果的です。


使いやすさ

ユーザーにとって使いやすいサイトにする為に、ホワイトスペースは必須です。
例えば押せる要素があったとして、それが複数並んでいた場合、ホワイトスペースを設けることで押しやすくなります。

また、ユーザーが何か探し物をしていた時に見つけやすくなります。


おわりに

いかがでしたでしょうか?
ホワイトスペースはただの余白ではなく、立派なレイアウトの1つです。
今までは何気なくテキストを改行していた、画像を配置していた、という方は、ぜひこれを期にホワイトスペースを意識してみて下さい。
今まで以上に良いデザイン、資料作成が出来るかと思います!

それではまた!デジマースのコンでした。

Pocket