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

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

関連記事

Webデザイン学習法その3. 職業訓練校で勉強する

私は初め、Webデザインを学ぶのに職業訓練校に通おうかな、と考えていました。 結局、スクールに通うことに決めたのですが、 職業訓練について調べる中でメリット・デメリットがあることがよく分かりました。 …

便利なパターンジェネレーター3選

今回は、WEBサイトを作る上で使えるパターンジェネレーターを3つご紹介します。 手間をかけずに簡単にパターンを作成できるので、とても便利で助かりますよ〜!   便利なパターンジェネレーター3 …

ロゴの背景を簡単に透明にできる「画像透過ツール」

今回は、PhotoshopやIllustratorなどのソフトを使わずに、ブラウザで簡単にロゴの背景を透過することができる「画像透過ツール」をご紹介します。   「画像透過ツール」の使い方 …

知っておきたい洋風の柄10選

先日は和柄の名前や意味についてを記事にしましたが、今回は洋風の柄についてご紹介したいと思います。 洋服や小物などで普段から何気なく取り入れている柄ってたくさんあると思いますが、案外その名前って知らない …

Webデザイン学習法その1. 独学で勉強する

Webデザインを学習するのに、まずは独学でやってみようと思う人はたくさんいると思います。 そこで今回は、Webデザインを独学で学ぶことのメリットとデメリットについて私なりにまとめてみました。 &nbs …