先日、仮説思考という本を読みました。「仮説から始めれば作業量は激減する」というブックカバーの言葉に触発され、衝動買いして即効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つのステップ

---

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

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

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

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

NALDS GRAPHICSの40 Best Fonts for Better Typography Designs

韓国かな？ Andrew Kim'sという人が作ったコカコーラのボトルデザインがやたらかっこいいと思ったのでご紹介。

詳細はこちらから。

最近、様々なデザイナーさんやデベロッパーさん、基本WEBが中心ですが色々お話を伺う機会が多いです。

デザインするという行為において、先人達の知恵や知識、作るまでの苦悩を知っておくのと知らないのとでは、作るものへの説得力も、知識も知恵も雲泥の差が生じます。 よほどのセンスの持ち主で無いかぎり、自分の作るデザインに説得力を持たせるには、まず、沢山のデザインを見ることが必要不可欠だと小生は考えています。 ロゴなんかまさにその典型。沢山のロゴに秘められたデザイナーの思いや、作り上げるまでの過程を知る、想像することで、より沢山の引き出しを自分自身にも課すことができるのです。 とういわけで、めちゃめちゃ集めてみました。ロゴを紹介しているサイトの数々。その中でも、得にクオリティや更新頻度の高いサイトをまずはご紹介します。

loged

LOVE DESIGN LOVE

lo8os

logotwo

Logo Faves

LogoMoose

spyrestudiosさんのGreat Examples Of Coming Soon Pages And How To Create Yoursというページからご紹介。

FavMovie

Designatr

Fontdeck

Better Blogger

Love Freelancing

EnStore

Media Loot

Pepsay

Birdboxx

Remindness

どれもこれも、すごいクオリティですね。空間の使い方が絶妙なのもあれば、イラストのクオリティをこれでもかと打ち出しているサイトもあれば、機能的な対策を採っているサイトもある。 貴方の作ろうとしているComing Soonはどんなタイプでしょうか？是非参考にしてみてください。

元ネタ。10 Techniques for a Fantastic Footer by Design Shackよりいくつか抜粋してご紹介。

１．主要ナビゲーションを取り入れる

２．トップに戻るボタンを付ける

３．コントラストを付ける

５．コンタクトを含める

１０．意味を持たせる

とりあえず、見れば分かりそうな物を先にご紹介。以前にも同じようなエントリーをどこかで見たけれど、忘れてしまいました。 フッターって、意外と頭悩ませる部分なんですよね、ユーザーがページの最後に何を求めるか、サイトによっても様々だとは思われますが、用途用途に合わせて、フッターのパターンを頭に入れておくと便利かもしれません。

年末年始にかけて、デザインチュートリアル、素材、ブラシ、テクニック系の紹介記事が余りに多く、小生の中でもまとめておこうと思いましたのでご紹介。 皆さん、本当に色んなこと知っていますねーと、年始から勝手にうんうん頷いていたわけです。

• Massive Collection of Over 1,000 Floral Photoshop Brushes
• The Best Photoshop Tutorials of 2009
• Create a Vivid Themed Illustration Using Simple Hand-Drawn Elements ? Part I
• 【デザイナー修行日記】 ウープスデザインの石嶋さんにいろいろ教わった！
• Creating a Set of Digital Painting Icons Part 5 ? Cityscape Display Icon
• シミの付いた茶色ペーパーテクスチャ18枚セット「18 Stained Brown Paper Textures」
• ストライプやドクロ、ダマスク柄、メタルなど36種類のパターンをまとめた「Pattern Pack 2」
• Creating a Modern, Glossy Mouse Icon in Photoshop
• クールなフォームのPhotoshopテンプレート集「Web Form Elements」
• 商用利用OK、ぼんやりとした光を撮影した美しいテクスチャ11枚集めました。
• 買い物したくなる、デザインがかわいい＆クールなウェブサイト30個まとめ
• Professional Hair Processing in Photoshop
  

実際はまだまだあるのですが、とりあえず本日はこれまで。

一度コラボしてみたかったのですが、カナダのバンクーバーで知り合ったスポーツカメラマンのShugo Takemi氏の写真を加工して壁紙を作ってみました。

とは言っても、小生のしたことなんて、ちょっと補正を入れた程度ですが、元の写真のクオリティが高かったので、いい感じに仕上がったかなと勝手に自負しています。ただ、「カナダ！」と思える写真が少ない気がしないでもないですが。そこはまた次回に。

壁紙作りも面白いですね。これもカナダの広大な土地がなせる業の一つでしょうか。

カナダ壁紙のダウンロードはTakemi Art Sportsさんのサイトからどうぞ。今後も少しずつアップしていきたいと思います。

co-workerが教えてくれた面白いコピペ。どっかからとってきたらしい。
【製品とは。】
　　　　_、,_
　① （⊂_　　ﾐ ドイツ人が発明
　↓
　② （ ´_⊃｀）　アメリカ人が製品化
　↓
　③ ﾐ　´_＞｀） イギリス人が投資
　↓
　④ ξ ・_>・） フランス人がデザイン
　↓
　⑤ （ ´U_,｀） イタリア人が宣伝
　↓
　⑥ （　´∀｀）　日本人が小型化に成功
　↓
　⑦ （ 　｀ハ´）　中国人が海賊版を作り
　↓　　　_,,_
　⑧ <ヽ｀д´> 韓国人が起源を主張する

多人種国家にいる小生としては非常に複雑な心境であり、おもしろいなーと思うこのごろでした。
とりあえずメモ代わりに投稿。

さて、最近企業ロゴやサイトやデザインをしてきて早数年。企業になぜデザインが必要かうまく説明できない自分がいるので、ちょっと考えを整理してみるメモ。

最近、「私達の会社にはデザインなんて必要ない。だって●●だから。」という話を耳にした。
様々な経営者の視点から見るデザインという物に対する考えや見方は大きく違う。
デザインが単なる表面上の整った体裁程度としてしか受け止めていない人があまりに多く、デザインビジネスとしての視点が抜け落ちているように感じている。
「デザインなんてデザイナーに任せておけばいい」このような考え方を持ち続けていては、どんなに優秀なデザイナーを雇ったところで、その人材はゴミと化すだろう。マーケティングや経営戦略に携わる観点からのデザインへの介入が必要なのだ。

よく営業職で古株の先輩に聞くが、「営業マンは第一印象がすべて、服装、髪型、容姿、第一印象で"任せられる！"と感じてもらえるナリが何より大事だ」と。
これは世界一般的に、「信頼できるナリ」というのが一般化されており、スーツにネクタイ、靴は磨いて歯は綺麗に、確かにこれらは信頼を勝ち取ることのできる第一印象だろう。

WEBトレンドマップ
なんとも、すさまじいものがありますな。
見てて思ったけど、craigslistってこっちではとにかく有名だけど、マップ上に掲載されてあるcraigslistってコレのことだよな。何がどう転じて世界に通用する広告媒体になったのか、非常に興味深いと思った。

That map is Web Trend Map. It is summarize for web trend.
You know, it is very correctness map in web world.
One example, please look craigslist of around wikipedia.
If you have interest about web trend in Canada, maybe you can crazy about it.

あ、そいえばめちゃめちゃ久しぶりの投稿だ。

10 Usability Tips for Web Designers

Simply put, usability is making your website easy for your visitors to find the information they need when they need it.

A common misconception about usability amongst web companies is that usability is expensive.

Yes, there are multi-national companies that spend thousands of dollars on usability tests and research, but for an everyday company usability is achievable without the knowledge of usability experts or without expensive equipment for testing.Web designers have an even easier job to do, just by reading usability articles they can accumulate a fairly good knowledge about usability basics and how to implement them on a website.

A tagline is a statement or a motto that represents a company's, or in our case a website's, philosophy and mission.It should be the most obvious element on a website's front page and it should clearly describe the website in one phrase.It should be the most obvious element on a website's front page and it should clearly describe the website in one phrase.
Statistics show that a website has just 8 seconds to capture a visitor's attention for them to browse the site further.
Without a clear tagline a website would have a hard time keeping visitors long enough to browse the inner pages.

先日小生が学生時代からお付き合いのあるデザイナー mayu氏がiGoogleにテーマの投稿をし、iGoogleディレクトリに登録されたので、ご紹介に預かりたいと思う。

[iGoogle theme] Simple Theme Black

mayu's site. by steadfaster.net

mayu氏は専門学時代からの付き合いになるが、非常に類稀なるセンスの持ち主で、mayu氏の方が小生より後から入学してきたにも関わらず、デザイン面で言えば背中も見せぬ成長力でそのセンスを開花させていったように感じられる。

iGoogleテーマの紹介文は小生がでしゃばると後々しかられそうなので、mayu氏ブログのsteadfaster.netから引用させていただくとする。

「Blackle」について説明しておくと、黒いGoogleを使ってエネルギーを節約しようというプロジェクト。Googleの背景を黒くするだけで、ディスプレイの特性上、年間750メガワットの節約になるそうです。750メガワットという量がピンとこなかったのですが、gigazineに書かれている

太陽光発電所ネットワークによると、「1kWの太陽光発電システムの年間発電量は約1000kWh」

これに近い電力が節電出来ると考えればいいのかもしれません。とはいっても懐疑的な意見もあるのですが、少しでも節電を心がける、その意識は大切です。

小生としてもシンプルに澄んだクオリティの高い作品だと思ったが、
はやり、デザインコンセプトがしっかりしているので、由来と基盤ができており、「デザイナーだなぁ」と改めて認識、「Blackle」プロジェクトの存在もこのテーマとして非常にマッチしており、納得のいくコンセプトメイキングだと思う。

・・・エライ、ええもん作るようになったなー。。（としみじみ

さて、少々脱線してしまったが、なにはともあれ友人として、はたまた同じ業界に立つ者としても、今回の一件は本当に小生自信の刺激にもなった。カナダに立つにあたりのささやかなプレゼントを貰った気分を味合わせていただいたことに、ここで氏に（一応）感謝しよう。

Congratulations Mr,mayu.

先日、知り合いがロレックスの時計を購入し、その色合いの美しいピンク混じりのゴールドに見とれてしまいました。
ロレックスに関してはあまりこれまで興味を持たなかったのですが、ロレックスは金属製造で特許をとっているのですね。

ロレックス・オフィシャルサイト

オフィシャルサイトでも紹介されているその金属の名前はエヴァーローズゴールド（EVEROSE GOLD）名前もかっこいいですね。デスモセディッチほどじゃないですが（ちなみにデスモセディッチはドイツのバイクメーカードゥカティが開発したエンジンの名前。小生の中で最も響くネーミングNo1。まぁこれはまたの機会に）。

世にある時計ブランドの中でも自分達の製法や技術についての価値をここまで提言しているロレックスはすごいと思う。よく巷なんかじゃ、「ブランド志向ってよくいうけどどれもいっしょジャーン」みたいなことをちらほら耳にするが、それは違う。

ブランドの提言に関しては社会的にも様々な責任が付きまとう、自分達がブランドを提言する"それ"には全責任を負わねば成らない。ロレックスなら金属加工と製造技術（かと思う）。ジャンルを越えてAMERICAN EXPRESSならハイクラスなサービスを提供するためのクレジットカードの位置づけ。挙げればキリがないのでここで切り上げるが、それらの理由から"自分達じゃないと提供できない何か"それに"社会的な責任を持てるか"がブランドの提言に当たる前提なんじゃないかと思う今日この頃である。

こういっちゃなんだが、最近のシニア世代は我々若者とよばれる世代が考えているよりいっそう進化している気がする。

つい最近、シニア層、富裕層をターゲットにした案件を受け持ったのだが、小生はそのときまで富裕層やシニア層をターゲットに置いたプロジェクトを受け持ったためしがない。
はじめ雲をもつかむ思いで自分の中に設定した「シニア層や富裕層対のユーザビリティ」の考えは以下だ。

・色相面では極力原色、不可視色面積は極力増やさない（見やすい色使い）
・合わせてフォントサイズの巨大化。デザイン面無視。
・ボタン認識効果と実装
・更新頻度の高さよりも文章構造の適切な処理と注意
・可能な限りの階層の均等化（やたらに深い階層を作らない）

上記面では別に富裕層だからとかシニアだからとかに接せず、当たり前の項目もいくつか記載したが、とりあえずこういった情報提示上の注意くらいは必要かと考えていた。

が、先日C-NETに面白い記事があったのを発見した

シニア層の「オンラインアルバムサービス」の認知度は7割以上--利用意向は4割弱

「シニア層にオンラインアルバム？知ってるかも知れないけど使わないっしょ、つか使えないっしょ？」そんなことはない、事実デジカメを例に取ると自宅プリンターでプリント処理は当たり前、HDDに保存し好きなときに見る。これだけでも小生の想像以上の行動だった。
また、オンラインアルバムの存在もシニア層は知っている割合は7割以上、使っている人は4割り程度いることになる。ここまででも非常に面白い情報なのだが、別に写真に特化した事例ではない。

携帯メーカーなんかもツーカー、らくらくフォンなどの”簡単操作”を売りにしたシニア向け携帯より、何気に最新機種の方に興味を示すという話も聞いたことがある。小生的にはまだまだシニアと団塊世代の境的な、65前後の人たちには最新携帯やデジカメ、更にはSNS参加といった若者世代に負けない活気と活力があるのではないかと最近考えはじめている。

SNSで言えば最近また面白い本を読んだ。ただしこれはシニアというより富裕層主体の話だったが。

富裕層はなぜYUCASEEに入るのか

近年、富裕層世代に向けたマーケティングは大手企業を例にいくつも登場してきた、レクサスなんかは小生が一番初めに想像出来た例だったが、この本ではなぜYUCASEEには富裕層が集まる仕組みを作る事ができ、レクサスに富裕層があまり見向かないのかが理解することが出来た。
そもそも我々の考えうる富裕層とは理想像に過ぎないこと、実際に求めるニーズとはもっと別にあるものだと理解するほうが良いだろう。お勧めの一冊だ。

すごいな。年始とはまったく関係ないが年明け早々感動したのがこいつだったので紹介。
真ん中をずっと見つめていてください。

いきなり話が飛んで、実は何気に注目しているコンペがありまして、

脳卒中啓発活動のシンボルマーク募集

どうも最近WEB系の話が少ないな、業界転移の時期でしょうか。

さて、タイトルの通り、ヒューマンインターフェースとはなんだ、ということについて面白い文書を見つけたのでご紹介。

アップル ヒューマンインタフェースガイドライン

とりあえず見てください。面白いですから。
小生が注目したのは製品即売云々はもちろん、翻訳文章だからちょっと難しい表現が多い中。

ヒューマンインタフェースデザインの章で紹介されている「ユーザの心のモデルを反映せよ」って翻訳文ですね。
時折忘れがちでもあたりまえな「相手の立場になって考える」幼稚園児が教わっているような文章ですが、その重みはお母さんの一言レベルではないと思います。

かのアップル社もこういった当たり前の事実をガイドラインとして作成しているのです、とりあえず一度読んでみてください。

先日とある名も無い小さな美術展に行ってきたのですが、そこに展示されてあったパウル・クレーの作品が一目で気に入りました。

Paul Kleeは20世紀のスイスの画家ですね。

モネやピカソなんかの絵もその場にはいくつか展示されていたのですが、一番心惹かれたのはクレーの作品でした。
正直、僕はその場に立つまでクレーについては微塵も知らなかったのですが、回りの方がどう判断されるかは別として、僕は単純にクレーの描く抽象性と正直な感性が好きです。

その時代の絵画に関して詳しいわけではないので、クレー自信の経歴については愛知大学さんにお任せします。下記リンク先の愛知大学のサイト内にPaul Klee: Leben und Werkという文書がありました。

愛知大学サイト　ドイツ語についての文章より

この資料、たまたま発見したのですが、クレーの経歴を詳細にいたるまで詳しく掲載してあるようなので、ご紹介しておきます。

とりあえず一番気に入った作品は「蛾の踊り」20世紀初頭の作品とは思えない、綺麗なグラデーション効果による色彩が魅力の作品だと思います。ポスターないかな。。