【書評】『Web技術の基本』~ウェブデザイナーが知っておくべきWeb技術用語〜

原浦 智佳のプロフィール画像
デザイナー 原浦 智佳

1,530 view

ベイジでは、各職能ごとに課題図書があり、入社後の研修時期に読んで日報にまとめるという課題がある。今回は、ウェブデザイナーの課題図書『ウェブデザイナーが知っておくべきWeb技術用語』を読んだので、自分の備忘録をかねてまとめようと思う。主に、ウェブデザイナーなら知っておくべきウェブ用語という観点で抜粋しまとめた(一部、関連情報として本に掲載されてない情報を含む)。

本書の中には、他にも知っていて損はない用語の解説がたくさんあるので、ぜひ実際に手に取って読んで見て欲しい。

ウェブの仕組み系

ウェブサーバー

ウェブブラウザからのリクエストを受け取り、必要なコンテンツをブラウザに送信するもの。

HTTP

HyperText Transfer Protocolの略。ウェブブラウザと、ウェブサーバーの間で、テキストファイルや画像などのコンテンツをやりとりする際の手順や仕様を定義したもの。世界標準で定義されているので、あらゆる種類のウェブサーバーに接続することができる。

HTTPS

SSL(Secure Sockets Layer)やTLS(Transport Layer Securitity)という暗号化方式を利用した通信方法。ネットで個人情報や重要なやりとりをする際に、情報の盗聴、漏洩、改ざんを防ぐために利用される。HTTPSが利用されている場合は、プロトコルがhttpsになっていて、鍵マークがついている(表示はブラウザによる)。

HTTPリクエストとHTTPレスポンス

ウェブサーバーへの要求をHTTPリクエスト、ウェブサーバーからウェブブラウザへの返答をHTTPレスポンスと呼ぶ。

静的ページと動的ページ

静的ページはウェブサーバーに設置されたHTMLファイルをそのまま表示するページ、動的ページはユーザーのリクエストに応じて都度サーバーサイドで生成され表示されるページで、CMSで作成されたページは動的ページになる。動的ページの利点は、コンテンツの更新や管理が柔軟で、ユーザーに対して個別化されたコンテンツを提供できること。静的ページは基本的に一定の内容が表示されるため、変更がある場合は手動でHTMLファイルを更新する必要がある。

ドメイン

パソコン、スマートフォン、サーバーなど接続先住所を表す文字列。似たものに、IPアドレスと呼ばれる識別番号があるが、人間には覚えにくく扱いにくいため、文字列にしたものがドメイン。ウェブサイトの場所を示す住所のようなもの。

URL

Uniform Resource Locatorの略。インターネットやLANなどのネットワーク上にあるデータやファイルの場所と、それらの取得方法を指定するために用いられる。

ステータスコード

ウェブブラウザから要求されたHTMLファイルや画像などのデータをHTTPレスポンスとして応答する際の処理結果。代表的なコードは、404(Not Found:リクエストされたコンテンツが未検出である)、503(Service Unavailable:アクセス集中やメンテナンスなどの理由で一時的に処理不可)。

Cookie

HTTPSはステートレス(情報のやりとりの履歴を保持しない仕組み)だが、Cookieという仕組みで、ブラウザに保存して欲しい情報を送ることができる。ネットショッピングで、買い物カゴに入れたアイテムが、ページを跨いでも残っているのはこのため。多くの場合は、情報保存の有効期限が設定されているセッションCookieが用いられている。

データ系

JPEG

正式名称はJoint Photograph Experts Group。1677万色の色を扱うことができるので、多くの写真はこの形式が採用されている。人間の目では感じにくい部分のデータを削除することでデータサイズを小さく圧縮できる一方、圧縮しすぎたり、圧縮した画像を再び拡大すると画像が荒くなる(非可逆圧縮)。

PNG

正規名称はProtable Network Graphics。JPEG同様、1677万色が扱え、画像劣化が起きない(可逆圧縮)。透明度が扱えるため、背景が透過した画像を作れたり、JPEGより豊かな表現が可能。

WebP

WebPはGoogleが開発した画像形式。同じ画質であっても小さなファイルサイズで画像を圧縮できる。優れた効率的な圧縮、透過性、アニメーション対応を備え、ウェブパフォーマンス向上ができる形式。ただ、一般的な標準ではなく、一部のブラウザでのサポートが必要。

ウェブ言語系

ハイパーテキスト

ウェブ上の文章を構成する言語。

ハイパーリンク

ウェブページの参照を示す文字列。ハイパーテキストの中に埋め込むことで、様々なページに移動できる。

HTML

Hyper Text Markup Laguageの略。ハイパーテキストを記述するための言語。タグと呼ばれるマークを用いて、文章の表示方法や、ハイパーリンクを表現することができる。

スクリプト言語

ウェブサイトにおける動的処理に使われる言語。JavaScriptやPerl、Python、PHP、Rubyなどがある。

まとめ

ベイジのウェブデザイナーは表層のデザインだけではなく、戦略・設計段階から参加し、ワイヤフレームを作る。その際、こういった技術的な基礎知識があることで、どんな情報を見せるべきか、どんな表示ロジックにするべきか、そしてそれは実装可能なのか、エンジニアリングも踏まえたデザインをすることができるので、とても勉強になった。

”ウェブ”デザイナーという肩書きである以上、基礎的なウェブ知識はあるべきなので、これからウェブデザイナーになりたい人、ウェブデザイナーだけど、ウェブ知識が不安な人にはぜひ読んで欲しい本だ。

関連する日報

    新入社員が気づいた、プロジェクト改善のヒント

    448 view

    奥原美穂子のプロフィール画像
    奥原美穂子 コンサルタント
    開発効率化:半分の工数で作る工夫

    1,611 view

    酒井 琢郎のプロフィール画像
    酒井 琢郎 エンジニア
    日本各地からお届け!ベイジ社員の夏休み2024

    1,668 view

    古口 真凜のプロフィール画像
    古口 真凜 バックオフィス
    納得感のあるデザイン提案のポイント

    3,867 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    「わかりやすい」ミーティングの3原則

    8,147 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
上に戻る