INSPIRATION

【Webデザイン】縦のラインを活かしたスタイリッシュなサイトデザイン10選+1!

デザイン手法として、縦のラインを活かしたデザインが最近スタリッシュで面白いなと感じました。あまり他のサイトでも取り上げられていないようなので、考察と合わせてまとめてみました。
 

目次

  1. 縦のラインを活かしたデザインのメリット

    1. メリット1:レイアウトに規則とリズムが生まれる
    2. メリット2:ポイントで規則を外すことでレイアウトが単調にならず面白くなる
    3. メリット3:可読性が上がり、コンテンツを読みやすくなる
  2. 縦のラインを活かしたデザイン11選

 

縦のラインを活かしたデザインのメリット

印象に残るデザインですが、その要因はなんでしょうか?考えてみました。
 

メリット1:レイアウトに規則とリズムが生まれる

縦のラインがあることで人の目はそれを意識します。そして、要素がそのラインに従って規則正しく並んでいる状態を美しく感じます。これはデザインの4大原則の「整列」に当たります。


 

ポイントで規則を外すことでレイアウトが単調にならず動きが出る

前述の通り、規則正しいレイアウトは安定と美しさを与えます。が一方、全てが同じレイアウトでは人の目はそれに慣れ、退屈で印象に残らないデザインになってしまいます。

そこで規則をあえてポイントで外すことで単調にならず、動きが出ます。これはデザインの4大原則の「強弱」に当たります。


規則正しいレイアウトの中にあえて不規則なレイアウトを入れることで生まれる動き・強弱
 

可読性が上がり、コンテンツを読みやすくなる

横に長い文章は読みづらくなってしまいます。縦のラインがあることによって、その規則にしたがって適当な位置で文章を改行することで読みやすい文章にすることができます。

また、文字のフォントサイズを小さく抑えたデザインは、「繊細」さや「洗練」されたスタイリッシュな印象を与えますが、可読性は下がってしまいます。こういった場合にも縦のラインに従った改行が活きてきます。


 

縦のラインを活かしたデザイン11選

それでは上記を踏まえて、実際のサイトを集めましたのでご覧ください。
 

舘鼻則孝 リ・シンク展


 

VR Insight™


 

株式会社ダンスノットアクト


 

株式会社ヒカリナ


 

DeNA Games Osaka


 

株式会社LIF


 

旅なかのじょう


 

株式会社メタップス


 

THE BODY RIDE「BETTER THAN」


 

株式会社インキュビット


 

RDC

例外ですが、こちらのサイトの縦のラインが動いているアイデアが面白かったので載せました。

 


 

まとめ

デザインには全て意味がある」といいますが、美しいと感じるものを「なぜそうなのか」と改めて考えてみるも意識を高めることにつながりますね。
 

それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!
 

【WordPress】コピペでOK!新着記事に「NEW」をつける方法!
NEXT INSPIRATION
スプリットレイアウトの作り方を解説!レスポンシブにも対応!
PREVIOUS INSPIRATION