コラムColumn

罫線を集めてみました

いろいろなサイトの罫線を集めました

こんにちは!デザイナーのクラッカーです。
今回のブログではいろいろなサイトから集めた罫線、ラインのデザインをテイストごとにご紹介しようと思います。
ウェブページのデザインをしていて見出しの部分に罫線を使用することがよくあるのですが、自分で自由にサイトのデザインをしようと思ったときにどんな罫線を使用しようか、デザインしようかと迷うことがあるのではないかと思い、テーマに選びました。

【まず罫線の定義とはなんだろう…】
単純に見出しの文字の下に使用されているような横線を集めてみたいと思っていたのですが、参考サイトを探していて横ラインとしての罫線には様々な使い道がありそうだと考えるに至りました。実際に今まで作成したサイトの中でも、メインヴィジュアルの上下を囲むラインを罫線の画像ダウンロードサイトから入手してデザインしたこともあります。
横方向のラインとして集めてみたものも含めてご紹介しようと思います。

デザインと罫線について罫線の種類や罫線という言葉の意味についてまとめている記事を見つけました。
特にエディトリアルデザインに言えることをまとめているようですが参考になりそうなサイトです。
http://ogurayuta.hatenablog.jp/

【ゴージャスなイメージのサイト】

ゴージャス_まとめ画像
ゴージャスなデザインテイストのサイトを検索し、罫線が使用されている部分の切り抜き画像を集めてみました。
1番目は結婚式場のアニヴェルセルさん、2番目はマッサージサロンのエクスパンスさん、3番目はスキンケア・メイクアップ化粧品のメナードさん、4番目はユニリーバさんのヘア・ボディーケアシャンプーLUXのサイトの一部です。

罫線を集めてみたところ、ゴールド系の色や、グラデーションを使ったデザインが多く見られました。
細い線を重ねて作る1番、2番の画像のような繊細な印象で装飾的なラインもよく見られます。

【スポーツ関係のサイト】

スポーツまとめ

1番はスポーツクラブNASさん、2番はマンチェスターユナイテッドさんのクラブニュースページ、3番目はルコックゴルフさんのサイト、4番目はシグマックスさんのトレーニング機器CONPEXのページ、5番はナイキさんのページ、6番はシグマックスさんの採用情報のページ、7番はリーボックさんのカスタマイズシューズのページの一部です。
罫線を切り抜いてみたところ、原色系や、モノトーンの罫線が多く使用されていました。特にグレー、シルバー系の色、シャドウが活かされたサイトがたくさんありました。

【和風テイストのサイト】

和風まとめ
1番うましうるわし奈良というサイト、2番ははま寿司のサイト、3・4番は伊勢志摩キャンペーンのサイト、5番は料亭櫻山のサイトです。
1番(上)と2番の罫線は2トーンの罫線ですが、スポーツのサイトのものとは色味やデザインが少し違っています。
2番のグラデーションがかかっているデザインもきれいだと思います。
3番の罫線は太くて短い斜線が連なっている罫線ですが、落ち着いた色味で和風の雰囲気を感じさせるデザインだと思いました。
4番のようなシャープな黒ライン、5番のような手書き感のあるライン、縦ラインもありました。

【最後に】
3つのテイストに分けてサイトを検索し、使用されている罫線を集めてみましたが、全体的にデザインテイストがしっかりしているページでも罫線だけを抜き出してみるとシンプルな罫線に関してはサイトのテイストにかかわらず同じようなデザインの罫線がたくさん見られました。
しかし、テイストごとに集めてみた罫線を並べてじっくり見ていると色味や細部の処理にこだわりが見え、細い罫線もサイト全体の雰囲気を支える上で重要な部分なのだなと思いました。
今回扱わなかったテイストのサイトの罫線も集めて比較してみるとおもしろいかもしれません。
ここまで読んでいただき、ありがとうございました。

ゴージャス / ウェブデザイン / スポーツ関係 / ライン / 和風 / 罫線

執筆者:ブログ担当

お問い合わせフォーム