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

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

関連記事

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

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

ECサイト用の素材が揃った「EC design」

現在初めてECサイトの制作に挑戦しているのですが、ECサイトのデザインについて色々と検索していたところ、素敵な素材サイトに巡り合ったので今回ご紹介したいと思います。 「EC design」という名前の …

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

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

スマホ向けWEBサイトを集めたギャラリーサイトのご紹介

Webサイトのスマホ対応はWebサイト制作において、もはや必須要件となってきていますよね。 とはいえ、スマホに適したデザインを考えるのは難しく迷ってしまうことも多いのではないでしょうか。 そこで今回は …

Google画像検索の便利な検索方法

前回はGoogleの便利な検索方法をご紹介しましたが、今回は画像検索について便利な方法をいくつかご紹介したいと思います。 画像検索で一般的に使われているのは、調べたいキーワードを入力して検索する方法で …