「Webデザインレシピ」は素晴らしすぎるほどに分かりやすいブログという話

ご存知の方も多く、今更感あふれまくりですが、「Webデザインレシピ」というブログが素晴らしすぎます。デザイン初心者のためのデザインと文体の工夫が徹底されています！

Webデザインレシピ

f:id:Swatz:20130626220250j:plain:w400

はてなブログのデザインが分からず、CSSについて調べていた時、過去自分がブックマークした記事を探していました。その時に出会ったのが以下の記事。

これからWebサイトを制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド

これがもう良記事すぎるんですよね。ブックマークも2,000を超えてます。読んで改めて素晴らしいなあと思った次第でございます。

その素晴らしい理由はいくつもありますが、3つほど書かせて頂きます。回し者では全くなく、本当に素晴らしいサイトですので、書きたくなってしまいました。

構成が素晴らしい

まず目次から感動ものです。
f:id:Swatz:20130626222302j:plain

HTML⇒CSS⇒ブラウザ⇒グラフィック⇒サーバー⇒Javascript⇒JQuery・・・

と、どこから勉強するかをここまで明示してくれています。最初始める時に何から始めてどこまでやればいいのか、全体像がよく分からないもの。それを示してくれています。ここまでやってくれているサイトや本を他に知りません。

というか、一ブログ記事でこのコンテンツやるの！？と驚き隠せません。。普通これ一項目で1,2記事くらいのもんですよね。。それくらい内容詰まってる感がもうこの時点でするわけです。

そして読み進めるとわかりますが、ふんだんに画像が使われています。私のような初心者は文章だけのものなんて読む気さらさらしません。綺麗だけど意味のない画像ではなく、適切な画像を使われていて素晴らしいと思いました。

個人的に一番感動したのは「1.1. HTML は文書」で、例として紙に書いた文章をあげているのですが、本気で手書きで書いてます…。これも相当力入れないとできないですよね・・・。

文章が分かりやすい

構成もすごいですが、一つ一つの文章も初心者に配慮された言葉遣いをされています。例えば

Cascading Style Sheets（かすけーでぃんぐすたいるしーと）

些細なことのようですが、初心者にとってWebの言葉って耳慣れない暗号のようなものです。英語くらい読めんだろ、ではなく、ひらがなで読みをふってくれてるところに親切さがあふれています。

またところどころで「ちょっと難しく感じられるかもしれませんけど〜」と、用語や仕組みについていろいろな言い方をされています。本にあるような事務的な説明とは全然違って分かりやすい。なんか子供を諭す母親のようです。

それと装飾もバランスとれてていいなあと思いました。太字だけでなく、黄色のマーカーで強調されてい、何を読めばいいのかハッキリします。急いで確認したい時は助かります。

スマートフォンのブラウザで見ると更に感動

上記の記事、じつはスマホで見ていたのですが、感動しました。
f:id:Swatz:20130626224434p:plain:w300

「なんだろう、このボタンは」と、左下の+ボタンを押してみると・・・

f:id:Swatz:20130626224439p:plain:w300

な、なんだこりゃ！TwitterとFacebookとGoogle+のソーシャルボタン一覧がでてきたじゃあないか！これは「Path」というSNSのアプリでも同じ動きがあったなあと思いました。が、これブログです。アプリでもなくブラウザです。すげえ。

そしてソーシャルボタン以外のもうひとつのボタンを押すと…。

…試してみてください。

スマホにも完全対応されていて、読みやすいこと極まりなし。iPadでも完璧でした。各ブラウザでも確認済みなのでしょうね。。徹底されています。

「Webデザインレシピ」おすすめ記事一覧

という感じで、この「Webデザインレシピ」は、私含めたWeb初心者が是非読み続けたいブログランキングの一位じゃあないでしょうか。

その「Webデザインレシピ」の人気記事をご紹介させていただきます。一緒に勉強していきましょう。

WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）

デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

デザインの基礎力をワンランクアップしたい私（Webデザイナー）の注意書き

これからIllustratorを始めてみようという人のための基本操作とかいろいろ

CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方

Photoshop初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め

WordPress で Web製作をしたいけど、PHP はまだちょっと … という人の PHP ガイド

どのプログラム言語を覚えればいいのか分からないっていう初心者さんのためのガイド（Web）