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

Post on:2014年12月8日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2010年：フラットの時代

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

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

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

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

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