普段はRailsエンジニアとして働いていますが、最近デザインの勉強をちょっとしています。
今回は、古典に学ぼうということで90年代インターネット黎明期のデザインを勉強してみました。
個人的に好きなCSSフレームワークのTailwindCSSのversion3.0が昨日リリースされたこともあり、TailwindCSSを使って90年代ホームページのデモサイトを作成しました。
TailwindCSS3.0のサイトはこちら。
要件定義
まずはじめに、90年代のウェブサイトについて調べて以下の特徴的な要件を抽出しました。デザインと呼べるもの呼べないものありますがとりあえず。
- レインボーなタイトルが動く
- ゆっくりしていってねの文字
- アクセスカウンター(あなたは〇〇番目のお客様です)
- 左フレーム(Tailwind Playではframe使えないのでflexboxで見た目だけ再現)
- メインカラムは中央揃え
- 配色は彩度と明度が高いものを使用する
- 出来るだけ多くの色を使う
- リンク文字は青文字の下線つきのやつ
- 斜め文字(イタリック文字)を多用する
- 背景画像はそれっぽいやつをリピート使用
- 立体感のあるボタンに補色の文字
- Sorry, This site is Japanese Only!
- ★や☆を多用する
- キリ番踏んだらカキコ 踏み逃げ厳禁
- 右クリック禁止
出来たもの
これらの要件を取り込んでTailwind Playというサービス上でデモを作成しました。出来上がったものがこちら。背景画像以外は全部TailwindCSSで出来てます。
こちらから誰でも参照可能です。
学んだこと
marquee要素
初めて知りましたこのHTML要素。
すでに廃止されていますがほとんどのブラウザでまだ使用可能です。任意の幅で、要素を動かすことが出来ます。折り返したり、同じ方向にずっとスクロールさせたりと、オプションを設定していろいろ操作できます。
上記の通り廃止されているので自分のプロジェクトで使うことはなさそうですが、こんな要素もあったんだなーと思いました。
レインボータイトル
TailwindCSSでは以下のようにclassを指定するとカラフルなタイトルを作ることが出来ます。
gradientに対してさらにfrom, via, toの3色を指定しています。
text-transparent bg-clip-text bg-gradient-to-r from-green-600 via-yellow-400 to-pink-600
Arbitrary values
Tailswind CSSのv2.1から使用できる機能ですが、htmlのclassに以下のように[]を使用することで任意のサイズや色、値を指定できる「Arbitrary values」というものがあります。これを使うことでReactやVueのコンポーネントで外から値を注入できたりします。
<button class="text-[#0000E4] p-[3px]">テスト文字列</button>
ただ、個人的にTailwindCSSの一つのメリットは、あえて制限された選択肢の中からデザインすることで高速に80点のサービスを作成するという考えを持っていたので、Arbitrary valuesは使わないと思っていました。
今回、スタイルを当てていく中でどうしても制限されたユーティリティクラスではパッと実装できない部分が出てきて(特に色系)、もちろんちゃんとした開発であればconfigに定義していくのですが、簡単なデモサイトでさっと作りたいときはArbitrary valueすごい便利でした。
今後もデモサイトとかちょっとしたモックを高速に作りたいときには重宝しそうだと思いました。
Tailwind Play早くなった？
Just-in-Time engineが刷新されたおかげなのか、ビルドまでの時間がすごく早くなっているような気がします。
最後に
90年代のwebデザインをググっていろいろ見て回るの楽しかったです。
特に配色などは現代ではアンチパターンとなっているものが多く、参考？になりました。
以上です。