【デザイナーから見た】WEBデザインの歴史【個人的雑感もあり】

BLOG
ブログ

公開日:2023.12.22

良かったらハートを押してね！

WEBデザイン

突然ですが世界最初のWEBサイトができたのはいつでしょうか？
20年前くらい？30年くらい？
そもそも考えたこともない…って方もいるでしょう。

正解は、1990年12月20日です。
CERN（欧州原子核研究機構）が、オンライン上にアップしたもので、内部だけで実験的に公開されました。ここから30年以上が過ぎ現在に至ります。

1990年といえばスーパーファミコンが発売されバック・トゥ・ザ・フューチャーはPART3で、“浪漫飛行でいいんですかい？”って下町っぽく聞こえてしまったのもこの年です。（このくだり以前もやりましたね）

今回はその30年以上をデザイナー目線でざっくりご紹介しようと思います。

デザインを90年代は学生として、00年代から現場にいる人間の視点で話を進めますので、当時の肌感に個人差が出るかもしれません。個人的なインプレッションとして捉えていただけたらと思います。それではどうぞ。

黎明期　ドット絵のデザイン
導入期　写真や動きができる
成長期　フラット、レスポンシブ
成熟期？　その先へ
まとめ

1.黎明期　ドット絵のデザイン

90年代中盤。当時はインターネットカフェとかありましたね。今みたいな動画とか個室とかではなくおしゃれで開放的な空間で、コーヒー片手にブラウジングするといったイメージでした。

海外アーティストの情報は雑誌より早くネットで仕入れるとか、とにかく足を運んで情報を得るという意味で、インフラがまだまだ行き届いていない環境でした。PCのスペックも然りです。

当時のWEBデザインといえば色がRGBの原色が強烈で、一番わかりやすい例えが初期ファミコンソフトのあの感じといったところでしょうか。私が記事にするのを温存している阿部寛さんのサイトも、おそらくこの時期です。大きな画像も動きもパワーポイントのようでメディアとしては黎明期でした。

当時の低画質のgifアニメは今見るとローファイで味わい深く新鮮な気持ちになります。
今のデザインに逆の要素として使いたいと思いつつその機会を伺っています。（Y2Kって流行ってるし）

阿部寛のホームページ
http://abehiroshi.la.coocan.jp/

令和にも残そう、懐かしい90年代WEBデザイン。さよなら平成。
https://higashidadan.com/web/90s-webdesign.html

2.導入期　写真や動きができる

通信環境が向上した2000年に入ると、WEBデザインはCSSの登場で、装飾性が向上し、見やすいレイアウトと写真を使ったパンフレットのようなデザインになりました。Flashというアニメーションがつくれるソフトが全盛期で、デザイナーが絵を作って動かすまでやっていた時代です。

しかしこのFlashが下火になり、最終的には使われなくなっていきます。
検索エンジンのロボットが、埋め込まれたテキストを拾ってくれないためです。

1996年にGoogle検索の原型が生まれ2000年に日本語対応し、SEOの重要さが行き渡り…ページの価値を高めていたFlashが、皮肉にも足かせになってしまっていたという歴史の綾が垣間見られる出来事でした。ちなみにFlashは、Adobe Animateと名を変えて今も健在です。

2010年に近づく頃には、JavaScriptをより簡易に記述できるjQueryが発表されます。フェードイン／アウトやクリックすると中身が開くアコーディオン、カーソルを動かすと表示が変わるマウスオーバーなど、今では当たり前のことができるようになりました。

さらにCSSアニメーションでの動きも加わり、一般的に好まれるようになりWebサイト＝動くのがいいという考えが浸透していきます。PC用サイトで動きをつけリッチにし、ケータイ用サイトは、簡易的な表示にとどまるというのが当時のWebデザインの印象です。

この時期はアナログ媒体とウェブサイトが共存し役割を分担しあった最後の時期と記憶しています。それが一気に変わるものが登場します。そう「iPhone」です。

都市部のみだった光回線がエリア拡大し、後に当たり前となる動画や鮮明な画像、ダウンロード販売などの環境が徐々に整い、歴史が大きく変わっていくことになります。

3.発展期　フラット、レスポンシブ

2010年代近くになると、iPhone、iPadに代表されるデバイスが勢いを増して普及していきます。
当時スワイプがとても新鮮で、Appleから出る新しい何かに世の中が注目していましたね。

PCモニタとマウスからスマホ一台になったことで、コンテンツそのものと構造の設計により重きが置かれるようになります。スマホは持ち運べどこでも見られる「スマートさ」に特化しそれにふさわしい「どこでも誰にでもわかりやすく」が求められUIやUXといった考え方が浸透していきます。

iOSがWebに対するデザイン感を教育してしまった感があると個人的に感じています。

デザインしつくされたデバイス（ハード）とそのOS（ソフト）の環境下でデザインする以上その恩恵を受けられる点。スワイプの気持ちよさとか、タップで開く直感的な操作がどこか有機的で快適です。

それに慣れてしまっていることを自覚してデザインに落とし込むのが当たり前になっています。意識せずともそれをやっていると言う方が大半だと思いますが。iOS7で出てきたフラットデザインがその最たる例だったように思います。

デバイスが軽くなるにつれて、情報もデザインも色彩も軽いことが（もしくは重さを感じさせないことが）良いとされる価値観に変わってきたと思っています。

インフラが整いスマホから動画を見たり投稿できたり、買い物ができたり売ることができたり、モバイルファーストのサイトが増え始めました。

スマホでしかネットをしない世代も出てきて、キーボードで文字を打つのが当たり前だった私としてはフリック入力はどうも馴染めずです。（この辺におじさんを感じています。）

iPhoneの新機種発売は当時、徹夜組もいて大きなニュースになっていましたね。
新調したくても価格が上がりっ放しで安易に手を出せないままです。

4.成熟期？　その先へ

テクノロジーがどこまで進化するのか。
予想できなかった（できたかもしれないけど）未来が今だったりします。

サイト紹介の記事でも触れましたが、デザイン上できないことへの壁はほぼなくなったように思います。予算と時間があれば大概の表現はできる気がしています。この記事のくくりとして今を成熟期と捉えていいのか否か。トレンドはあるとしても、大きな変化より、いくつもの小さな変化が同時進行のような印象を受けています。

加えて2023年はChatGPTによって制作現場でもAIが一気に身近なものになりました。何かあったら「とりあえず検索」から「いったんAIで」みたいな感じで、手段が一つ増えました。まだまだな部分もありましたが、ゼロから始めるより格段に効率が上がったりと実務レベルで活用しています。デザイナーとしては画像生成で画像の足りない部分を補正してくれるのが助かっています。人物の背景のブラインドとか結構悩みどころでした。

知ることがないものや行くことがない場所でも簡単に情報を得ることができる現代。デザインに限らずあらゆることが、リアルタイムで変化し続けるだけに大きな潮流と見分けるには多くの比較対象が必要です。

デザインについては少しの違いで「今っぽい」「少し前っぽい」という違いがシビアになってきました。使い古された言葉ではありますが、「時代の半歩先を行け。一歩先は行き過ぎる」というのは、今にぴったりな言葉だと思います。

最後に私が今っぽいと思ったサイトは以前記事でご紹介しております。

デザイナーが選ぶ ”アイデア”がすごいサイト5選
 デザイナーが選ぶ世界観がすごいサイト5選

5.まとめ

いかがでしたでしょうか。

今回はデザイナーから見たWEBデザインの歴史を時系列で私個人の当時の印象と合わせてご紹介しました。既にご存じの方が多いかと思いますが、昔のサイトが見れるツールがあります。その名前は、Wayback Machine（ウェイバックマシン）です。
https://web.archive.org/

このツールならＷebサイトは消したら終わりのイメージですが閉鎖されたサイトも見られる場合があります。

世界は知らないことだらけで、デザインはそれを伝える人から伝えたい人への橋渡しの役目も担っています。変化を受け入れそれを求められる形にする役割は、今後も変わることはないでしょう。

デザイナーが選ぶ ”アイデア”がすごいサイト5選

デザイナーが選ぶ世界観がすごいサイト5選

【写る人向け】ホームページ制作用の写真撮影に必要な準備

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから

コジコジ

デザイナー

2020年入社。20年以上に渡りデザイナーとしてWEBはもちろん、パンフレットや、ロゴ、各種広告など幅広いデザインに従事。デザインの記事をメインに楽して役立つブログを心がけております。

良かったらハートを押してね！

CONTACT

お問い合わせ

ご不明な点やご質問等、
まずはお気軽にお問い合わせください。

CONTACT

オンラインでのお打ち合わせも可能

ホームページを作りたい	ホームページを作った後	こんなことも
新しく作りたい	更新代行してほしい	写真撮影をしてほしい	多言語対応したい
スマホ対応したい	保守管理してほしい	動画をつくりたい	ライティングをしてほしい
リニューアルしたい	SEO対策をしたい	印刷物をつくりたい	イラストを描いてほしい
プチリニューアルしたい	WEB広告を出したい	ロゴをつくりたい	自社で簡単に更新したい
採用に特化したい			HP制作・運営サポートサービス
全部任せたい			採用特設HP「ウェブサイ」