Web — Pepabo Designer’s Meeting #24

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:pass@blog.example.com: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 この資料は、以下の書籍を参考に作成しました