サイトの色情報を見るmooColorFinder

内定者懇親会で、「これからの時代英語はできなきゃ。勉強してね。」
と言われたので、がんばってみることにしました。

今日はさっそく友人がオススメしてくれたmooColorFinderをご紹介します。

えー、これは
インラインのCSSでも、外部リンクのCSSでも、
インポート文でインポートしてるCSSだって、色情報を抽出できるんだよ！というものです。

WebサイトがW3Cに適合する形できちんと書かれていれば、
CSSで使われている色を見つけることができます。
99％のページはうまく色情報を表示することが出来るようです。

なお、自分のページに色情報を出しておきたいときは、
PHPなどのダイナミックなページを使う必要があるようです。

以上、意訳文です。
元記事はmooColorFinder様のものです。

なお、訳文はTOEIC540点レベルの私が行っているので、
訳文が正しいと言う保証はありません。あしからず。

CSSで使われている色を抽出してくれるだけなので、
画像の色などは表示されない感じです。
よって、そのサイトのイメージカラーが出てくるとは限らないようです。

よく考えてみると、FirefoxアドオンのColorZillaのほうが、
画像の色合いも抽出できるしいいんじゃないかな…と思います。

サイトで使われている色情報を知りたい！ときはmooColorFinder
この文字（画像）の色情報を知りたい！ときはColorZilla(Firefox限定)
という住み分けができているということでしょうかね。

ペーパープロトタイピング

Webデザイン関連のRSSから、ペーパープロトタイピングの記事を発見したのでメモ。

ペーパープロトタイプとは、Webサイトを紙の上で再現したもの。
ボタンのクリックやページ遷移のたびに紙芝居のように手動で紙を切り替えていく、
アナログ的な手法です。

本番のWebサイトを作る前にこういった手順を踏んでおくと、
分かりにくさやエラーが見つかりやすくなります。

研究室にあった2004年あたりのWebDesigningに
ペーパープロトタイプについての説明がちらっとあったので気になっていたのですが、
下記のサイトで動画付きで紹介されていたので、ぜひご覧下さい。
英語サイトですが、動画を見ればペーパープロトタイピングがどんなものかすぐわかるはずです。
The Paper Version of the Web
(ページの中盤くらいに、Youtubeビデオがあります)

Web屋さんではないけれど、Webサイトを作りたい！と思っている方がいるなら、
ペーパープロトタイプを作ることから始めてみてはどうでしょうか。
既存のサイトのプロトタイプを作って、構造の勉強をするのもいいかも。
(本来のペーパープロトタイプの用途とは違うかもしれませんが…)

やっぱり、手を動かすということは、とても素敵なことだと思います。
手で作ったものって、やっぱり個性が出ますし、
自分で書いたぶん愛着もわきますしね。
私なんかは、既存のWebサイトでさえ、
紙に印刷されているだけで愛着度がかなり増します。
本当に不思議ですね。

ペーパープロトタイプ、作ってみると面白いと思います。

わたしはもともとアナログ的なものが好きで、
今回紹介した「紙でWebサイトを作る」ペーパープロトタイプにはとても興味があったのですが、
今年のWebデザイントレンドもヴィンテージ風、手書き風のサイトがピックアップされており、嬉しい限りです！
2008 Design Trends(英語)

以上、アナログメモでした。

---

8月18日追記

ペーパープロトタイプに関する動画のまとめ

スムーズスクロールのサイト

http://www.bryankatzel.com/
（InternetExproler6以下非推奨）

Webデザインに関する情報収集中に見つけた面白いサイトです。

JavaScriptのスムーズスクロールと、
透過PNG画像を組み合わせて作られた、海外デザイナーのポートフォリオサイトです。

IE6以下では透過PNGが上手く表示されないので、サイトのデザインがかなり崩れます。
また、こちらで用いられているtinyscrolling.jsは、IE6互換モードでは上手く動かないそうです。

CSSを書くタイミング

さっそくですが、
みなさんがWebサイトを制作するとき、「CSSを書くタイミング」はいつですか？

私が普段サイトを作るときは、
１．テキストをHTMLでマークアップする
２．DIVでテキストを囲む
３．CSSを使って装飾・レイアウト
の順番です。

しかし、
2007年出版のとある書籍でCSSに関する記事を読んでいたところ、
そこではDIVを先に書き、CSSでレイアウトを確定させてから、
テキストを流し込んでいく、というような記述がされていました。

実際に研究室の同僚４名に聞いてみると、うち３名が
１．まず、DIVとCSSを使いレイアウトを確定
２．テキストを流し込みながら、CSSを指定
の順番で制作する、と答えました。

私は、ただの無機質なテキストデータが、CSSによってきれいなデータになる、という
画面の変遷を見るのがとても好きなので、HTMLから先に書くのかもしれません。
また、デザインにあまり興味がない、という理由もあるのではと思います。

どちらが良い、悪い、という問題ではなく、
自分のやり方だけがすべてではないんだ、ということを知りました。

みなさんはどちらでしょうか？

隠れた名作フォント

さっそく初回はCREAMU様で拝見した、
「普段使われないが、これは使うべき！フォント８選」
をお送りいたします。

以下に、フォントを適用した実例を挙げてみます。
無事表示された人はおめでとう！表示されなかった人は、くじけずにがんばってください！

ちなみに私の環境では運よく、ほぼすべてのフォント指定が反映されました。