ブログデザインは、自分のブログの印象を決める重要な部分ですよね。
だからこそ、力を入れたい。
けど、おしゃれなブログを作ろうということに、ハードルが高いと感じている人が多いと思います。
僕もそのように感じていた一人です。
しかし、いざ勉強を始めると良いデザインにはきちんと理論があるように感じました。
是非ともそれをみなさんにも知っていただきたい。
そこで、今回は僕がブログデザインの勉強をする上で参考にしたコンテンツを項目ごとに紹介していきたいと思います。
レイアウト
Webデザインのセオリーを学ぼう | SlideShare
http://www.slideshare.net/shirokuro331/web-11608357
こちらの記事はWebデザイン全般のことに書かれたスライドなのですが、特にレイアウトの部分に力を入れています。
主にノンデザイナーズ・デザインブックという書籍の内容を、分かりやすくスライドにまとめてあり、サラッと目を通すことができます。
タイトルの通り、デザインのセオリーとなる部分なので、これを理解しているのとしていないのとでデザインとしての見やすさ・魅力が大きく変わります。
一度確認しておくのがいいですね。
もっと詳しくしっかり学びたいという人は実際にノンデザイナーズ・デザインブックを読むといいと思います。
ただ、スライド自体の完成度が非常に高いので、まずはそちらをご覧になるのがいいかと思います。
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン | コリス
こちらの記事では、Webページでよく使われるレイアウトをまとめてくれています。
非常に一般的なレイアウトですので、今後も使われていくようなものばかりです。
基本を押さえるという意味で、一度確認するのがいいですね。
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン | コリス
ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ | Webクリエイターボックス
http://www.webcreatorbox.com/inspiration/wireframe-to-design/
型にとらわれたデザイン（レイアウト）になりがちというのは、自分もかなり思っていたこと。
もちろんごちゃごちゃになってしまうのはダメだけど、ちょっとしたアイデアで魅力的にできるものなんですよね。
そんなちょっとしたアイデアを学ぶことができる記事です。
ここから自分のアイデアに派生していけると最高ですね！
ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ | Webクリエイターボックス
配色
色彩センスのいらない配色講座 | SlideShare
http://www.slideshare.net/marippe/ss-9003317
このスライドでは、色の基本的な概念・配色理論についてわかりやすくまとめてくれています。
一番基本となる部分とも言えますね。
「配色センスのいらない」という言葉通り、きちんと理論立てて説明してくれますので、初心者にも安心です。
まずはここから入ってみるのがいいですね。
ノンデザイナーのための配色理論 | SlideShare
http://www.slideshare.net/saucerjp/ss-14902681
このスライドでは「調和のとれた色」の選び方について解説してくれています。
非常に良いポイントなのが、なぜ色選びに失敗するのかを丁寧に教えてくれていること。
その上で、配色理論について先人の理論に基づいて、ノンデザイナーにわかりやすくまとめてくれています。
アプリまで作ってあり、非常にありがたい。
同色系でまとまりのある配色、WebデザインにするためのTips | Web Design RECIPES
http://webdesignrecipes.com/monochromatic-website-designs-tips/
こちらはタイトルの通り、同系色で配色をしたい時の参考になる記事です。
例、色の特徴、配色のポイントについて丁寧に説明してくれています。
同系色のデザインは簡単なように見えて、魅力的にするのが非常に難しい。
その届くようで届かないポイントまで押さえている良記事です。
配色に役立つ便利なWebサービスも紹介してくれています。
同色系でまとまりのある配色、WebデザインにするためのTips
Webデザイナー向け配色ガイド！すぐに役立つカラーパレット50個まとめ | PhotoshopVIP
http://photoshopvip.net/archives/86191
色々理論的に勉強しても、なかなか実践できるところまではいかない。
そんな時には実際にWebサイトで使われている配色を参考にしてみるのがいいかもしれません。
この記事では、参考になる美しい配色を、カラーパレットとして紹介してくれています。
気に入った配色が見つかるかもしれませんよ！
PhotoshopVIPではこの他にも多くのカラーパレットを紹介してくれているので、そちらまで見てみてもいいかもしれませんね！
Webデザイナー向け配色ガイド！すぐに役立つカラーパレット50個まとめ - PhotoshopVIP
もう配色デザインには迷わない！すごい無料カラーツール13個まとめ | PhotoshopVIP
http://photoshopvip.net/archives/72189
この記事では、難しい配色を手軽にできるような無料のツールを紹介してくれています。
13種類紹介してくれていますので、自分に合ったツールを見つけて使うのがいいですね！
もう配色デザインには迷わない！すごい無料カラーツール13個まとめ - PhotoshopVIP
フォント・タイポグラフィー
読みやすく | 伝わるデザイン
http://tsutawarudesign.web.fc2.com/yomiyasuku1.html
こちらのサイトでは、読みやすさに関する記事をいくつか出してくれています。
その中でも書体に関する記事が3つあります。
どれも非常に参考になるので、一度目を通しておくといいでしょう。
「Webデザイナーのためのタイポグラフィと文字組版」 | SlideShare
http://www.slideshare.net/swwwitch/web-10114816
こちらはデザインの中のテキストの重要性を訴える素晴らしいスライドです。
主に、文字の要素・組み方・バランスとフォントについて、みっちりと解説してくれます。
正直、ここまで真剣に考えたことがなかったので、非常に参考になりました。
はじめての欧文書体 | SlideShare
http://www.slideshare.net/shoheiitoh/ss-17245066
こちらのスライドでは、欧文書体について基本から実践までみっちり教えてくれています。
うまく取り入れるとオシャレでかっこいいデザインにできる欧文書体ですが、変な使い方をするとひどいことに。
そうならないためにも、ここで基本を学んでおくといいでしょう。
フォント組み合わせをマスター！デザイナーが知っておきたいウェブツール10個まとめ | PhotoshopVIP
http://photoshopvip.net/archives/87724
こちらの記事は、フォントの組み合わせ方の参考になるツールを紹介してくれています。
組み合わせだけでなく一つ一つのフォントも美しいですし、それぞれのフォントをどのように使えばいいのか参考になります。
一度試してみるといいですね。
フォント組み合わせをマスター！デザイナーが知っておきたいウェブツール10個まとめ - PhotoshopVIP
Web制作の手順
実践で学ぶWebサイト制作ガイド まとめ | Webクリエイターボックス
http://www.webcreatorbox.com/tech/create-website-guide/
こちらの記事ではWeb製作をする上での手順を、丁寧にまとめてくれています。
僕自身、完全なノンデザイナーなので、こういった内容を最初に学んでおけたのは非常に良かったです。
実践で学ぶWebサイト制作ガイド まとめ | Webクリエイターボックス
Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ | Web Design RECIPES
http://webdesignrecipes.com/web-development-flow/
こちらも、取り扱っているテーマは先ほどと同じなのですが、書く人が違うので少し違った視点で見れていいです。
こういう手順のようなものは、ある程度セオリーがありながらも、それぞれで気をつけている部分は違うものもあって面白いですね。
非常に参考になります。
Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ
コーディング小技
少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス
http://www.webcreatorbox.com/tech/css-tips20/
CSSの基本的なテクニックから、すごく便利！というものまで幅広く扱ってくれています。
初心者にも優しいコードが多い印象です。
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 | コムテブログ
http://commte.net/blog/archives/4861
こちらの記事では、Webサイトでよく使われているCSSの小技をまとめてくれています。
どうやって作っているんだろう？と悩むことがあるようなものも紹介してくれているので、非常にありがたいです。
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 | コムテブログ
今どきのウェブサイトをつくろう！差がつくHTML/CSSコードスニペット27個まとめ | PhotoshopVIP
http://photoshopvip.net/archives/86971
正直ブログデザインでここまでやるかな？というくらいの高度なものも多いですが、見てるだけでも面白いですね（笑）
けど中には、これ使いたい！というようなものもあります。
ものすごくおしゃれなデザインが作れるコード集です。
今どきのウェブサイトをつくろう！差がつくHTML/CSSコードスニペット27個まとめ - PhotoshopVIP
少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
http://www.webcreatorbox.com/tech/jquery-tips20/
先ほど紹介したWebクリエイターボックスさんの小技のjQuery版です。
基本的なものが多いですが、ブログという面では使い勝手のいいものも多く感じます。
便利です。
少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
まとめ
今回はブログデザインの参考になるコンテンツについて紹介しました。
僕自身、ものすごく参考にさせていただいた良コンテンツばかりです。
正直これだけでもかなりの基礎知識が身につきます。
ブログデザインをよくしたいという方は、ぜひ参考にしていただければと思います。
