極細線を用いたWebデザイン事例6選。UIのイメージを決定づける隠し技

2018年、Webデザインの世界ではバーティカルリズムや縦書き文字が流行しました。

その後、それらの潮流をくんだ「極細線を用いたWebデザイン」があらわれ、そのエレガントさから一部で人気を博しています。

この記事では、極細線を効果的に用いたWebデザイン事例を6つ紹介します。

1. Dixtior

デジタルエージェンシーであるDixtiorのWebサイトは、極細線が全体の雰囲気のベースを作り上げているといっても過言ではありません。

オフィスの写真が写っているだけのヒーローエリアに、ゆっくりと回転する極細線が組み込まれることで、クリエイティブかつデジタル業界らしい雰囲気を生み出しています。

極細線はトップイメージだけでなく、テキストブロックなどのWebデザインの各要素で効果的に使われており、全体の統一感を保つのにも活躍しています。

Dixtior

2. Zajno

デジタルデザイン会社であるZajnoのWebサイトにも、極細線が使用されています。

ここではスプラッシュスクリーン（アプリケーションの起動中に表示される映像）が極細の縦線でデザインされています。縦長の線は視覚的な導線となり、セクション毎にユーザーを誘導してくれます。

球形のグリッドを用いた背景も特徴的で、洗練された雰囲気があります。

Zajno

3. Clock Lab

ウクライナのクリエイティブエージェンシーであるClock LabのWebサイトは、バーティカルリズムが印象的です。

ここで極細の縦線は、セクションを区切り、デザインにリズムを与える役割を担っています。一方の横線は、セクション名やコンテンツを読みやすくするのに役立っています。

Clock Lab

4. Homecult

Homecultのクリエイティブチームは、アイコニックな極細線を用いています。大きな極細の円形が、主張しすぎることなくホームスクリーンを演出しています。

装飾だけでなく、ナビゲーションやボタンにも極細線が使われており、UI全体を支える要素となっています。優雅でスタイリッシュかつ、モダンなWebデザインです。

Homecult

5. Prodotti

インテリア会社であるProdottiのWebサイトでは、デザインの随所に極細線が使われています。たとえばファーストビューの右下に目に入る「前へ戻る（PREVIOUS）」「次へ進む（NEXT）」の間に極細線が使われており、優雅でスタイリッシュな雰囲気を醸しつつ2つの要素を繋いでいます。

極細線は、スライドタイトルの下線にも使用されており、画面遷移の際にスムーズな移行を魅せてくれます。この極細線ひとつで、ナビゲーション、グラフィック、ロゴタイプなど全体に統一感が生み出されています。

Prodotti

6. The Story – Head Wines

The Story – Head Winesのページでは、やりすぎることなく極細線のトレンドを取り入れています。上から下までのセクションを縦の極細線で繋げ、自然な視線の流れをデザインしています。

グラフィックやロゴタイプにも、ホワイトスペースやバーティカルリズムが効果的に活用されており、スタイリッシュなデザインを確立しています。

The Story – Head Wines

まとめ

極細線はその名のとおり、極めて細かなディテール要素です。しかし極細線は、UIのイメージに大きな影響を与える可能性を秘めています。

極細線は、以下のようなシーンで効果的に活用できます。

• ヘッドラインの近くに置き、重要なメッセージを強調する
• ボタン、アイコン、コンテンツ等を区別する
• ナビゲーション付近に配置する
• スライダー付近に配置する
• 背景のデコレーションとして使用する

これらのシーンで極細線を活用し、スタイリッシュなWebデザインを考えてみてはいかがでしょうか。

（執筆：Nataly Birch　翻訳：Sugita Mariko　編集：内田一良＠じきるう）