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を記述していきます。
これで、設計書を見ながらコーディングをしていけば、スムーズに仕事をこなすことができます。

お試しアレ。

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

でわでわ！

まいど！taka@CLSです。

先日、W2Cのセミナーに参加してきました。
初めてのW2Cとのふれあい。

仕事の関係でちょっと遅れて参加。
部屋に入ったら、bAの森田さんがワークフローのお話をされてました。
2000年ごろに作ったといわれるエクセルのシート。
ここでのポイントは、それぞれの「役割」。
初めに、役割を洗い出し、そこに人をアサインしていくと言う流れでしょうか。
一人の人に複数の役割を持たせることもあるとか。

たとえば、自分を例に挙げると。
「マークアップデザインエンジニア」という一番得意分野でアサインされる。
そして。
設計の段階から入るときは、
「IA担当」
として、アサインされる。
更に。
自分がプロジェクトのリーダーなら、
「プロジェクトリーダー」としてもアサインされる。
という具合ですね。
ひとり三役。
なるほど。

ただ、それなりのスキルがないと、当然アサインされる訳もないので。
そこは各自、自分のフィールドを広げていかないとだめですね。

サッカーでいうと、複数のポジションをこなせないと試合に出れない、、、
みたいなｗ
トルシエ流ですね。
※オシムもそんな感じか。
そう考えると、サッカーも仕事も同じことなんだなと実感しました。

とりあえず、今日はここまで。

でわでわ。