デザイン

デザイン

動く光線!揺れる光線!Webデザインを輝かせるレトロな電飾風デザイン12選

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、12 Stunning Retro Neon Effects in Web Design
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

233 views

読了時間 : 約6分41秒

ガイスラー管から発展したネオンサインは、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を使っているのであれば、ネオン効果は相性の良い選択肢ではありません。 ただし、暗いデザインをイメージしている場合は、ネオン効果は訪問者に鮮烈な印象を与えるのに最適な手段になるでしょう。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
【Uber初回利用2000円オフクーポン】
130v4g

プロモーション コードを追加するで「130v4g」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

【UberEats初回1000円オフクーポン】
【UberEats初回1000円オフクーポン】
ins6je2v

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ