Webデザインの簡単な歴史

翻訳者から：Web上のテクノロジーは比較的急速に変化しており、Webデザインのトレンド、コンテンツの配信方法、ユーザーとのやり取りはさらに急速に混み合っています。 開発は一方的に行われるのではなく、変更は情報を消費する方法と方法にも関係することに注意してください。



現在、モバイルトラフィックの割合は急速に増加しています。 さらに、ユーザーがインターネット上でスマートフォンやその他のモバイルガジェットから費やす時間は、固定コンピューターで人が費やす時間よりも平均して大幅に長くなります。 この事実は、Webデザインのさらなる発展のベクトルに影響を与えるほかありません。



変態は、腺と技術だけでなく、私たちの脳でも起こります。 情報量の増加への対応としての「クリップ思考」の開発は広く議論されています。 Webデザインを操作するときの人々の行動と思考について、多くの実用的な研究が行われています。 心理学の博士であるスーザン・ウェイネシェンクは、 彼のブログでこれについて詳しく書いています。



アイデアを実現するためにどれだけの作業が必要かを認識した瞬間に、デザインをコードに変えることに興味を失いました。 一見、単純なタスクには非常に多くの解決策がありますが、すべてのブラウザで機能するとは限りません。 私はいつも不思議に思っていました。なぜデザインとコードに分離があるのですか？ なぜ最初に複雑なものを単純化し、より単純なものに分割してから、再び複雑にするのですか？ デザイナーがコードを書くことを学ぶべきか、開発者がデザインを学ぶ必要があるかについて議論する代わりに、ウェブデザインがどのように進化し、コードとデザインの間のギャップを埋めることができるかについて単一の図をまとめることをお勧めします。

Webデザインの暗黒時代（1989）

画面は文字通り黒で、モノクロピクセルが少数しか含まれていないため、Webデザインの最初の段階はダークタイムと呼ばれます。 その後、シンボルとタブを使用してデザインが作成されたため、グラフィカルユーザーインターフェイスがWebサーフィンの主なツールだった時期に進みます。 テーブルレイアウトのこれらの時間は、Webのワイルドウェストと呼ぶことができます。

テーブル-開始（1995）

画像を表示できるブラウザの出現は、Webデザインの最初のステップであり、今日の私たちの知っている方法です。 情報を構造化する最もアクセスしやすい方法は、テーブルを使用するという概念でした。これは当時HTMLで利用可能になりました。 したがって、他のテーブル内にテーブルを配置し、静的セルと相対的なサイズのセルを混合することは、David Siegelの著書「 Creating Killer Sites 」から始まりました。 そのような目的でのテーブルの使用は、情報を構造化することが主な目的であるため、あまり適切ではないと思われました。 それにもかかわらず、このWebデザインの作成方法は、長い間最も一般的でした。 その後、別の問題がありました-これらの壊れやすい構造の操作性を維持します。 同時に、個々の要素に「レイアウトをカット」することが人気を博しました。 設計者は美しいレイアウトを描き、それらをより小さな部分に分割し、設計どおりに機能するようにそれらを接着して、開発者が行いました。 一方、テーブルには、コンテンツを垂直方向に配置し、サイズをピクセルとパーセントで決定する機能などのシックな機能がありました。 テーブルの主な利点は、グリッド構造をできるだけ近くで再作成できることでした。 その後、開発者は、外部インターフェイスとその開発を愛するのをやめたと気付きました。

Javascriptが助けになります（1995）

HTMLの制限に対する答えはJavascriptでした。 ポップアップしたいですか？ または、要素の動的配置を構成する必要がありますか？ 唯一の答えはJavascriptです。 ただし、主な問題は、JavascriptがWebを構成する素材の上にあるため、個別にダウンロードする必要があったことです。 多くの場合、怠な開発者はそれを使用してコードのクイックパッチを作成しましたが、右手では非常に強力なツールに変わる可能性があります。 現在、CCSを使用して同じ要素を実装できる場合はJavascriptの使用を避けることを好みますが、それでも、今日のJavaScriptはインターフェース開発（jQuery）とサーバープログラミング（ノード）の両方でその関連性を失いません。 js）。

黄金時代の自由-フラッシュ（1996）

1996年に登場した技術は、前例のない自由を約束し、当時のWebデザインの開発を妨げる障壁を打ち破ることを目的としていました。 デザイナーは、任意のフォーム、レイアウトのサイズ、アニメーション、インタラクションを操作し、1つのツールであるすべてのフォントとFlashテクノロジーを使用できます。 作業の最終結果は1つのファイルにまとめられ、その後、表示のためにブラウザーに送信されました。 これはすべて、ユーザーが最新バージョンのFlashプラグインを使用し、コンテンツがロードされるのを待つための時間があることを条件に機能していました。 それは魔法のように見えました。 当時は活気に満ちたウェルカムページ、入門アニメーション、あらゆる種類のインタラクティブエフェクトの黄金時代でした。 残念なことに、このテクノロジーには明らかにオープン性、検索のしやすさが欠けていて、Flashリソースの消費は本当に大きかったです。 Appleが最初のiPhone（2007）でそれを取り除くことを決めたとき、少なくともWebデザインの見通しに関しては、テクノロジーは衰退し始めました。

CSS（1998）

Flashとほぼ同時に、別の技術的な観点から見れば、構造化デザインが登場しました-カスケードスタイルシート（CSS）。 その基本的な概念は、コンテンツコンテナーの機能とプレゼンテーションの機能を分離することで、コンテンツ自体をHTMLに配置し、CSSを使用して視覚的な書式設定を行いました。 このテクノロジーの最初のバージョンは柔軟性にはほど遠いものでしたが、最大の問題はブラウザーへの適応速度が遅いことでした。 CSSの完全なブラウザサポートの導入には数年かかり、多くの場合、その使用にはかなりの数のバグが伴いました。 同時に、多くの場合、最新のCSSプロパティは1つのブラウザーでのみサポートされていましたが、他のブラウザーではこのサポートがありませんでした。 開発者にとって、これは本当の悪夢になりました。 また、CSSはコードを記述するための言語ではなく、オブジェクトのプロパティを宣言するための言語であり、デザイナーがコードの記述方法を学ぶ必要があるかどうかという疑問が解決しない場合は、「CSSの仕組みを理解する必要がありますか？」間違いなくポジティブになります。

モバイルコンテンツの台頭-グリッドとフレームワーク（2007）

携帯電話でウェブを閲覧すること自体がテストでした。 しかし、さまざまなデバイスのレイアウトのサイズの違いに加えて、デザインの適合性の問題もありました：小さな画面に大きな画面と同じバージョンのサイトを表示する価値があるのですか、それとも個々の部分を拒否する必要がありますか？ そして、このようなちらつきのある広告をこのような小さな画面に挿入する場所はどこですか？ 大量のコンテンツをダウンロードすると、モバイルバランス全体が非常に急速に燃えるため、速度も問題でした。 状況を改善するための最初のステップは、列を持つグリッドを使用するというアイデアでした。



数回の反復の後、960ピクセルのグリッドが勝ち、12列への分割は主にデザイナーによって使用されました。 次のステップは、フォーム、ナビゲーションメニュー、ボタンなどの広範な要素の標準化と、それらの迅速かつ簡単な使用の可能性の作成、または簡単に言えば、必要なすべてのコードを含む視覚要素のライブラリの作成です。 ここでの勝者はBootstrapとFoundationです。これは、Webサイトとアプリケーションの間の境界線がぼやけているという事実も示しています。 このアプローチの欠点は、新しいデザインがしばしば同じように見え始めたことです。 同時に、設計者自身は、コードがどのように機能するかを理解しないと、変更にアクセスできませんでした。

レスポンシブWebデザイン（2010）

イーサン・マーコットという名の賢い男が、同じコンテンツを表示することを提案し、それを表すために異なる形式のレイアウトを使用して、「レスポンシブWebデザイン」という用語を呼ぶことで、現在のアプローチに挑戦することを決めました。 正式には、HTMLとCSSを引き続き使用しているため、これは概念の改善に関するものです。



このアプローチに関して多くの誤解があります。 デザイナーにとって「適応性」とは、さまざまなレイアウトの多くのスケッチを作成することを意味し、クライアントにとっては、これはすべてが電話で機能することを意味します。 同時に、開発者はページの読み込み速度、ユーザーに画像を表示する方法、要素のセマンティックロード、モバイルバージョンまたはデスクトップバージョンの優先度などについて考えます。このアプローチの主な利点は、同じコンテンツを異なるレイアウトに保存することです。 実際には、これは同じWebサイトがどこでも機能することを意味します。 少なくとも全員がこの定義に同意することを願っています。

簡素化（2010）

より多くのレイアウトを描画するには時間がかかります。 これに基づいて、私たちの共通の幸福に、デザイナーはプロセスを合理化し、影の複雑な影響を取り除き、デザインの起源に戻り、コンテンツを優先することにしました。 高品質の写真素材、フォントデザインの選択、カラフルなイラスト、思慮深いレイアウト-これが今日作成するデザインです。

視覚要素の単純化、いわゆる「フラットデザイン」もこのプロセスの一部です。 その主な利点は、素材、表示される情報の優先度、およびコンテンツ全体により多くの注意が払われることです。 光沢のあるボタンはアイコンに置き換えられました。これにより、ベクター画像とアイコンフォントを使用できます。 Webフォントは素晴らしいタイポグラフィを提供します。 ここで最も面白いのは、ウェブが最初からこのアイデアに近かったということですが、それが若い理由です...

明るい未来（2014）

ここ数年、デザインの視覚化とそれをブラウザで表示するさまざまな試みは、Webデザインの聖杯でした。 完成したコードは独力で表示されますが、デザイナーが画面上の要素を簡単に移動する方法を想像してください！ これは、要素の順序を変更することではなく、完全な柔軟性と制御に関するものです！ 開発者はブラウザの互換性について心配する必要はなく、実際の問題の解決に完全に集中できることを想像してください！



正式には、今日、この方向の動きをサポートするいくつかの新しいアイデアがあります。 vh、vw（ビューポートの高さと幅）などの新しいCSSユニットは、要素を配置する際の柔軟性を大幅に高めます。 また、多くの設計者を驚かせた問題も解決します。CSSの中央の垂直方向の配置がなぜそれほど難しくなるのでしょうか。 CSSの一部になったもう1つのクールなアイデアはFlexboxです。これにより、大量のコードを記述する代わりに、単一のプロパティでレイアウトを作成して変更できます。 そして最後に、Webコンポーネントはさらに徹底的な試みです。これは、たとえばギャラリーや登録フォームなど、一緒に接続された要素のセットです。 これにより、要素が独立しても含めて何度も使用できるビルディングブロックになるため、ワークフローを簡素化する機会が生まれます。



さて、ウェブデザインの将来についてどう思いますか？



注：括弧内の年は、特定のステージの開始を示します。 これらの技術は長い間異なる速度で開発されてきたので、1998年から2007年までの期間を空にしてはいけません。 そのとき、主な進化が起こりました。