コーダーはデザインを学ぶべき?両方に精通している人はなかなか多くはいません。Webデザインがどのように進化してきたのかその流れをしっかり押さえ、デザインとコードのギャップをつなぐことができたか振り返ってみましょう。designers下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。先日の彼らの記事「しっかりと理解しておきたい!レスポンシブWebデザインを使いこなすための9つの基本原則」と同様に、分かりやすいアニメーションもお楽しみください。1989年:Webデザインの暗黒時代1995年:Webデザインの始まりはテーブルから1995年:JavaScriptが表現の幅を広げる1996年:Flashにより自由の黄金期へ1998年:CSSでコンテンツをデザインから切り離す2007年:モバイルへの混乱、グリッドとフレームワーク2010年:レスポンシブWebデザイン2010年:フラットの時代2014年:これからのWebデザインは明るい未来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をチェックすることは、それだけでチャレンジでした。小さいスクリーンサイズでも同じデザインを提供すべきか最低限にすべきか、広告はどうするなど、さまざまな議論があちこちで起きました。当時はロードするデータ量も非常に大きな問題で、アクセスにかかる費用、そしてもちろんスピードも問題でした。改良への第一歩は、カラムを使ったグリッドのアイデアでした。Systemが勝利し、12カラムのグリッドは多くのデザイナーが使うようになりました。次のステップでは形式としてのエレメントという考えで、ナビゲーション、ボタンなどよく使われるものを容易で再利用可能なように標準化することでした。基本的にはビジュアル要素のライブラリを作り、その中に全てのコードを用意しておきます。ここではBootstrapとFoundationが勝利し、多くのWebサイトやアプリで利用されています。悪い面としては、デザインが同じように見えてしまう、デザイナーがコードがどのように機能するか知らないとアクセスすることができないといったことがあります。Design」を提案しました。これがレスポンシブWebデザインの原点です。これはデザイナーには多数のレイアウトのモックアップを作ることを意味し、クライアントにはモバイルでも機能することを意味します。主な利益は、それがどのデバイスでも機能する同じWebサイトであることを意味し、コンテンツはどれも同等です。多くのレイアウトをデザインすることは多くの時間を必要とします。そのプロセスを合理化するために優先順位をつけ、まずはおしゃれなシャドウのエフェクトを捨て、デザインのルーツに戻ることにしました。高品質な写真画像、イラスト、タイポグラフィ、使いやすいレイアウトをどのようにデザインするかです。ビジュアルの要素をシンプルにすることで、いわゆるフラットなデザインにすることは単にプロセスの一部です。重要なのは、コンテンツが中心であるということ。光沢があるボタンはアイコンに変わり、SVGやアイコンフォントを使うことを可能します。Webフォントは美しいタイポグラフィを与えます。フラットはある意味、Webの始まりに近いかもしれません。今までのWebデザインの目標は情報をビジュアルにし、ブラウザの中に表現することでした。デザイナーがスクリーンの中でものを動かし、きれいなコードでリリースされることを想像してみてください。コーダーはブラウザの互換性について心配しなくてもよく、本来解決すべき問題にフォーカスを合わせることができることを想像してみてください。これらのことは夢物語ではなく、その方向に動いている新しい技術的なコンセプトがあります。vwのようなCSSの新しい単位は今よりずっと柔軟性の高い要素を配置することをでき、多くのデザイナーが頭を抱えていた問題も解決します。CSSで垂直の真ん中に要素を置くなども簡単です。CSSのFlexboxも重要なコンセプトで、これからのレイアウトに必ず役立ちます。最終的にはWebコンポーネントとしてより大きな地位を獲得するでしょう。これらの新しいコンセプトはワークフローをより容易にし、再利用が可能で、構造的な基礎となります。Webの未来について、あなたはどう思いますか?メモ1998年から2007年までは空白の期間ということではなく、目立った進化がなかっただけです。Posts関連記事が見つかりませんでした。