ガイスラー管から発展したネオンサインは、1920年代から60年代までのアメリカ文化を象徴する存在でした。ネオンサインは数十年間に渡って目立ち続け、独自の時代を築きました。ネオンサインが夜の街角を明るく照らすカラフルな時代があったのです。
間違いなく、ネオンサインは過去のものです。今やレトロなスタイルと言えます。
しかし、それは古き良き時代の遺産と言い捨ててしまえるほどダサいものではありません。ネオンサインには熱量と雰囲気があります。そのカラフルな性質と明るい個性は活気をもたらします。現実世界ではネオンサインを使用する傾向が消滅しつつあり、より洗練されたエレガントで「自然派」な手法が幅を利かせています。
しかしオンライン上では、まだ見る機会はあります。むしろそこがまさにネオンサインのカリスマ性を発揮させることができる場所なのです。ノスタルジーの波が世界を席巻したという事実から、ネオンサインが今日のデザインの主流に乗ったといえます。
インターフェースにレトロな蛍光色タッチを取り入れるにはいくつかの方法があります。
ネームプレート・キャッチフレーズ・または単にウェブサイトのテキストベースの詳細を表示するためのスタイル的な選択として使用する手法が最も簡単な導入方法です。この効果を実現するための優れたコードスニペットをいくつか紹介しましょう。
1 Hot Ones neon sign by Aaron Minnamon
Aaron Minnamonのプロジェクトからは、50年代アメリカの都会派スタイルにおける特有のセンスを感じられます。
明るく大胆に、絶え間なく点滅するネオンサイン特有の動きを巧みに再現したことで、実に本物らしく見えます。
この小さくても印象的なアニメーションは、HTML、SCSS、およびJavaScriptを使用して実現されました。
See the Pen
Hot Ones neon sign (SVG Animation) by Aaron Minnamon (@iamminn)
on CodePen.
2 CSS animated Neon Sign
by Nodws / Neon from Las Vegas by Riccardo Tartaglia
SNS「dribbble」に特化した素晴らしいプロジェクトの実績を持つNodwsと、ネオンデザインで有名なラスベガス出身のRiccardo Tartagliaは、どちらも伝統的な手法を辿りました。
彼らは、従来のネオン街路標識を完全に模倣する概念を思いついたのです。
デモは似ています。どちらもレンガの壁にネオンサインが飾られています。また、シーンを生き生きと見せるための小さなダイナミクスが豊富にあります。そしてそれぞれの見た目はとても明るくしています。
芸術家たちは数行のHTMLコードとCSSを使いこなし、このソリューションを見た目の良さだけでなく、軽量化にも成功しました。
See the Pen
CSS animated Neon Sign by Nodws (@nodws)
on CodePen.
See the Pen
Neon from Las Vegas by Riccardo Tartaglia (@riktar)
on CodePen.
3 Vintage Neon Sign by Kyle Lavery
ウェブサイトにヴィンテージ感を確実に出したい場合は、Kyle LaveryのVintage Neon Signをお試しください。これはすべての面で60年代の雰囲気を醸し出しています。
美しいチューブスタイルの背景において、ネオンカラーリングでスパイスを与えられ、輪郭を強調されたタイポグラフィは、とても幻想的に見えます。
文字が装飾的なタイプでない場合でも、間違いなく全てのプロジェクトにファンシー感を加えます。
See the Pen
Vintage Neon Sign by Kyle Lavery (@kylelavery88)
on CodePen.
4 Project by Prima Utama Apriansyah
Prima Utama Apriansyahによるプロジェクトは、マウスオーバーの際に現れるネオン効果を特徴としています。
赤、青、黄色の3色があり、それぞれ素晴らしく良く見えます。
すべてが純粋なHTMLとCSSで作られ、JavaScriptは必要ありません。
このソリューションの利点は、ネオン効果が隠されていること、そして明らかになったときに訪問者を感動させることです。
See the Pen
Efek Typography Text Neon part 1 by Prima Utama Apriansyah (@primaapriansyah)
on CodePen.
5 Neon Grid Loaders by Mai El-Awini
ここまで挙げた例で、テキストにおける効果は十分です。 蛍光灯の魔法をインターフェースに追加する他の方法を考えてみましょう。
代替案の1つは、Mai El-AwiniがNeon Grid Loaderで行ったように、ネオンスタイルをアニメーションの読み込みに適用することです。
1つのテーマとカラーリングに関連付けられている4つの異なるローダーが目につくでしょう。
原始的とは言え、ネオン効果は確実に次のレベルに導きます。このアニメーションは暗い背景に対して特に見栄えがします。
アニメーションはあなたのウェブサイトがすべての準備を終えるまでの間、訪問者を楽しませることでしょう。
See the Pen
Neon Grid Loaders by Mai El-Awini (@maicodes)
on CodePen.
6 Button by Simone / Neon button by Elwin van den Hazel
他のインターフェースの細部もネオンスタイルの恩恵を受けることができます。
たとえばボタンの場合 「ゴースト」による動作は依然として人気があるので、ネオン効果はあまり相性が良くありません。
試してみるべき優れたコードスニペットが2つあります。1つはSimoneによって作成され、もう1つはElwin van den Hazelによって作成されました。
どちらもシンプルでエレガント、そして繊細なネオンボタンが付いています。
前者は色が落ち着いているために少し暗いですが、後者は鮮やかな青いトーンと鮮やかな効果が確実に目を惹きます。
すべてが純粋なHTMLとCSSで作られています。
See the Pen
Neon Button by Simone (@flik185)
on CodePen.
See the Pen
Quick test by Elwin van den Hazel (@elwinvdhazel)
on CodePen.
7 Neon Dialog Boxes by Hugo DarbyBrown
ネオンスタイルはダイアログボックスにも適用できます。
Hugo DarbyBrownによるNeon Dialog Boxesを見てください。
作者は4つの従来の対話パネルを対象としました。いずれも大胆かつ魅力的に見えますが、けばけばしくはありません。
ネオン効果はありふれたUI要素に良いひねりを加えました。
See the Pen
Neon Dialog Boxes by Hugo DarbyBrown (@hugo)
on CodePen.
8 neon hexagrid by Matei Copot /
Neon Hex Particles – Recreation by Brett /for a while by Gerard Ferrandez
ボタン、タイポグラフィ、ローダーなど、Webサイトのスタンドアロンの細部に適用できる効果としてネオンスタイルについて議論してきましたが、それは魅力的な背景デザインにも簡単に適応することができます。
Matei Copotは、オンラインの訪問者に、セルごとに寿命がある素晴らしいネオン風ハニカムスタイルの背景を提供します。
色は紫から青緑色に変化し、見ていて刺激的です。
See the Pen
neon hexagrid! by Matei Copot (@towc)
on CodePen.
Brettのコンセプトには謎があります。六角形の形に基づいていますが、アニメーションのようにも見えます。
パターンは中央に表示され、両側に伸びます。設定で遊ぶことができるコントロールパネルがあります。
See the Pen
Neon Hex Particles – Recreation by Brett (@brttd)
on CodePen.
前の2つの例とは異なり、Gerard Ferrandezによるプロジェクトはネオンスタイルを現代風に取り入れています。
マウスカーソルを使って平らな面を乱したり、波を押し上げたりできます。長方形の何千もの小さな粒子が、金色のネオンのようなトーンで強調されています。
See the Pen
for a while by Gerard Ferrandez (@ge1doot)
on CodePen.
まとめ
ネオン効果は特別なことは何もしませんが、即座に目を引く手法の一つです。ウェブサイトの細部をより目立たせるための素晴らしいツールです。
ネオン効果は焦点を設定するため、もしくは単に蛍光色の持つ明るいカリスマ性で、物事に少しスパイスを与えるために使用することができ、タイポグラフィ・ボタン・さらには背景でさえも効果を発揮します。
そうです、確かに一つの大きな欠点もあります。 – それは暗い環境でのみその美しさと可能性を発揮するという点です。 あなたがより明るい色調のUIを使っているのであれば、ネオン効果は相性の良い選択肢ではありません。 ただし、暗いデザインをイメージしている場合は、ネオン効果は訪問者に鮮烈な印象を与えるのに最適な手段になるでしょう。
おすすめ新着記事
おすすめタグ