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

Webデザイン

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

投稿日:

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

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

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

 

丸紅株式会社

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

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

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

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

 

株式会社タグチ工業

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

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

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

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

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

 

藤本工業株式会

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

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

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

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

 

まとめ

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

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

-Webデザイン

執筆者:


comment

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

関連記事

なぜWebデザイナーを目指したのか

    私がWebデザイナーを目指そうと思ったのは、前職で飲食店スタッフをしていた2017年の頃です。 前職でもそれなりに楽しく働いていたのですが、どこかでずっと、手に職をもった職人や技術者に憧れてい …

いくつ知ってる?和柄の名前と意味10選

  日ごろ何気なく目にしている和柄ですが、その名前や意味を知っている人は少ないんじゃないでしょうか。 とくに和風のデザインを作るときなんか、「あれ、あの模様の名前なんだったっけ…」ってなった …

【Illustrator】バウンディングボックスが表示されなくなった時の対処法

みなさんは、選択ツールで「バウンディングボックス(四角い選択マーク)」が表示されず、オブジェクトの拡大縮小が出来なくなったことはありませんか? 私はこの現象、定期的に起こしてしまうのですが、いつも解決 …

【Photoshop】レイヤーマスクを複製する方法

今回は久しぶりにphotoshopのテクニックについてご紹介したいと思います。 いきなりですが、私の会社では有料サイトの画像を使用する場合はまずカンプ画像を使い、その後クライアントからOKが出たら画像 …

CSSをゲーム感覚で学べる「CSSバトル」が面白い!

こんにちは、ぶちこです。 先日、CSSをゲーム感覚で楽しみながら学べる面白いサイトを見つけたのでご紹介したいと思います。   CSSバトルのご紹介 その名も「CSSBattle」という海外の …