day11 #194
day11 #194
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
Deploying studiosakupi01com with
|
| Latest commit: |
ea0a164
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://79c18177.studiosakupi01com.pages.dev |
| Branch Preview URL: | https://feat-2025-advent-11.studiosakupi01com.pages.dev |
|
|
||
| これまでにも述べてきたように、Web は根底では「あらゆるデバイスでコンテンツが損なわれないよう」に設計されてきました。 | ||
| しかし、CSS は ”柔軟な Web デザイン” ができるほど発達していたわけではありません。 | ||
| Media Queries や Responsive Units が登場するのは、この問題を解決するためにのちに登場する機能です。 |
There was a problem hiding this comment.
- Media Queries や Responsive Units が登場するのは、この問題を解決するためにのちに登場する機能です。
+ Media Queries や Responsive Units は、この問題を解決するためにのちに登場する機能です。| しかし、CSS は ”柔軟な Web デザイン” ができるほど発達していたわけではありません。 | ||
| Media Queries や Responsive Units が登場するのは、この問題を解決するためにのちに登場する機能です。 | ||
|
|
||
| 言語レベルで「適応性」のサポートが十分でなかったのであれば、デザイナや開発者側が Web デザインをする上で「適応性」を強く意識することがなかった/できなかったのも当然のことでした。 |
There was a problem hiding this comment.
細かいけど「CSS」って「言語」って言っていいのか論ありそう。
普通に 「CSS 自体に適応性の〜」みたいなので良さそう。
|
|
||
| Web というメディアでデザインする上で、エコシステム（デザイナや開発者）側が「解釈/実践してきたもの」と標準（Web プラットフォーム）側が「思い描いてきたもの」には、大きな乖離が生まれていました。 | ||
|
|
||
| 当時の Web デザインは、Printed Design（印刷物に施されるデザイン）に近いものでした。ポスターや新聞などをイメージして欲しいのですが、Printed Design の前提には以下のような特徴があります。 |
There was a problem hiding this comment.
「Web デザインがそういうものだった」というよりは、これまで DTP をやってきた人が Web にきたため、 DTP の文脈を引きずった Fixed なデザインが多くあった。という現場の実態の話であって、 「Web 自体がもつデザインのポテンシャル」はずっとレスポンシブだったんじゃ無いかなとは思う。それを使いこなせてなかった、的な。
|
|
||
| **「キャンバスが既知か未知か」という、Printed Design と Web Design の唯一かつ最大の違い**は、iPhone の登場によって顕著になりました。 | ||
|
|
||
| 単純にデバイスのサイズが極端に小さなデバイスが登場しただけでなく、タッチ操作やジェスチャ、限られたマシンスペックなど、 |
There was a problem hiding this comment.
- 単純にデバイスのサイズが極端に小さなデバイスが登場しただけでなく
+ 従来の PC ディスプレイに比べて、サイズの小さいデバイスが登場しただけでなく|
|
||
| そこでとられたのが、「モバイルデザイン」というアプローチです。 | ||
|
|
||
| ## Mobile Design |
There was a problem hiding this comment.
うーん、これを "Mobile Design" でくくるのか、、なんか違和感があるなぁ。
|
|
||
| ただ、モバイルデザインは、**モバイルにおいての見た目**をデザインするものです。 | ||
|
|
||
| リクエストと共に流れてくる情報から、サーバ側で端末/ブラウザ/バージョンを検出して、モバイル向けの見た目のサブドメインにリダイレクトするなどといった手法を取るのが「モバイルウェブデザイン」のやり方でした。 |
There was a problem hiding this comment.
s.example.com とか example.com/s とかにリダイレクトするこの方式、なんか名前があった気がするが思い出せない。
|
|
||
| レスポンシブデザインは、モバイルデバイスを含む様々な端末やデバイスサイズに**適応可能**（レスポンシブ）なよう**デザインする手法**のことを指します。 | ||
|
|
||
| レスポンシブといえば、そもそも HTML は基本的にレスポンシブにできています。 |
There was a problem hiding this comment.
これだと「HTML が基本レスポンシブ」というより、ここまでに話してきた HTML に当たってるデフォルトの(User-Agent) CSS が、レスポンシブになってるっていう話になるような？
|
|
||
| しかし、そこに当時のレスポンシブでない CSS を用いた Web デザイン（つまり、Printed Design）が入り、”特定のキャンバス”を想定したサイズや位置を表現すると、 HTML はレスポンシブではなくなります。 | ||
|
|
||
| 実は、「適応可能なデザイン」という考え方は、2000年前後から存在していました。iPhone 登場以前の 2001年に、WaSP にいた John Allsopp が執筆した [A Dao of Web Design](https://alistapart.com/article/dao/) や、[Interactive architecture](https://alistapart.com/article/fluidgrids/)は、Web における「適応可能なデザイン」を提唱するものです。 |
| > | ||
| > [Interactive architecture](https://archive.org/details/interactivearchi0000foxm) : Fox, Michael, 1967 August 22- : Internet Archive | ||
|
|
||
| しかし、当時はまだ Web 技術（CSS）が「適応可能なデザイン」に十分に対応していなかったこともあり、この考え方はすぐには広まりませんでした。 |
There was a problem hiding this comment.
HTML に当たってるデフォルトの CSS は適応可能なデザイン(レスポンシブ?)を実現していた
って話なら
CSS が適応可能なデザインに対応してなかったってのは、矛盾するような気がする。
結局「CSS そのもののポテンシャルはあるが、引き出せて無い実装が多かった」って話なのでは？
もちろん、複雑なデザインをしようとすると、たらない部分が CSS にはあったって部分はあるにせよ。
|
@Jxck レビューありがとうございます！修正しました。 Day12 でレスポンシブの先の話をしっかり入れようと思ったんですが、時系列があまりにもタワー・オブ・テラーになるので、以下で軽く触れました。 |
@Jxck
Day11 の記事を執筆しました。お手隙でレビューいただけると幸いです！