ネオン風Webデザイン事例12選！おしゃれなBARからSFチックなものまで

約100年前にフランスで開発されたネオンサイン。古典的な手法にもかかわらず、その魅力はいまも健在です。

デザインに取り入れる方法もさまざまで、おしゃれなバーやクラブのようなネームプレートを作ったり、幾何学的なデザインと組み合わせて近未来的な雰囲気を演出したりと、幅広い用途に活用できます。

今回は、Webデザインにネオン風エフェクトを取り入れたコードスニペットを12種類ご紹介します。

ネオン風タイポグラフィ

1. Hot Ones neon sign by Aaron Minnamon

1950年代のアメリカを思わせるネオン管風エフェクト。本物のネオン管のように絶え間なく点滅する、ビビッドで大胆なデザインです。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

レンガを模した背景に、ネオンサインが飾られています。文字をちらつかせることで、よりリアルな雰囲気が出ていますね。HTMLとCSSのみで作られているところもポイント。

See the Pen CSS animated Neon Sign by Nodws (@nodws) on CodePen.

3. Neon from Las Vegas by Riccardo Tartaglia

ひとつ前のコードスニペットととても似たデザインで、「fr」や「V」の文字が点滅しています。こちらもHTMLとCSSのみで作られており、軽量です。

See the Pen Neon from Las Vegas by Riccardo Tartaglia (@riktar) on CodePen.

4. Vintage Neon Sign by Kyle Lavery

Webデザインに1960年代風のヴィンテージっぽさを取り入れたいなら、このコードスニペットが参考になるはずです。3種類の文字にはそれぞれ美しいネオンカラーが配色されており、中央の「DINER」は袋文字になっています。Webデザインに取り入れたら、きっと目をひくはずです。

See the Pen Vintage Neon Sign by Kyle Lavery (@kylelavery88) on CodePen.

5. Project by Prima Utama Apriansyah

文字にカーソルを合わせると、ネオン風のエフェクトがあらわれます。HTMLとCSSのみで作られており、JavaScriptは使われていません。なんの変哲もない文字に見えるのに、ホバーするとエフェクトがあらわれるところがポイントです。

See the Pen Efek Typography Text Neon part 1 by Prima Utama Apriansyah (@primaapriansyah) on CodePen.

ネオン風ローディングアニメーション

6. Neon Grid Loaders by Mai El-Awini

ネオン風エフェクトの魅力が活きるのは、文字だけではありません。この例では、ネオン風エフェクトをローディングアニメーションに使っています。暗い背景のWebページにぜひ取り入れたいデザインです。

See the Pen Neon Grid Loaders by Mai El-Awini (@maicodes) on CodePen.

ネオン風ボタン＆ダイアログボックス

7. Neon Button by Simone

次にご紹介するのは、ネオンをイメージしたボタンです。落ち着いた色合いで、シックなデザインのWebサイトにも取り入れられそうですね。

See the Pen Neon Button by Simone (@flik185) on CodePen.

8. Neon button by Elwin van den Hazel

さきほどのボタンとおなじく、ゴーストボタンとネオン風エフェクトという、人気の要素を取り入れた作品です。ビビッドな色が目をひきます。

See the Pen Quick test by Elwin van den Hazel (@elwinvdhazel) on CodePen.

9. Neon Dialog Boxes by Hugo DarbyBrown

次にご紹介するのはダイアログボックスです。ネオンは派手な印象がありますが、この例はネオンの魅力を活かしてひねりを加えつつ、すっきりとしたデザインにまとめています。

See the Pen Neon Dialog Boxes by Hugo DarbyBrown (@hugo) on CodePen.

ネオン風スクリーン

10. neon hexagrid by Matei Copot

文字、ボタン、ローディングアニメーションだけでなく、ネオン風エフェクトは背景にも応用できます。こちらはさまざまな色に変化する、ネオン風のハニカムパターンです。

See the Pen neon hexagrid! by Matei Copot (@towc) on CodePen.

11. Neon Hex Particles – Recreation by Brett

こちらもハニカム構造をベースにしていますが、さきほどの例とは動きや色が異なります。コントロールパネルがついているので、設定を変えて遊んでみましょう。

See the Pen Neon Hex Particles – Recreation by Brett (@brttd) on CodePen.

12. for a while by Gerard Ferrandez

最後にご紹介するのは、無数の粒子が集まった、インタラクティブなコードスニペット。カーソルを近づけると散っていく様子は、まるで光る液体のようですね。

See the Pen for a while by Gerard Ferrandez (@ge1doot) on CodePen.

おわりに

ネオンというとネオン管の文字を連想しがちですが、その魅力はボタンや背景にも応用できます。

ネオン風の色だけでもじゅうぶん魅力的ですが、動きが加わるとより目を引きますね。暗い背景のWebサイトを作っているなら、ぜひネオン風エフェクトを取り入れてみましょう。

（原文：Nataly Birch　翻訳：Nakajima Asuka）

こちらもおすすめ！▼