2014年Webデザイナーはコードをどこまで学ぶべきか、Webデザインが今までどのように進化してきたかのまとめ

Webデザイナーはコードを学ぶべき? コーダーはデザインを学ぶべき?

両方に精通している人はなかなか多くはいません。Webデザインがどのように進化してきたのかその流れをしっかり押さえ、デザインとコードのギャップをつなぐことができたか振り返ってみましょう。

サイトのキャプチャ

A brief history of web design for designers

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

先日の彼らの記事「しっかりと理解しておきたい!レスポンシブWebデザインを使いこなすための9つの基本原則」と同様に、分かりやすいアニメーションもお楽しみください。

1989年:Webデザインの暗黒時代

Hello, World!

スクリーンは文字通り黒く、単色のピクセルだけで文字や記号が表示され、まさしくWebデザインの始まりは暗い画面からスタートしました。当時のデザインと呼べるものは、シンボルと表(tabキー)によって作られていました。

1995年:Webデザインの始まりはテーブルから

テーブルレイアウトの時代

画像を表示できるブラウザの誕生は、Webデザインの大きな始めの一歩となりました。情報を構造化する際に利用可能な方法は、HTMLのテーブルだけでした。テーブルをテーブルの中に配置し、固定と可変のセルを使い分け、レイアウトをしていました。テーブルの本来の目的とは異なる使い方ですが、当時からそれが正しい使い方ではないと分かっていながらも、長い間Webページを作る普通の方法でした。

同時にスライスするデザインの人気が高くなったのもこの時期です。デザイナーがしゃれたレイアウトをし、そのデザインをブラウザに再現させるのはコーダーの腕しだいで、テーブルを使いさまざまな要素をスライスして配置しました。当時得ることができたことといえば、グリッドに近い考えだったということでしょうか。
多くの制作者がフロントエンドのコーディングを好きになれなかったのは、テーブルを使うからという理由でした。

1995年:JavaScriptが表現の幅を広げる

JavaScript

JavaScriptはHTMLでできることの限界に対する答えでした。例えば、ポップアップウインドウを必要とした場合、その答えはJavaScriptでした。ただしJavaScriptにも問題があり、ページで機能させるためには別にロードさせなければなりません。最近の傾向としては、もし同じ機能がCSSで実装できるのであれば、JavaScriptの使用を避けることをより好みます。それでもJavaScript自身はバックエンド(node.js)上と比べて同じくらいフロントエンド(jQuery)が強い状態です。

1996年:Flashにより自由の黄金期へ

Flash到来

既存のWebデザインの限界を破るための画期的な技術が生まれました、「Flash」です。デザイナーはシェイプ・レイアウト・アニメーション・インタラクションをデザインし、これらを一つのツールで行うことができるようになりました。出来上がったものは一つのファイルで管理され、ブラウザで表示されます。ユーザーはプラグインをインストールし、若干のロード時間を待つだけで、その魔法のような機能を利用できました。スプラッシュページ・イントロのアニメーションなど、あらゆる種類のインタラクティブなエフェクトのための黄金期といってよいでしょう。不幸なことは、それは検索にはやさしくなく、多くの処理でCPUのパワーを消費しました。

AppleがiPhone(2007)でFlashの切り捨てを決めてから、Flashは廃れ始めました(少なくともWebデザインで)。

1998年:CSSでコンテンツをデザインから切り離す

時代はCSSへ

Flashとほぼ同じ頃、テクニカルな見地からデザインを構造化するアプローチが生まれました、「CSS」です。CSSの基本的な概念はコンテンツをデザインから切り離すことです。HTMLはコンテンツ、CSSはデザインとフォーマットが定義されます。CSSの最初のバージョンはフレキシブルとはほど遠かったですが、もっとも大きい問題はブラウザのサポートでした。当初はバグだらけで、使えるようになるまで数年を要しました。一つのブラウザが新しい機能を備えると、別のブラウザではそれがバグになり、それはもうWeb制作者にとっては悪夢でした。

Webデザイナーはコードのやり方を学ぶべきですか?
答え:たぶん。

WebデザイナーはCSSがどのように機能するか理解すべきですか?
答え:絶対に理解すべきです!

2007年:モバイルへの混乱、グリッドとフレームワーク

グリッドとフレームワーク

ケータイなどのモバイルデバイスでWebをチェックすることは、それだけでチャレンジでした。小さいスクリーンサイズでも同じデザインを提供すべきか最低限にすべきか、広告はどうするなど、さまざまな議論があちこちで起きました。当時はロードするデータ量も非常に大きな問題で、アクセスにかかる費用、そしてもちろんスピードも問題でした。

改良への第一歩は、カラムを使ったグリッドのアイデアでした。さまざまなグリッドが生まれましたが、最終的には960 Grid Systemが勝利し、12カラムのグリッドは多くのデザイナーが使うようになりました。次のステップでは形式としてのエレメントという考えで、ナビゲーション、ボタンなどよく使われるものを容易で再利用可能なように標準化することでした。基本的にはビジュアル要素のライブラリを作り、その中に全てのコードを用意しておきます。ここではBootstrapFoundationが勝利し、多くのWebサイトやアプリで利用されています。悪い面としては、デザインが同じように見えてしまう、デザイナーがコードがどのように機能するか知らないとアクセスすることができないといったことがあります。

2010年:レスポンシブWebデザイン

レスポンシブWebデザイン

2010年にEthan Marcotteがデザインのための異なるレイアウトを「Responsive Web Design」を提案しました。これがレスポンシブWebデザインの原点です。これはデザイナーには多数のレイアウトのモックアップを作ることを意味し、クライアントにはモバイルでも機能することを意味します。主な利益は、それがどのデバイスでも機能する同じWebサイトであることを意味し、コンテンツはどれも同等です。

2010年:フラットの時代

フラット デザイン

多くのレイアウトをデザインすることは多くの時間を必要とします。そのプロセスを合理化するために優先順位をつけ、まずはおしゃれなシャドウのエフェクトを捨て、デザインのルーツに戻ることにしました。高品質な写真画像、イラスト、タイポグラフィ、使いやすいレイアウトをどのようにデザインするかです。ビジュアルの要素をシンプルにすることで、いわゆるフラットなデザインにすることは単にプロセスの一部です。重要なのは、コンテンツが中心であるということ。光沢があるボタンはアイコンに変わり、SVGやアイコンフォントを使うことを可能します。また、Webフォントは美しいタイポグラフィを与えます。フラットはある意味、Webの始まりに近いかもしれません。

2014年:これからのWebデザインは明るい未来

これからのWebデザイン

今までのWebデザインの目標は情報をビジュアルにし、ブラウザの中に表現することでした。デザイナーがスクリーンの中でものを動かし、きれいなコードでリリースされることを想像してみてください。そして、コーダーはブラウザの互換性について心配しなくてもよく、本来解決すべき問題にフォーカスを合わせることができることを想像してみてください。

これらのことは夢物語ではなく、その方向に動いている新しい技術的なコンセプトがあります。例えば、vh, vwのようなCSSの新しい単位は今よりずっと柔軟性の高い要素を配置することをでき、多くのデザイナーが頭を抱えていた問題も解決します。CSSで垂直の真ん中に要素を置くなども簡単です。CSSのFlexboxも重要なコンセプトで、これからのレイアウトに必ず役立ちます。最終的にはWebコンポーネントとしてより大きな地位を獲得するでしょう。そして、これらの新しいコンセプトはワークフローをより容易にし、再利用が可能で、構造的な基礎となります。

Webの未来について、あなたはどう思いますか?

メモ

1998年から2007年までは空白の期間ということではなく、目立った進化がなかっただけです。

元記事の彼らは、これからのレスポンシブWebデザインに役立つすごいツールもリリースしているのでお試しあれ!

サイトのキャプチャ

FROONT -Responsive Web Design Tool

10プロジェクトまでの利用は無料です!

sponsors

top of page

©2018 coliss