ノンプラグラマーのためのシステムディレクションのコツ

Webディレクターの中には、制作経験がない方やデザインやHTMLは分かるけどシステムになるとちょっと。。という方もいると思います。勉強してみようと思っても複雑なプログラムコードや覚えることが多すぎて手を出せずにいる方も多いですよね。

しかし、システムに知見がないとおおよその工期が見えなかったり、問題が起きたときに対処がエンジニア頼みになってしまいます。

なのでここではプログラムコードは書けなくてもこれだけおさえておけばOKというシステムの知識を紹介します。むずかしいプログラムコードは一切でてきませんので安心してください。

プログラムって何ができるの？

プログラムコードを見てもなにか呪文のようで、何が書いてあるかさっぱりですよね？ でも実はプログラムにできることは結構限られていておおまかには以下の処理です。

1. 文字列を出力する。
2. ユーザーからのデータを受け取る。
3. 計算と条件分岐。
4. データベースを読み書きする。
5. ファイルを生成する。
6. メールを送信する。

ほとんどのシステムはこれらの処理を組合せて実現されています。

例えばお問合せフォームであれば

ユーザーが入力したデータを受け取る。(2)
↓
条件分岐でエラーの条件だったら「電話番号は半角でいれてください」といった文字列を出力する。(3)(1)
↓
すべての入力条件を満たしたらデータベースにお問合せ内容を書き込む。(4)
↓
ユーザーと管理者に受付完了のメールを送る。(6)

検索エンジンであれば

ユーザーが入力したキーワードを受け取る。(2)
↓
このキーワードを元にデータベースを読んで該当するデータを見つける。(4)
↓
該当したデータを検索結果画面にテキストを表示する。(1)

といった具合です。

つまりプログラムコードが読めなくてもシステムの仕様はすべて言葉で説明できるのです。 そしてWebディレクターの立場ではこの仕様が説明できることが最も重要になります。

システム案件のワークフロー

次にシステム開発するためのワークフローを見てみましょう。

要件定義	誰が何をするためのものなのか等、システムの目的や役割を決める。
基本設計	要件定義で決めた事を実現する仕組み・機能を考える。
詳細設計	具体的な判定条件など仕組み・機能の詳細を決める。
開発	詳細設計通りに動くプログラムを制作する。
単体テスト	機能ごとに設計通りに動くかをテストする。
結合テスト	機能を連携させても正しく動くかをテストする。

ちなみにこれは現在のWebプロジェクトの主流であるウォーターフォール型と呼ばれる進め方で、他にもプロトタイプ型やアジャイル型といった進め方もありますがまずはこのウォーターフォール型を覚えておけばOKです。

このワークフローの中で、Webディレクターの役割が特に重要なポイントはまず要件定義でクライアントの希望するシステムの要件を決めるところです。

要件を詰めるためにはプログラムコードは分からなくても問題ありません。システムのことはよく分からない、エンジニアの領域と考えずに言葉を使ってなるべく詳細に仕様を詰めてみましょう。

例えばCMSであれば以下のような具合です。

このCMSではニュースをカテゴリ別に日付の新しい順に一覧表示し、ニュースの詳細にリンクを設定します。詳細はHTMLページとPDFの場合があります。また管理者がニュースを登録するときに公開する日付を指定することができます。

実際はワイヤーフレームの該当箇所に各仕様を書き込んだりしてプロジェクトメンバーと共有しますが、まずは言葉で説明してみます。

次に基本設計で必要な機能が決まったら、画面に過不足がないようにデザイナー等への連携をするところ。例えばログイン機能があるのであれば同じ画面でもログイン中・非ログイン時のパターンを網羅するといった部分です。

この点をWebディレクターがしっかり詰めることができれば、エンジニアは決まった要件をもとにシステムの設計〜開発をスムーズに進められます。

逆に要件詰めが甘かったりすると開発中に追加の要望や仕様の変更などが入ってしまいます。システムで開発着手後の変更や追加はバグの発生や大幅な手戻りの原因となってしまうので注意が必要です。

デザインやHTMLで気をつけるポイント

システム連携時にデザインやHTMLに関して特におさえておきたいポイントです。事前に制作メンバーと協議して仕様を定めておくとスムーズに進行できます。

動的なテキスト

システムで動的に表示されるテキストは量が変わる可能性がありますので、最小/最大文字数でも崩れないようにします。また動的なテキストは画像にできませんのでデバイステキストにし、装飾したい場合はWebフォントなどを利用します。

表示パターンの網羅

ボタンやアイコンなどの表示がある場合は必要なパーツをすべて用意し、どの表示パターンでも崩れないようにマークアップを行います。

システムを考慮したマークアップ

ボタンを画像として置くのかCSSで表示するのかなどはシステムの実装方法によりますので、事前に制作者同士で連携して仕様を決めておきましょう。

できればシステムは得意領域に

システムは新しい技術や環境、ツールなどが日々進化していて最新情報やトレンドなどを追うのはエンジニアに任せてもいいと思いますが、制作メンバーと連携ができる最低限の知識やWebディレクターとしてのシステムの理解をしておくことで、プロジェクトをスムーズに進めることができます。

最近は様々なシステムの組み込まれたWebサイトも多く、システムに強いWebディレクターは活躍の場も増えます。まずは今回紹介したようにWebディレクターとしてのシステム理解からでいいと思いますが、余裕がでてきたら実際に簡単なプログラムを書いてみるといろいろな点に気づけるのでおすすめです。その際はprogateのような無料のラーニングサイトもありますので、ぜひチャンジしてみてください。