軽い設計図を書いてみた話

OYPosted by

入社して3ヵ月になりました。OYです。
まだまだ不安もありますが、9月より開発に加わる予定なのでそれまでに十分力を蓄えていきます。

前回はプロジェクトを実行する上での手順についてお話ししました。
その過程に2つの設計がありましたが、少し前、実際にそれらを書いてみました。前々から取り組んでいるWEB制作のものです。

まずは外部設計ですが、各ページ、テンプレートのレイアウトや動作などに加え、導入プラグインとカテゴリ階層構造の設定も書き込みました。

作成に使用したのはGoogleドキュメントですが、図形の作成がすごくやりやすくて良かったです。

書いていく上で特に気を使ったのはレイアウトで、見た人が効率よくその内容を理解できるように工夫した点が以下

  1. 大まかなところから決定していく
    ページの構成なら、ヘッダ、メイン、フッター、サイドバーの配置位置→ヘッダ、フッター、サイドバーの詳細
    という感じで頭に入れやすいような流れを作ります。
  2. ちゃんと部品ごとに分けて書く
    ヘッダ、フッター、メイン、サイドバーなど、これらをまとめて一つの図として書き込んでいくと非常に細かくなってしまい読みづらくなり、肝心なところを理解してもらえない恐れがあります。また、同じところに書き込むため、それぞれが互いを邪魔しないような配分なども考えなくてはいけなくなり無駄な労力も増えます。
    ヘッダーはヘッダー、フッターはフッター、それぞれ別々で広いスペースを使ってデカデカと書くのが良いです。
  3. 同じ部位は極力書かないようにする
    例えば、いくつかのページのサイドバー上部に、基本のサイドバーに加えて固有のブロックを一つ追加するとします。この際、「共通部分+固有ブロック」の図を種類分だけ書くのは明らかに無駄です。
    共通部分を示したのち、固有ブロックを含むページそれぞれについて、「共通部分」の上に何のアディショナルがあるかさえ伝えればいいのです。

他にもいろいろあるのですが、配色や文字サイズなど、割と下らないレベルの話なので割愛します。
ですが、上述の3つの考え方は設計にかかわらず、何をするにしても大事な要素だと思うんですよね。

 

「まずは、」なんて言ったわりにボリューム多めだったので技術設計の方は割愛で・・・

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA