参考になる！おしゃれなブログデザイン 22選

おしゃれなブログデザイン

DESIGN MEMO 2.0

デザインに統一感があり、とても美しいブログです。とくにトップページのグリッド表示がこの上なくおしゃれ。秀逸なレイアウトや配色に加え、アイキャッチ画像まで作り込まれています。やはり細かな部分にまでこだわることは大事ですね。

milieu

塩谷舞さんが中心となって運営しているメディアです。個人が運営しているということで今回のリストの中に入れました。 非常にデザインの完成度が高くなっています。グラデーションを使った透き通るような背景、記事に挿入される美しい写真、タイポグラフィー、適度なアニメーション…、と隅々まで洗練されています。

Webrawl

Webrawlは、主にWebデザインについての情報をまとめたブログです。企業のブランドサイトのような渋くてカッコイイ表現がされており、つい長居してしまうのですよね。

DRESS CODE

一見大手Webメディアのようですが、ブログ寄りの個人運営メディアです。ファッションメディアらしく、統一感のあるおしゃれなデザインとなっています。記事自体も、きちんと取材をし、写真を撮ったうえで記事が書かれており、読み応えがあります。個人的には、スマホで見た時のファッション雑誌の表紙のようなヘッダーの表現にグッときています。

Lopan.jp

フリーランスのウェブデザイナーの方のブログです。恐ろしいほどにおしゃれ。ブログながらアートに近いレベルです。記事一覧、見出し、文字、ボックス、全てが緻密に設計されています。また、ウサギのキャラクターのアニメーションが可愛いです。 これで記事もしっかりと書かれているのだからすごい。

watanabemitsutoshi.com

音楽やウェブに関するトピックを中心に書かれている雑記ブログです。全体的に見やすいデザインとなっているのですが、とくにヘッダーが目を引きますね。やはり第一印象は大事。

シンプルなブログデザイン

ここからはモノクロベースのシンプルで見やすいデザインのブログを紹介します。

Manic Youth

ムダのないスマートなデザインのブログです。たっぷりと取られた余白と、部分的に明朝体を使用するタイポグラフィにより、アーティスティックで洗練された雰囲気が出ています。記事一覧のレイアウトがユニーク。

prasm

爽やかなデザインのブログです。とくにヘッダーが良いですね。使用する色数が抑えられているのもスッキリ見える要因の1つでしょう。

KEISUKE TSUKAYOSHI

UI/UXデザイナーさんのブログです。トップページは一覧性が高いユニークなデザイン。カラフルな色はほとんど使われていませんが、余白の使い方や、文字のフォント指定が上手く、ストレスを感じさせない「見やすさ」があります。

Kenji Okabe Photography

ため息が出るほどにおしゃれなブログです。写真を大きく表示し、その上に一部重ねるように文字をのせています。ページ下部までいくと、次の記事が自動で読み込まれる「Infinite Scroll」が実装されています。ついスクロールする手が止まらなくなる素敵なデザインのブログです（デザイン以上に写真が素敵なのですが）。

企業ブログ

STANDARD inc

UI/UXデザインの事業を行う企業のブログです。ファーストビューに大きく表示されるされるアイキャッチ画像がユニークです。目を引く分、スマホだとスクロール量が多くなってしまうのが難点かもしれませんね。

dwango creator’s blog

ドワンゴのデザイナーが運営するブログです。全体的にカラフルで遊び心が感じられるデザインとなっています。アイキャッチ画像にかかっている立体感のあるカテゴリー表示も良いですね。

Sansen Blog

クラウド名刺管理サービスを提供する企業のブログ。ファーストビューがとてもいい感じ。カラフルな吹き出しが使われることにより、かわいく、明るい雰囲気が出ています。

海外編

ここからは、参考になりそうな海外のブログデザインをいくつか紹介します。英語だと、フォントの選択肢が多くて良いですよね。

Google Blog

Googleの公式ブログです。とにかく余計なものがのっていないシンプルなデザインとなっています。デザインだけでなく、構成も非常に参考になります。僕自身「◯◯を実装するべきか」「◯◯のタグをヘッダーに書くべきか」などを考えるときに参考にしていたりします。

Volkshotel

オランダのアムステルダムに位置するホテルのブログです。国外の人たちに向けて情報発信をしているようです。アムステルダムの観光情報などがまとめられており、読み応えがあります。デザインは太めの線とフォントを活かしたユニークで大胆なものとなっています。

Zoella

ファッションやライフスタイルについての情報を発信するイギリスの有名YouTuber「ゾーイ・サグ」さんのブログです。華やかで遊び心がある理想的なファッションブログのデザインと言えるでしょう。

CODE MY VIEWS

シンプルで親しみやすいWeb制作会社のブログです。派手な装飾は無く、フォントサイズと余白をうまく使うことで見やすいデザインを実現しています。そのため読み込みが早く、見る方もストレスフリー。また、丸文字により親しみやすさも演出されています。

InvisionApp

ウェブ制作補助ツールを提供する企業のブログです。ヘッダーの上にタイトルをのせる表現や、記事の1文字目を大きく見せる表現が印象的。また、ブランドカラーに合わせたアクセントカラーの使い方が非常に参考になります。

Microsoft Story Labs

マイクロソフトが提供するブログです。フォントの使い方やアイキャッチ画像の使い方がとても参考になります。また、通常とはデザインが異なる特集記事も多数更新されており、見ているだけで楽しくなります。特にInvisible Revolutionという記事のデスクトップ表示が秀逸。画面右に固定された画像にアニメーション効果がつけられており、目が引かれること間違い無し。

MIKE ANDERSON.

特別な表現がほとんどされていないシンプルなデザインですが、余白やフォントの指定がうまく、印象的な見た目となっています。

NOVEMBER

おしゃれなファッションメディア…と思いきや、実はこちらGoogleの提供するサービス「Blogger」の無料テンプレートです。ウェブデザインの知識がなくとも、インストールするだけでこんなにハイクオリティなブログを作れてしまうのですね。ダウンロードはこちらから。

まとめ

掲載候補はかなり多かったのですが、読みやすさとオシャレさを両立しているブログを選ぼうとすると、かなり数が絞られますね。見やすさとオシャレさを両立するのって難しい…（SEO対策までしっかりしようとすると更に難しくなるのでしょう）。