Web — Pepabo Designer’s Meeting #24

2023-10-20にGMOペパボ株式会社の社内勉強会「Pepabo Designer’s Meeting #24」で発表したセッション「Web」の資料です。

Transcript

1. Web Designer’s Meeting #24 / UX Engineering Oct 20, 2023
2. わたしたちがデザインしている「Web」について、 改めて詳しく知ることで、設計の精緻化や成果物の質の向上を目指します。 この時間の目的
3. Webとは
4. インターネット Web
5. インターネット 世界中のコンピューターを
 接続したネットワーク Web HTTPとURIとHTMLによる、
 複数の技術を組み合わせた
 ハイパーメディアシステム
6. アプリケーション層 TCP/IP プロトコル群の階層モデル HTTP（Web） トランスポート層 インターネット層 IP（インターネット） ネットワーク インターフェース層
7. HTTP アプリケーションプロトコル HTTPはURIで 操作対象を指定 HTMLのリンクはURIを利用 HTMLはHTTPで やりとり URI リソース識別子 HTML ハイパーメディアフォーマット
8. HTTP HyperText Transfer Protocol アプリケーションプロトコル
9. クライアント サーバー リクエスト レスポンス
10. 3 シンプ% 3 クライアントとサーバーで分離して
 処理でき) 3 マルチプラットフォーム
11. URI Uniform Resource Identifier リソース識別子
12. http://shikakun:pass@blog.example.com:8000 /search?q=test&debug=true#section-1 URIスキーム パス クエリパラメーター URIフラグメント ユーザー情報 ホスト名 ポート番号
13. クライアント example-a.com example-b.com サーバー リクエスト レスポンス
14. A インターネット上で必ず一意なホスト A ホスト内で必ず一意なパスの階 A 世界中のほかのリソースと絶対に重複しない
15. 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という主張。
16. HTML HyperText Markup Language ハイパーメディアフォーマット
17. ポラーノの広場 一、遁げた山羊 五月のしまいの日曜でした。わたくしは賑（にぎ）やかな 市の教会の鐘の音で眼をさましました。
18. < > < > < > < > < > < > < > < >< > < >< > < > < > < >< > < > h1 /h1 h2 /h2 p ruby rb /rb rp /rp rt /rt rp /rp /ruby /p ポラーノの広場 一、遁げた山羊 五月のしまいの日曜でした。わたくしは 賑 （ にぎ ） やかな市の教会の鐘の音で眼をさま しました。
19. ポラーノの広場 一、遁げた山羊 五月のしまいの日曜でした。わたくしは賑やかな市の教会の鐘 の音で眼をさましました。 にぎ
20. < > < > < >< > < > < > < > < > < > < > < > < > < > < > < > < > < > < > < >< > < >< > < >< > < > < > < >< > 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
21. < = http://example-b.com/ > < > a href " " /a Example B Example B
22. クライアント リクエスト リクエスト レスポンス レスポンス example-a.com example-b.com サーバー
23. % コンテンツを共通のフォーマットで構造9 % ハイパーリンクでインターフェースを獲0 % コンテンツとインターフェースのミックス
24. Webのパラダイムシフト
25. 2004年のteacup.掲示板（画像は https://bb.watch.impress.co.jp/cda/news/6273.html より引用）
26. Webブラウザ サーバー リクエスト レスポンス レスポンスを受けて リロードして描画
27. 2005年のGoogleマップ（画像は https://japan.googleblog.com/2020/02/google-15_6.html より引用）
28. Webブラウザ サーバー リクエスト レスポンス JavaScript レスポンスを受けて JavaScriptでDOMを書き換え
31. サーバー Webブラウザ アプリ リクエスト リクエスト レスポンス レスポンス
32. macOS版 Microsoft Word Web版 Microsoft Word
33. 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.”（ブラウザの中にブラウザを作る）よう な技術スタックで構築されている。
34. サーバー Webアプリ ネイティブアプリ データ + アプリケーション データ
35. C アプリは専用ツール、Webは汎用ツー2 C Webはデータだけでなくアプリケーションも
 いっしょに送れ6 C 体験のアップデートが加速
36. Webをつくる
37. Webサイト（コンテンツ） ユーザーインターフェースとしてのWeb（ツール） APIとしてのWeb（データソース）
38. サーバー Webブラウザ 検索エンジンbot リクエスト リクエスト HTML HTML
40. 構造化データ マークアップとは https://developers.google.com/search/docs/appearance/ structured-data/intro-structured-data?hl=ja Googleによる、構造化データ マークアップの仕組みを解 説するページ。JSON-LDのサンプルコードもある。
41. role属性の例 aria-*属性の例 < aria-required= > input "true" < role= > div "navigation"
42. ARIA Authoring Practices Guide Patterns https://www.w3.org/WAI/ARIA/apg/patterns/ WAIが公開している、アクセシビリティセマンティクスを 適用する方法を実装例とともに紹介するウェブサイト。 「Patterns」ではデザインパターンごとに、「Index」で はARIA属性ごとに探すことができる。
43. Inhouse Principles https://design.pepabo.com/inhouse/about/ より資料用に一部改変 マテリアル・オネスティ 直訳すれば「素材に対して正直」という意味です。物事をデザインするに当たっ て、その素材の性質やあり様に逆らわず活かしてデザインする、という昔からあ る考え方です。これは今日のデジタル環境においては「環境に柔軟に適応する」 という風に読み替えることもできます。成果物のユーザーや受け手は様々な環境 （OSやブラウザやメディア）の中でそれに接することになります。このときプ ロダクトやコンテンツがあまりにも環境のルールやマナーから外れたものであれ は不自然に感じてしまったり、普段の操作ができずに使いにくいと感じてしまう 恐れがあります。なるべく環境に対して自然な形でデザインし、機能やコンテン ツの効用を最大化します。
44. G Webをつくることは
 Webへリソースを提供するこ3 G きちんとつくるのは難し( G デザインシステムを活用して
 みんなでつくろう
45. もっと詳しく Webを支える技術 山本陽平 著 技術評論社, 2010 HTML解体新書 太田良典, 中村直樹 著 株式会社ボーンデジタル, 2022 UIデザインの教科書［新版］ 原田秀司 著 翔泳社, 2019 Webアプリケーションアクセシビリティ 伊原力也, 小林大輔, 桝田草一, 山本伶 著 技術評論社, 2023 この資料は、以下の書籍を参考に作成しました