center-circle.net

まいど！CLSTKです。

以前ご紹介した「効率よくコーディングするための５つの手順」をもう少し、掘り下げてみたいと思います。
これは、僕自身のやり方なので、みなさんの手法に合うかわかりませんが、盗めるところは盗んで仕事に活用して頂ければと思います。

概要

効率よく仕事をこなすには、何事も準備が必要です。
段取り八分とよく言いますが、ほんとにそう思います。
特にコーディングの場合は、なるべく考える時間を増やした方が圧倒的に作業効率があがります。
設計をすることによって、頭の中でほぼマークアップが終わっている状態になります。

なにわともあれ、実践でお試しくださいｗ

デザイン(案)をカラーでプリントアウト

コーディング設計は、まずはデザイン(案)をプリントアウトすることから始まります。
紙に直接書き込んで行くことによって、

• 頭の中が整理される
• 知らない間に頭の中でマークアップができるようになる

などのメリットが挙げられます。

(案)と書いているのは、まだデザインがFIXされていない状態であっても、大枠は基本変わらないことが多いと思います。
ですので、デザイン案の状態であっても、設計を進めることができます。

先行して設計をやるメリットとしては、

• 作業待ちの状態をなくす
• 積極的に案件に関われる（受身じゃなくなる）
• コーディング上不都合なところが出てきたら早急に相談できる
• 実際にPC上でコーディングする前に不明点を洗い出せる

などが挙げられます。

ということで、設計の第一歩はデザイン(案)をカラーでプリントアウトということを覚えておきましょうｗ

紙面上でマークアップ

デザイン(案)をプリントアウトしたら、紙面上でマークアップを行います。
紙に直接要素を書き込んでいきます。

この時点では、id、classの事は考えずに、ひたすら要素のマークアップを行います。

紙面上でマークアップを行うことによって、ページの全体像が見えてきます。
全体像が見えたら、要素のグルーピングを行います。
どういう情報の集まりかを見極めながら、グルーピングを行いましょう。

各種値の書き出し

ここまでくれば、あとは、具体的な数値などを書き込んでいく作業になります。書き出す値としては、

• 背景色(画像)
• フォントサイズ
• フォントカラー
• line-height
• 各要素のmargin/padding
• 罫線(px/線種/色)
• 各ブロックのパターン
• その他のパターンがあれば、パターンの洗い出し
• id/class名

と、こんな感じでしょうか。

ここで気をつけてほしいのが、各要素のmargin/paddingの取り方。
ちょっと複雑なので、別途説明します。

各要素のmargin/paddingの取り方

line-heightの影響で、margin/paddingの設定が大きく変わってきます。
その点を頭に入れて、margin/paddingの設定を行ってください。
テキストには上下に余白がつきます。
その余白を考慮して、margin/paddingの設定を行います。

▼各種値の算出方法は下記の通り。

終わり

以上がコーディング設計手順になります。

設計が終われば、PC上でHTMLとCSSを記述していきます。
これで、設計書を見ながらコーディングをしていけば、スムーズに仕事をこなすことができます。

お試しアレ。

ご意見、突っ込みなど大歓迎。
よろしくどーぞ。

でわでわ！

さくっとメモです。
サイト設計の基本というべきものでしょうか。
まだまだ勉強不足なところはありますが、何かのお役に立てればと思います。

ベースとなる考え方

1. 誰が：市場分析
2. 訪問したとき：ターゲット分析　達成させるために「何を」「どういう順番で」「何をしてもらうか？」
3. 何を達成させるか？：クライアント要望、自分の要望

とりあえず、メモでした。

メモ帳も載せておこう。

久々に、まじめな内容ですw
とは言っても、自分用のメモも兼ねてますけど。
当たり前の事を当たり前にやるのが、意外と難しい。
自分へ言い聞かせてる部分もある訳ですw

ともあれ、何かのお役に立てればと思います。

どうぞ。
(続きを読む…)