Slide 1

Slide 1 text

Web Designer’s Meeting #24 / UX Engineering Oct 20, 2023

Slide 2

Slide 2 text

わたしたちがデザインしている「Web」について、 改めて詳しく知ることで、設計の精緻化や成果物の質の向上を目指します。 この時間の目的

Slide 3

Slide 3 text

Webとは

Slide 4

Slide 4 text

インターネット Web

Slide 5

Slide 5 text

インターネット 世界中のコンピューターを
 接続したネットワーク Web HTTPとURIとHTMLによる、
 複数の技術を組み合わせた
 ハイパーメディアシステム

Slide 6

Slide 6 text

アプリケーション層 TCP/IP プロトコル群の階層モデル HTTP(Web) トランスポート層 インターネット層 IP(インターネット) ネットワーク インターフェース層

Slide 7

Slide 7 text

HTTP アプリケーションプロトコル HTTPはURIで 操作対象を指定 HTMLのリンクはURIを利用 HTMLはHTTPで やりとり URI リソース識別子 HTML ハイパーメディアフォーマット

Slide 8

Slide 8 text

HTTP HyperText Transfer Protocol アプリケーションプロトコル

Slide 9

Slide 9 text

クライアント サーバー リクエスト レスポンス

Slide 10

Slide 10 text

3 シンプ% 3 クライアントとサーバーで分離して
 処理でき) 3 マルチプラットフォーム

Slide 11

Slide 11 text

URI Uniform Resource Identifier リソース識別子

Slide 12

Slide 12 text

http://shikakun:[email protected]:8000 /search?q=test&debug=true#section-1 URIスキーム パス クエリパラメーター URIフラグメント ユーザー情報 ホスト名 ポート番号

Slide 13

Slide 13 text

クライアント example-a.com example-b.com サーバー リクエスト レスポンス

Slide 14

Slide 14 text

A インターネット上で必ず一意なホスト A ホスト内で必ず一意なパスの階 A 世界中のほかのリソースと絶対に重複しない

Slide 15

Slide 15 text

Cool URIs don't change https://www.w3.org/Provider/Style/URI.html 日本語訳:https://www.kanzaki.com/docs/Style/URI.html Webを発明したTim Berners-Leeによる、URIは変わらない べきであり、変わらないURIこそが最上のURIという主張。

Slide 16

Slide 16 text

HTML HyperText Markup Language ハイパーメディアフォーマット

Slide 17

Slide 17 text

ポラーノの広場 一、遁げた山羊 五月のしまいの日曜でした。わたくしは賑(にぎ)やかな 市の教会の鐘の音で眼をさましました。

Slide 18

Slide 18 text

< > < > < > < > < > < > < > < >< > < >< > < > < > < >< > < > h1 /h1 h2 /h2 p ruby rb /rb rp /rp rt /rt rp /rp /ruby /p ポラーノの広場 一、遁げた山羊 五月のしまいの日曜でした。わたくしは 賑 ( にぎ ) やかな市の教会の鐘の音で眼をさま しました。

Slide 19

Slide 19 text

ポラーノの広場 一、遁げた山羊 五月のしまいの日曜でした。わたくしは賑やかな市の教会の鐘 の音で眼をさましました。 にぎ

Slide 20

Slide 20 text

< > < > < >< > < > < > < > < > < > < > < > < > < > < > < > < > < > < > < >< > < >< > < >< > < > < > < >< > p /p p em /em /p p em /em /p p em /em /p p em /em /p p em /em /p p em em /em /em /p Cats are cute animals. Cats are cute animals. Cats are cute animals. Cats are cute animals. Cats are cute animals . Cats are cute animals! Cats are cute animals! https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-element

Slide 21

Slide 21 text

< = http://example-b.com/ > < > a href " " /a Example B Example B

Slide 22

Slide 22 text

クライアント リクエスト リクエスト レスポンス レスポンス example-a.com example-b.com サーバー

Slide 23

Slide 23 text

% コンテンツを共通のフォーマットで構造9 % ハイパーリンクでインターフェースを獲0 % コンテンツとインターフェースのミックス

Slide 24

Slide 24 text

Webのパラダイムシフト

Slide 25

Slide 25 text

2004年のteacup.掲示板(画像は https://bb.watch.impress.co.jp/cda/news/6273.html より引用)

Slide 26

Slide 26 text

Webブラウザ サーバー リクエスト レスポンス レスポンスを受けて リロードして描画

Slide 27

Slide 27 text

2005年のGoogleマップ(画像は https://japan.googleblog.com/2020/02/google-15_6.html より引用)

Slide 28

Slide 28 text

Webブラウザ サーバー リクエスト レスポンス JavaScript レスポンスを受けて JavaScriptでDOMを書き換え

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

サーバー Webブラウザ アプリ リクエスト リクエスト レスポンス レスポンス

Slide 32

Slide 32 text

macOS版 Microsoft Word Web版 Microsoft Word

Slide 33

Slide 33 text

React at 60fps: improving scrolling comments in Figma https://www.figma.com/ja/blog/improving-scrolling-comments-in-figma/ FigmaはWebGLとWebAssemblyを用いて、“a browser inside a browser.”(ブラウザの中にブラウザを作る)よう な技術スタックで構築されている。

Slide 34

Slide 34 text

サーバー Webアプリ ネイティブアプリ データ + アプリケーション データ

Slide 35

Slide 35 text

C アプリは専用ツール、Webは汎用ツー2 C Webはデータだけでなくアプリケーションも
 いっしょに送れ6 C 体験のアップデートが加速

Slide 36

Slide 36 text

Webをつくる

Slide 37

Slide 37 text

Webサイト(コンテンツ) ユーザーインターフェースとしてのWeb(ツール) APIとしてのWeb(データソース)

Slide 38

Slide 38 text

サーバー Webブラウザ 検索エンジンbot リクエスト リクエスト HTML HTML

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

構造化データ マークアップとは https://developers.google.com/search/docs/appearance/ structured-data/intro-structured-data?hl=ja Googleによる、構造化データ マークアップの仕組みを解 説するページ。JSON-LDのサンプルコードもある。

Slide 41

Slide 41 text

role属性の例 aria-*属性の例 < aria-required= > input "true" < role= > div "navigation"

Slide 42

Slide 42 text

ARIA Authoring Practices Guide Patterns https://www.w3.org/WAI/ARIA/apg/patterns/ WAIが公開している、アクセシビリティセマンティクスを 適用する方法を実装例とともに紹介するウェブサイト。 「Patterns」ではデザインパターンごとに、「Index」で はARIA属性ごとに探すことができる。

Slide 43

Slide 43 text

Inhouse Principles https://design.pepabo.com/inhouse/about/ より資料用に一部改変 マテリアル・オネスティ 直訳すれば「素材に対して正直」という意味です。物事をデザインするに当たっ て、その素材の性質やあり様に逆らわず活かしてデザインする、という昔からあ る考え方です。これは今日のデジタル環境においては「環境に柔軟に適応する」 という風に読み替えることもできます。成果物のユーザーや受け手は様々な環境 (OSやブラウザやメディア)の中でそれに接することになります。このときプ ロダクトやコンテンツがあまりにも環境のルールやマナーから外れたものであれ は不自然に感じてしまったり、普段の操作ができずに使いにくいと感じてしまう 恐れがあります。なるべく環境に対して自然な形でデザインし、機能やコンテン ツの効用を最大化します。

Slide 44

Slide 44 text

G Webをつくることは
 Webへリソースを提供するこ3 G きちんとつくるのは難し( G デザインシステムを活用して
 みんなでつくろう

Slide 45

Slide 45 text

もっと詳しく Webを支える技術 山本陽平 著 技術評論社, 2010 HTML解体新書 太田良典, 中村直樹 著 株式会社ボーンデジタル, 2022 UIデザインの教科書[新版] 原田秀司 著 翔泳社, 2019 Webアプリケーションアクセシビリティ 伊原力也, 小林大輔, 桝田草一, 山本伶 著 技術評論社, 2023 この資料は、以下の書籍を参考に作成しました