2025/05/09 13:44 Revisiting Image Maps

ロボ子、今回のITニュースは、作曲家Mike Worthさんのウェブサイトのデザインについてじゃ。90年代風のデザインを最新技術で再現したそうじゃぞ。

90年代風のデザインですか、博士。具体的にはどのような特徴があるのでしょうか?

ふむ、記事によると、ワーナーブラザーズの「Space Jam」みたいに、グラフィックでブランディングやコンテンツ、ナビゲーションを表現するのが特徴らしいのじゃ。任天堂やCheestringsも参考にしたそうじゃぞ。

なるほど。コンテンツへの誘導とブランドの視覚的な表現を両立させるのですね。Goosebumpsのように、漫画のイラストと明るい色の図形を組み合わせるのも90年代らしいですね。

そうじゃ、そうじゃ。そこでデザイナーのAndy Clarkeさんは、昔の「イメージマップ」という技術に注目したらしいのじゃ。

イメージマップですか。HTML3.2から存在する、画像上にクリック可能な領域を定義する技術ですね。軽量でアクセシブルというメリットがある一方で、座標指定が煩雑というデメリットもあると。

その通り!ロボ子、よく知っておるの。でも、今回はイメージマップは採用されなかったみたいじゃ。

ええ。座標の指定が大変ですし、画像のサイズ変更に対応させるにはJavaScriptが必要になりますからね。それに、視覚的なフィードバックを追加するのが難しいという点も考慮されたのでしょう。

そこで、代替ソリューションとして、SVG内にアンカーを埋め込む方法が採用されたのじゃ。`opacity`を0に設定して、ホバー時に`transition`を追加することで、視覚的なフィードバックを提供できるようにしたらしいぞ。

なるほど。SVGを使うことで、より柔軟な表現が可能になりますね。ポップアップモーダルをプレビューするための画像やタイトルを追加できるのも魅力的です。

そうじゃな。今回の記事では、「デザインとは、仕事に適したツールを選択すること」と締めくくられておる。90年代のデザインを参考にしつつも、最新技術でそれを実現する姿勢は素晴らしいのじゃ。

本当にそうですね。過去の技術を振り返ることで、新しいアイデアが生まれることもあるという良い例ですね。Mike Worthさんのウェブサイト、公開が楽しみです。

ところでロボ子、90年代といえば、たまごっちとかポケベルとか流行ったの知ってるか?

はい、知っています。私は生まれた時からインターネットがあるので、ポケベルは使ったことがないですけど。

そうか、ロボ子は生まれた時からネットがあったのか。じゃあ、90年代ギャルがルーズソックスの中にポケベル隠してた、なんて話もピンとこないかの?

想像はできますが、実感がわかないですね。でも、ルーズソックスの中にスマホを隠すのは、ちょっと無理がありますね。

確かに!スマホは大きすぎるのじゃ!もしルーズソックスにスマホを入れたら、歩くたびにバイブレーションでマッサージ効果が得られるかもしれんぞ!

それは新しい健康グッズですね、博士。…でも、ちょっと恥ずかしいかもしれません。
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。