効率よくコーディングするための５つの手順。
久々に、まじめな内容ですw
とは言っても、自分用のメモも兼ねてますけど。
当たり前の事を当たり前にやるのが、意外と難しい。
自分へ言い聞かせてる部分もある訳ですw
ともあれ、何かのお役に立てればと思います。
どうぞ。
アーキテクチャダイアグラムを作成
アーキテクチャダイアグラムとは、設計書ですね。
これがないと、プロジェクトは進みません。
だいたい、下記の内容を記述。
- スケジュール
- レギュレーションの策定
- サイトマップ、ディレクトリマップの作成
- 命名規則
- その他必要事項
まずは紙上で考える
デザインがあがってくる前には、ワイヤーフレームを使って大枠のレイアウトを設計していきます。
デザインがあがってくれば、デザインをプリントアウトして、いろいろと情報をピックアップしていきます。
- レイアウトに関する要素のピックアップ
- タイポグラフィ関連の要素ピックアップ
- 細かなマージンなどの指定をピックアップ
デザインからパーツの書き出し
マークアップする前に、デザインからパーツの書き出しを行います。
この際に、頭の中でだいたいのマークアップが行われます。
- デザインをスライス
- 命名規則で決めたファイル名をつける
- スライスし終わったら、まずは共通部分の画像を書き出す
- 共通部分を書き出したら、残りのパーツを書き出す
- この時点で、ある程度のマークアップが頭の中で行われている
HTMLの設計
テンプレートとなる部分の設計から。
トップダウン形式で組み立てていきます。
先ほどのデザインから画像を書き出す作業を先にしていることで、
頭のなかである程度の組み立てが終わってるので、
ここで一気にHTMLのマークアップを行います。
- 共通部分のマークアップ
- 各パーツのマークアップ
- スニペット作成
CSSの設計
基本HTMLのマークアップが完了したら、CSSの設計に入ります。
- テンプレートファイルから、まずは大枠のレイアウトを設計
- 先にピックアップしていた、必要な要素や数値をCSSに反映
- 各ページの詳細設定をおこなう
- 必要があれば、その都度調整
とまぁ、こんな感じで。
ざっくりですが、ご参考になればと思います。
Leave a Comment...
自己紹介
- CLSTK(しーえるえすてぃーけー)
- 株式会社カラーズ、RAPAZ所属
- マークアップデザインエンジニア
- 1979年5月22日生まれ
- サッカーで言うと、ゴールデンエイジ
- 大阪出身、奈良在住
- 趣味はサッカー、フリースタイルフットボール、読書、お酒、海外旅行。
- 好きな言葉は、坂本龍馬の「世の人は我を何とも言わば言え、我が成すことは我のみぞ知る。」
略歴
小学校1年からサッカーを始める。
小中高大と、学生の間は、サッカーに明け暮れる毎日。
大学では、高校サッカーを教えたいが為に、教員免許を取得。
結局、高校教師にはならずに、横浜にあるYMCAのサッカースクールコーチになる。
4年ほど在籍し、横浜選抜チームを率いてYMCAの全国大会で優勝を飾る。
サッカーを通じて、GAKU-MCと出逢う。
彼との出逢いがきっかけで、WEBを作ろうと思い始める。
独学で勉強し、GAKU-MCのファンサイトを開設。
普段ライブに行けない人たちも、掲示板でつながるようになり、「WEBってすげー！」と感動する。
その後、飲食店副店長、カメラマンアシスタント、某タレント事務所マネージャー等を経て、株式会社カラーズに入社。
現在は、HTML/CSS/Javascriptなど、フロントエンドを中心に仕事に携わる。
また、サッカー好き、リフティング好きが功を奏して、
仕事の傍ら、フリースタイルフットボールユニットRAPAZのマネージャーも兼務。
将来は、実用的なモノ・コトを世の中に提供できる人になりたい。
連絡先
- http://center-circle.net/
- info [at] center-circle.net
- mixi id = 46196
7 月 10th, 2008 at 10:27 pm
コーディングの手順
CSSである程度のレイアウトくんで、そこで一旦Photoshopに戻って画像を切り出す。
…んで、メインのところで、フォーマット的なページを作るか、いきなり量産に入るかどっちかかな。