【デザインの知識】シンプルなデザインの参考サイト
今回からアメブロヘッダーに使えるデザインの参考サイトを
テーマごとにご紹介していきます。
第１回目は、
『シンプルなデザイン』について。
アメブロでシンプルなデザインにすることによって、
・どのような内容のアメブロなのかをはっきり伝えられる。
・記事を読みやすくする。
・画像を引き立たせる。
などの効果があります。
当アメブロでは、ヘッダー画像でさまざまな色を使用しておりますが、
全体的にシンプルなデザインにしております。
これは、
・ヘッダー部分で色によるインパクトを与える。
・しかし、全体的にシンプルなデザインにし、
このアメブロはどのような内容なのかを理解しやすくする。
というのが狙いです。
このようなシンプルなデザインは、
『伝えたいものをはっきりと魅せる』のに適しているのです。
当アメブロを例にご説明すると、
ヘッダーは、デザインにとって重要なポイント！
読者の皆さんが絶対に見るところですからね。
「そこを僕がこのようにデザインしますよ。」
とお伝えしています。
また、
記事部分でしっかりとカスタマイズ方法やデザインに関して濃い内容の記事を書くことにより、
このアメブロは、「あなたのアメブロをカスタマイズするために必要なブログなんです。」
と読者にお伝えしています。
これをはっきり解りやすくお伝えするために、
全体のデザインをシンプルにしているのです。
記事で改行を多く使用し、余白（白い部分）を多くなるようにしたり、
サイドバーの文字間隔を広めにとり、余白（白い部分）を出来るだけ作るようにしています。
この『余白』がシンプルなデザインを構成するにあたってとても重要になってきます。
デザイナーによっては、この余白の広さからデザインの設計を始める人がいるほどですからね。
では、実際に参考サイトを見てみてみましょう。
これから紹介するサイトのデザインは、ヘッダー画像に適しているものばかりです。
アメブロ全体のデザインに参考になるものではなかったりしますのでご注意ください。
画像をクリックすると参考サイトを実際に確認できます。
大きな画像を使用したシンプルなデザイン
画像を構成している色によってはシンプルなデザインにすることもできます。
上記のサイトは白壁とダークブラウンの床とシンプル背景に、
文字を極力使用せず、訪問者に魅せたいものをハッキリと表現出来ています。
シンプルながらも、インパクトのあるデザインですね。
魅せたい商品を引き立たせているデザイン
カラフルなカラーのヘッダーを使用しておりますが、
でも、全体的にシンプルなデザインです。
当アメブロと似たテイストのデザインですね。
全体的に余白のバランスがうまくとれているサイトです。
文字が主役のデザイン
NO.１
NO.２
上記の２サイトは、文字が主役のデザインになっております。
余白がしっかりとられているので、解りやすい構成になっております。
NO,１では、ページ左側にリンクが縦に並べられていて視認性を良くしています。
メニューリンクを設置する際にこのような配置もおもしろいですね。
NO.２では、大きな背景画像に文字をのせ、それを中央に表示し視認性を良くしています。
アメブロの内容を解りやすく文章で紹介したい際に使えるデザインです。
アメブロにも使えるシンプルなデザイン
上記のサイトのデザインは、そのままアメブロにもそのまま使用できるデザイン構成です。
ブログタイトルの下にメニューリンクが横に並び、
その下に大きめにサイト内容を表現する画像を表示しているので、
サイト構成は、当アメブロに似ております。
大きな画像を使用しておりますが、その他はシンプルなデザインにしてあり、
また、余白の使い方が良いので、スッキリした印象を受けるサイトですね。
画像の上に表示したフレーズ「コダワリ自転車とモロモロあります」も、
長々としたフレーズですとちょっとゴチャゴチャした感がありますが、
短文でサイトを表現しているので、シンプル感を感じ、
また、解りやすいフレーズになっております。
僕も当アメブロのデザインをする際に参考にしたいサイトです。
と、シンプルなサイトを５つ紹介しました。
アメブロのヘッダー部分で表現するには参考になると思います。
何か特定の商品をハッキリと紹介したいと思っている方は、
これらのようなデザインがおすすめです。
テーマごとにご紹介していきます。
第１回目は、
『シンプルなデザイン』について。
アメブロでシンプルなデザインにすることによって、
・どのような内容のアメブロなのかをはっきり伝えられる。
・記事を読みやすくする。
・画像を引き立たせる。
などの効果があります。
当アメブロでは、ヘッダー画像でさまざまな色を使用しておりますが、
全体的にシンプルなデザインにしております。
これは、
・ヘッダー部分で色によるインパクトを与える。
・しかし、全体的にシンプルなデザインにし、
このアメブロはどのような内容なのかを理解しやすくする。
というのが狙いです。
このようなシンプルなデザインは、
『伝えたいものをはっきりと魅せる』のに適しているのです。
当アメブロを例にご説明すると、
ヘッダーは、デザインにとって重要なポイント！
読者の皆さんが絶対に見るところですからね。
「そこを僕がこのようにデザインしますよ。」
とお伝えしています。
また、
記事部分でしっかりとカスタマイズ方法やデザインに関して濃い内容の記事を書くことにより、
このアメブロは、「あなたのアメブロをカスタマイズするために必要なブログなんです。」
と読者にお伝えしています。
これをはっきり解りやすくお伝えするために、
全体のデザインをシンプルにしているのです。
記事で改行を多く使用し、余白（白い部分）を多くなるようにしたり、
サイドバーの文字間隔を広めにとり、余白（白い部分）を出来るだけ作るようにしています。
この『余白』がシンプルなデザインを構成するにあたってとても重要になってきます。
デザイナーによっては、この余白の広さからデザインの設計を始める人がいるほどですからね。
では、実際に参考サイトを見てみてみましょう。
これから紹介するサイトのデザインは、ヘッダー画像に適しているものばかりです。アメブロ全体のデザインに参考になるものではなかったりしますのでご注意ください。
画像をクリックすると参考サイトを実際に確認できます。大きな画像を使用したシンプルなデザイン
画像を構成している色によってはシンプルなデザインにすることもできます。
上記のサイトは白壁とダークブラウンの床とシンプル背景に、
文字を極力使用せず、訪問者に魅せたいものをハッキリと表現出来ています。
シンプルながらも、インパクトのあるデザインですね。
魅せたい商品を引き立たせているデザイン
カラフルなカラーのヘッダーを使用しておりますが、
でも、全体的にシンプルなデザインです。
当アメブロと似たテイストのデザインですね。
全体的に余白のバランスがうまくとれているサイトです。
文字が主役のデザインNO.１
NO.２
上記の２サイトは、文字が主役のデザインになっております。
余白がしっかりとられているので、解りやすい構成になっております。
NO,１では、ページ左側にリンクが縦に並べられていて視認性を良くしています。
メニューリンクを設置する際にこのような配置もおもしろいですね。
NO.２では、大きな背景画像に文字をのせ、それを中央に表示し視認性を良くしています。
アメブロの内容を解りやすく文章で紹介したい際に使えるデザインです。
アメブロにも使えるシンプルなデザイン
上記のサイトのデザインは、そのままアメブロにもそのまま使用できるデザイン構成です。
ブログタイトルの下にメニューリンクが横に並び、
その下に大きめにサイト内容を表現する画像を表示しているので、
サイト構成は、当アメブロに似ております。
大きな画像を使用しておりますが、その他はシンプルなデザインにしてあり、
また、余白の使い方が良いので、スッキリした印象を受けるサイトですね。
画像の上に表示したフレーズ「コダワリ自転車とモロモロあります」も、
長々としたフレーズですとちょっとゴチャゴチャした感がありますが、
短文でサイトを表現しているので、シンプル感を感じ、
また、解りやすいフレーズになっております。
僕も当アメブロのデザインをする際に参考にしたいサイトです。
と、シンプルなサイトを５つ紹介しました。
アメブロのヘッダー部分で表現するには参考になると思います。
何か特定の商品をハッキリと紹介したいと思っている方は、
これらのようなデザインがおすすめです。
<< 関連記事 >>
【配色の知識】赤が表現するイメージとは？
【配色の知識】青が表現するイメージとは？
【配色の知識】緑が表現するイメージとは？
【配色の知識】黒が表現するイメージとは？