おしゃれなブログデザイン23選〜参考になる国内外の美しいブログ

おしゃれなデザインのブログを勝手ながら22こ厳選してみました。審査基準は、僕が見て「お、おしゃれ〜」と思ったかどうか。加えて、読みやすさもある程度考慮に入れています。なお、デスクトップ表示・スマホ表示の両方のデザインを取り上げていきます(どのブログもレスポンシブ対応です)。

2017/07/11:ブログを追加しました。

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

DESIGN MEMO 2.0

Dgada 35

Dga 6

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

milieu

milleu

Dgada 28

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

Webrawl

Daga 11

Dgaa

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

DRESS CODE

Dgada 30

dress code.

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

Lopan.jp

Dgada 33

Dagada 1

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

LOGzeudon

Dfgh

Fafa 10

見るからに「プロのWebデザイナーが作った感」が出ているハイクオリティなブログです。ピンクベースの配色でスッキリとまとめられています。

watanabemitsutoshi.com

Daga 15

Dagada 5

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

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

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

Manic Youth

Daga 21

Dgada

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

prasm

Dagada 2

Dagada 4

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

KEISUKE TSUKAYOSHI

Daga 9

Daga 10

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

Kenji Okabe Photography

Dgada 32

Daga 12

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

企業ブログのデザイン

STANDARD inc

Dgada 37

Dgada 36

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

dwango creator’s blog

Fdaa

Dga 7

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

mimi-Sansan Official Blog-

Daga 18

Dga 8

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

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

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

Google Blog

Afa

Daga 13

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

Volkshotel

Daga 14

Dfada

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

Zoella

Daga 19

Daga 20

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

CODE MY VIEWS

Daga 17

Dada 1

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

InvisionApp

Google Chrome

Dgada 38

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

Microsoft Story Labs

Daga

Dada 2

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

MIKE ANDERSON.

Dada 3

Dada 4

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

NOVEMBER

Daga 2

Daga 1

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

まとめ

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

同じカテゴリーの記事
同じカテゴリーの記事一覧
デザイン参考
サルワカ