World Wide Web|Design Report

Webのシステムについて最低ここは知っておこう。

て、ではグラフィックデザイナーの為のWebフォーラム、始めましょう! そのSection1「Webのシステムについて最低ここは知っておこう」です。 とっても基本的すぎて「あくびがでるわ・・」なんて方もいらっしゃるかもしれませんが・・ 今回のお話しは普段僕達が「Webと呼んでいるものって一体どういうもの?」というところのお話しです。

Webってなんだ?

「Web」というのはつまり「World Wide Web」。
結構ごっちゃにしてしまっていることも多いですが、「インターネット」とはちょっと意味が違っています。

「インターネット」というのはコンピュータネットワーク(コンピュータどうしのネットワーク)そのものを指し
「Web」はそのインターネット上で提供されるハイパーテキスト(htmlなど文章どうしを関連付けるシステム)を指します。
つまるところ、インターネットの応用技術の一つということですね。

ばっくり言うと、インターネットに接続して そこで参照される、表示されるのが「Web」という感じです。 『インターネットを利用した相互データ通信ネットワーク』といったところでしょう。

websystem

若干乱暴に要約すると
Webで表示されるページはすべて「サーバー」に格納されているファイルの集合です。
(ハイパーテキストで一つに関連付けられてページになる)
これらのページが格納されているサーバーは「インターネット」という「一本の線」で繋がっている訳です。
そこに自分のPCやモバイル端末などのデバイスも繋げることで、それらのページを閲覧できるようになる ということですね。

基本的にインターネットはサーバーどうしの繋がりによるネットワークです。
その繋がりの中にある「中継用のサーバー」に自分のPC(端末)を接続することがインターネットに接続するということ。そこから目的のデータをダウンロードし、画面に表示させているということです。
・図のようにサーバーどうしは中継・分岐しながら数珠つなぎになっていて、最終的にはどこかで繋がっているということです
・電話と同じで途中の中継が多いとその分接続やデータ取得までに時間がかかる

「Web」の概要とインターネットの仕組みについて分かったところで、次は僕達が見ている「Webページ」についてもお話しさせていただきます。
「Web」ページというのは先述の通り、ハイパーテキストのデータファイルです。ハイパーテキストの機能によって関連付けられたデータたちが一つのページとして表現されたのが「Webページ」。(そのページたちが関連付けられた構造体が「Webサイト」です。)

デバイスからWebへアクセスする際には「ブラウザ」というアプリケーションを使います。
この「ブラウザ」はインターネット接続とWebアクセス時のあらゆることを一手にこなしてくれるアプリケーションです。

web

「Webページ」を構成するデータファイルはコンピュータ用の言語で書かれていて、僕達にはちょっと読みづらい。 それを僕達が知覚し易いように変換もしてくれます(レンダリング)。

また、「Web」上でこちらのリクエスト(操作)をサーバーに対して行ったりもしてくれますね。
URLを入力するとそのURLが与えられているデータをWeb上から探し当ててくれます。
そして、このデータが格納されているサーバーにアクセスしてそのデータをブラウザで表示させている訳です。

これらのことから分かるように、「Web」を構成する要素にはいくつものリソースがあって 接続、閲覧するにはさまざまな『仲介』が存在します。 大まかに分けて

  1. デバイス
  2. ブラウザ
  3. ネットワーク
  4. サーバー
  5. データ

があります。 これらが閲覧環境を構成していて、どのように見えるかを左右します。
では、それぞれについてももう少し触れていってみましょう。

1.デバイス

device

要するに何を使って接続してる? ということですね。
PCなのかタブレットなのか、携帯なのか・・
あるいはどのOSでどんな性能(処理速度)か

分かりやすいところで言えば、デスクトップとノートPCならだいたいデスクトップのほうが大きな画面でしょう。
画面の大きさが違えば見え方が変わる。
当然、PCとモバイル端末では大きさがまったく違いますよね。

また、解像度の違いも案外侮れない。 同じディスプレイサイズでも、解像度が違えばサイズが違うのと同じことになりますね。
他にもMacとWindowsではディスプレイのガンマ値の計算方式の違いによる、表示色の差異などもありますね。 加えて言うと、Windowsではちゃんと調色していない限り、ディスプレイ毎に全部色がズレている。
要するに、個体ごとに見ている色が違う・・という状態だと思ったほうがいいということですね。。

もう一つ忘れてはいけないのが、デバイスごとの「フォントの違い」。
MacとWindowsでは入っているフォントに大きな違いがありますね。(Apple製品とそれ以外、といったほうがいいのかもしれませんね)
データ交換をした際に、こちらの指定したフォントが相手側に無い為、代替表示になる(その逆しかり)という経験もあるかと思いますが、 デバイスに入っていないフォントは表示できない。
また、少々面倒なことに、同じフォントでもブラウザ毎に表示が微妙に異なる場合も結構ある。(※ブラウザの項目にて後述)

このように、(ページ閲覧時に)使用しているデバイスの違いも閲覧環境に影響しています。

2.ブラウザ

browsers

先にも少し述べましたがデバイスがインターネットに接続する際に使うアプリケーションのことです。
ただのデータの関連付け情報でしかないハイパーテキストから そこに記述されているファイルをそこに書かれている設定通りに組み合わせ、 一つのページとしてレンダリング(翻訳・表示)してくれるものです。
イメージとしては「翻訳者」と思ってもらえればいいかなと。
※Rendering(レンダリング)という言葉の語源が「Render(=翻訳する・表現する)」ですしね

このブラウザにもいろいろ種類があって、性能や特徴に差異があります。
また、それぞれのブラウザごとに同じハイパーテキストやcssに対してちょっとづつ独自の解釈をしてくれます。

言葉を翻訳する際、人によって微妙にニュアンスの違う「意訳」をしてくれますね?
それと同じイメージです。
なので、同じデータを参照しているにもかかわらず使うブラウザによって表示結果が微妙に違ってくる、ということが起こります。 その為、それぞれの翻訳者さんごとのクセを考慮して、データを設定する必要がある訳ですね。

ただし、どのブラウザ+使用デバイスの組み合わせによってはまったく別物を見るようなこともありえるので それぞれの特徴は把握しておく必要があります。

ブラウザは基本的にどのデバイスにも最初からデフォルトのものがインストールされています。
普通に使うだけならそれでも、まぁ問題はありませんが 基本としては、デフォルトブラウザの性能はいまいちです。
※デフォルトブラウザ・・・IE、Safari、Galapagos Browser
 特に表示速度が任意でインストールするタイプのブラウザに比べて遅い。

ブラウザの違いは各ブラウザ毎にすべて違うと言う訳ではなく、そのブラウザがどの「レンダリングエンジン(レンダリングの方式)」を搭載しているかによって分かれます。その為、「Webkit」というレンダリングエンジンを搭載している「Chrome」と「Safari」、「Galapagos Browser」は(基本的に)同じ見え方になります。

※ブラウザ毎のフォント表示の違い
同一フォントでも幅や縦横比、サイズが画一化されていない。
つまり、テキストの折り返し位置や改行位置がズレるということが往々にして起こってしまう。 その為、文字組する際は固定化しすぎず、「あそび」を残すことが必要になります。

3.ネットワーク(回線)

line

接続する際、何の回線を使っているか?
それによって、表示速度やデータ転送に要する時間が変わってきますね。
回線・通信速度は「Web接続時の快適性を左右する」ものでもあるでしょう。

よく「回線が太い/細い」なんて言い方をしますが、
一秒間に100Mbpsのデータ量を転送(アップ/ダウンロード)できる回線と
一秒間に12Mbpsのデータ量しか転送できない回線だと
同じ10メガのデータを転送するのに大きな差が出ますね。
イメージとしては図のように、同じ容積のものを幅が広いところを通すのか狭いところを通すのかで 長さが大きく違う、という感じでイメージしていただければいいかな、と。

ちなみに、
・一般的な光回線の最大速度が100Mbps。
・Wi-Hiの高速回線は75~80Mbps。
・無線系の回線速度の平均がだいたい40~30Mbps
・3Gなどモバイルの回線はだいたい3~14Mbps(ハイスピードエリアで30くらい)
(※4GやLTEの特別なものは100超えのものもありますね。
 但し、電波は電波状況の影響なども大きく受ける)
・ADSLは2~15Mbpsくらいが実質とのこと。

最も短時間で大容量を転送できる回線は光回線ですね。
契約している会社のプランによって多少速度の差はあるようですが 基本的にこれに勝る速度は今現在存在していません。 しかし、物理的な回線なのでケーブルが無いと接続できない。

Wi-Hiや3Gといった無線での接続の方も結構いるでしょう。
モバイル端末や、外出先でのネット接続時などはこちらになるケースも。

単純に「閲覧側」として見るなら早いか遅いか、ですが
「開発側」として見ると、この遅い回線でどれだけの表示速度が出せるのか? ということはとても意識しなければならない要素です。
全体のデータ量やプログラムの効率などをここから計算していく「目安」になりますね。

ここってグラフィックデザイナー的感覚から言うと割と無頓着な部分。
もちろん、なるべくデータは軽くするというのは誰でもやっているでしょうが 印刷物のデータの許容量とWebでのデータの許容量って大きく違うところがあります。

重いデータ=転送容量を食う =ページが表示されるまでが遅い

Webページの場合、この「回線速度」が閲覧している時と場合によって大きく違いがある訳です。
そこを考慮すると、普段の感覚よりデータ量をかなり「削る」必要があります。
※Webデザインでは「数キロバイトを削る」という、かなり重箱のスミをつつくようなことが結構な差になります。

多分、みんな10秒って待たないですよね。
ということは、単純計算で総データサイズが10Mいったらアウトということです。(※回線速度が遅いほうを基準に考える)

デバイスのRAM使用率とCPU性能+ブラウザの速度+回線速度÷(データ総量+プログラムの処理コスト)

が表示までの必要時間の目安です。(+でサーバー処理速度もありますが・・)
制作するページ/サイトの閲覧環境が「どの環境が多いか」からページの構成やデータ量を決めるのが良いでしょう。
(※アクセス解析でチェックできます)

4.サーバー

server

サーバーもコンピュータです。
PCと同じでCPUやRAMなどといったパラメータによって性能差があります。
転送率や過負荷率といったかたちで、「どれだけのアクセスに耐えられるか」(=同時に何人までページ/データを提供できるか)やこのこちらの操作に対する「反応速度」などに違いが生まれます。

このサーバーのスペック的な性能以外にも 非効率なプログラムが施されていたり 効率の悪い設定にしてしまっていたりすると 反応速度に大きな差が出ます。

有料のレンタルサーバーや自宅サーバーなどと比べるとフリーサーバーや、安価なホームページスペースなどはスペックも低くなるので、 ページ/データ表示までに時間がかかったり過負荷率が低くなっていたりします。

サーバーのスペック、システム構成によっての処理速度も閲覧時に影響します。

余談ですが、サーバー選びは割と金額で選んでしまったりするクライアント様も少なくないので スペック部分をしっかり見て「どれくらいのアクセスを見込むか」「どれくらいのプログラム処理に耐えられるようにするか」によって提案していけるとスマートですね。

5.データファイル

WebページやWebサイトを制作するには「どんな種類のファイルが必要か」や「どんな種類のデータが使えるか」
これを知っておかなければやっぱりスムーズには制作できませんね。

「Web」には主に、

  • Html・・データの「構造」を記したデータ
  • スタイルシート・・「構造」の形状や表現を指定するデータ「css」
  • プログラム・・ページに対し、動的な変化や処理、ユーザーの行った操作に対する反応を作る「JavaScript」
    特定のアクセスに対して動的に特定の「Html」を生成したりするなどの処理を行うサーバー側で動くプログラム「Peal」「Rubby」「php」
  • 画像・・「jpg」「gif」「png」などの圧縮画像ファイルと「SVG」「pdf」
  • 動画・・「mp4」「webm」「swf(flash)」などの動画・flashデータ
  • 音声・・「mp3」

などのファイルデータが使えます。
他にも使えるファイルフォーマットがありますが、この種類からデザインに必要な項目を選んで、構成していくかたちになります。

当然のことながら、表示されるデータそのものにも ちゃんとこれまでの内容のことを考慮した記述がされているかどうかは意外に大きな差になります。
無理、ムラ、無駄があったり、非効率な記述になっているとアクセスに対して、正確に応答できなかったり 表示までに異様に時間がかかったりもします。

特定の環境でしか正確に表示されないようなつくりではやはり良いとはいえませんし(※)
派手なばかりで非常にコストの高い記述や、ちゃんとデバッグされていないプログラムなどは 閲覧側をフリーズさせることもあり得ます。

プログラム面だけではなく、画像データなども無駄に大きかったり、数が多すぎたりすると これも遅延の元になります。

これらのことを踏まえたデータ構成と正確なデータ記述など
元になるデータの作成もしっかりと行わなければ快適にページを閲覧をしてもらうことができず せっかくのデザインもその効果を阻害したり力を発揮しきれなかったりしてしまいます。

※とはいえ、メーカーサポートも打ち切られているような古い閲覧環境をいつまでもサポートするのもどうかと個人的には考えています。セキュリティ面の問題も出てきますし、「今」の規格がまったく使えないに等しい環境ですので・・。
場合によっては新しい環境への変更を促したりしていくことも開発側の役割ではないか、とも考えています。

まとめ

ざっとそれぞれの項目を説明していきましたがベースとして覚えておくべきところや必要な項目はだいたいこれくらいです。 いろいろと細かいところがありますが、まぁこれだけのことを押さえておけば大丈夫、といった感じで思っていただければいいかな、と。

もう少し細かいところや、各項目の詳細はおいおい個別に書いていこうと思います。
では、今回は以上です!

Comments

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

認証コード * Time limit is exhausted. Please reload CAPTCHA.