需要があるんだかないんだか。
今回はWebデザインってどうやってるの?ってことについて。

結構人によってまちまちなんですよね。

私はグラフィックデザインからスタートしているので、
最初は割とコーディング段階までいってるのに手戻りがあったり、
(このあたりはディレクション能力の問題かもしれませんね)
要領がとにかく悪かったものです。

そんなわけでwebデザイナ数年目の今の流れと意識しているポイントは、こんな感じ。



そもそもコーディングを意識したデザインとレイアウトを行う。

デザインを構築する段階で、どうコーディングしていくべきかを意識します。
コーディングだけのお仕事も請けたりしていましたが、そもそも期待通りの構築が難しい場合も多々ありました。
もちろんデザインに制限をつけすぎるのもよくないですが、設計段階で意識しておく・しておかないではあとの効率がだいぶ違ってきます。

ポイントとしては、こんな感じ。

  • どこをどうスライスするか
    • スライスはなるべく中途半端な数値にならないように調整。

      そして切り出す時は、隣り合うパーツ同士で重なったり、また1pxでのズレがないように細心の注意を払う。(何度も切り出すのは面倒です…ほんと)
    • どの部分がレイヤーになるのか
    • どうpositionするか


    コーディング順序は?


    さぁ、コーディング!
    ワタクシ実はデザイン作業よりもややコーディングのほうが好きだったりします。
    あと、コーディング中はなぜかスナック菓子がほしくなることが多いです。(普段は食べない)

    流れは、こんな感じでやってます。

    1. まずdiv#idを決定して構造(レイアウト)のみ書く
    2. 要素をテキストでいったんすべて起こす

      →画像をレイアウトする予定の要素でも、整合性が取れているかどうかをチェックするため。
    3. すべての画像要素を配置していく

      →この時に、2で置いたテキストを代替テキストとして入れていくと漏れがない
    4. ここでHTML側をチェックして、OKならHTMLファイルの作業はほぼ終了
    5. 共通スタイルをCSSに書く

      →テキストスタイルとか、アンカースタイルとか。統一性が取れるように、かつ無駄のないようにショートハンドプロパティで書くように勤めます。


      あと、改行については、行数を増やしてしまう方が読みづらいと考えているので、
      1の書き方よりも2の書き方を好んでます。

      /*Pattern 1*/
      div#someID{
      position:relative;
      top:0;
      left:-30px;
      }
      

      /*Pattern 2*/
      div#someID{ position:relative; top:0; left:-30px;}
      

      1行で収まるくらいだったら、まとめたほうが可読性が高いと思ってます。

    6. HTML5でいうところのsectionまたはカラムごとに細かいレイアウトを仕上げる

      →この間にこまめにクロスブラウザチェックする。一定数まで書いちゃったのに、IEで(ry とかなってると、結構原因を突き止めるのが面倒だったりする。

    7. こんな感じかなー。

      どうせやっている途中でも修正は入るし、レイアウトをしていくうえでHTML側にclassやdivを書き足すことはあるけどね。
      コーディング段階で、結構細かいところが具合が悪くなってくる場合もあるし。


      みなさんはどうですか?
      人の制作フローも聞いてみたいな。