参考になる!オシャレなブログのデザイン集

shunichi shiga
オシャレなブログデザイン

インターネットを利用している人の中では、自分のブログを持っているという人も多い事でしょう。
さらに最近は、既存のブログサービスだけでなく、WordPressやMovableTypeなどのブログ作成を得意としたCMS(コンテンツマネジメントシステム)を使ってオリジナルのブログを作っている人も散見します。ここでは、そのような独自のブログデザインの中で、オシャレでかっこいいものをご紹介しましょう。

要望に合うクールなデザインとは?

Webデザイナーという肩書を持っていたら、ブログのデザインをしてほしいという依頼は頻繁に受けると思います。

その際、「かっこいいデザインで」と言われる場合も多いでしょう。
ほかにも「オシャレっぽい」「クールな感じ」といった注文もよくあります。
しかし、「かっこいい」「オシャレ」「クール」というイメージは人によって様々なので注意が必要です。

相手の希望するデザインを具体的に聞かなければ、ブラックでシックに決めたデザインを提案したところ、ビビッドカラーのポップなデザインを要望していたという事になりかねません。

かっこいいブログにするコツ

ブログは、ヘッダー、グローバルメニュー、サイドメニュー、記事枠、フッター、背景など、たくさんのパーツが集まってできています。
それを一つ一つ作っていたら、ちぐはぐなデザインになってしまう場合があります。

依頼主に必要なパーツを教えてもらった後は、真っ先にレイアウトを考えた上で、統一感が出るようにパーツを仕上げていきましょう。また、HTMLやCSSでコーディングまでする人は、ページに付けるエフェクトも統一したほうが良いです。

例えば、リンクボタンの上にカーソルが来た時、グローバルメニューでは、光るような演出を施しているのに、サイドメニューではアンダーラインが入る演出を施していたら、やはりちぐはぐな印象を与えます。

オシャレなブログの参考まとめ

様々な「オシャレ」を集めましたので、参考にしてください。

オシャレなブログ参考例1

ベトナムのホイアンにある観光名所やホテル、レストランなどを紹介するブログです。

現状のレイアウトは気に入っているとの事なので、それを生かして、ロゴで使われている色を元に、検索窓、カレンダー、天気などの欄をデザインしました。

現地の明るい雰囲気が良く出ています。

オシャレなブログ参考例2

新しいライフスタイルを提案するブログです。鮮やかなオレンジ色と、青み掛かった灰色がマッチしています。
トップページで与えられる情報は少ないですが、興味を引き付け、先が読みたくなります。

オシャレなブログ参考例3

カナダのケベック州に住む、小さな子供がいる家族のためのブログです。緑色と水色のガーランドを施し、楽しい雰囲気に仕上がっています。画像を多用するので、大きく見せるレイアウトにしました。

オシャレなブログ参考例4

健康的な生活を送りたいと思う女性を対象にしたブログです。スピリチュアルな要素も入っているため、悪夢を取り去るというネイティブアメリカンに伝わるお守りのドリームキャッチャーや万華鏡のような模様を取り入れました。

オシャレなブログ参考例6

世界中を旅する女性の旅行ブログです。
鮮やかな水色をメインカラーにし、光りが溢れるようなデザインにしています。

オシャレなブログ参考例7

ポップカルチャーや自身の子育てをつづる女性エッセイストのブログです。イエローとピンクが好みという事で、それを要所要所に使ったデザインになりました。ブログの読者は28歳から45歳くらいの女性なので、その人たちの好みにも合わせています。

オシャレなブログ参考例8

ITセキュリティサービス会社によるセキュリティ情報を提供するブログです。このような業種の場合、サイバー空間をイメージさせる未来的なデザインが多いのですが、あえて険しい山々の画像をデザインしたところに特異なセンスを感じます。

オシャレなブログ参考例9

オーディオ機器についてのレビュー及びブログです。ディスコが流行した時代の雰囲気を出しています。
音が重要な要素なので、動画が埋め込みやすいデザインです。

カッコイイデザイン

「かっこいいブログ」は見た目ももちろんですが、読者に分かりやすく、次が読みたくなるようなデザインが仕上がって初めて「かっこいいブログ」と言えるでしょう。

是非、読者の立場になって、デザインしているブログを眺めてみてください。

関連記事

印象に残るオシャレなヘッダーデザインとは

印象に残るオシャレなヘッダーデザインとは

webサイトの顔とも言えるヘッダーは、サイト訪問者の心をつかむデザインである必要があります。サイト訪問者の心をつかむような、インパクトがありながらも、オシャレでセンスのいいヘッダー。デザイナーになったばかりの人には少しハードルの高いテーマかもしれません。 ここではクライアントが喜んでくれるであろう、印象に残るオシャレなヘッダーの例を紹介しますので、是非参考にしてみてください。   アイキャッチを組み込んだオシャレなヘッダー アイキャッチとは見ている人の注意を引くためのものを指す言葉です。ヘッダーのアイキャッチの手法としてよく使われる3種類を紹介します。 インパクトによるアイキャッチ 色によるアイキャッチ アイコンやロゴによるアイキャッチ 最もアイキャッチとして強いのはインパクトのあるデザインですが、派手なヘッダーをオシャレに仕上げることはとても難易度が高いため、デザイナーとしての経験が短い人にはオススメできません。そこでデザイナーになりたての人の参考になる、色やアイコン、ロゴによるアイキャッチを得意としているのがGoogleです。Googleのヘッダーはとてもシンプルですが、サイト訪問者の印象に残るヘッダーの良い例です。飾るものをできるだけ少なくし、シンプルなアイキャッチだけで主張するのが最近の流行にもなっています。 デザイン by bearbrick デザイン by don-armagadon デザイン by KR Designs   ターゲットを意識して派手すぎないヘッダーを ヘッダーでターゲットになる人に注目してもらうことばかりを考えると、主張ばかりが強いヘッダーになりがちです。ヘッダーはあくまでも看板なので、そのサイトが何のサイトなのかを知ってもらうためにあります。最小限の装飾でサイト訪問者の心を掴むことができればよいのです。 派手なデザインのヘッダーは印象に残りやすく、わかりやすいことが多いため、デザイナーとしては採用したくなるのですが、サイト訪問者は何度もサイトを訪れるうちに、次第に派手なデザインを「うるさい」と感じてしまうでしょう。また、派手なヘッダーはサイト全体のイメージを崩してしまう可能性もあります。サイト全体のバランスを崩さない程度に、一番伝えたい内容だけを強調するようにしましょう。 デザイン by Janneke デザイン by ogorinac デザイン by Janneke   Webサイトとの調和がとれたデザイン どれだけオシャレなヘッダーを作ってもwebサイト全体のデザインに合っていなければ、クライアントに差し戻される可能性が高くなります。ヘッダーのデザインをするときは、配置するサイト全体を確認して、ページに馴染むデザインになるように心がけましょう。 サイト全体がフラットデザインで作られているのにヘッダーがリッチデザインになっている場合や、暖色系のサイトに寒色系のヘッダーを組み合わるなどでデザインを行うと、サイト全体がちぐはぐな印象になってしまいます。 サイトのカラーに近い色、近いトーンの色を使う サイトのコンセプトをしっかり聞き出して作成する 上記の2点を意識してヘッダーのデザインを行いましょう。自分が作りたいデザインのヘッダーを作るのではなく、サイト全体にどのようにフィットさせるかを考えてデザインしてください。 デザイン by milajones デザイン by MercClass デザイン by Slaviana   インパクトのある見出しを有効活用 ヘッダーにキャッチコピーのような見出しを使用することで、サイト訪問者の興味をより引き立てることができます。本屋に並ぶ本の多くには、思わず手にとってしまいたくなるような帯がついていますよね。あの帯だけで本の売上が10倍変わることもあるそうです。ヘッダーの見出しは本の帯のようなものだと考えてください。 例えば、「美味しい珈琲屋」という見出しはデザインによっては映えますが、インパクトが弱いためサイト訪問者の心に響かないでしょう。そこで、「創業20年 愛され続ける珈琲屋」と言葉を変えるだけでもイメージが大きく変わります。さらにイメージに合ったフォントに変更すればさらに効果は高まります。 ヘッダーを配置するサイトの強みやメリット、特徴からキーワードをいくつも選び出し、特に強調したいものを組み合わせてサイト訪問者の心をつかむ見出しを作りましょう。 デザイン by KR Designs デザイン by fortunefaded デザイン by Kristopher P. 印象に残るオシャレなヘッダーデザインは、サイトの特徴をしっかりと表現しつつも、サイト全体にうまく溶け込みます。見た目の奇抜さや装飾を出来るかぎり省きながらも、アイキャッチやキャッチコピーを効果的に使うことで、サイト訪問者の印象に残るデザインに仕上げることが可能です。ぜひ、この記事を参考に、ヘッダーデザインにチャレンジしてみてください。

クリック率をアップさせるオシャレなボタンデザインとは

クリック率をアップさせるオシャレなボタンデザインとは

クリック率やコンバージョン率が重要なサイトのボタンは、「購入する」「資料請求」「参加する」など、企業の収益や集客に直結することから、つい目立たせたくなってしまうかもしれません。しかし、いかにも「押してください」とアピールされたボタンデザインでは、逆にユーザーは引いてしまう傾向があります。ここでは、オシャレでかっこいい上にユーザーのアクションを促せるボタンのデザイン例を紹介します。 見慣れた記号で生み出すオシャレなボタン デザイン by JohanP インターネットが普及して年月が経った今では、ネットショッピングや情報収集をする際に、ボタンを瞬時に見つけたり、どう操作すればどうなるかすぐに理解できたりというような、「条件反射」でアクションをするようになってきました。 そのため、ユーザーが一目見て「このボタンを押せばこうなる」と理解できるようなボタンデザインである方が、ストレスなく利用できるでしょう。ボタンデザインの中でも、見慣れた記号やモチーフをベースにデザインされたボタンは、アレンジしても「このボタンを押せばこうなる」と伝わりやすくなります。 例えば、カートのマークをクリックすれば「購入する・カートに入れる」、三角を丸で囲んだマークは「動画が再生される」などが挙げられます。こうした一般的に使われている記号をオシャレにデザインすることで、ユーザーのアクション促進とビジュアルの良さを両立させたボタンになります。 デザイン by Secret99 次アクションが一目でわかるデザインを デザイン by DiegoIsCo ボタンであることがわかりやすい立体的なデザインは、高齢者に向けたサイトや親しみやすさを狙ったサイトには合っても、オシャレでクールな雰囲気のサイトにはあまり馴染まないかもしれません。 そんなときは、別の方法で「ボタンであること」がわかるようなデザインにするのがオススメです。代表的なデザインとして挙げられるのは、カーソルを乗せると色が反転するデザインや、ボタン内の写真が変化するロールオーバーです。 また、ユーザーがボタンを押した次のアクションを予測できるようなデザインにすることも大切です。ボタンをクリックしたら申込みフォームになるのか、購入画面になるのか、別のサイトへリンクしているのかなど、わかりやすいデザインにしましょう。 次の予測ができないサイトはユーザーにストレスを与えやすく離脱されやすいので、ボタンだけである程度次ページが予測できるナビゲーションにしたいものです。世界中で共通して広く使われているマークを利用する他、文字で表現する方法などもあります。その場合は、日本語よりも簡単な英語でのデザインの方が見やすいため、よく使われる傾向があります。 デザイン by thydesigns デザイン by TJCD フラットなデザインの中にでも映えるボタンのデザイン デザイン by IuliaG オシャレでかっこいいサイトで比較的使われているのがフラットなデザインのボタンです。フラットなボタンはシンプルなデザインのものが多く、ボタンとして目立たせるには難易度が高いかもしれませんが、そんなときには同系色を活用するテクニックがオススメです。 例えば、サイトのイメージカラーと同じフラットな単色ボタンを、ロールオーバーで彩度を変えた同系色に変化させることで、クールな印象をキープしながらも、ボタンとして認識させることが可能です。アイキャッチとなる写真をボタンとして使い、マウスポインタを乗せるとモノクロや反転になるデザインもオススメです。 デザイン by schabo ユーザーの目を奪うオシャレなボタン作りを デザイン by JhEign つい好奇心が湧いて押してしまうような、閲覧する人々の目を奪うオシャレなボタンを作るためには、オリジナリティのあるユニークなモチーフの追求と日々のデザイントレーニングが必要です。 イラストに自信があるなら、ボタンに使うモチーフを自分流のタッチで描くのもオススメですし、手軽にかっこいいボタンを作るなら、布や紙、マテリアルのテクスチャーを活用するのも良いでしょう。例えばジーンズショップのサイトなら、デニムのテクスチャーにステッチを施すだけでもオシャレなボタンになります。 このように、サイトが紹介しているものがイメージできるようなモチーフの研究は、ユーザーの購買意欲を刺激しやすく、本来の目的である「コンバージョン率」のアップにもつながるかもしれません。 デザイン by Grace Coote   デザイン by harsh.spy4 オシャレでかっこいいデザインは「引き算」が鉄則ですが、そこに「ボタン」とわかってもらうための工夫も取り入れる必要があるため、難易度が高いと感じるかもしれません。しかし、「サイトの商品やサービスに興味を持っているユーザーのアクションを促す」という目的を常に意識していれば、アイデアが浮かびやすくなります。ぜひかっこいいサイトの中でキラリと光るボタン作りを研究してみてください。

つい目を向けてしまうオシャレでかっこいいカタログデザイン例

つい目を向けてしまうオシャレでかっこいいカタログデザイン例

デザイナーなら挑戦したいであろう、オシャレでかっこいいカタログの制作。しかし、そういった類のカタログ制作に関わったことがないと、実際に制作するのはハードルが高く、難しいのではと思っていませんか? 実はオシャレでかっこいいカタログをデザインするのはそんなに難しくありません。これもデザインテクニックの一つですから、ある一定のルールが存在するものです。 今回は、そんなオシャレでかっこいいカタログが作成できる、ルールとテクニックをご紹介いたします。 なぜファッションカタログはオシャレでかっこいいのか? ファッションカタログがなぜオシャレなのでしょうか? そのカタログを構成したデザイナーがそう思ってもらえるようなデザインにできているからなのですが、その一方で、読者がオシャレだと思うファッションカタログを手に取っているからだと考えることも出来ます。つまり、そのカタログのデザインをオシャレだと思う読者の人々が引き寄せられているとも言えるのです。 オシャレでかっこいいデザインは、読者それぞれによって異なるのです。ただし、カタログのデザインは読者がオシャレでかっこいいと思う表現である必要があるということは大前提として理解しておく必要があります。 読者ターゲットを絞り込んだデザインを採用する カタログに掲載したい内容をよく理解し、どの層の読者をターゲットにするかを決めることは、とても重要なことです。なぜなら、ターゲットを絞り込むことで、どういったデザインを採用すればよいかをより明確に決めることができるからです。 例えばある楽器メーカーの商品カタログで、扱っている主力商品がDJ機材であれば、読者ターゲットは現役のクラブDJやミュージシャン、またはそれに憧れているクラブやフェス好きの顧客予備軍に絞り込むことができるでしょう。この例であれば最近流行している音楽イベントのフライヤーやホームページからヒントを参考にできます。 このようにターゲットを絞り込むことで、ターゲットの読者がオシャレでかっこいいと思っているデザインを採用しましょう。 主力のイメージは大きく配置してインパクトを与える ここでも商品カタログを例に話を進めます。 まず主力のイメージ画像を決めましょう。そして、カタログ構成の中に、その主力イメージを出来るだけ大きく(もしくは、はみ出してしまうくらい)配置した専用ページを作成します。 これは出来るだけ冒頭のページに見開きの形で採用することが好ましいです。なぜなら、そのヴィジュアルインパクトがそれ以降のページまで余韻を残して、全体的にオシャレでかっこいいカタログだったと思わせる効果を期待できるからです。 このテクニックはアパレルブランドの商品カタログでよく使われているので、もし手元にそういったカタログがあれば、そういう視点で観察してみるとデザイナーとしての感性を養う良い勉強になるのでオススメです。 現在のデザイントレンドを取り入れてみる 全体的なデザイン構成としてトレンドを取り入れているかどうかは、カタログの印象に大きく左右するため、絶対におさえておきたいポイントです。 例えば、現在のデザイントレンドのひとつがフラットデザインです。装飾やオブジェクトにグラデーションやドロップシャドウなどは多用せず、シンプルで落ち着いたものにしてあげることが好ましいデザインとされています。 また、フォントにもトレンドがありますので、色々なカタログやデザインを観察して常にトレンドは頭に入れておくようにしましょう。 以上がオシャレでかっこいいカタログデザインを製作するルールとテクニックになります。多くの消費者はトレンドに沿ったデザインを好む傾向があるため、最後にご紹介した「トレンドを知っておく」ということはカタログ製作だけに関わらず、デザイナーとして生きていくうえで絶対に欠かせないポイントです。ベースとなるルールとテクニックにトレンドというスパイスを効かせて、是非オシャレでかっこいいカタログをデザインしてみてください。

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。