hamashun.com

Web2.0風のボタン、いわるゆテカテカ系ボタンの作り方を解説したサイトはたくさんあります。
CSS関連のコラムを書く時など、ちょっとした画像が必要な時に便利なのですけど、毎回そういったサイトを参照するのがちょっと面倒でした（記憶できない鳥頭が悪いのですけれど）。
そこで、今回自分用にまとめてみます。

なお、このエントリは激しく私的メモ書きです。
細かい数値が書いていなかったり、説明が十分で無かったりする場合があります。

グッドデザインなサイトを紹介するサイトは、やはり海外のサイトが多いんですよね。
英語が読めないとインターフェイスが解りにくい事もあったりして、閲覧するのもなかなか大変だったりします。

そこで今回は、英語ができなくても比較的解りやすいサイト紹介サイトをまとめてみました。
サムネイル付きでご紹介します。

WWW WATCHさんの角丸に関するあれこれを見ていて、そういえばcontentプロパティを使う方法があったなーと思い出したのでエントリします。
この方法を使えば、XHtml側に余計な要素を追加しないで、かつCSSのみで角丸が可能になります。

サイトリニューアル計画発動に伴って、『流行のデザインをまとめているサイトやBlog』をまとめてみました。 他力本願ですみません。
やっぱりと言うかなんと言うか、Web2.0系デザインの記事が多いようです。

また、例によって僕は英語がからっきしなので、そんな人にも優しい内容になっています。

以前、アクセシビリティを更に高めるFIRというエントリを書いたんですけど、これを使うには初期状態のOSにインストールされているフォントを知っておく必要があるんですよね。
そこで、良い資料がないか調べてみました。

その結果、参考になりそうな情報を3つほど見つけました。
まずはMacです。
Mac OS X 10.4: フォントリスト
Mac OS X 10.3: フォントリスト
Appleからのオフィシャルな情報なので、これは確実だと思われます。 10.4の方がより見やすいですね。

Windowsは、残念ながらオフィシャルな情報は見つけられませんでした。
ABOUT FONTというサイトのOS、ソフトで自動的にインストールされるフォントという記事に一覧が掲載されていたので、そちらを紹介しておきます。

追記：
Microsoft Typography - Windows XP SP2 fontsがMS公式のフォントリストぽいです。
Microsoft Typography - Fonts and productsの、上のフォームから検索もできるようです。

これまでは、かなり代表的なフォント以外は無条件で画像にしていました。 更に画像置換を使ったりも。
アクセシビリティの事を考えたらテキストの方が良いので、今後はちゃんと確認してから作業を行おうと思います。

サイトリニューアルについて色々と考えています。
目的というか目標をいくつか設定しているんですけど、その中の一つが「読みやすいデザイン」という事。
やっぱりBlogがメインコンテンツですしね。

と言う訳で、BlogやWebサイトの、テキストの読みやすさについて考えてみました。 文章の素人なりに。
素人の言う事ですから、あんまり真に受けない方が良いです。 多分。

Vistaの発売に伴って、font-familyにメイリオを追加しているサイトをいくつか見かけます。
でも、XPのFirefoxなんかで見ると、アンチエイリアスが効いてなくてジャギジャギに表示されてたりするんですよね。

他にも、font-familyの値としてメイリオとMeiryoなど、指定の仕方もサイトによってまちまちだったりします。
これはどういう事なのかな、と思ったので、少し調べてみました。

Shunさんが働いているlivedoorは、「デザイン」、「マークアップ＆CSS」、「プログラム」がほぼ完全に分業されているので、それぞれの作業に集中する事ができます。
ただ、それにはデメリットもあると感じています。 他者の分野について触れる機会が少なくなってしまうんですよね。

コーダー改めマークアップエンジニア通称MEの視点からちょっと思ったのは、Blogのデザインを、もうちょっと遊んだら面白そうだなー、とか。
CSSだけでできるちょっとしたデザイン要素とか、CSSを使う立場じゃないと逆に思いつかなかったりするのかも？ と思ったりも。
なので今日は、そんなちょっとしたTipsをご紹介します。

リンクの下線をデザインする

サンプル
リンクの下線と言えば、良く見る直線が一般的ですけど、実は点線なんかも使えます。
これの仕組みはデフォルトの下線を消して、新たにborderプロパティで点線を指定するというもの。

もちろん、点線以外の線も使えますし、そもそも線以外のデザインもできます。 画像や背景色を使っても面白いかも。
その辺りの詳細は、実際にCSSを書く人と相談してみるのが良いと思います。 やっぱり良いモノって、良いコミュニケーショから生まれますよねｗ

フォームをフォーカスした時のデザイン

サンプル
このBlogのコメントフォームでもそうなんですけど、入力欄をクリックすると色が付きます。
このサイトはIEにも対応させるために（へっぽこな）JavaScriptを使っているんですけど、すみません使ってませんでしたorzIEを無視していいならCSSだけでもできます。

使うのは:focus擬似クラス。 コレをIE様は無視されあそばす訳ですね。
input要素やtextarea要素に、:focus擬似クラスでデザインを指定すればOKです。
これを工夫すれば、MacのSafari風のデザインを真似する事もできます。

ちなみに、Safariは「デフォルトのデザインが最も美しい」という自負があるからか（？）フォームパーツのデザインが効かない事が多いです。
これはこれで困ったちゃんですけど、確かにフォームに関しては、ユーザーが使い慣れたデザインがベストではあります。 デザインしすぎもよく無いんですね。

あとがき

今回はこの二つをご紹介しました。 タイトルに「その1」と付いていますけど、その2は思いついたり思い出したら、また書きますｗ

何やら偉そうにデザイナーさんへ提案のようなモノをしてしまいましたけど、逆に僕も他の分野の勉強もしないとなー、と思います。
IAやUIにも興味ありますし、簡単なJavaScriptを書けるようになったり単純なBBSを作れるようにはなりたい･･････。
うーん、1日が48時間あればいいんですけれどｗ

へっぽこなバナー作ってみました。 アンオフィシャルです。

フォントが分からなかったので、イラレでトレースという暴挙に。
日本語部分がイマイチ気に入ってないんですけど、家のPCにはロクな日本語フォントが無かったり。
その内作り直すかも。

使いたい！という奇特な方は、ご自分のセンスを十分に疑った後、ご自由にお持ち帰りのうえ用法容量を守って正しくお使いください。　ぴんぽーん。

リニューアルに向けて、まずは現在のデザインをプチ壊してみました。
まあ2Adのリニューアル時のパクリなんですけどね！

いくつかのコンテンツは、役割を無事終えてくれたので、とりあえずリンクを切りました。
ページは残ってますけど、順次内容を削除文に変えていく予定です。

ページを暗くするのには、filter系プロパティを使いました。 引越しの時にショウジをビリビリに破くような感じでやりたい放題。
Operaは中途半端に対応。 Safariは確認してないしする予定もナッシン。
これは早い所リニューアル終わらせないかんね。
と、自分にプレッシャーをかける目的が9割です。

今度やるデザイン勉強会は、イラレがあると理解が深まるらしいです。
でも、さすがに値段が値段なので、今回の為に買うというのは難しいと思います。

そんな中に現れた救世主がInkscapeというソフト。 なんでもフリーソフトでありながら、イラレに匹敵する性能があるんだとか。
という訳で、デザイン勉強会本番までに覚えたい最低限の機能を予想して、ピックアップしてみました。
あ、ちなみにスピーカーの方とは何も相談していないので、完全に僕の予想です。

インストール

ダウンロードはInkscape 公式サイトからどうぞ。

特につまづく所は無いと思います。
日本語以外の言語をオフにすると、40MBくらい軽くなるので、HDDの容量が気になる方はどうぞ。

インターフェイス

クリックで拡大図が出ます。

とりあえずこれだけ覚えておけば、大体の事はできると思います。 イラレに比べてWindowsっぽいインターフェイスなので、そっちの人は比較的馴染みやすいかも。
なお、各ツールの名前はInkscapeの正式名称とは異なります。 hogehogeツール、って方がイラレと似てて覚えやすいかなと。

イラレをさわった事が無い人がパッと見て分かりづらいのは、パス編集ツール、ペンツール、塗りと線、レイヤ、だと思うんですけど、それは勉強会で解説してくれると思うので、ここでは書きません。

操作・ショートカット

基本

ルーラ（定規）

Ctrl+R

拡大縮小

Ctrl+ホイールまわす

拡大ツール

Z

縮小ツール

Shift（押しっぱなし）＋Z

コンテキストメニュー

右クリック押しっぱなし

アンドゥ

Ctrl+Z

リドゥ

Ctrl+Y

グループ化

（複数のオブジェクト（描いた物）を選択して）Ctrl+G

グループ化解除

（グループ化されたオブジェクトを選択して）Ctrl+U

そのオブジェクトが属するレイヤを変更（移動）

オブジェクトを選択してShift+PageDown・Up

（新規レイヤは、上部メニューの「レイヤー」から作るのが分かりやすい）

レイヤ自体の重なり順を変更（移動）

Ctrl+Shift+PageDown・Up

キャンバスの移動

上下

ホイールをまわす

左右

Shift+ホイールまわす

手のひらツールは無いぽい？

ペンツール

次の方向点の向きを変える

Shift+ドラッグ

次の方向点の向きに角度を付ける

Ctrl+ドラッグ

前のアンカーポイントの位置を移動する

Shift+矢印キー（大きく移動）

Alt+矢印キー（小さく移動）

現在のアンカーポイントの位置は移動する事はできないぽい？ イラレに慣れているとこれはツライ。

テキストツール

フォント設定

Ctrl+Shift＋T

書いた後に、選択して実行する事も可能

Tips

1キー

最初は拡大率が35%になっているので、数字の「1キー」を押して100%にする。

線を付ける

デフォルトで円ツールなどを使うと塗りのみで線が無いので、左下の「S：なし」（の「なし」の部分）をクリックして、「ストロークの塗り」に並んでいる正方形のアイコンを適当にクリック。
すると色のバーが出てくるので、任意の色を選択する。 線の太さなどは、上部のタブの「ストロークのスタイル」から選択可能

グラデーションツールの使い方

1. 円とか描く
2. 選択して、グラデツールでドラッグする
3. 一度空白をクリックする
4. 左下が「線形グラデーション」になるので、クリック
5. 「編集」ボタンをクリック。 ここでグラデの設定をする
6. 「色フェーズを追加」でグラデの色ポイントを増やす
7. すぐ上のセレクトメニューで色自体を指定する

ちょっとややこしい。 イラレかフォトショを使った事が無いと、感覚が掴みづらいかも。

あとがき

こんな感じでしょうか。
適当にググると、解説サイトも出てくるみたいです。

あと、ノートPCのタッチパッド等を普通のマウスと同じレベルで扱える人でない限り、普通のマウスとマウスパッドを持ってきた方が無難です。
できれば使い慣れているやつがいいのかな。