40年前の7月16日にアポロ11号は月に向かい、40年前の今日、月面に着地したそうです。

明日（7月22日）は皆既日食、部分日食の日でもあり、急に天体関連の話題続きですが、このブログエントリーを書いた動機は、Boston.comの「Remembering Apollo 11」という記事に掲載されている40枚の写真が美しかったためです。

「アポロ11号の月面着陸はSF撮影のねつ造ではないか」という疑惑があるようですが（たぶん、そんなことはないと思いますが）、疑われてもしょうがないぐらいSF映画っぽい写真です。

その中から11枚の写真をピックアップしました。（NASAの写真は著作権フリーのようです。NASA - Using NASA Imagery and Linking to NASA Web Sites）

貴社に関する質問

1. 貴社のサービスや製品を簡単にご説明ください。
2. 貴社の長期的目標についてお聞かせください。
3. 新しいロゴが必要な理由をお聞かせください。
   （すでにロゴがある場合）新しいロゴにどのような期待をされていますか？
   （※この質問により現状の問題を探ることができます。）
4. 貴社の競合他社はどちらの会社とお考えでしょうか。
5. 貴社と競合他社との違いをお聞かせください。
6. 顧客の年齢層についてお聞かせください。

プロジェクトに関する質問

7. タグライン（会社のスローガンやキャッチフレーズ）はありますか。
   もしある場合、それをロゴと並べて表示したいとお考えでしょうか。
8. ロゴに対する特定のイメージはお持ちでしょうか。
9. 色の好み、ブランドカラーはありますか。
10. 使用したくない色はありますか。
11. 作成するロゴを表す形容詞はなんでしょうか。
12. ロゴを見た人にどのようなフィーリングやメッセージを伝えたいですか。
13. どのようなロゴの表記方法をこのまれますか。
    （例：thedesigncubicle または the design cubicle）
14. お好みの書体はありますか。
    （例：筆記体、太字、細字、手書き風、カスタマイズされた書体）
15. ロゴを使用する媒体は何でしょうか。（例：印刷物、ウェブ…）
16. ロゴを主に使用する媒体は何でしょうか。
    （それがウェブであれば、一般的に横長のロゴが望ましいです。）
17. 希望納期、スケジュール、具体的な完成日などはありますか。
18. 予算について。（金額により提出するデザイン案の数が変わります。）
19. ロゴのデザインに付随して、デザインが必要なものはありますか。
    （例：名刺、封筒、レターヘッド等）
20. 好きなロゴはありますか。またその理由をお聞かせください。

・なんとなくで依頼できるのがよい
スライドバーを利用したインタフェースなど、「こんな感じ」でデザインの感じを伝えることができます。

「ロゴデザイン」という、対面で話してもなかなか伝えるのが難しい（そして発注者自身が明確なイメージをもっていないケースが多い）仕事に対して、うまくコミュニケーションを取れる工夫がしてあります。

確かに上記の20の質問は、クライアントに結構な負担をかけることになりそうです。
Logotournament.comのように楽しめそうな「なんとなくで依頼できる」ツールのようなものがあるといいですね。

通常、Webデザインでタイポグラフィを表現しようと思えば、CSSのfont-familyプロパティで指定するか、画像で文字を作ります。しかし、font-familyプロパティはWebページが表示されるパソコンに指定したフォントがインストールされている必要があり、画像で文字を作るのもあまりスマートなやり方ではありません。

CufonはHTMLのテキストを好きな書体で表示させることができる仕組みです。
フォントファイルをJavaScriptファイルに変換し、そのJavaScriptファイルでテキストを置き換えます。
同じような仕組みでsIFRというのがあり、こちらはFlashのswfファイルに置き換える方法です。

残念ながら日本語フォントは文字の種類が多すぎるので使えません。
数字と記号を合わせても100文字前後でおさまるLatin文字だからこそ可能な方法です。

以下に利用手順を説明します。

Cufonファイルを入手

まずCufónファイル（cufon-yui.js）を入手します。

フォントファイルをJavaScriptに変換

次に使用したいフォントファイルを用意し、Font GeneratorサイトでJavaScriptファイルに変換します。
利用できるフォント形式はTrueType (TTF)、OpenType (OTF)、Printer Font Binary (PFB) 、 PostScriptです。

1. 一番上の「Regular Typeface」というフィールドで変換するフォントファイルを選択
2. 「The EULAs of these fonts allow Web Embedding (without Adobe Flash)」というチェックボックスをチェック
3. 「Include the following glyphs (if available)」欄の「Basic Latin」にチェック
4. 一番下の「I acknowledge and accept these terms」にチェック
5. 「Let’s do this!」を押す

これで変換されたJavaScriptファイルがローカルの任意の場所に保存されます。
（細かいオプション設定はお好みで。）

HTMLファイルの記述

Cufonファイル、フォントファイルがそろったところで、HTMLの記述をします。

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Fertigo_Pro_400.font.js"></script>

<script type="text/javascript">
	Cufon.replace('h1');
</script>
<script type="text/javascript">
	Cufon.now();
</script>

「Fertigo_Pro_400.font.js」という箇所は使用するフォントのファイル名に置き換えてください。
上の例では、h1タグにフォントを適用しています。
Cufon.now();というのはIEで動作させるために必要な記述です。ページの一番最後、bodyタグを閉じる前に記述しますが、Google Analyticsなどの外部スクリプトよりは前に記述してください。

Cufonだけではタグ名でしか変更する箇所を指定できませんが、jQueryやPrototypeなどのJavaScriptライブラリと併用することで、自由に指定することができます。

jQueryでセレクタを使う

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Fertigo_Pro_400.font.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	Cufon.replace($('h1.cufon'));
	Cufon.now();
});
</script>

２種類以上のフォントを使用する場合

２種類以上のフォントを使用する場合は以下のようにします。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Fertigo_Pro_400.font.js"></script>

<script type="text/javascript">
	Cufon.replace('h2', {
		fontFamily: 'Fertigo Pro'
	});
	Cufon.replace($('p.cufon'), {
		fontFamily: 'PicoBlackAl'
	});
	Cufon.now();
</script>

Anchorタグのホバリング

Cufonが適用されたAnchorタグ（Aタグ）にホバリング（オンマウス）の動作を加えたい場合は以下のような記述が必要になります。

	Cufon.replace('h2', {
		fontFamily: 'Fertigo Pro',
		hover: true,
		hoverables: { a: true }
	});

とりあえず完成

これでひとまず完成です。
DEMO（仮）

@font-face規則との併用

Safari4やFirefox3.5ではCSSの@font-face規則により独自のフォントで表示することが可能です。Cufonを使うよりも@font-faceが使えるブラウザではそちらを優先させた方がスマートです。

1. 指定したフォントが使える場合は、@font-faceやfont-familyプロパティを優先
2. 指定したフォントが使えない場合は、Cufonで置き換え

という方法をとります。

表示しているブラウザで指定したフォントが使用可能かどうかを調べるためにRemy Sharpさんが作ったfont.jsを利用しました。
（Kilian ValkhofさんのサイトではfontAvailable.jsを使用していますが、どうにも@font-faceで指定したフォントがうまく認識されませんでした。）

完成

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/font.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/PicoBlackAl_800.font.js"></script>
<script type="text/javascript" src="js/Fertigo_Pro_400.font.js"></script>

<script type="text/javascript">
$(document).ready(function() {
font.setup(); // run setup when the DOM is ready
	if(!font.isInstalled('Fertigo Pro')) {
		Cufon.replace('h2', {
			fontFamily: 'Fertigo Pro',
			hover: true,
			hoverables: { a: true }
		});
	}
	if(!font.isInstalled('PicoBlackAl')) {
		Cufon.replace($('p.cufon'), {
			fontFamily: 'PicoBlackAl'
		});
	}
});
</script>

<script type="text/javascript"> Cufon.now(); </script>

スタイルシート

スタイルシートには@font-face、font-familyを記述します。

@font-face {
	font-family: "Fertigo Pro";
	src: url(Fertigo_PRO.otf) format("opentype");
}

@font-face {
	font-family: "PicoBlackAl";
	src: url(Pico-BlackAl.ttf) format("truetype");
}

h2{
	font-family: "Fertigo Pro", sans-serif;
}

p.cufon{
	font-family: "PicoBlackAl", sans-serif;
}

DEMO

Cufonの問題点

• 日本語が使えない。
• マウスカーソル等で文字が選択できない。
• 著作権の問題からフリーフォントでのみ利用可能。

このデモでは、Fertigo PROとPicoというフリーフォントを使用しました。

@font-faceが手軽で扱いやすく一番よいのですが、各ブラウザが対応するにはもう少し時間がかかりそうです。また、フォントファイルをそのまま読み込む仕組みのため、著作権上の問題もあります。しかし、その辺の問題をクリアするTypeKitというプロジェクトが今進められているようです。
今後、@font-faceが広まれば、Webデザインのタイポグラフィがどんどん面白くなりそうな気がします。

HTML中にstyle属性を使ってスタイルを埋め込まないように。（原文 3: Never Use Inline Styles）

外部CSSファイルに記述するか、少なくともhead内に記述しましょう、と。
たまにstyle属性で埋め込んでしまいます。そこでしか使われないようなスタイルをつけなければいけないときとか。

Javascriptファイルへのリンクはbody要素内の最後に置きましょう。（原文 5: Consider Placing Javascript Files at the Bottom）

Javascriptファイルを下に置く習慣がなかなか身に付きません、、、。

html要素内にJavaScriptを埋め込むのは、1996年のテクニックだ！（原文 6: Never Use Inline Javascript. It’s not 1996!）

onclickイベントをAタグに埋め込んだりするのが代表的なInline Javascriptの例ですが、これについては以前「そんなに目くじらたてなくても」というamachangさんの記事がありました（「onclick 属性問題について - IT戦記」）。

基本はonclickを埋め込むよりも、DOMから操作するということで。

ySlowを使おう。（原文 13: Download ySlow）

ySlowというYahoo!が提供しているFireFoxプラグイン（要Firebug）。これ知りませんでした。
Webページの表示パフォーマンスを解析してくれます。
で、試してみたところ、有用そうなんですが、自分の環境ではブラウジングがかなり重くなりました。サイト制作のときだけ有効にするといいかも。

Webサイトが完成したら、圧縮。（原文 17: Once the Website is Complete, Compress!）

最終版のCSSやJSファイルを圧縮して公開しよう、とのことですが、いままでやったことがありません。トラフィックが膨大なサイトとかには絶対必要なんでしょうけど、それほどでもないサイトでやるには少しめんどうです、、、。

Twitterを使おう。（原文 23: Use Twitter）

このTipsが一番好きです。今どきの心得。（自分のTwitter）

コミュニティに参加しよう。（原文 26: Participate in the Community）

コミュニティに参加するのが苦手なひともいると思う。自分はあまり得意じゃないです。でもちょっとがんばろうかな。
プログラミング系のコミュニティはけっこうありそうだけど、デザインとかフロントエンド系のコミュニティでどこか面白いところないでしょうか。

CSSリセットを使おう。（原文 27: Use a CSS Reset）

CSSリセットとは「全てのHTMLタグのスタイルを、一旦ゼロにして、ブラウザ間の差異をリセットするテクニック」です。
ここでも書かれていますが、これは議論のわかれるところですね。
自分は、CSS Resetを使わない派です。とくに自分以外の人が更新運用をする場合は使わないようにしています。でも制作から運用まで全て一人でやるサイトであれば使うかもしれません。

25 One Page Portfolio Websites of Designers on Twitter | The Design Cubicle（25のOnePageポートフォリオ）

25のOnePageポートフォリオ
自分の作品集などを１ページで収めたサイトが今ちょっと流行しているらしく、それらを集めたショーケース。
プロフィール、作品、連絡先なんかをHTML1ページでおさめて、それぞれの見出しへページ内リンクでスクロールするような構成です。

40 Beautiful PSD Slicing Websites | Design Moves Me

PSD Slicing Companyという業種があるんですね。知りませんでした。
ページデザインのサンプルとしてPhotoshopなどで作った画像を送ると、必要な画像ファイルを切り出し、適切なHTML/CSSでマークアップして送り返してくれるというビジネス。
当然、彼ら自身のサイトも美しいはずだ、ということでまとめられたリンク集が上記のページ。

Thinkcage

ThinkcageはJason Zimdarsさんのポートフォリオサイト。今週から37signalsのデザイナーに抜擢されたそうです。作品集をみると、37signalsと相性がよさそうなデザインです。
最近の作品になるにつれ、大胆で、わかりやすいデザインになっています。Webデザインの流行が、そういう流れということもありますが、その流れをふまえつつ、ディテールが繊細なところがうまい。

Devthought

Devthoughtは、Webデザイナー兼プログラマー、Guillermo Rauchさんのサイト。BarackSlideshowというMooToolsを使ったJavaScriptライブラリが使いやすそうです。サイトデザインもよく、JavaScriptもPHPも使いこなすアルゼンチンの18歳。
（Twitterをフォローしたら、とても礼儀正しいダイレクトメッセージを送ってくれた。）

聖進学院

聖進学院というのは通信制の高校卒業資格をめざす人のための予備校みたいなところらしいです。制作はaguijeというチーム。
ブラウザの横幅に準じてブロックのカラム数が変化するというトップページ。良いアイディアです。第二階層以降も丁寧につくられてます。

（5本って、けっこう大変、、。３本ぐらいにしようかな）

microformatsとは

class属性、rel属性を使って、XHTMLをもう少し詳しくマークアップしよう、という規格です。

背景

文書構造を意識したHTMLのマークアップ方法はすっかり浸透して、TABLEタグでレイアウトをしているWebページはあまり見かけなくなりました。

でも、Webページの掲載情報がそのサイト内にとどまらず、他のサイトからも利用されたり、様々なソフトウェアで使われるようになった今、どうやらこれだけでは不十分。

たとえばイベント情報を掲載する場合には、文書構造（見出し、本文、etc）だけではなく、日時、場所、概要、詳細、URLといった意味付けも記述しておきたいところです。

きれいにマークアップされたWebページでは、そのような表現をclass属性で付けられています。

でも、同じ種類の項目なのに、Webサイトごとにclass名が違っていては、
その都度、class名の付け方を読み解かなくてはなりません。
もちろんプログラムに理解させることもできません。

そこでmicroformats。

そこでmicroformatsです。class属性、rel属性の付け方を統一できるところは統一しましょう、という規格です。
いままでと同じ(X)HTMLの記述のまま、ちょっとルールを追加するだけなので簡単です。

上記の例をmicroformatsの仕様で書き換えると、、、

となります。
覚えてしまえば、いちいちclass名を考える必要がなくなって楽ですね。

microformatsはすでにたくさんのサイトで使われています（Google、Flickrなど）。みんなで使えばどんどん便利になりそうです。

また、ブラウザを拡張させるUserScript「LDRize」も、microformatsに沿った記述をすることで、その機能の恩恵にあずかることができます。

ページ送りをコントロールするUserScript「AutoPagerize」は、独自のclass定義を使っていますが、「統一したclass指定で外部ツールの恩恵にあずかる」という考え方は同じだなと思います。
ただ、特定のツールのみを意識したマークアップをするというのはちょっと残念なので、microformatsがさらに充実して、その辺もカバーされといいなと期待しています。
（ページ構造に関する記述だからAutoPagerizeがHTML5に対応すればいいのかも。）

とはいうものの、、、

自分は今まであまり使っていませんでした、microformats、、、。
自分も含めて、もっとみんな使ったほうがいいですね。

microformats Wiki

中央に配置しつつ、改行は左揃えにしたい

サンプル

CSS

HTML

右に配置しつつ、改行は左揃えにしたい

サンプル

CSS

HTML

（Safari、Firefox、IE6、IE7、IE8で確認）

実際のコンテンツは幅1000ピクセルぐらいの固定サイズで作られることが多く、画面いっぱいにデザインが施されながらも、間延びした感じを与えないというのが良いところ。

気をつけなければいけないこと

ウィンドウの幅を狭めたときに発生したスクロールバーをスクロールすると、横いっぱいに広がっているはずの背景が途中で切れてしまいます。（Safari、Firefox、IE7+で発生。IE6はOK。）

ウィンドウサイズがじゅうぶん広い状態

ウィンドウサイズを狭めて右にスクロールした状態

デモ（修正前）

解決策

CSSで、横方向に広がるbackgroundプロパティを設定したエレメントに、min-widthで最小固定幅を設定すればOK。

デモ（修正後）

これ、わりとメジャーなサイトでも、あまり対応できていないサイトが多いです。

スカイプとか