Webデザイン学習日記

これは僕がWebデザイナーになるまでに学んだことを書き綴っていくブログです。

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその6。

「線で囲む」

 

こんにちは!最近「ぼくなつ」がやりたくなってきたカエデです。

 

「あるあるデザイン」アウトプットその6ということで、今回は「線で囲む」です!

線で囲むって結構普通じゃね?と思ったそこのあなた。まあ見てくださいな。笑

 

早速僕が作ったデザインを見ていきましょう。こちらです!

 

f:id:kaedebook:20190713211240p:plain

 

題して「アウトドアメーカー”FIGHTING”」です!

 

このように見出しの文字などを線で囲むことによって、より目立ち、読みやすさがアップすること間違いなしになります!

また、線で囲んだデザインを多用することによって、装飾としても成り立ってくれるというまさに便利なデザインなのです。

 

実際作ってみて

 

ただ線で囲むだけでなく、様々なバリエーションを加えて使うことができるなと思いました。

 

僕は今回のデザインを書籍で見たとき真っ先にスポーツブランドを今回のテーマにしようと思いました。

というのも...

 

f:id:kaedebook:20190713212812j:plain

 

このマンUイングランドのサッカーチーム)のユニフォームを最初に思い出したからです。笑

このころはクリロナもいたなあ。笑

 

まあこれはスポンサーのロゴなんですけどね!笑

 

それはさておき、スポーツとか、特にファッション系では線で囲まれることが多々あるので、今回はこれでクールに決めようと思いました。

 

ただ、今回特に注目していただきたいのはロゴではなく、"KEEP TRYING!!"と書かれている部分です。

線で囲んだ上から、その線で囲んだ面積を上回る大きさの文字が斜めにかかる...

 

めっちゃおしゃれじゃないですか!笑

 

これ書籍で似たようなやり方が載っていたので、「使ってやろ。」と思ってやってしまいました。笑

 

おしゃれなのももちろんいいんですが、そのインパクトが絶大で、より目立たせたいような文字(今回のデザインの場合はこのメーカーのコンセプトとして目立たせています)にこのデザインをするとめっちゃいいと思います!

 

また、「線で囲む」はもっといろんなバリエーションで使えるなと思いました。

 

実は今回「線で囲む」を多用して、それこそ装飾的な役割に回したデザインのサイトを作ろうかと迷いました。

 

今回は作れませんでしたが、装飾的な役割として使うときには、重ねたり、合体させたり、それぞれの色を変えたりと、いろんなバリエーションで使えるので、より面白いデザインができるのではないでしょうか?

 

皆さんも「線で囲む」をいろんなバリエーションで使ってみてはいかがでしょうか?

 

以上が「線で囲む」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!