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

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

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

いまさらながらですが、Zen-codingをはじめました。

使ってびっくり、これほどまでに作業効率が上がる物だとは思っておらず、なぜ今まで使わなかったのかと後悔しています。

実は、数ヶ月前にも一度インストールを試したのですが、Extension ManagerにZen-Codingをインストールしようとすると、どうしても「メニューを更新できません。拡張機能はインストールされません。」という表示が出てきて、インストールすることができず挫折してしまいました。

今回、この問題でZen-codingの威力を実感できていない人たちのために、この問題の解決方法を記載しておこうと思います。

この警告、実はDreamweaverのショートカットメニューのカスタマイズを行っているために生じる問題だったのですね。

そこで、

C:\Documents and Settings\[ユーザー名]\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\Menus

フォルダ内にあるmenus.xmlを削除するだけで、実は問題は解決されます。（Windows XPの場合）

小生の場合は、スニペットを使ってショートカットの設定を行っていたので、ショートカットキーなんかカスタマイズしまくりでしたが、Zen-codingを入れてしまえば、これまで使いなれたショートカットはもう使わないので、削除しても問題ないでしょう。

ただ、Zen-codingではシンプルなコメント等の挿入はできないっぽいので、小生は、Zen-codingをインストールした後で、スニペットとショートカットの設定で、コメントアウトのみ設定しました。

一応記載しておくと、Zen-codingの実行設定である、Ctrl + ,という設定も、ショートカットメニューのコマンド内にあるZen-codingの設定から設定し直すことが可能なので、もっと使いやすいショートカットに直すこともできます。

Zen-codingがどれだけ素晴らしいものなのかは、EC-Studioさんの知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみたを見てもらった方が理解が早いと思います。

では、よきコーディング生活を。

Delicious font sample

@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}

h4.test-font-face {
font-family: Delicious, Helvetica, Verdana, Sans-Serif;
font-size:xx-large;
}
​

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

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

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

５．コンタクトを含める

１０．意味を持たせる