読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

【Web制作の現場】小畑式マークアップ術:モジュール設計の手順

前回は「モジュール設計」をお伝えいたしました。

覚えてますか?

忘れた方は、前回のメールを見返してみてください!

さて、今回は「モジュール設計の手順」について、お話しようと思います。

ひとつ、大事なことを言い忘れていたことがありました!

前回の「モジュール設計」というのは、すべて紙の上での作業です。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

はい、そうなんです。

「設計」の段階では、まだPCに向かう必要がないんです。

「設計」の作業とは、

  1. 頭の中で考えたものを
  2. デザインをプリントアウトして
  3. 必要要素を書き込んでいく。

ということです。

この手順を覚えておいてください。

「設計」の段階で、PCに向かうほど効率の悪いことはありません。

「設計」とは「考える」作業です。

~~~~~~~~~~~~~~~~~~~~~~~~~~

PCに向かって「考えること」は大変難しいことです。(僕にとってはw)

なので、いったんPCから離れて、「考えること」に集中する。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

PCの前だと、ネットサーフィンしてしまったり、する可能性がありますからw

邪念を振り払うためにも、PCの前から離れて作業をしてください。

この「設計」で完成した成果物は、マークアップする際の「設計図」となります。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

この「設計図」があるか、ないかで、今後の作業効率が大きく変わってくるのです。

いつも言っていますが、「準備」に時間をかけること。

「準備」とは「設計図」を作り込むこと。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

プラモデルを作るときと一緒で「説明書」がないと、

最後の「完成型のイメージ」が湧かなかったり、

作り込んでいく「手順」がわからなかったり。

ここの色はこの色でーとか、ここのネジはあのネジでーとか。

これらを適当にしていると、とんでもない物が出来上がりますw

これが「設計図」が必要な理由です。

理解していただけたでしょうか。

おさらいします。

「モジュール設計」というのは、すべて紙の上での作業です。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

そして、

「設計」とは「考える」作業です。

~~~~~~~~~~~~~~~~~~~~~~~~~~

この「設計」で完成した成果物は、マークアップする際の「設計図」となります。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

この「設計図」をもとに、「実装」を行っていくのです。

はじめは難しいと思いますが、慣れてくれば、

逆にこの作業をしないと、サイトが作れなくなります。

それくらいの効果がある作業です。

ぜひ、「設計図」を作ってみてください。