CSS/JSコードスニペットで振り返るAppleの歴史。初代MacからiPhone Xまで

Appleは時代を先取りした、すばらしい製品を世に送り出し続けてきました。Appleが存在していなかったら、PCはまだベージュの四角い箱のようなデザインだったかもしれませんね。

今回はAppleのヒット作を、CSSとJavaScriptで再現した8つのコードスニペットをご紹介します。作品をとおして、Appleの輝かしい歴史を振り返ってみましょう。

1. Happy Mac

初代Macを知っている人なら、おもわず笑顔になるような作品。デバイスが正常に起動したときのアイコン「Happy Mac」を、CSSを使ってアニメーション付きで再現しています。

なおこのアイコンは、現在も「Face ID」のマークに面影が残っています。

See the Pen External Monitor | #dailycssimages by Athoug (@athoug) on CodePen.

2. レトロなデスクトップ

1980年代〜90年代前半に育った人なら、この画面に見覚えがあるのではないでしょうか。巨大なキーボードとセットになった古いデスクトップは、持ち運びなどもってのほかでした。

しかし私たちが便利なPCを今活用できるのも、こうした歴史があってこそです。

See the Pen Old Apple Computer by Cozax ? (@CowZax) on CodePen.

3. iMac

現在の洗練されたデザインとは異なるものの、独特の魅力がある古いiMacを再現しています。初代iMacは1998年に発表されました。

CRTモニターが使われていた当時の、懐かしいデザインですね。外観が忠実に再現されているだけでなく、電源ボタンをクリックすれば「起動」できるところも粋です。

See the Pen iMac G3 by Jon Kantner (@jkantner) on CodePen.

4. iPod

世界初のMP3音楽プレーヤー！ ……というわけではないものの、2001年の登場以来、世界中で大人気となったiPod。容量の大きさもさることながら、ヒットの秘訣はなんといってもそのUIでしょう。

iTunesとともに、iPodは音楽業界に大きな変化をもたらしました。初代のiPod Classicは、歴史のはじまりを追体験するのにぴったりですね。

See the Pen CSS iPod Classic by Daniel Gasson (@DanGasson) on CodePen.

5. MacBook

デザインカンファレンスに行くと、MacBookをいたるところで見かけるはず。最初のMacbookは2006年に発売されました。その洗練されたデザインは、クリエイティブ業界でいまも広く支持されています。

こうしたモックアップで頻繁に使用されることからも、人気の高さがうかがえますね。

See the Pen Demo: Responsive MacBook retina mockup by Henri Peetsmann (@henripeetsmann) on CodePen.

6. Mac Pro

美しいデザインと充実した機能によって、2006年の発売以来長きにわたって愛されてきたMac Pro。ここで再現されているMac Proには、360度どこからでも内部にアクセスできるという、ユニークな特徴があります。

本体がどのように開くのかが気になるかたは、こちらのコードスニペットもぜひチェックしてみてください。

See the Pen Pure CSS Apple Mac Pro by Filip Vitas (@FilipVitas) on CodePen.

7. Apple Watch

2015年に大々的にに発表されたApple Watch。メッセージを表示したり、心拍数を記録したり、音楽を再生したりと……スパイ映画で使われていた架空のスマートウォッチをも上回る機能を搭載しています。このスニペットでは、アクティビティのリングが再現されていますね。

See the Pen Apple Watch Pure CSS by Raja Raghav (@Raja_Raghav) on CodePen.

8. iPhone

最後にご紹介するのは、人びとの生活に革命をもたらしたデバイス、iPhoneです。2007年の登場以降、新しいモデルが出るたびに話題になりますよね。この作品が再現しているのは、ノッチを備えたiPhone Xです。

See the Pen Pull to refresh – iPhone X by Kirill Kiyutin (@kiyutink) on CodePen.

おわりに

今回はAppleが開発した製品のうち、とくに人気が高い8点を再現した作品をご紹介しました。しかしこれら8つの製品は、Appleの歴史の一部にすぎません。Appleはこれらのほかにも、CubeやNewton、iBook、Lisaなどを発表してきました。

他のデバイスに興味があるなら、apple-history.comをのぞいてみましょう。また、Apple関連のコードスニペットはこちらからチェックできます。

原文：Eric Karkovack
翻訳： Nakajima Asuka
編集：Sato Mizuki

こちらもおすすめ！▼