弾力性のあるWebデザインへの道

公開: 2022-03-10

簡単なまとめ↬ウェブデザインの世界では、私たちは今ここに夢中になりがちです。「レジリエントなウェブデザイン」では、ジェレミーキースは、将来に備えるために過去から学ぶことの重要性を強調しています。それで、おそらく私たちは立ち止まって、現在の瞬間を超えてもっと考える必要がありますか？以下は、ジェレミーのウェブブックからの抜粋です。

デザインは明快さを追加します。デザイナーは、色、タイポグラフィ、階層、コントラスト、およびその他すべてのツールを自由に使用して、順序付けられていない情報の寄せ集めを、使いやすく、見やすいものに変えることができます。人生そのもののように、デザインは宇宙のエントロピーに対して小さな勝利を収めることができ、混沌の原料から秩序のポケットを作ります。

SmashingMagの詳細：リンク

CSSの継承、カスケード、グローバルスコープ：あなたの新しい古い最悪の親友
コピーワークによるUIデザインスキルの向上
セマンティックバリューの追求

ケルズの書は、1200年以上前に作成された美しく描かれた原稿です。それを芸術作品と呼びたくなりますが、それはデザインの作品です。この本の目的は、メッセージを伝えることです。キリスト教の福音書。イラストや書道を駆使して、そのメッセージを魅力的な文脈で伝え、見てもらえるようにしています。

ジャンプした後もっと！以下を読み続けてください↓

装飾写本のページ。 — ケルズの書のマタイによる福音書の始まり。（大プレビュー）

設計は制約の範囲内で機能します。ケルズの書を作成したコロンバンの僧侶たちは、カーフスキンで作られた素材であるベラムに4つのインクを使用しました。材料はシンプルですが、明確に定義されています。セノビティックデザイナーは、インクの色合い、ベラムの重さ、そして決定的に、各ページの寸法を知っていました。

版画と革命

材料とプロセスは、過去数千年ほどにわたって変化し、進化してきました。グーテンベルクの活字の発明は、生産における革命でした。ケルズの書の2番目のコピーを作成するのに最初のコピーを作成するのと同じくらいの時間がかかったのに対し、グーテンベルク聖書の複数のコピーをはるかに少ない労力で作成することができました。それでも、ドロップキャップやコラムなどのデザインパターンの多くは、装飾写本から引き継がれています。基本的なデザインプロセスは同じままでした。ページの幅と高さを知って、デザイナーは要素の心地よい配置を作成しました。

印刷デザイナーの技術は、スイススタイルの台頭とともに20世紀に頂点に達しました。その構造化されたレイアウトと明確なタイポグラフィは、JosefMuller-BrockmannやJanTschicholdなどのデザイナーの作品に例示されています。彼らは、これまでの何世紀にもわたる設計に基づいて、グリッドシステムと活版印刷のスケールを策定しました。

比率を示す図。 — JanTschicholdによる中世写本のフレームワーク。（大プレビュー）

ページの寸法の比率を知っていると、デザイナーは最大の効果で要素を配置できます。ページは制約であり、グリッドシステムはページに順序を課す方法です。

あなたの才能をウェブに持ち込む

1990年代にウェブが世界を征服し始めたとき、デザイナーは紙からピクセルへの移行を開始しました。 DavidSiegelのCreatingKillerWebサイトはちょうどいいタイミングで登場しました。その巧妙なTABLEおよびGIFハックにより、デザイナーは以前に印刷ページ用に作成したのと同じ種類のレイアウトを複製することができました。

これらのTABLEレイアウトは後でCSSレイアウトになりましたが、基本的な考え方は同じでした。ブラウザウィンドウは、前のページと同様に、設計者が順序を課す既知の制約として扱われていました。

このアプローチには問題があります。一枚の紙やベラムの比率は固定されていますが、ブラウザウィンドウのサイズは任意です。 Webデザイナーが、特定の人のブラウザウィンドウのサイズを事前に知る方法はありません。

設計者は、自分たちが設計している長方形の寸法を知ることに慣れていました。 Webはその制約を取り除きました。

それが修正されていない場合は、それを壊さないでください

未知のものほど恐ろしいものはありません。元米国国防長官のドナルド・ラムズフェルドのこれらの言葉は本当に恐ろしいはずです（当時の一般的なコンセンサスはナンセンスのように聞こえたということでしたが）：

既知の既知のものがあります。私たちが知っていることがあります。また、既知の未知数があることも知っています。つまり、私たちが知らないことがいくつかあることを知っています。しかし、未知の未知のものもあります—私たちが知らないもの私たちが知らないもの。

ブラウザウィンドウの比率は、Web上で既知の未知のものの一例にすぎません。この状況に対処する最も簡単な方法は、レイアウトに柔軟な単位を使用することです。ピクセルではなくパーセンテージです。代わりに、設計者はブラウザのサイズが既知であると偽ることを選択しました。彼らは、1つの特定のウィンドウサイズに対して固定幅のレイアウトを作成しました。

Webの初期の頃、ほとんどのモニターは640ピクセル幅でした。 Webデザイナーは、幅640ピクセルのレイアウトを作成しました。ますます多くの人々が800ピクセル幅のモニターを使い始めるにつれて、ますます多くのデザイナーが800ピクセル幅のレイアウトを作成し始めました。数年後、それは1024ピクセルになりました。ある時点で、Webデザイナーは、理想的な幅として960ピクセルのマジックナンバーを決定しました。

それはまるでウェブデザインコミュニティが共有された合意された幻覚に参加しているかのようでした。彼らは、ブラウザウィンドウの柔軟な性質を認めるのではなく、理想として1つの設定された幅に落ち着くことを選択しました…たとえそれが数年ごとに理想を変えることを意味したとしても。

誰もがこのウェブ全体のメモに賛成したわけではありません。

DaoまたはDaoNot

2000年に、オンラインマガジンA List Apartは、 A Dao of WebDesignというタイトルの記事を発行しました。それは時の試練に非常によく耐えてきました。

記事の中で、ジョン・オールソップは、新しい媒体は以前の媒体の比喩を取り入れることから始まることが多いと指摘しています。スコットマクラウドは、彼の著書「マンガを理解する」でも同じことを指摘しています。

それぞれの新しい媒体は、その前任者を模倣することによってその寿命を開始します。初期の映画の多くは、撮影された舞台劇のようなものでした。ずっと初期のテレビは、写真や縮小された映画のあるラジオのようなものでした。

そのことを念頭に置いて、Webデザインが、デザイナーが印刷の世界で慣れ親しんだ種類のレイアウトを再現する試みから始まったことは驚くことではありません。ジョンが言ったように：

「キラーWebサイト」は通常、Webの荒野を飼いならし、紙でできているかのようにページを制限するサイトです—Web用デスクトップパブリッシング。

Webデザインは、印刷デザインに情報を提供してきた何世紀にもわたる学習の恩恵を受けることができます。スイススタイルを象徴する作品であるマッシモヴィネッリは、彼の有名なキヤノンを、規律、適切性、時代を超越した、責任などを含む無形資産のリストから始めます。そのリストのすべては、Webのデザインに適用できます。 VignelliのCanonには、TheTangiblesのリストも含まれています。そのリストは用紙サイズから始まります。

ウェブは印刷されません。紙の既知の制約（幅と高さ）は、単に存在しません。ウェブは事前に設定された寸法に拘束されません。 JohnAllsoppのADao Of Web Designは、開業医にこれを認めるよう呼びかけました。

設計者が印刷媒体で知っている、そしてしばしばウェブ媒体で望む制御は、単に印刷されたページの制限の機能です。 Webには同じ制約がないという事実を受け入れ、この柔軟性を考慮して設計する必要があります。

この武器への呼びかけは無視されました。デザイナーは、全員のブラウザーが同じ幅である、マトリックスのような合意に基づく幻覚にとどまりました。それは理解できます。特にそれがコントロールの錯覚を与えるとき、心強いフィクションを信じることには大きな慰めがあります。

Webデザイナーが固定幅レイアウトの快適さに固執したもう1つの理由があります。業界のツールは、ウェブのデザインに紙のようなアプローチを奨励しました。

ツールの出荷

常に自分の道具を非難するのは貧しい職人です。それでも、すべての職人は道具の選択に影響されます。マーシャル・マクルーハンの同僚であるジョン・カルキンが言ったように、「私たちは私たちの道具を形作り、その後私たちの道具は私たちを形作る」。

Webデザインの分野が出現したとき、Web上のレイアウトを視覚化するために特別に作成されたソフトウェアはありませんでした。代わりに、設計者は既存のツールを採用しました。

Adobe Photoshopは、もともと画像操作を目的としていました。写真の修正、フィルターの適用、レイヤーの合成など。 90年代半ばまでに、それはグラフィックデザイナーにとって不可欠なツールになりました。それらの同じデザイナーがウェブ用にデザインを始めたとき、彼らはすでに慣れ親しんだソフトウェアを使い続けました。

Photoshopを使用したことがある場合は、[ファイル]メニューから[新規]を選択するとどうなるかがわかります。作業しようとしているキャンバスの固定サイズを入力するように求められます。単一のピクセルを追加する前に、柔軟性のないウェブの合意に基づく幻覚を強化する基本的な設計上の決定が行われました。

Photoshopだけでは、固定幅の考え方のせいにすることはできません。結局のところ、それはWebページの設計を目的としたものではありませんでした。最終的に、ソフトウェアはWebページを作成するという特定の目的でリリースされました。 MacromediaのDreamweaverは、Webデザインツールの初期の例でした。残念ながら、それはWYSIWYGのアイデアに従って動作しました：あなたが見るものはあなたが得るものです。

Dreamweaverを使用してデザインする場合、表示されるものが取得するものであることは事実ですが、Web上では、表示されるものが他のすべての人が取得するものであるという保証はありません。繰り返しになりますが、Webデザイナーは、メディアに固有の不確実性に直面するのではなく、コントロールの錯覚を受け入れるように促されました。

PhotoshopやDreamweaverなどのツールに組み込まれているバイアスを克服することは可能ですが、それは簡単ではありません。私たちは自分たちのツールを自分たちで管理していると思いたいかもしれません。私たちは自分たちの意志でツールを曲げていますが、真実はすべてのソフトウェアが独創的なソフトウェアであるということです。未来派のジャメイ・キャッシオが述べたように、「ソフトウェアは、すべてのテクノロジーと同様に、本質的に政治的です」。

コードは必然的に、その作成者の選択、偏見、欲求を反映しています。

それなら、ツールの粒度を操作する設計者が、それらのツールに組み込まれた仮定、つまりワールドワイドウェブの既知の未知数を制御および飼いならす能力に関する仮定を反映したWebサイトを作成したのは不思議ではありません。

リアリティバイツ

21世紀の最初の10年の半ばまでに、Webデザインの分野は複数の仮定によって支えられました。

誰もが960ピクセル幅のレイアウトを表示するのに十分な大きさの画面でブラウジングしていたこと。
誰もがブロードバンドインターネットにアクセスでき、Webページ上の画像の数とファイルサイズを最適化する必要性を軽減しました。
誰もが最新のプラグインがインストールされた最新のWebブラウザを使用していたこと。

少数のWebデザイナーは、依然として流動的なレイアウトを求めていました。私は彼らの数の中に自分自身を数えました。私たちは、「終わりは近づいています」と書かれたサンドイッチボードを身に着けている街角の運命の予言者とほとんど同じように容認されました。これは不便ですが無害な気晴らしです。

PhotoshopはWebに最適なツールではない可能性があり、 CSSとHTMLを使用してブラウザで直接デザインすることを検討できると示唆するデザイナーもいました。そのアプローチは、制約が大きすぎると批判されました。これまで見てきたように、Photoshopには独自の制約がありますが、それらは設計者によって内部化されており、ツールの使用に非常に慣れているため、その欠点を認識できなくなりました。

Photoshopのコンプをデザインし、ブラウザでデザインすることのメリットに関するこの議論は、Webデザインの世界を永遠に揺るがすようなイベントがなければ、ほとんど学術的なものでした。

モバイルの内部で立ち往生

iPod。電話。そしてインターネットコミュニケーター。 iPod。電話…あなたはそれを手に入れていますか？これらは3つの別個のデバイスではありません。これは1つのデバイスです。そして私たちはそれをiPhoneと呼んでいます。

2007年にこれらの言葉を使って、SteveJobsはWorldWideWebの閲覧に使用できるモバイルデバイスを発表しました。

Web対応のモバイルデバイスはiPhoneより前に存在していましたが、ほとんどの場合、 WMLと呼ばれるモバイル対応の特殊なファイル形式の表示に限定されていました。 HTMLをレンダリングできるデバイスはほとんどありません。 iPhoneとその競合製品の導入により、ハンドヘルドデバイスは、Web上で一流の市民になることができる最新のWebブラウザとともに出荷されていました。これはウェブデザインの分野を混乱に陥れました。

業界全体の基礎を形成していた仮定は、現在疑問視されていました。

人々が広いデスクトップ画面を使用しているか、狭いハンドヘルド画面を使用しているかをどのようにして知ることができますか？
人々が自宅で高速ブロードバンド接続を使用してブラウジングしているのか、低速モバイルネットワークを使用してブラウジングしているのかをどのようにして知ることができますか？
デバイスが特定のテクノロジーやプラグインをサポートしているかどうかをどうやって知ることができますか？

モバイルデバイスの台頭は、未知のもので満たされた柔軟な媒体としてのWebの本質にWebデザイナーを直面させていました。

この新たに公開された現実に対する最初の反応には、セグメンテーションが含まれていました。デスクトップ向けに最適化された既存のWebサイトを再考するのではなく、モバイルデバイスを別のサイロに移動できるとしたらどうでしょうか。このモバイルゲットーは、多くの場合、「実際の」サイトとは別のサブドメインであるm.example.comまたはmobile.example.comにありました。

このセグメント化されたアプローチは、より正確な「モバイルで体験されるWeb」という用語ではなく、「モバイルWeb」という用語の使用によって強化されました。以前の合意に基づく幻覚の伝統では、Webデザイナーは、モバイルとデスクトップをデバイスの別個のクラスとしてだけでなく、完全に別個のWebサイトとして考えていました。

どのデバイスがどのサブドメインに送信されたかを判断するには、ブラウザのユーザーエージェント文字列を、増え続ける既知のブラウザのリストと照合する必要がありました。最新情報を入手するためだけに、レッドクイーンのレースでした。エラーが発生しやすいだけでなく、かなり恣意的でした。たとえばiPhoneをモバイルデバイスとして分類するのはかつては簡単だったかもしれませんが、その区別は時間の経過とともに難しくなりました。 iPadなどのタブレットの導入により、どのデバイスをモバイルURLにリダイレクトする必要があるかが明確ではなくなりました。おそらく、「タブレットWeb」のような新しい用語とともに、新しいサブドメイン（t.example.comまたはtablet.example.com）が呼び出されました。しかし、「 TVWeb 」や「インターネット対応の冷蔵庫Web」についてはどうでしょうか。

私たちは一つです

さまざまなデバイス用にさまざまなサイトを作成するという慣行は、拡張性がありませんでした。また、OneWebと呼ばれる長年の理想に反するものでした。

1つのWebとは、ユーザーが使用しているデバイスに関係なく、合理的な範囲で、ユーザーが同じ情報とサービスを利用できるようにすることを意味します。

ただし、これは、小さな画面のデバイスに、より大きなサイズ用に設計されたページレイアウトを提供する必要があるという意味ではありません。

ただし、すべてのデバイスでまったく同じ情報がまったく同じ表現で利用できるという意味ではありません。

WebデザイナーがOneWebの精神に忠実であり続けることを望む場合、デバイスに関係なく、すべての人に同じURLで同じコアコンテンツを提供する必要がありました。同時に、利用可能な画面領域に応じて異なるレイアウトを作成できる必要がありました。

ウェブデザインへの万能のアプローチという共通の幻想は消え始めました。それは徐々に変化するウェブの流動的な性質の受容に取って代わられました。

肯定的な反応

2010年4月、イーサンマルコットは、シアトルで開催されたAn Event Apartのステージに立ち、ウェブサイトを作成する人々の集まりでした。彼は、建築の世界における興味深い考え方について話しました。レスポンシブデザイン、建物を使用する人々のニーズに応じて建物が変化し、適応できるという考えです。これは、ウェブサイトの作成に取り組む方法になる可能性があると彼は説明しました。

1か月後、彼はレスポンシブWebデザインと呼ばれる記事でこのアイデアを拡張しました。これは、10年前にJohnAllsoppのADao Of WebDesignを公開したのと同じWebサイトであるAListApartに公開されました。イーサンの記事は、ジョンの以前のラリーの叫びと同じ精神を共有していました。実際、イーサンはA Dao Of WebDesignを参照して記事を始めています。

どちらの記事も、WebデザイナーにOneWebのアイデアを採用するよう呼びかけました。しかし、 A Dao Of Web Designは、 WYSIWYGツールに慣れているデザイナーによって大部分が拒否されましたが、レスポンシブWebデザインは、モバイルの難問を解決するために必死になっているデザイナーの聴衆を見つけました。

隣接する可能性

作家のスティーブン・ジョンソンは、発明と革新の歴史を記録しています。彼の著書WhereGood Ideas From Fromで、彼は「隣接する可能性」と呼ばれるアイデアを探求しています。

拡大する生物圏のタイムラインのあらゆる瞬間に、まだロックを解除できないドアがあります。人間の文化では、画期的なアイデアをタイムラインの突然の加速と考えたいと思います。天才は50年先に進み、今の瞬間に閉じ込められた通常の心では思いつかなかった何かを発明します。しかし、真実は、技術的（および科学的）な進歩が隣接する可能性から抜け出すことはめったにないということです。文化の進歩の歴史は、ほとんど例外なく、あるドアが別のドアに通じ、一度に1部屋ずつ宮殿を探索するという物語です。

これが、中世フランスで電子レンジを発明できなかった理由です。この種の飛躍を遂げるには、製造、エネルギー、理論など、先行するステップが多すぎます。 Facebookは、インターネットなしでは存在できなかった、コンピューターなしでは存在できなかったワールドワイドウェブなしでは存在できなかった。各ステップは、以下の累積レイヤーによって異なります。

イーサンがレスポンシブウェブデザインという用語を作り出したときまでに、多くの技術的進歩が実現していました。私がこのトピックに関するイーサンの次の本の序文に書いたように：

テクノロジーはすでに存在していました：流体グリッド、柔軟な画像、メディアクエリ。しかし、イーサンはこれらのテクニックを1つのバナーの下に統合しました。そうすることで、Webデザインに対する考え方が変わりました。

流体グリッド。 TABLEレイアウトの時代から、ピクセルの代わりにパーセンテージを使用するオプションがありました。
柔軟な画像。 Richard Rutterが実施した調査によると、ブラウザは画像のサイズ変更にますます熟練していることがわかりました。画像の固有の寸法は、制限要因である必要はありません。
メディアクエリ。 CSSのエラー処理モデルのおかげで、ブラウザは時間の経過とともに機能を追加してきました。それらの機能の1つは、 CSSメディアクエリでした。これは、ブラウザウィンドウのサイズなど、特定のパラメータに従ってスタイルを定義する機能です。

レイヤーは所定の位置にありました。モバイルの絶え間ない台頭によって推進された変化への欲求もありました。必要だったのは、これらを結びつけることができるスローガンでした。それがイーサンがレスポンシブウェブデザインで私たちに与えたものです。

考え方の変化

レスポンシブデザインの最初の実験では、既存のデスクトップ中心のWebサイトを改良しました。ピクセルをパーセンテージに変換し、メディアクエリを追加して小さな画面のグリッドレイアウトを削除しました。しかし、この反応的なアプローチは、基盤となる確固たる基盤を提供しませんでした。幸いなことに、別のスローガンは、より回復力のあるアプローチをカプセル化することができました。

Luke Wroblewskiは、モバイルデバイスの台頭に応えて、モバイルファーストという用語を作り出しました。

画面スペースの80％を失うと、焦点を合わせる必要があります。画面に表示されるものが、顧客とビジネスにとって最も重要な機能のセットであることを確認する必要があります。インターフェースの破片や疑わしい価値のあるコンテンツを入れる余地はありません。あなたは何が最も重要かを知る必要があります。

コンテンツに優先順位を付けて、小さな画面の限られたスペース内で機能させることができれば、より大きな画面サイズに合わせて構築できる堅牢で復元力のあるデザインが作成されます。

StephanieとBryanRiegerは、モバイルファーストのレスポンシブデザインアプローチをカプセル化しました。

メディアクエリの欠如は、最初のメディアクエリです。

このコンテキストでは、モバイルファーストはモバイルデバイス自体についてではなく、デバイスに関係なくコンテンツとタスクの優先順位付けに重点を置いています。それは仮定を思いとどまらせます。これまで、Webデザイナーは、デスクトップデバイスに関する根拠のない仮定に反していた。今では、モバイルデバイスについての仮定を避けることも同様に重要でした。

Webデザイナーは、画面サイズ、帯域幅、またはブラウザー機能について推測することができなくなりました。彼らは、本当に彼らの管理下にあったウェブサイトの1つの側面、つまりコンテンツを残されました。

Webデザインのダオを反映して、デザイナーのマーク・ボールトンはこの新しいアプローチを歴史的な文脈に置きました。

ウェブの流動性を取り入れましょう。どんな環境にも対応できるレイアウトとシステムを設計します。しかし、これを実行できる唯一の方法は、首の周りに束縛されてきた考え方を捨てることです。彼らは私たちを引き止めています。 キャンバスインではなく、コンテンツアウトからデザインを開始します。

このコンテンツアウトの考え方は、ケルズの書にまでさかのぼるキャンバスインのアプローチとは根本的に異なります。これは、Webデザイナーに、制御の錯覚を放棄し、World WideWebの実質的に正直な規律を作成するように求めています。

管理を放棄することは、品質を放棄することを意味するものではありません。まったく逆です。ウェブのデザインに関係する多くの未知数を認めることで、デザイナーはメディアに忠実な弾力性のある柔軟な方法で作成することができます。

TexanのWebデザイナーであるTrentWaltonは当初、レスポンシブデザインに警戒していましたが、固定幅のPhotoshopモックアップを作成するよりも、正直で本格的なアプローチであることにすぐに気付きました。

レスポンシブに対する私の愛情は、モバイルから本格的なデスクトップ、そしてその間のどこにいても、私のWebサイトがどこにいてもあなたに会えるという考えに集中しています。

何年もの間、ウェブデザインはデザイナーによって指示されました。ユーザーは、特定のサイズの画面または特定の速度のネットワーク接続に対するサイトの要求に対応する以外に選択肢はありませんでした。これで、Webデザインはデザイナーとユーザーの間の会話になります。現在、Webデザインは、Web自体の基本原則を反映できます。

World Wide Webの20周年にあたり、Tim Berners-Leeは、Scientific American向けに、これらの基本原則を繰り返した記事を書きました。

Webの有用性と成長の根底にある主要な設計原則は、普遍性です。 Webは、障害を持つ人々が使用できる必要があります。それは、文書であれデータのポイントであれ、あらゆる形式の情報、および愚かなツイートから学術論文まで、あらゆる品質の情報で機能する必要があります。また、インターネットに接続できるあらゆる種類のハードウェアからアクセスできる必要があります。固定またはモバイル、小画面または大画面です。

参考文献

ジョン・オールソップによるWebデザインのダオ
マッシモ・ヴィネッリのヴィネッリ・キャノン
ジャメイ・キャッシオによる開放性とメタバースの特異性
JoRabinとCharlesMcCathieNevileによる1つのWeb
イーサン・マルコットによるレスポンシブWebデザイン
MarkBoultonによるより豊かなキャンバス
トレント・ウォルトンによるスケールに合わせる
ロングライブザウェブ：ティムバーナーズリーによる継続的なオープンスタンダードと中立性の呼びかけ