グリッドから手描き風まで。線(ライン)を活かしたWebデザイン12選

Webデザインには小さなトレンドがいくつもあります。いまこの瞬間にも、新鮮なアイデアやデザインが世に放たれているはず。そうしたWebデザインのトレンドのひとつが、「線（ライン）」を取り入れたデザインです。

一口に線といっても、太さや色によってその印象は千差万別。目を楽しませるだけでなく、ユーザーの目を誘導する案内役のような役割も果たします。

今回は数多くのWebサイトから、効果的に線を取り入れているWebデザインを12個ご紹介します。線がもたらす効果に、注目してみましょう。

線(ライン)を活かしたWebデザイン12選

1. Oddityline

最初にご紹介するのは、「Oddityline（風変わりな線）」という名前がぴったりのWebサイト。ロゴだけでなく、Webサイト全体にシャープな線が使われています。

まずヒーローエリアの線が目に入りますが、線が使われているのはこの部分だけではありません。スクロールすると、モノクロのカラースキームが採用されており、線がいたるところに使われていることがわかります。

縦に視線を誘導する、シンプルでクリーンなデザインです。

Oddityline

2. Pixavio

ドット、円、ジグザグ線などの豊かな装飾要素とともに、さまざまな大きさのボックスがバランスよく配置されています。

Odditylineと同じく、幾何学的なトーンで統一されたWebデザインです。こうしたデザインと線の相性がいいのは、一目瞭然でしょう。

Pixavio

3. Gabiano

Pixavioは多角形を多く用いていましたが、こちらは「円」を多用しています。ロゴ、ソーシャルメディアのアイコン、スライダー、タイポグラフィさえも円のデザインです。

線は円の上に引かれており、見出しを強調しています。

Gabiano

4. This is Garcy

デザインが単調になることを防ぐために、背景に淡いグレーの線が引かれています。目立つ線ではありませんが、画面をいくつかのブロックに分割し、テキストをハイライトするにはぴったりです。

その他のページにも、さまざまなスタイルで線が登場します。

This is Garcy

5. The Inlay

This is Garcyと同じく、こちらも線で画面をいくつかに分割し、空間をうまくコントロールしています。

広々としており、ミニマルでクリーンな印象。シンプルですが退屈ではありません。空間を賢く使った明るいデザインでしょう。

The Inlay

6. VIER ANTWERP

VIER ANTWERPは各エリアを区切るために線を用いています。

ここまでにご紹介したWebデザインはエレガントで繊細なものでしたが、VIER ANTWERPの線はくっきりとしていて存在感があります。

VIER ANTQWERP

7. Witness

こちらもVIER ANTWERPと同じく、線に存在感があります。

レスポンシブデザインであり、画面の大きさによって線の配置が変わるところもポイントです。

Witness

8. Fly Digital

Fly DigitalのWebサイトは、美しいネオン線が印象的。フレームや区切りに線が使われているだけでなく、文字もオレンジや赤の線に縁取られています。

この例からもわかるように、線はミニマルなデザインのアクセントにもおすすめです。

Fly Digital

9. The Nordy Club

The Nordy Clubは、芸術性あふれるWebサイトに線を活用しています。

手描き風の線はデザインとして美しいだけでなく、ユーザーをメインのページに案内する役割も。思わず線を目で追ってしまう、巧妙なWebデザインです。

The Nordy Club

10. Red Planet

さきほどの例とはうってかわって、こちらの線は指摘されないと認識できないほど控えめです。

存在感のある線ではありませんが、宇宙をテーマにしたヒーローエリアに絶妙に溶け込み、幾何学的なアクセントを付け加えています。

Red Planet

11. Yukie Nail New York

純粋に装飾的なものから、スライダーナビゲーションやハンバーガーメニューにいたるまで、さまざまな形式で線が取り入れられています。

それぞれの線の共通点は、その繊細さ。女性らしい雰囲気を自然に引き立てています。

Yukie Nail New York

12. Mad Studio

最後にご紹介するのはMad StudioのWebサイト。ブランドの核である斜線を、おもに装飾的な目的で取り入れています。

各スライドの中心にある画像から、CTAボタン、背景にいたるまで、さまざまなシーンで斜線モチーフを採用。繊細な線となめらかな動きが、シャープな雰囲気を演出しています。

Mad Studio

おわりに

今回ご紹介したWebサイトは、それぞれ線をWebデザインに効果的に取り入れています。純粋に装飾的なものもあれば、UXの向上に貢献するものもありましたね。

Webデザインにおいて、線はとてもベーシックな要素です。しかし侮ってはいけません。たかが線、されど線。Webデザインで迷ったら、最も基本的な要素である線に立ち返ってみてはいかがでしょうか。

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

こちらもおすすめ！▼