Picture Picture(ピクチャーピクチャー)はカメラ、写真にまつわる素敵な情報をお届けするブログです。

参考にしたい!レスポンシブ×WordPress ブログ7選

今回の記事は、私、スタジオARCのデザイナー 山本カツヤが、Webデザインに関する内容でお届けします!

今や、「WordPress」という言葉は、Webにあまり詳しくない人でも、知っているかもしれません。
当ブログ(Picture Picture)でも使用している「WordPress」は、世界で一番使われているブログシステムです。

この「WordPress」で構築されており、かつPC・スマートフォンのどちらからでも、最適化されたレイアウトで閲覧できる「レスポンシブWebデザイン」を採用しているものの中から、私が「おおお!」と思った、デザイン性の高いブログを7つ紹介していきます。

Web技術に関する話も少しありますが、難しいことは書いてないのでご安心いただけると幸いです。

「レスポンシブWebデザイン」の定義

「レスポンシブWebデザイン」とは、ひとつのHTMLで、PC・タブレット・スマートフォンから、最適化されたレイアウトで閲覧できるWebサイトのことです。

本来、特定のスクリーン幅(ブレイクポイント)の時にレイアウトが切り替わるタイプのものは「レスポンシブ」とは言わなかったようなのですが、現在では、それも含めた広い意味で捉えられているようです。
レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみた。

当記事では、厳密な定義からは外れるかもしれませんが、同一のHTMLソースで、PC・タブレット・スマートフォンから、最適化されたレイアウトで閲覧できるものを「レスポンシブWebデザイン」として、紹介していきます。

ちなみに、今回紹介するすべてのブログですが、PCで閲覧している場合は、ブラウザのサイズを変更すれば、そのサイズに応じてレイアウトが変わるのを確認できますよ!
(このPicture×PictureもレスポンシブWebデザインなので、良かったら、ブラウザのサイズを変更してみてくださいね。)

picpic_res03
上記画像はGIFアニメーションです。

ブレイクポイントが4つのデザイン

NxWorld


nxworld

http://www.nxworld.net/

千葉でWeb屋をされている、Naoyaさんの運営するブログ「NxWorld」は、Webデザインに関するブログ。
海外の高品質なWeb素材や、Webサイトを紹介されていて、とても読み応えがあります。

特徴はシンプルで繊細なデザイン。
画像のサムネイルや、紹介サイトのキャプチャひとつにしても、クールでこだわりを感じます。
ボリュームのある記事に対しても、余白をうまく使っていて読みやすく、まさに計算されたデザインです。

ブレイクポイントは4つあり、PCからスマホまで、どんなデバイスからでもスムーズな閲覧が可能です!

Naoya(@nxworld_net)さんのTwitter

https://twitter.com/nxworld_net

freshtrax


freshtrax

http://blog.btrax.com/jp/

「freshtrax」は、グローバル展開を目指す企業をサポートする、コンサルティング会社「ビートラックス」さんが運営するブログです。

グリッドレイアウトに配置したコンテンツが、ヘッダーとフッターのグレーで引き締められ、スッキリと整然な印象のデザインとなっています。
マウスオンすると、サムネイル画像がズームする仕掛けもあり、グッと興味を惹きつけられますね。

グリッドに配したサムネイルの大きさも、4つのブレイクポイントで、それぞれ変化します。
大画面PCでも、タブレットでも、スマートフォンでも見やすいレイアウトなので、ぜひ確認してみてください。

btrax ビートラックス(@btrax_jp)さんのTwitter

https://twitter.com/btrax_jp

ブレイクポイントが3つのデザイン

tipsBear


tipsbear

http://tipsbear.com/

都内で働くWebデザイナー、MARINさんが運営する「tipsBear」はWebの技術をメインに紹介しているブログです。

Web技術のブログといえば、こむずかしい印象を受けがちなのですが、「tipsBear」は、デザインの力で、とても親しみやすくなっています。
角丸を使うことで柔らかさを演出していますし、ヘッダーとフッターに潜むクマのアイコンや、イラストも可愛らしいですね!(おっ、ソースコードにも・・・)

今回紹介する中では唯一の、ブレイクポイントが3つのブログです。
(ただし、記事ページのブレイクポイントは1つ)
ブレイクポイントごとにサムネイルと要約文の配置も変わり、各デバイスで個別にデザインを用意したかのように、見事にキマっていますね!

MARIN(@ku_marin)さんのTwitter

https://twitter.com/ku_marin

ブレイクポイントが2つのデザイン

Lopan.jp


lopan

http://lopan.jp/

DTPからWebデザイナーへと転身を遂げた経歴をもつ、「_watercolor (アンダーバーウォーターカラー) 」きむらあつとしさん運営の「Lopan.jp」。

まず、目を引くのはトップページの平行四辺形型のサムネイルですね!
こういった形を使うと、全体のデザインバランスが非常に難しくなると思うのですが、それを感じさせない絶妙なレイアウトです。

また、フォントにもこだわっていて、見出しや英数字を細かく分けて指定されています。
Webフォントも使っており、Mac環境でもWindows環境でも、統一された雰囲気に仕上がっていますね!

トップページのブレイクポイントは2つで、平行四辺形のサムネイルはどのデバイスから見ても健在です。
記事の個別ページは1カラムになるので、どんな閲覧環境でもシームレスにフィットしますね。

きむらあつとし(@_watercolor )さんのTwitter

https://twitter.com/_watercolor

creative memomemo


memomemo

http://creativememomemo.com/

名古屋のWebデザイナー、井畑テツヤさんが運営するクリエイティブなメモブログ「creative memomemo」。

「メモ」という名とは裏腹に、技術からWebサービスの紹介まで、記事の内容は非常に充実しています。
中には、HTMLタグの英語の音声にまでリンクしている丁寧な記事も書かれています。
私は読者にここまで配慮したブログ記事を見たのは、はじめてかもしれません!

サイト上部にランダムに表示される名言的なつぶやきも面白いですね。
ブログデザインはシンプルながら、クリップや帯のアイテムが、ブログタイトル通りのメモらしいコンセプトを感じさせます。

タブレット以下のスクリーンサイズで閲覧すると、サイドメニューが下へ回り込みます。
4つあるカテゴリーの並び方が、それぞれの幅に対して適宜変わる点は、なかなか見ものですよ!

なお、サイト内のリンク遷移時には、必要な部分のみ読み込む「pjax」といわれる技術を使用しています。
そのおかげで読み込み時間が短く、スマートフォンでもサクサク閲覧できますね。

井畑テツヤ(@tihat)さんのTwitter

https://twitter.com/tihata

KATOSHUN.com A40


katoshun

http://katoshun.com/blog/

30代からWeb業界に転職したというWebデザイナー、加藤 俊司さんのブログ「A40」。

加藤さんはこれまで「レスポンシブWebデザイン」に関するセミナーや、書籍の執筆なども行ってきており、レスポンシブWebデザインを集めたギャラリーサイトも運営しています。
まさに、レスポンシブのスペシャリストといえる方ではないでしょうか。

そんな実績に裏付けされたブログ「A40」のデザインは、グリッドを意識したレイアウトに、淡めのトーンの配色で、非常にスタイリッシュ。

ブレイクポイントは2つで、タブレット以下のスクリーン幅では、両サイドにあるナビゲーションとサイドメニューが、それぞれ上下に移動します。
しっかりとデバイスを考慮したコンテンツ配置となっており、記事も非常に読みやすいですね。

A40 加藤 俊司(@katoshun_com)さんのTwitter

https://twitter.com/katoshun_com

ブレイクポイントが1つのデザイン

mog-mog


mogmog

http://mog-mog.me/

東京・長野を中心に、各地のおいしい食べ物を紹介するブログサイト「mog-mog(もぐもぐ)」。

手書き風のロゴ、スプーンとフォークのキャラクター、ゴハンのアイコンなど、素朴な手作り感のあるアイテムは強く印象に残ります。
全体的にトーンを抑えた配色で、料理写真が一層引き立つブログデザインでもあります!

店内撮影はいろいろと制約がありそうなのですが、綺麗に掲載された料理写真をみていると、もれなくお腹が減ってきます!

ブレイクポイントは1つで、スマートフォンでの閲覧時にも、主役となる料理写真が小さく表示されることはありません。
デザインのバランスも崩れず、美味しそうな料理の雰囲気もきちんと伝わってきます・・・できれば関西方面のお店の情報も増やしてほしいところです!

スプーンくん(@mog_mog_me)のTwitter

https://twitter.com/mog_mog_me

まとめ

今回は、WordPressを使っており、かつ「レスポンシブWebデザイン」を採用しているブログに限定して紹介させていただきました。

ちなみに、「ワードプレス」と「レスポンシブ」を、キーワードの検索数の流行がわかる「Googleトレンド」で調べてみると、下記のようなグラフになっています。

google_trend

Googleトレンドでレポート全体を表示

「ワードプレス」は2007年3月ごろから、「レスポンシブ」に関しては、2011年10月ごろから、ずっと右肩上がりです。
これらのキーワードの検索数は、インターネットでの情報発信の増加及び、様々なモバイル端末の増加により、今後さらに伸びていくのではないでしょうか?

もしくは、「ワードプレス」「レスポンシブ」とは別の、新たなキーワードが生まれてくるのかもしれませんね。

ともかく今後、どんな端末・環境からでもスムーズに閲覧できるということは、ますます重要になっていくかと思います。

この記事が、「今まさにWordPressをカスタマイズをしている」という方や、「これからレスポンシブ化を考えている」という方の、お役に立てば幸いです!

山本 カツヤ

山本 カツヤ

餃子にニンニクは入れない草食系O型デザイナー。ゴールデンレトリバーを飼いたい。Webデザイン修行中です。

最初に紹介した通り、当ブログ「Picture Picture」もレスポンシブWebデザインを採用しています。
まだまだ改良の余地はあるので、私もこれらのブログを参考にして、デザインを改善していこうと思いました!

Twitterではブログの更新情報に限らず、Webのこと、カメラや写真に関することなど幅広くつぶやいていこうと思います!気に入っていただけましたら、お気軽にフォローください!

TOPへ