5pxのガイドとレイヤー。見えそうで見える色。

5pxのガイドとレイヤー。見えそうで見える色。

コーディングの事を分からないときは、イラストレーターのようにデザインをガシガシ作っていたわけなんですけど、結構コーディングにもかかわるようになってサイズとか色とかをきちんと作る癖みたいなもんがついてきた。

友達のデザインとかを見せてもらったっていうのが、一番刺激的だったんだすけど、全てのエリアに5pxのガイドが引いてあるわけです。

あまりにもガイドが増えすぎると多少見にくくなるのですが、ある程度基本的なラインは5pxの単位で作るように心がけています。単純に計算しやすいので…。

例えば、全体のサイズが800pxとするとき全体の余白を5px（表示領域790px）。サイドナビゲーションを240pxとするときサイドナビゲーションの余白を5px。画像のサイズを出すとき基本的に一般デジカメの比率4:3で作成（200px:150px）。

とかです。ウェブのデザインをするとき、コーディングするとき縦の幅なんかはbrタグを何個か打てば調整できたりするけど、横を調整するのが結構難しい。てなことでこんな形で考えてます。

でもう一つ重要なのはレイヤー。fireworksをバシバシ使えるコーダーならともかく、そうでない限り、ちょっとこった背景なんかは1pxずれただけでえらいことになってしまう。きわどいデザインは1pxが結構重要だったりしますからねぇ。

あと、微妙なグラデーション。とカラーリング。
最近マックは無視している傾向があります。色表現がきれいすぎるから。ウィンドウズはコントラストを強く出しすぎる傾向があり、黒色で#000000なんかを指定した日には真っ黒くろすけになってしまう。最低ライン文字色は#333333です。

慣れるのは難しいかもしれないけれど、こういう事を考えていると、
「グラフィックデザインしてるな！」
と感じるのであります。