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

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

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

http://www.thewildernessdowntown.com/

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

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

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

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

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

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つのステップ

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

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

最近小生がお世話になっている、ベクターデータのダウンロードサイト「123 FreeVectors」をご紹介します。

こんな感じのベクターデータが多量に手に入ります。

小生もブックマーク代わりに記事にしていますが、小生の周りのデザイナーさんはすでに知っていたみたいです。有名なんですかね？

123 FreeVector

NALDS GRAPHICSの40 Best Fonts for Better Typography Designsよりタイポグラフィデザインに最適なフリーフォントを紹介する記事がありましたので、ご紹介します。

個人的に気にいったフォントをいくつかピックアップしてみました。こういったフォントを40個紹介されているので、気になる方は下記よりご確認ください。

NALDS GRAPHICSの40 Best Fonts for Better Typography Designs

あほだなー。と思ったが面白かったのでご紹介。Nikon S60の広告。

LEGO Kitchen Islandよりご紹介

キッチンのリノベーションっていうのは大抵時間がかかる、というのは定説になりつつある。加えてそこに、"ちいさなちいさなブロック達"が関わってきたらどうだろう？膨大な時間がかかったことは間違いないが、「レゴで作られたキッチン」は思った異常に美しい。

Simon Pillard と Philippe Rossetti に"レゴキッチン"のアイデアが浮かんだのは約5年前、Pillard が500個のレゴブロックを使って、一日がかりで "レゴ脚"のイスを組み立てた時だ。デザインデュオ「Munchausen」として作品を作り出し、最近ではその一覧に新たな仲間を加えた。彼ら自身のシンプルな木のアイランドキッチンを、2万個のレゴブロックで覆って。

凄い昔の記事みたいだけど参考になったのでご紹介。WPdesignerより、上記のような良く海外のブログなんかで目にする月を日付のフォーマット。これをさくっと作る方法です。

<div class=”post-date”>
<div class=”month”><?php the_time(’M') ?></div>
<div class=”day”><?php the_time(’d') ?></div>
</div>

上記のようなコードを書いて対応します。画像は下記のような物を用意。

.post-date{
float: left;
display: inline;
margin: 0 10px 0 0;
background: url(images/date_button_template.gif) no-repeat;
}

あとは微調整ですね。 小生は一度この形の日付表示を試みて、どうしても細かい部分で問題起こりまくりだったので、辞めた経験がありますが、これならさくっといけそうですね。 また試してみようかなぁ。

小生、ユーザーインターフェースにはどうしても拘るたちなのですが、その中でもキーボードとマウスは絶対と言っていいくらい妥協を許さないと自負しています。キータッチの具合から、キー配列、大きさ、掃除のしやすさ、機能美。めちゃめちゃゴツイキーボードから、超シンプルなものからDellのデフォルトキーボードから、本当に色々試してきました。

そして、先日購入したキーボードArc Keyboardが、こうやってブログに書いてしまうくらい気に入ったので、一度ご紹介したいと思います。

小生は結構キーボードのデザインを見て衝動買いすることも多いのですが、ぶっちゃけ今回はそれでした。「あ、やべかっこいい」おまけに最近、会社は英語キーボード、家は日本語キーボードと行き来していたので、いい加減英語キーボードに直そうと検討していた最中だったのも大きいです。

ただ、買ってみてびっくり、とにかく小生の抱く理想のキータッチに本当にぴったり、ノートっぽいんだけど、ノートっぽくない。押してる感じはあるんだけど、抵抗はない。手全体を動かす必要もかなり少ないし、最小の労力でキーを押せている実感があります。

また、とにかく場所をとらない、元々、テンキーは小生には必要ない物だったし、無駄に場所をとっていた従来のキーボードに比べれば、今回購入したArcキーボードは以前にくらべ、配置するスペースにもだいぶ余裕が出てきました。後、軽いのでひざの上において作業なんかもできます。

元々北米の宣伝は女性はノートパソコンを机において遠隔でひざの上からノートパソコンを操作するような絵だったので、おそらくそういった意図もあるのでしょう。

加えて、小生はどうしても十字キーは超頻繁に使うタイプ。十字キーがなければ話になりません。では、十字キーはどこにあるかと言えば。

ここです。右下の１個のキーが十字に動いて十字キーの役割を果たします。かわいいですね。

ただ、一個懸念をあげるとしたら、またファンクションは１～６までで、 それ以上はFnキー＋で対応です。通常、ファンクションの６～１２まであるキー位置に、HomeやEndキーが配置されているんです。ちょっとファンクションキーはどこか別に置いて欲しかったですが、慣れれば苦はないのかなと思います。とにかく個人的には押しやすさが郡を抜いているので、許します（笑