UIデザインするならもっと早くに知っておきたかった！Webの基本の「キ」
こんにちは！ずしみです🐶
UIデザイナーになって１年半がたち、デザインに慣れてきた頃「え？このデザインだと実現難しい？」「実装しずらいデザインになってない？」「エンジニアの言葉が理解できない、、、」そんなふうに感じる場面が増えてきたので、
「そもそもWebとはなんぞや！」をしっかり勉強したいと思いました。
今回読んだ本は「Web技術の基本」という本で、「URLとは？」「httpってどうゆう意味？」等ほんとーに基礎中の基礎が書かれています。
本記事では特に知っておきたい内容をピックアップしてまとめてみました。
そもそもWebって何だ？
インターネットが普及した今では、ニュースや自分の知りたいことを簡単に見つけて閲覧することができます。
またSNSの普及により自分の文章や画像・動画などを簡単に発信することができるようになりました。
このような「文章や画像の公開・閲覧するシステム」をWebと呼びます。
「Web」の正式名称
Webの正式名称は「ワールドワイドウェブ（World Wide Web）」
頭文字をとって「WWW」とも略されます。
「Web」はハイパーテキストでできている
Webの文章は「ハイパーテキスト」と呼ばれる言語で構成されており
Webページの中にまた別のページ移動できる「ハイパーリンク」を埋め込むことができ、次から次へと違うページにアクセスすることが可能になります。
「Web」の歴史
いまでは誰でも自由に使えるようになったWebですが。元々は別の目的で作られたものでした。
もともとは各国の実験者がすぐに情報へアクセスできるように作られたWebの原型となる「ENQUIRE（エンクワイア）」というシステムが開発され、それが改良され「CERN（セルン）」という欧州原子核研究機構のティム・バーナーズ＝リーによって作られたのがWebのはじまりです。
その後ティムは自身で「Webブラウザ」と「Webサーバー」を開発しました。
UIデザイナーが覚えておきたいWebの基本
HTTP/HTTPS
Webページを表示させる際には、「Webブラウザ→Webサーバー（リクエスト）」にコンテンツを要求し「Webサーバー→Webブラウザ（レスポンス）」に送信をする手順を踏みます。
このコンテンツ（ハイパーテキスト）を送信するための手順とやりとりするメッセージの書式を「HTTP（Hyper Text Transfer Protocor)」といいます。
HTTPSとは上記のHTTPの通信を暗号化したものです。
HTTPSにする事で、サイバー攻撃による個人情報やカード情報の漏洩や改ざんを防ぎながら通信を行う事ができます。
標準プロトコル
プロトコルとは「ネットワークに接続された機器同志が通信をする時のあらかじめ決められた共通のルールや手順」のことを総称します。
たとえば上記のHTTPもプロトコルの一種で「ハイパーテキストを送受信する時の共通のルールや手順」を意味します。
インターネットにおける様々なサービスを実現するためのプロトコルの集まりのことを「TCP / IP」と言います。（HTTPもTCP/IPの一部です）
HTML/CSS
・HTML（エイチティーエムエル）
HTML文章は、「タグ」に囲まれた文章によってできています。
「タグ」は「間に挟まれた文章が何を示すか？」を表します。基本的には文章はタグとタグの間に挟まっており、この間に挟まる文章のことを「要素名」と言います。
・CSS（シーエスエス）
HTMLやXMLのWebサイト上の表示方法を表現する記述形式で「スタイルシート」とも呼ばれます。
HTMLのみではテキストのサイズ等を調節する事しかできませんでしたがCSSを用いる事で様々な装飾や凝った表示をできるようになりました。
Cookie（クッキー）
HTTPはステートレス（＝状態を保存しない）プロトコルのため、「Webブラウザ↔︎Webサーバー」のやりとりにおいて状態を保存する機能がありません。
そのためショッピングサイト（カートや閲覧履歴）などで状態を保存する必要がある場合に「Cookie（クッキー）」と呼ばれるデータが用いられる。
Webブラウザ→Webサーバーにアクセス（リクエスト）されたものに対して、返信を行う（レスポンス）際に、Webブラウザに保存してもらいたい情報を「Cookie」として送ります。
「Cookie」をもらったWebブラウザはそれを保存し、次の通信を行う際に保存したCookieも一緒にWebサーバーに送る事で、Webサーバーは接続してきた相手を識別する事ができます。
WebAPI（ウェブエーピーアイ）
アプリケーションがWebサーバーの機能を利用する為のインターフェースのことを「WebAPI」という。
ユーザーがWebブラウザから操作しなくてもアプリケーションのプログラムが直接Webサービスを利用できます。
例としては「お天気サービスの天気情報を取得するAPI」や「テキストを送信すると自動的にX（旧：Twitter）にも投稿されるAPI」などがあります。
⚠️注意すべきこと⚠️
WebAPIいろんな企業が提供している為。企業の方針や提供が変わればAPIを使用している自社のサービスもそれに合わせる必要があります。
提供が終了してしまえば当たり前にAPIも使用できなくなるのでそれを踏まえた上で使用するAPIを検討する必要があります。
さいごに
今回Webについての基礎知識を改めて勉強したことで、UIデザインを作る時にも「実装を想定したデザイン」をより解像度高く意識できるようになりました。
UIデザインはエンジニアに実装してもらって初めて意味を成します。実現できないものを作ってもそれはただの自己満足です。
「常に誰のためにデザインを作っているのか？」を忘れずに、実現できる範囲内で最大限の良い体験を提供していきましょう！
この記事が気に入ったらサポートをしてみませんか？