eclucifer

昨日 『 『 TINAMI 』 に登録しての良かった点まとめ 』 を書き終えたあと、何とはなしに クリエイタープロフィールの最新の更新情報 を見てみたら、投稿時間が9時間ズレていました。

11:42 となっていますが、本来の投稿時間は 20:42 でした。
また、それ以前の時刻もすべて-9時間になっていました。

何が原因か判らず Twitter にてヘルプしたところ、 WordPress のフィード側の問題のようでした。
WordPress のフィードは GMT（グリニッジ標準時）で配信されますが、日本は+9時間のため JST（日本標準時）に修正する必要があるとのこと。

『 WordPress 2.5 のフィードの時間修正 - karu.jp 』 を参考に、以下のとおり修正しました。

ご利用のバージョンによって修正箇所などが異なりますのでご注意ください。
また、必ず事前のバックアップを忘れないようにしてください。

続きを読む

『 ペイントツールSAI 』 ver.1.0 を使用した、2009年版メイキング第三回です。
今回は、ペン入れの過程と平行ライン模様の描き方などを解説しています。

ペン入れ

先ほどと同様の手順で 『 下書き 』 レイヤーセットの不透明度を下げ、『 スクリーン 』 レイヤーをクリッピング。

画像をクリックすると、『 ペン入れ 原寸大 』 を表示します。

『 ペン入れ 』 レイヤーセットを新規作成。 その中に更に 『 士郎 』 『 アーチャー 』 レイヤーセットを新規作成。 パーツごとレイヤーを分けて、1px （ ところにより 0.7px ） の鉛筆ツールでペン入れします。

手ブレ補正は 『 5 』 を基本に、長い線や曲線を描くときは 『 S-6 』 を、髪の毛など勢いをつけて自然な曲線をたくさん描くときは 『 14 』 を使用しています。 『 S-6 』 は歪まないのが利点ですが、どうしてもワンテンポズレてしまうので、髪の毛に使用すると曲線が死んでしまう気がします。

『 ペン入れ 』 レイヤーセットの中身はこのようになっています。
のちのち修正することが出来るように、念のためしつこくレイヤーを分けています。

レイヤーの上下の順番はテキトーではなく、パーツの上下を意識してあります （ 例えば、士郎のジーンズはTシャツを上に着ているのでその下に置く、といったように ）。

平行線模様の描き方

画像をクリックすると、『 平行ライン模様 原寸大 』 を表示します。

こういう平行なラインの模様には苦戦します。 どう考えても平行に描くとか無理すぎます。
人間が手描き出来ないなら SAI の機能でラクすればいいじゃない！

『 模様 元 』 レイヤーを新規作成、太めのペンで模様を描きます。

Ctrl ＋ レイヤークリック で 『 模様 元 』 レイヤーの選択領域を読み込み、選択 → 選択領域を1ピクセル膨張 の手順で選択領域を拡張します。

『 模様 』 レイヤーを新規作成、Ctrl ＋ F で塗り潰します。

Ctrl ＋ レイヤークリック で 『 模様 元 』 レイヤーの選択領域を読み込み、『 模様 』 レイヤーを Ctrl ＋ X でカット。 あとは、線のはみ出しを整え 『 模様 元 』 レイヤーを削除して完成です。

関連エントリー

1. ショートカットキー設定
2. ラフ＋下書き

『 ペイントツールSAI 』 ver.1.0 を使用した、2009年版メイキング第二回です。
今回は、ラフから下書きまでの過程を解説しています。

ラフ

ファイル → 新規キャンバス （ Ctrl ＋ N ） の手順で、新規キャンバスを作成します。
バランスの良い縦横比である PC の画面解像度 4:3 を参考に、600×800 としました。

『 ラフ 』 レイヤーセットを新規作成。

人物ごとにレイヤーを新規作成。

画像をクリックすると、『 ラフ 原寸大 』 を表示します。

太めの鉛筆ツールでテキトーに描きます。
「 大体こんな感じ 」 が判れば良いので、いろいろおかしくても気にしません。

キャラクターは 『 Fate/stay night 』 の主人公 衛宮士郎 と アーチャー です。
MAD 『 [Fate/hollow ataraxia]Cinderella-stairs 』 を観ていたら再熱したので、衝動のまま描きました。

下書き

このまま描き進めても構わないのですが、Web へ掲載するものは 『 小さな原寸 』 よりも 『 半分に縮小したもの 』 の方が粗が目立たず綺麗に見えるため、掲載サイズの二倍に拡大します。

わたしの場合、掲載するイラストは縦横 600px 以内と決めているので、

キャンバス → キャンバスの解像度変更 の手順で、600×800px から 900×1200px に拡大します。

『 ラフ 』 レイヤーセットの不透明度を 30% に下げます。

『 ラフ 』 レイヤーセットの上に 『 スクリーン 』 レイヤー （ 合成モード 『 スクリーン 』 ） を新規作成、下のレイヤーでクリッピング。 RGB: 246,203,216 で塗りつぶします。

トレースしやすくなりました。

画像をクリックすると、『 下書き 原寸大 』 を表示します。

『 下書き 』 レイヤーセットを新規作成。 人物ごと （ ところによりパーツごと ） にレイヤーを分けて、2px の鉛筆ツールで下書きします。 下書きをしっかりきっちりするとペン入れが楽なので、なるべくがんばります。

KANROさんち の パーカー士郎 の可愛さにやられてフードな士郎を描き始めてみたものの、やはり原作のラグランTシャツも捨てがたい！という訳で戻してみました。 士郎お約束の腹チラはさすがに自重しました。

下書きを終えたら、『 ラフ 』 レイヤーセットの左の目アイコンをクリックして、レイヤーセットを非表示にします。

関連エントリー

1. ショートカットキー設定
2. ラフ＋下書き
3. ペン入れ

『 ペイントツールSAI 』 ver.1.0 を使用した、2009年版の制作過程を解説しています。
塗りながらの作成のため未完成です。 メイキングで気分転換しつつがんばります (`・ω・´)ー３

ショートカットキー設定

一つ一つの手間は小さくとも、積み重なれば大きなストレスになってしまうもの。
こだわる点へは惜しまず、それ以外ではいかに楽をするか！ いかにメンドくささを回避するか！

そんなときに便利なのが 『 ショートカットキー設定 』 です。

デジタルお絵描きさんは Ctrl ＋ Z 上が左手の定位置ですが、右手を描画に専念させるため 『 ショートカットキー設定 』 を駆使、もっと左手を有効に使いたいと思います。

鉛筆ツールをダブルクリックします。

ショートカットキー欄に任意のキーを設定します。
自分が判りやすいものを、と Brush の 『 B 』 としました。

使用頻度の高いツールをすべて設定し、以下のようになりました。

ショートカットキー設定

ツール	キー	由来
	B	Brush
	P	Paint
	E	Eraser
	S	選択
	L	Loop
	A	Auto
	M	Move

これで、描画を中断 → ツールボックスへカーソルを移動 → ツールをクリック → キャンバスへカーソルを移動 → 描画 という手間が、左手でキーを押下するだけ！になりました。 たったこれだけで、かなり効率が良くなります。

また、

メニューバー → その他 → ショートカットキー設定 から、他にもさまざまな設定が出来ます。

わたしの場合の一例は以下のとおりです。

また、デフォルトで設定されているもので使用頻度の高いものは以下のとおりです。

これらのショートカットキーを使用するか否かで効率もストレスも随分違います。
デフォルトキーを覚えるも良し、使いやすいようカスタムするも良し、ご存知でなかった方は是非お試しください。

関連エントリー

1. ショートカットキー設定
2. ラフ＋下書き
3. ペン入れ

• web 屋が主張する 「 リキッドレイアウト 」 に騙されないために - 鍵っ子ブログ
• 「 サイトの横幅 」 再論:950px 時代のウェブデザイン - 絵文録ことのは

これらを読んで、改めて Web サイトの横幅とリキッドデザインについて考えてみました。

Before

わたしも以前は 100% 幅のリキッドデザイン （ 可変幅 ） を採用していました。
画面全体を有効に活用出来、横スクロールも出ない、俺最高！ と。

ところがあるとき、「 ブラウザを最大化すると広がりすぎて見にくい 」 とのご指摘があり、その当時は 「 見にくいならウインドウ幅調節すれば良くね？ そのためのリキッドなんだから 」 と、特に問題視していませんでした。 わたしも最大化して見てはいますが、常にサイドバーを表示しているため、そう広すぎるとは思わなかったので。

しかし、［ ウインドウ幅をそれぞれのサイトに合わせて調節しながら見る ］ ことと ［ 横スクロールバーが表示される ］、どちらも ［ 普段の環境で快適に見られないことに対するストレス ］ という点において同列のものだと気付いたのです。

100% 幅の可変デザインの問題点は理解したものの、かといって固定幅は小さい画面に合わせると大きい画面で余白がありすぎて不恰好になってしまうし ･･････ という訳で出した結論は、

• 要素の幅の最小値と最大値を指定する CSS プロパティ ［ min-width ］ ［ max-width ］
• 上記に対応していない IE6 には IE 独自のダイナミックプロパティ ［ expression ］

これらを採用する、というものです。

After

わたしのサイトはイラストサイトなので、展示するイラストの横幅の最大値 （ 600px ） を基準にします。 余白は左右 30px ずつ取り、ボーダーは 6px ずつ加えました。

モダンブラウザ用 CSS

div.sample {
	border-left  : 6px solid #E5E5E5;
	border-right : 6px solid #E5E5E5;
	min-width    : 660px;
	max-width    : 900px;
	width        : 82%; }

• 最小幅は 672px （ 600px ＋ 余白 60px ＋ ボーダー 12px ）
• 最大幅は 912px （ 840px ＋ 余白 60px ＋ ボーダー 12px ）
• その中間では、ブラウザの表示領域の 82% の幅にする

IE6 用 CSS

* html div.sample {
	width : expression(document.body.clientWidth < 691? "671px" : document.body.clientWidth > 832? "812px" : "auto"); /* IE */ }

• ブラウザの表示領域が 691px 以下の場合は 671px に
• ブラウザの表示領域が 832px 以上の場合は 812px にする

ここで注意しておかなければならないのは、< 691? "671px" と > 832? "812px" を、< 671? "671px" > 812? "812px" のように 同値にしてはいけない ということ。 幅を変えるたびにブラウザが落ちて危険です。 なんというブラクラ。 少し余白を設けるように、数値に余裕を持たせてください。

参考リンク

• モダンブラウザ向け CSS ハック - ウェブネタブログ
• IE6 で min-width, max-width を実装する CSS - Tech de Go

イラストサイトである以上、イラストの最大幅よりも小さな表示領域の場合は横スクロールバーが出てしまうのは必至、と割り切りました。 max-width が min-width と 140px 240px しか違わないのは、［ 広すぎても読みにくい ］ ということから自分が読みやすいと感じる値を算出した結果です。

最小値と最大値に迷っている方は、BROWSIZE.ORG でご自身のサイトの閲覧者の実状を研究してみてはいかがでしょうか。 サイトの方向性によって結果がガラリと変わってくるので、他のサイトでの解析結果が必ずしも当てはまるとは限りません。

追記

min と max の差が僅かしかない。 意味が無いような ･･････。

はてなブックマーク - リキッドデザイン問題は max-width と IE6 用 expression で解決 - eclucifer blog

その ［ 僅かな差 ］ で横スクロールバーが出る Web デザインになったりするので、［ 僅かな差 ］ というのは重要な問題。 と思ったけれど、考えてみれば ［ max ］ なのだからもう少し広げても良い気がする ･･････ という訳で、100px 広げてみました。

おまけ

当サイトにおける過去一ヶ月のブラウザ利用状況 （ Google Analytics 調べ ） は以下のとおりです。

ブラウザ利用状況

Internet Explorer バージョン別利用状況

まだまだ IE 独断場といった感じ。 やっと IE7 が IE6 を追い抜いたばかりですが、来年の今頃、遅くても再来年には IE6 への対応に一手間掛けずに済みそうな伸びではあります。 やはり同梱のブラウザは強いですね。

画面解像度

ちなみに画面解像度の結果はこのとおり。 横幅だけでなく、縦幅も考えさせられる感じ。 ヘッダを大きくしすぎて肝心のコンテンツがスクロールしないと見えない、というサイトも結構あったりしますね。