読者です 読者をやめる 読者になる 読者になる

いつ俺〜いつから俺ができないと錯覚していた?〜

学生ブロガー。大学院でプログラミングを専攻している。日本のプログラミング教育に疑念を抱く。

ブログデザインの勉強で参考になる記事・スライドまとめ【18選】

Webデザイン

f:id:shun_prog0929:20160315001827j:plain

 

ブログデザインは、自分のブログの印象を決める重要な部分ですよね。

だからこそ、力を入れたい。

けど、おしゃれなブログを作ろうということに、ハードルが高いと感じている人が多いと思います。

僕もそのように感じていた一人です。

しかし、いざ勉強を始めると良いデザインにはきちんと理論があるように感じました。

是非ともそれをみなさんにも知っていただきたい。

そこで、今回は僕がブログデザインの勉強をする上で参考にしたコンテンツを項目ごとに紹介していきたいと思います。

 

 

レイアウト

Webデザインのセオリーを学ぼう | SlideShare

f:id:shun_prog0929:20160313110205j:plain

http://www.slideshare.net/shirokuro331/web-11608357

 

こちらの記事はWebデザイン全般のことに書かれたスライドなのですが、特にレイアウトの部分に力を入れています。

主にノンデザイナーズ・デザインブックという書籍の内容を、分かりやすくスライドにまとめてあり、サラッと目を通すことができます。

タイトルの通り、デザインのセオリーとなる部分なので、これを理解しているのとしていないのとでデザインとしての見やすさ・魅力が大きく変わります。

一度確認しておくのがいいですね。 

 

もっと詳しくしっかり学びたいという人は実際にノンデザイナーズ・デザインブックを読むといいと思います。

 

 

ただ、スライド自体の完成度が非常に高いので、まずはそちらをご覧になるのがいいかと思います。

 

Webデザインのセオリーを学ぼう

 

ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン | コリス

f:id:shun_prog0929:20160313113605j:plain

http://coliss.com/articles/build-websites/operation/design/10-evergreen-website-layouts-by-speckyboy.html

 

こちらの記事では、Webページでよく使われるレイアウトをまとめてくれています。

非常に一般的なレイアウトですので、今後も使われていくようなものばかりです。

基本を押さえるという意味で、一度確認するのがいいですね。 

 

ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン | コリス

 

ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ | Webクリエイターボックス

f:id:shun_prog0929:20160313104027j:plain

http://www.webcreatorbox.com/inspiration/wireframe-to-design/

 

型にとらわれたデザイン(レイアウト)になりがちというのは、自分もかなり思っていたこと。

もちろんごちゃごちゃになってしまうのはダメだけど、ちょっとしたアイデアで魅力的にできるものなんですよね。

そんなちょっとしたアイデアを学ぶことができる記事です。

ここから自分のアイデアに派生していけると最高ですね! 

 

ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ | Webクリエイターボックス 

 

配色

色彩センスのいらない配色講座 | SlideShare

f:id:shun_prog0929:20160313115413j:plain

http://www.slideshare.net/marippe/ss-9003317

 

このスライドでは、色の基本的な概念・配色理論についてわかりやすくまとめてくれています。

一番基本となる部分とも言えますね。

「配色センスのいらない」という言葉通り、きちんと理論立てて説明してくれますので、初心者にも安心です。

まずはここから入ってみるのがいいですね。

 

色彩センスのいらない配色講座

 

ノンデザイナーのための配色理論 | SlideShare

f:id:shun_prog0929:20160313114617j:plain

http://www.slideshare.net/saucerjp/ss-14902681

 

このスライドでは「調和のとれた色」の選び方について解説してくれています。

非常に良いポイントなのが、なぜ色選びに失敗するのかを丁寧に教えてくれていること。

その上で、配色理論について先人の理論に基づいて、ノンデザイナーにわかりやすくまとめてくれています。

アプリまで作ってあり、非常にありがたい。

 

ノンデザイナーのための配色理論

 

同色系でまとまりのある配色、WebデザインにするためのTips | Web Design RECIPES

f:id:shun_prog0929:20160313120111j:plain

http://webdesignrecipes.com/monochromatic-website-designs-tips/

 

こちらはタイトルの通り、同系色で配色をしたい時の参考になる記事です。

例、色の特徴、配色のポイントについて丁寧に説明してくれています。

同系色のデザインは簡単なように見えて、魅力的にするのが非常に難しい。

その届くようで届かないポイントまで押さえている良記事です。

配色に役立つ便利なWebサービスも紹介してくれています。

 

同色系でまとまりのある配色、WebデザインにするためのTips

 

Webデザイナー向け配色ガイド!すぐに役立つカラーパレット50個まとめ | PhotoshopVIP

f:id:shun_prog0929:20160313122132j:plain

http://photoshopvip.net/archives/86191

 

色々理論的に勉強しても、なかなか実践できるところまではいかない。

そんな時には実際にWebサイトで使われている配色を参考にしてみるのがいいかもしれません。

この記事では、参考になる美しい配色を、カラーパレットとして紹介してくれています。

気に入った配色が見つかるかもしれませんよ!

PhotoshopVIPではこの他にも多くのカラーパレットを紹介してくれているので、そちらまで見てみてもいいかもしれませんね! 

 

Webデザイナー向け配色ガイド!すぐに役立つカラーパレット50個まとめ - PhotoshopVIP

 

もう配色デザインには迷わない!すごい無料カラーツール13個まとめ | PhotoshopVIP

f:id:shun_prog0929:20160313122809j:plain

http://photoshopvip.net/archives/72189

 

この記事では、難しい配色を手軽にできるような無料のツールを紹介してくれています。

13種類紹介してくれていますので、自分に合ったツールを見つけて使うのがいいですね!

 

もう配色デザインには迷わない!すごい無料カラーツール13個まとめ - PhotoshopVIP

 

フォント・タイポグラフィー

読みやすく | 伝わるデザイン

f:id:shun_prog0929:20160313131405j:plain

http://tsutawarudesign.web.fc2.com/yomiyasuku1.html

 

こちらのサイトでは、読みやすさに関する記事をいくつか出してくれています。

その中でも書体に関する記事が3つあります。

どれも非常に参考になるので、一度目を通しておくといいでしょう。

 

「Webデザイナーのためのタイポグラフィと文字組版」 | SlideShare

f:id:shun_prog0929:20160313124653j:plain

http://www.slideshare.net/swwwitch/web-10114816

 

こちらはデザインの中のテキストの重要性を訴える素晴らしいスライドです。

主に、文字の要素・組み方・バランスとフォントについて、みっちりと解説してくれます。

正直、ここまで真剣に考えたことがなかったので、非常に参考になりました。

 

「Webデザイナーのためのタイポグラフィと文字組版」

 

はじめての欧文書体 | SlideShare

f:id:shun_prog0929:20160313125830j:plain

http://www.slideshare.net/shoheiitoh/ss-17245066

 

こちらのスライドでは、欧文書体について基本から実践までみっちり教えてくれています。

うまく取り入れるとオシャレでかっこいいデザインにできる欧文書体ですが、変な使い方をするとひどいことに。

そうならないためにも、ここで基本を学んでおくといいでしょう。

 

はじめての欧文書体

 

フォント組み合わせをマスター!デザイナーが知っておきたいウェブツール10個まとめ | PhotoshopVIP

f:id:shun_prog0929:20160313130459j:plain

http://photoshopvip.net/archives/87724

 

こちらの記事は、フォントの組み合わせ方の参考になるツールを紹介してくれています。

組み合わせだけでなく一つ一つのフォントも美しいですし、それぞれのフォントをどのように使えばいいのか参考になります。

一度試してみるといいですね。

 

フォント組み合わせをマスター!デザイナーが知っておきたいウェブツール10個まとめ - PhotoshopVIP

 

Web制作の手順

実践で学ぶWebサイト制作ガイド まとめ | Webクリエイターボックス

f:id:shun_prog0929:20160313132842j:plain

http://www.webcreatorbox.com/tech/create-website-guide/

 

こちらの記事ではWeb製作をする上での手順を、丁寧にまとめてくれています。

僕自身、完全なノンデザイナーなので、こういった内容を最初に学んでおけたのは非常に良かったです。

 

実践で学ぶWebサイト制作ガイド まとめ | Webクリエイターボックス

 

Webデザイナー(私)によるWeb制作のときに気をつけてることや制作フローとかいろいろ | Web Design RECIPES

f:id:shun_prog0929:20160313134408j:plain

http://webdesignrecipes.com/web-development-flow/

 

こちらも、取り扱っているテーマは先ほどと同じなのですが、書く人が違うので少し違った視点で見れていいです。

こういう手順のようなものは、ある程度セオリーがありながらも、それぞれで気をつけている部分は違うものもあって面白いですね。

非常に参考になります。 

 

Webデザイナー(私)によるWeb制作のときに気をつけてることや制作フローとかいろいろ

 

コーディング小技

少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

f:id:shun_prog0929:20160313135918j:plain

http://www.webcreatorbox.com/tech/css-tips20/

 

CSSの基本的なテクニックから、すごく便利!というものまで幅広く扱ってくれています。

初心者にも優しいコードが多い印象です。

 

 

 

知っておくと便利!あのサイトでさりげなく使われていたCSS小技集 | コムテブログ

f:id:shun_prog0929:20160313135238j:plain

http://commte.net/blog/archives/4861

 

こちらの記事では、Webサイトでよく使われているCSSの小技をまとめてくれています。

どうやって作っているんだろう?と悩むことがあるようなものも紹介してくれているので、非常にありがたいです。

 

知っておくと便利!あのサイトでさりげなく使われていたCSS小技集 | コムテブログ

  

今どきのウェブサイトをつくろう!差がつくHTML/CSSコードスニペット27個まとめ | PhotoshopVIP

f:id:shun_prog0929:20160313140332j:plain

http://photoshopvip.net/archives/86971

 

正直ブログデザインでここまでやるかな?というくらいの高度なものも多いですが、見てるだけでも面白いですね(笑)

けど中には、これ使いたい!というようなものもあります。

ものすごくおしゃれなデザインが作れるコード集です。

 

今どきのウェブサイトをつくろう!差がつくHTML/CSSコードスニペット27個まとめ - PhotoshopVIP

 

少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス

f:id:shun_prog0929:20160313140857j:plain

http://www.webcreatorbox.com/tech/jquery-tips20/

 

先ほど紹介したWebクリエイターボックスさんの小技のjQuery版です。

基本的なものが多いですが、ブログという面では使い勝手のいいものも多く感じます。

便利です。

 

少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス

 

まとめ

今回はブログデザインの参考になるコンテンツについて紹介しました。

僕自身、ものすごく参考にさせていただいた良コンテンツばかりです。

正直これだけでもかなりの基礎知識が身につきます。

ブログデザインをよくしたいという方は、ぜひ参考にしていただければと思います。