いやー、久々にびっくりしましたね。これは初めて2advancedのサイトを見たときくらいびっくりしました。

小生の同僚に教えてもらったのですが、Google ChromeとHTML5を使ったサイトを公開したと聞き、「またか・・」くらいの気持ちで見ていたのですが、これはすごい！

口で説明するのも面倒なので、まずはChromeで下記URLをクリック。住所を入れて再生してみてください。（ストリートビュー対応の地域を推奨します。）

http://www.thewildernessdowntown.com/

さて、小生は本を読むのは大好きですが、量は多い方ではありません。速読とか、１日に１冊読むとか、絶対にできないので、せいぜい1ヶ月に1冊とかが限界です。

でも、胸を張って言えるのは、読んできた本全ては「自分の糧になっている」ということです。

今回は、何のために本を読むのか、そんな自分を振り返りながら、小生なりに頭をひねって考えた「3度読み」についてご紹介。今回は、自己啓発や自伝、ビジネス本やハウツー本なんかを中心に読む人向け（だと思う・・・）です。

もちろん、読む本を選ぶのは注意が必要だとは思いますが、ここでは触れません。それはまた次の機会にでも。

そもそも、何のために本を読むのか

よくいますね。本を読んだ量を自慢して、その本で何を得たのかを言えない人。

小生の場合、なんで本を読むのかといえば、なんとなく試験中に見るカンニングペーパーを用意するのに近い感覚があります。まぁ、厳密に言えば全然違ったりするのですが、自分だけの知識や情報だけではどうしても超えられない壁、もしくは境遇にぶち当たった時。「あぁ、○○さんの本では、こういう時、こういう思考法で、こういう心境で対応できるって書いてたっけ。」みたいな。

自分が純粋に得ることのできる知識や情報なんか、限りがあるに決まってるんですから、先人の知恵を拝借しない手はありません。

小生なんかより沢山考えて、沢山悩んで、沢山の人から話しを聞いて書かれた本に、小生が持っている以上の知識や情報が書かれていることは良くあって当たり前です。

だから、人生、色んな場面で遭遇する課題（試験）に対応するためのカンニングペーパーを作る感覚で、小生は本を読んでいるんですね。

第1回 - 掴み編

「3度読み」とか言うのだから、3回読むんだということは容易に想像できるかと思いますが、その一回一回の意味と役割が大きく違います。

まずは本を手にして、最初に読む時、この時は「とにかく本の内容を掴む」という事を意識して読み進めています。

筆者が何を意識して本を書いており、何を意図して、何を伝えたいくて、どんな解決策があるのか。よく、「自分の必要な部分だけ読めば良い」と本を沢山読む人は言いますが、そんなの小生には無理です。

例えば、思考術系の本なんかはまさにそうですが、通して読んでみないと、メリット、デメリット、周りへの影響や、事例。その全てを読まずして、メリットだけに目を通したとしても何の意味も有りません。

まずは、休憩や間を開けることは仕方ないにしても、とにかく通して一度全部の文章を読んでみることが小生としては重要なんだと思っています。頭の片隅には、著者への礼儀みたいな感覚もありますが、それはまたどこかの機会で。

この時重要なのは、付箋だとか、線引きだとか、自分の訳に立ちそうな部分を強調する作業を行わないことです。

まずは、全体の内容を網羅することが大事だと思っています。

第2回 - 会話編

続いて、2回目の読書に入ります。今回は読んだ本の中から気になった部分をピックアップしていきます。

この時は超流し読みで構いません。見出しと内容を簡単に確認する程度で大丈夫。一度全部を通して読んでみれば分かると思いますが、見出しだけ見てみれば、「あぁ、こういう事について書かれていたな。」と、かなりの割合ではっきりと分かります。

しかも、一度通して読んでいるわけですから、気になる見出しや内容があれば、それに対する事例やメリット、デメリットも詳しく読み進めなくても見えきますし、自分がどの部分が気になったか、何故気になったのか、という部分が直ぐに分かり、本当に自分に必要な部分をピックアップすることが出来ます。

この2回目の読書の際には、付箋や線引きを大活用します。

1度読み進めた後に行うこの作業は、一回目に行う付箋や線引きとは格段の差があり、本当に大事な部分と、その内容が指し示す意図をきっちり網羅して認識することができます。

2回目の読書では、読んでいる本が自分に取ってどうプラスになるのか、メリット、デメリットは何か、その部分を網羅することに徹底的に集中。

名言、方法論、持論、事例、実践。気になった部分には全部付箋 or 線引きです。

また、小生はこの時、読んでいる本と会話するように付箋や線引きを行うことを意識しています。

「この部分は、●●なメリットがあるけど、〇〇なデメリットもあるんだったよねー。」

とか

「この事例は後に書かれている、〇〇でも応用出来るよねー」

とか。

本と会話するなんてキモイ？痛い人？なんとでも呼んでください。

第3回 - 分別編

さぁ、最後です。この時は主に付箋や線引きをした部分だけ読み返します。

加えて、三回目は、白紙を一枚用意します。

この紙を3つのエリアに分別して、「行動」、「目標」、「知識」の3つに分けます。

「行動」のエリアは、実際に自分が普段の生活や仕事で行動に移すことの出来る事を書き出します。ハウツー本何かだと、実際の生活の中でどういう風に行動に移すか。といった具合でしょうか。

「目標」は、その強調した文章が指す目的や意思を書き記します。その本に書かれている事を実践すると、どうなるか、何が得られるかを書き出します。

「知識」は、例えば名言、助言、事例等、例えばプレゼン何かの時に流用できそうなことなんかを書き記していきます。

ここまで来たら、見返す時がこない限り、もう本は必要ありません。

その一枚の紙切れの中に、自分が必要としていたこと、今後役立つこと、自分の将来像。それらが全て詰まっているはずなのですから。

アナタのその本から導き出される知識や将来像が、その一枚の紙切れの中に詰まっていると言っても過言ではありません。

さて、いかがでしょう。別にこの読書の方法を全国に広めようとか、そんな志を持っているわけではないのですが、もし、アナタがこれまで読んできた本から何が得られているのか分からない。もしくは、本の山だけ積まれていき、自分の糧になっていないと感じているのであれば。本を読む量は激減してしまいますが、この「3度読み」をお勧め致します。

逆に、これに速読法とかが加われば最強かもと思わなくも無いのですが。小生はやっぱり急がずじっくりその本と語り合いたいので、たとえ速読法を学んだとしても、たぶん使わないと思います。

では、素晴らしい読書ライフをエンジョイしてください。

2008年、2009年に引き続き、今年も見てきました、ゲイパレード。

もう説明は面倒臭いので、ゲイパレードって何？という人は、2008年のゲイパレードと、2009年のゲイパレードの時の記事をご覧ください。

相変わらず、賑やかなイベントになりました。

あいっかわらず楽しそうですね。

前から撮影すると、色々問題がありそうだったので、とりあえず後ろから。ほぼ素っ裸な人が一杯。。。

それから、今回は動画メインで撮影していました。

以下はPhoto by Lila. Thank you for your kindness!!

子供だって参加します。

何度も言いますが、どんだけ楽しいんだよ。

きわどいです。ひじょーにきわどいです。

今年は去年に比べれば大人しかったような気がしますが、何かあったのでしょうか。

まぁ、正直小生は結構遅刻してパレードに向かったので、もしかしたら既に佳境が過ぎた後だったのかもしれませんね。

ウェブサイトを作る時、小さい会社だろうが、大きい会社だろうが、大体の場合その企業のコーポレートカラーという物が存在します。

デザイナーにもまた、得意とする色や色相が有ることが多く、見る人によって色に感じる感覚や意識もバラバラです。

そんな時、小生は、他にその色で作っているウェブサイトが無いかを探して、参考にすることが多いんですね。見るサイトによっては思いもよらぬ色使いをしているサイトもありますし、それが自分のインスピレーションを刺激することもしばしです。

今日は、そんな小生がいつもお世話になっている、色毎に良質なサイトを集めたショーケースや、ウェブサイトコレクションをご紹介します。

赤 - 精神や物事の盛り上がりを表す

50 Red Web Designs to Inspire You

茶 - 「豊穣」「豊沃」を、季節では「秋」を表す

50 Beautifully Brown Web Designs

黄 - 皇帝・皇位を表す

50 Yellow Web Designs to Inspire You

青 - 「希望」「冷静」のイメージを伴う

55 Beautifully Blue Web Designs to Inspire You

緑 - 「安全」「成長」「少年」「幼稚」のイメージを伴う

Web Design Inspiration: 40 Green Themed Websites

白黒 - 「無」と「有」の象徴

10 Monochrome Websites

16 Monochrome Websites

57 Beautiful Black and White Websites

先日、仮説思考という本を読みました。「仮説から始めれば作業量は激減する」というブックカバーの言葉に触発され、衝動買いして即効amazonで海外発送した本でしたが、効率化を意識しはじめた小生にとって、かなりの良本でしたね。

この本は思考方法についての本でしたが、作業を効率化させる、それは思考術はもちろん、周りに転がっているツールや情報を知っているか知らないかでもまた大きく変わることでしょう。

今日は、そんな「作業効率向上」に視野を当てた、小生のブックマークをご紹介いたします。

小生のTwitterアカウントでは、毎日小生のブックマークが自動投稿されるようになっているので、こちらもフォローしておいてくれると嬉しいです。

モックアップ／ワイヤーフレーム／構成書作成編

世界中のクリエイターがどういうワイヤーフレームを描いているか参考にしよう！

• 18 Great Examples of Sketched UI Wireframes and Mockups

ワイヤーフレームのテンプレートはここからダウンロード！

• 10 Free Printable Web Design Wireframing Templates

ワイヤーフレームの共有と作成はここで！

• Cacoo

• MockFlow

ワイヤーフレームのリソースはここで確保

• Download a Stencil Kit

• Wireframe Magnets DIY Kit

• User Interface - Graffletopia

• Mockups To Go

• Free Sketching & Wireframing Kit(フリーのワイヤーフレームキット)

その他、ワイヤーフレーム作りの参考になる記事達

• Webサイトの設計 - MDN Design
• 実践的インフォメーションアーキテクト論 - MDN Design
• ハイクオリティサイトのワイヤーフレーム分析 - マイコミジャーナル

デザイン編

デザインに入る前に、気をつけておいたいポイント

• ウェブデザインでこれは気をつけたいの35のポイント | コリス
• 15 Design Tips to Learn From Apple | Design Shack
• 日本語訳）Appleのデザイン戦略をウェブサイトから学ぶ、15のデザインヒント | コリス
• 10 Great Tips to Boost Creativity
• 日本語訳）ワンパターンなウェブデザインから抜け出すための10のヒント | コリス
• Web Design Trends for 2010(２０１０年のWEBデザイントレンド)

サイトのカラーを決めるのに役立つサイト

• 0to255

• ColoRotate: Colors come to life in 3D.

• Color of Book - 雑誌の色からhtml,cssで利用できるカラーチャートの紹介

• 「たかが色、されど色」 ヒトとWebと色の関係：MarkeZine（マーケジン）

配色毎に気をつけておきたいポイントを抑える

• ブラックベースの暗いウェブデザインで気をつけたいポイント | コリス

• 50 Beautifully Brown Web Designs | Inspiration(50の美しい茶色のウェブデザイン)

• 50 Yellow Web Designs to Inspire You(あなたにインスピレーションを与える50の黄色いウェブデザイン)

• 30 Red Websites | Color | Tutorial Blog

写真素材を集めるためのサイトをまとめているサイトまとめ

• 商用サイトでも無料の国内外のWeb制作に使える素材サイト総まとめ・2009 - かちびと.net
• 商用でも無料・ハイクオリティ・解像度高め、と3拍子揃った写真素材配布サイト・4freephotos - かちびと.net
• 商用サイトで使える無料の写真素材サイト 厳選まとめ | 日刊ウェブログ式
• 商用サイトでも制限無しで利用できる無料の写真素材サイト集 | コリス
• ダウンロードし放題 商用利用可能な写真素材サイトいっぱい | DesignWalker
• 色合いを指定するとそれっぽい素敵写真が探せる『Multicolr Search Lab』 | IDEA*IDEA
• 商用・非商用で使用できるフリーの写真素材サイト集 | コリス

デザインのリソースを確保するサイトまとめ

• WEBデザインをプロっぽく仕上げるPhotoshopのグラデーションファイルの厳選まとめ
• キラキラと輝くテクスチャ素材、620枚あつめました。(Photoshopチュートリアル付)

• 12000種以上のPhotoshopブラシをストックしている検索エンジン・FindBrushes
• A Myriad of Vintage Grunge Patterns From Across the Web(パターン素材色々)

• これは絶対覚えておいた方がよいシルエットの素材集

• Photoshopカスタム・シェイプいろいろ
• デザイナーのための素材サイト13選
• | ＾＾ |秒刊SUNDAY | アイコンの常識を凌駕する高クオリティフリーアイコン５０個

• 無料で使えるPhotoshopのプラグイン&フィルター720選『720 Free Photoshop Plugins And Filters』

デザインの効率を助けるサイトまとめのまとめ（のまとめ？）

• Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選 - かちびと.net
• 2009年、ウェブデザインに役立つまとめのまとめ | コリス

デザインの質を上げるちょっとしたTips色々

• グラデーションをより滑らかにするPhotoshopのチュートリアル | コリス
• ウェブデザインのエレメントを今風にデザインするPhotoshopのチュートリアル集 | コリス
• ウェブデザイン完全スタイルガイド2010（14カテゴリーに700サイト掲載）

コーディング編

コーディングに入る前に知っておくべきこと

• コーディング前に確認しておきたいこと。
• Google SEO、10のウソ
• あなたのウェブサイトを高速化する方法
• SEO対策に重要なMETAタグについて
• titleタグ、metaタグおよびURLの構造 - 『検索エンジン最適化の初心者ガイド』改訂版#4-2
• HTML 5 における HTML 4 からの変更点

コーダーには是非知っていて欲しい便利君達

• 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた

• gridr buildrrr(グリッドジェネレーター)

• CSS3を使用した美しいフォームが簡単に作成できる -FAARY
• 今風のウェブを作る際に使えるCSS/HTML/JSのテンプレ『Easy Front-End Framework』
• コーディングするのが楽になるかも？と思うCSSテクニックのまとめ
• とっても使えるoverflowプロパティ。その使い方色々。

企画／提案／ヒアリング編

• Webブランディングの企画のためのフレームワークを図にしてみた
• 40分でできるホームページ運営体制チェック ～40項目のセルフチェックシート
• “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1
• 逆提案で本命を覆す ユーザーの社是を実践
• プレゼンテーションを成功させるための9つのステップ

小生は、英語記事を見る方が機会としては多いですが、やはり日本人はすごいですね、大体日本語翻訳あります。というか、小生がどれだけコリスさんのサイトにお世話になっていたか、再認識しました。やはり、日本人なので、日本語で読みたいですし、アップが早い早い。

また半年ほど立ったらブックマークのまとめを行ないますので、その時はもっと有意義で効率的なブックマークが増えていることでしょう。

オフィスキューブ、大きい会社だと絶対にありますよね、パーティションで隔離されたようなあの自分だけの仕事空間。あの堅苦しい雰囲気を打破すべく、世界には様々なオフィスキューブを形どり、自分の空間を作ろうと切磋琢磨している人がいるようです。

小生の働く会社は、キューブ型じゃ無いですが、いつかはこういうオフィスっぽい環境で仕事したいとも思う今日この頃ですね。

では、その素晴らしいオフィスキューブのいくつかをご紹介します。

あぁ、きっとシュレッダーのゴミが好きなんですね。あの肌触りは小生も好きです。

書類は片付けないという信念みたいなのを持っている人っていますよね。究極はこうなるんでしょうか？

小生も、良く手元にポストイットがあればなと思う時がありますが、これはいいですね。いつでもメモできそうです。

大好きな男優さんでしょうかね？しかし、工作の才能はあまり無いようですが。

分かる、すっごくわかる。これが小生の中ではダントツ一位のオフィスキューブですね。

以上、いかがでしたでしょうか。

小生には到底理解できないオフィスキューブの数々でした。

最近、このブログがネタばかりになってきているのですが、あまり気にしていません。

だって、最近ネタ無いんですもん。

今回の元ネタ：21 Awesome Office Cube Pranks (PICS)

こんな感じだそうです。

元ネタ：なぜデベロッパーはIE6が嫌いなの？