需要があるんだかないんだか。
今回はWebデザインってどうやってるの?ってことについて。
結構人によってまちまちなんですよね。
私はグラフィックデザインからスタートしているので、
最初は割とコーディング段階までいってるのに手戻りがあったり、
(このあたりはディレクション能力の問題かもしれませんね)
要領がとにかく悪かったものです。
そんなわけでwebデザイナ数年目の今の流れと意識しているポイントは、こんな感じ。
そもそもコーディングを意識したデザインとレイアウトを行う。
デザインを構築する段階で、どうコーディングしていくべきかを意識します。コーディングだけのお仕事も請けたりしていましたが、そもそも期待通りの構築が難しい場合も多々ありました。
もちろんデザインに制限をつけすぎるのもよくないですが、設計段階で意識しておく・しておかないではあとの効率がだいぶ違ってきます。
ポイントとしては、こんな感じ。
- どこをどうスライスするか
-
スライスはなるべく中途半端な数値にならないように調整。
そして切り出す時は、隣り合うパーツ同士で重なったり、また1pxでのズレがないように細心の注意を払う。(何度も切り出すのは面倒です…ほんと)
-
スライスはなるべく中途半端な数値にならないように調整。
- どの部分がレイヤーになるのか
- どうpositionするか
コーディング順序は?
さぁ、コーディング!
ワタクシ実はデザイン作業よりもややコーディングのほうが好きだったりします。
あと、コーディング中はなぜかスナック菓子がほしくなることが多いです。(普段は食べない)
流れは、こんな感じでやってます。
- まずdiv#idを決定して構造(レイアウト)のみ書く
- 要素をテキストでいったんすべて起こす
→画像をレイアウトする予定の要素でも、整合性が取れているかどうかをチェックするため。 - すべての画像要素を配置していく
→この時に、2で置いたテキストを代替テキストとして入れていくと漏れがない - ここでHTML側をチェックして、OKならHTMLファイルの作業はほぼ終了
- 共通スタイルをCSSに書く
→テキストスタイルとか、アンカースタイルとか。統一性が取れるように、かつ無駄のないようにショートハンドプロパティで書くように勤めます。
あと、改行については、行数を増やしてしまう方が読みづらいと考えているので、
1の書き方よりも2の書き方を好んでます。
/*Pattern 1*/ div#someID{ position:relative; top:0; left:-30px; }
/*Pattern 2*/ div#someID{ position:relative; top:0; left:-30px;}
1行で収まるくらいだったら、まとめたほうが可読性が高いと思ってます。
- HTML5でいうところのsectionまたはカラムごとに細かいレイアウトを仕上げる
→この間にこまめにクロスブラウザチェックする。一定数まで書いちゃったのに、IEで(ry とかなってると、結構原因を突き止めるのが面倒だったりする。
こんな感じかなー。
どうせやっている途中でも修正は入るし、レイアウトをしていくうえでHTML側にclassやdivを書き足すことはあるけどね。
コーディング段階で、結構細かいところが具合が悪くなってくる場合もあるし。
みなさんはどうですか?
人の制作フローも聞いてみたいな。
コメントを残す