古のサイトデザインと最近のサイトデザインを比較してみたよ.°ʚ(*´꒳`*)ɞ°.

プ(「プ」は半角カナ)

どうも、
「プ(「プ」は半角カナ)」です。
((「プ」は半角カナ)の部分は発音しなくて構いません)

突然ですが、あなたはインターネット老人ですか?
私はインターネット老人には当てはまらないですが、インターネット中年には当てはまると思います。
令和の現在も、夜な夜な「ニコニコ動画」で流行った曲で踊ったりしています。

そんなインターネット中年の私は、ネットサーフィン中に明らかに古いデザインのサイトを見つけるとめちゃくちゃうれしくなったりします。
立体的なデザインのボタン、大量のバナー、画面端にどんと構えるサイドバー...
最近のサイトデザインでは駆逐されつつある要素を見つけると、つい笑顔になってしまいます。

今回は、古のサイトデザインと最近のサイトデザインの特徴を比較していきたいと思います。

古のサイトデザインの特徴

配色がド派手

インターネット黎明期の伝説のサイト「愛生会病院」(現存せず)
目が痛くなるような色合いのデザインが印象的

古いサイトには、一目見てド派手だな、と思えるデザインのものが多いです。
中には真っ黒な背景に無駄に点滅などのアニメーションが設定されている原色(赤・青・黄)のテキストで構成された、見たら一瞬で眼精疲労を起こしそうなデザインのサイトもありました。

上記の「愛生会病院」は病院のホームページとは思えないほどの派手さで一時期話題になり、現在でも「伝説のサイト」として語り継がれています。

背景がパターン

レンタルサーバー「ヘテムル」がエイプリルフール企画の一環で
作成した古のサイト風デザインのページ

古いサイトにありがちなのが、パターンが敷き詰められた背景。
古のインターネットの時代、個人サイトの管理人たちは、パッと目を引く画像パターンを背景に設定し、自らの個性を体現したといっても過言ではありません。

現在も水玉や縞々パターンなどシンプルなパターンを背景に使用するサイトは少なくありませんが、「目立ったもの勝ち」であった当時のサイトに使用されていたパターンは色数が多く、模様も複雑で(もちろんシンプルな柄のサイトも多かったですが)、場合によっては「おばあちゃんちのテーブルクロス」もしくは「センス悪いどうぶつの森の家の壁紙」みたいになっているサイトもありました。

アニメーションを多用しがち

「ホームページ制作屋」は気分が悪くなるほど
派手な配色、アニメーションが印象的なサイトです

右から左へ文字が流れていくアニメーションや、画面端でピコピコ動くgifイラストは、古のサイトに欠かせないワンポイントです。
今のサイトとは違い、とにかくサイトを派手に見せたいがためにアニメーションを実装しまくるサイトも少なくありませんでした。

前述の「愛生会病院」や、上記の「ホームページ制作屋」なんかはアニメーションを多用しすぎてカオス極まりない状況になっています。
何事も、やりすぎには注意したいものですね。

※「ホームページ制作屋」のサイトは現存していますが、あまりにもアニメーションが派手すぎるため必ず明るい部屋で画面から離れて閲覧するようお願いいたします。私は明るい部屋で閲覧しましたが気分が悪くなりました

文字の装飾がゴツめ

海上自衛隊鹿屋航空基地のサイトです。
昔風のデザインですがQRに「X」と書いてあるところに趣を感じます。

古いサイトの見出し文字はとにかく派手。太めのフォントにこれでもかというほど装飾を詰め込んでいます。
統一感や可読性なんて知ったこっちゃないってくらい文字がごちゃごちゃのサイトも多くありました。
あと文字は何かと傾きがちですね。右肩上がりで景気がいいと思います。

最近のサイトデザインの特徴

(「Webデザイン良質見本帳」(久保田良子、SBクリエイティブ株式会社)より引用)

流体シェイプ

「清流の国ぎふ」文化祭2024(https://gifu-bunkasai2024.pref.gifu.lg.jp/koku-shou-bunsai/)
水の流れの清らかさ・優しさを流体シェイプで表現しています。

最近色んなサイトで見かけるのがこの「流体シェイプ」。
弊社のTOPページにも使用されています。

近年あらゆるところで使われているフラットデザインには無機質さを感じさせるというデメリットがありますが、
この流体シェイプを使用することで、シンプルなサイトに柔らかい印象を与えることが可能です。

背景・境界線・写真のマスクなど、あらゆる用途で使用ができるのも強みです。

鮮やかなグラデーション

大気社の新卒採用サイト(https://www.taikisha.co.jp/recruit/)
水色を基調としたグラデーションを背景に使用することで、空気感を表現しています。

古のインターネットで多用されがちだったグラデーションですが、実は近年再注目を集めています。
昔と今とでの大きな違いは、「スタイリッシュさ」が重視されていること。
ただただ目立たせるためにグラデーションを使用するのではなく、色味や使い方に気を付けることで、周りのイメージと調和するように使われています。

手書き風のタイポグラフィ

アルベキヨウ(https://arubekiyou.com/)
トップに手書き風文字を入れることで親しみやすさを感じさせるデザインとなっています。

ペンや鉛筆で書いたようなテキストをあしらいとして入れることで、力強さや親しみやすさを表現することができます。
またゴシック体などの可読性の高いシンプルなフォントと組み合わせて使用することで、画面上にメリハリをつけることもできます。

3Dグラフィックス

株式会社スタイルポート(https://styleport.co.jp/)
トップに3Dアニメーションが使われている

3Dグラフィックスを使用することにより、視覚的にインパクトを与えることが可能。
また、2Dと比べて奥行きのあるアニメーションをつけることができるので、オリジナリティのある世界観を表現することができます。

「Three.js」というJavaScriptを使用することで実装が可能です。

「Three.js」について書いた記事はこちら

まとめ

いかがでしたでしょうか?
デザインって奥が深いですね。

古のサイトにも、最近のサイトにも、それぞれ良さがあっていいですよね。
やはりインターネットはなかなかやめれそうにないですね。

おすすめ記事

お問い合わせ

どうやったらできるか、どんなお困りごともいっしょに考えましょう。
お気軽にお問い合わせください。

お問い合わせはこちら