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の便利なショートカット

前回の記事に引き続き、ショートカットのおさらいをしていこうと思います。今回はIllustrator編です。 では早速ですが、便利なショートカット10選のご紹介していきますね。   ダイレクト …

ボタンを自動で生成してくれる「Button Maker」

今回は 「Button Maker」という、ボタンを自動生成してくれるウェブサービスをご紹介します。 文字やサイズ、色などを指定するだけで、簡単にそれっぽい綺麗なボタンを作ってくれるので、時間がない時 …

柔らかな形状のまる模様を作成できる「Blobmaker」

Pinterestやギャラリーサイトなどを見ていると、スライム?のような、柔らかい形状の模様を取り入れたサイトを多く見かけますよね。 そんなサイトを真似しようと、同じような素材を探したり、自分で作って …

使える背景フリー素材サイト6選!

デザインの背景画像で迷ったときにチェックしたい背景素材サイトをまとめてみました! なんかデザインが物足りないな〜なんて時にも使えるサイトばかりなので、よかったら参考にしてみてください。 それでは、さっ …

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

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