Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/attlabo-ssl/web/buchiko-web.com/wp-content/plugins/all-in-one-seo-pack/modules/aioseop_opengraph.php on line 844
参考にしたい!斜めのラインが印象的なサイト3選 | ぶちろぐ

アラサー主婦のWEBデザイン奮闘記

Webデザイン

参考にしたい!斜めのラインが印象的なサイト3選

投稿日:

こんにちは、ぶちこです。

私は今斜めグリッドのサイトのデザインに挑戦しているのですが、斜めの角度や、コンテンツ間の余白の取り方など、レイアウトがなかなか難しく苦戦中です。

そこで、斜めグリットの参考サイトをいろいろと探していたのですが、そのとき特に印象に残ったサイトを今回ご紹介します!

 

丸紅株式会社

https://www.marubeni.com/jp/

斜めにカットされたショートムービーをメイン画像に使用したサイトです。

注目して貰いたいバナーをメインビジュアルの斜線上に配置することで、効果的に目立たせていますね。

赤の斜めラインもただのベタではなく、綿のようなテクスチャの上に模様が施されていてお洒落です!

 

株式会社タグチ工業

http://www.taguchi.co.jp/

斜め斜め斜めの、斜めづくしなサイトです。

そのため、とても勢いのある印象を持つサイトなのですが、NEWSから下のコンテンツがセンターに配置されていることで、全体的に見やすく、綺麗にまとまっています。

グローバルナビゲーションにマウスオーバーすると出現するメガメニューも、斜めにレイアウトされているのですが、デザインとよく馴染んでいて、違和感がありません。

フッターの斜めの切り方も工夫されていて面白いです!

 

藤本工業株式会

http://www.fujimoto-deburring.co.jp/

斜めに切り取られた職人の画像が入れ替わるスライダーが印象的なサイトです。スライダー写真は、体の一部が浮きでたようなデザインになっていて、インパクト抜群!

ページの真ん中に、各ページへのリンク画像がひし形に配置されているのも面白いです。

薄い水色を使っていることで爽やかさもあり、動きのある飽きさせないレイアウトで若者にもウケるデザインになっています。

 

まとめ

こうしてみると、斜めのデザインはやはりスタイリッシュで強く印象に残りますね。そして、何と言ってもカッコいいです!

斜めのラインをバランスよく取り入れるのは難しかったり、テキストの可読性が下がってしまうといった点もありますが、「インパクト」や「斬新さ」「勢い」を出したい場合には、ぜひ上手に取り入れたいレイアウトです。

-Webデザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Illustrator】文字を縦書きにする方法

今回は、イラストレーターで文字を縦書きにする方法をご紹介します。 方法としては2つあるので、どちらか使いやすい方、または状況に応じて使い分けてみてくださいね。   イラストレーターで文字を縦 …

サイトの構成に迷ったら読んで欲しいお役立ち記事3選

今回は、サイトの構成を考えるときに役に立つ、おすすめの記事を3つご紹介します! 「ワイヤーフレームって何?」という方から、「サイトの内容がうまくまとめられない」とお悩みの方まで、きっと参考にしていただ …

ウェブサイトの配色を解析してくれる「Web Colour Data」

ウェブサイトを作る時、配色をどうするかも悩みどころの1つですよね。 そんな時は、ウェブサイトで使われている色を解析してくれるサイト「Web Colour Data」が便利です! 制作するサイトの同業他 …

細いラインがおしゃれなアイコンの素材サイト3選!

最近、「キレイ、シンプル、おしゃれ」といったサイトをいろいろと見ていて気づいたことがあります。 それは、使われている線やアイコンが細めだということ。 そこで今回、細いラインのアイコンを無料で配布してい …

【Illustrator】使用していないスウォッチだけを削除する方法

デザインをするときは使用することも多いIllustratorのスウォッチ機能ですが、多用しすぎるとファイル容量が増えてデータを重くする原因になってしまいます。 スウォッチはどんどん自動保存されていくの …