center-circle.net

まいど！CLSTKデス。

いつも、僕が制作する際に欠かさないツールがあります。
それを、皆様にご紹介。
最近は、これらがないと仕事になりませんw

マークアップデザインエンジニア的、効率化のための必須ツール5選。
では、どうぞ〜。
(続きを読む…)

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

お試しアレ。

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

でわでわ！

まいど！CLSTKです。
本日も暑いですね。。。

さてさて。
そろそろ７月も後半、終わりにさしかかってきました。

今月の初めから、自分仕組化計画を遂行してきました。
何ってことないんですが、自分の一日のスケジュールをルーチン化して、何も考えなくても体が動く、、、みたいな。
一ヶ月して、ようやく体が慣れてきた感じです。
僕的には意識を変えただけで、特にたいしたことをしてないので、人間やればできるんだなとそう思いました。

具体的に僕の一日のスケジュールで何をルーチン化したのか、列挙してみます。
(続きを読む…)