HTMLコーダーとエンジニアが効率良く仕事を進めるコツ

  • このエントリーをはてなブックマークに追加


ディレクターとエンジニアが仲良く仕事をするためのコツを以前かきましたが、今回はコーダー(マークアップエンジニア)とエンジニアの話しです。

コーディングしたものを最終的にはエンジニアに渡すので、コーダーはエンジニアとの最後の掛け橋といっても過言ではありません。

コーダーとエンジニアの意思疎通ができていればコーディングからプログラミング完了までの工程が非常に効率よいものになるかと思っています。
エンジニア(プログラマーも含む)の立場から、もしもらうならこんなHTMLが良い!というポイントをまとめてみました。

もちろん各社、各人思っている作業分担等もあると思いますので、あくまで参考までに!

1. name属性はDB仕様書とリンクしてあらかじめ入力しておいてね。

これは既存サービスのデザインリニューアルなんかの場合はすごく重要になってきますが、inputタグなどのname属性はDB仕様書と連携してあらかじめ設定しておいていただけると非常にありがたいです。
もちろんエンジニアはコーディングの前にどの項目が画面上に入力項目として、表示されるのかが明確に記載されたDB仕様書を作成する必要がありますが、これはコーディングの際にやっておいてもらえるとかなり開発に専念できます。

2. maxlengthは仕様書を参照のうえセットしておいてね。

1と同様なのですが、inputタグのmaxlength属性の設定、これも仕様書に基づいてあらかじめ設定しておいていただけるとありがたいです。
プログラム上はエラーではねていても、ユーザービリティー上入力できなくしたほうが、混乱や入力のし直しはなくなるので、これは忘れないようにセットしておいて欲しいです。

3. tableタグの特にtrの使い方には注意してね!

一覧表示などループ処理をする部分に関してtableを使う時は気をつけてほしいです。
基本的に一覧表示はプログラムのループ処理をしますので、複雑なテーブル構成や同じ表示要素なのにtrを跨ぐような構成で組まれると、実装はできますが、効率の悪いプログラムになりがちです。

(たとえば写真は一行目でその写真に対するテキストは二行目で、同じ表示要素なのにtrタグは別になっているような構成。)

あと、エンジニアにはHTMLを理解はしていても、CSSが絡んでいたり、複雑なtableだとプログラムのバグで閉じタグがなかったりして、表示をめちゃくちゃにしちゃったりして、よく分からなくなってしまったりする場合がよくあります。
(釣りでいうところのオマツリ(他人の糸と絡まってぐちゃぐちゃになっしゃうこと)と同じでグチャグチャになってしまうともう一度もとのHTMLにゆっくり頭を整理しながらプログラムを埋め込まないといけなくなっちゃいます。)

これを防ぐためにもなるべくシンプルなHTMLがエンジニアにはやさしいのです。

4. リンクはすべて.phpにしておいてね。

リンク設定については個人的にはコーディングの領域だと思っています。
多分システム会社に外注して作業をお願いする場合も、よほど親切なシステム会社でない限り、リンクもされていないHTMLの修正まではしてくれないと思います。

ツꀀフッターやヘッダー周りのリンク設定もコーディングの時点でやっておいてもらいたいポイントです。
ファイル名についてはあらかじめサイトマップで指定しておいてコーディングの際に一括してセットしておいてもらうと非常に効率が良いです。

ちょっとしたことですが、ここまでやってもらえるとすごい楽だし効率良いです。

※ここまで偉そうに書いていますが、速攻で開発完了しないといけない場合は取り決めを省いてリンクなどの最終調整もエンジニアがやっていたりします。

事前にきっちり打ち合わせや決めごとを決めて作業すべきですね。。。

これらを確実に実行するために事前に最低限必ず用意しておきたい資料2つ

1. 入力項目など画面上の情報と関連付いたDB仕様書
ただの内部的なテーブル構成やリレーションだけではなく、表示入力項目と紐付いたDB仕様書もしくは仕様書が必要です。コーダーの方とはここでname属性などの認識を合わせておきます。

最大入力文字数なんかもきちんと載せておく必要はあります。

2. サイトマップ
ファイル名も明確にしたサイトマップです。
PHPであれば拡張子も.phpに変更しておいた状態で記載したものが良いです。

————

その人によって作り方もあると思うので一概には言えませんが、既存のサービスのりニューアルをした際にHTMLだけ新規にコーディングしたらname属性が全く入っていなくて、発注していたエンジニア会社から愚痴られたことがあります。

HTMLコーダーはコーディング技術もそうですが、+αを業界的にも求められるようになってきています。Web上でプログラムが動作する以上エンジニア(プログラマー)との連携は必ず必要になってきますので、上記ポイントを意識しておくと大変効率良く、仲良く作業できるかと思います。

執筆者:高本

株式会社8bit 取締役の高本です。 社内のWebサービス企画、プログラミングや、売上・請求管理にいたるまで幅広く担当しております。

関連記事

WordPress

WordPressの会員限定記事配信プラグイン「Simple Analytics」をリリースしました!

WordPressのイベントカレンダープラグイン「Simple Analytics」をリリースしました! ※この記事は2024年10月現在の情報です。 目次1 Simple Analyticsとは?2 こんなお悩みにおすすめです3 Simple Analyticsで できること3.1 月別・週別アクセス数3.1.1 確認できる項目3.2 ページ別アクセス数3.3 外部サイトからのアクセス数3.4 地域・デバイス別アクセス数3.5 時間帯別アクセス数3.6 ページ毎の直帰率3. […]

WordPress

WordPressの会員限定記事配信プラグイン「Limited Post Maker」をリリースしました!

WordPressのイベントカレンダープラグイン「Limited Post Maker」をリリースしました! ※この記事は2024年10月現在の情報です。 目次1 Limited Post Makerとは?2 どんなシーンで使える?3 Limited Post Makerで できること3.1 オウンドメディア、ブログの記事を会員のみに配信3.2 会員登録・ログインフォーム3.3 会員情報の管理4 使い方について5 システム要件6 導入のお問い合わせについて Limited P […]

WordPress

WordPressのフォームプラグイン「Easy Form Maker」をリリースしました!

WordPressのイベントカレンダープラグイン「Easy Form Maker」をリリースしました! ※この記事は2024年10月現在の情報です。 目次1 Easy Form Makerとは?2 どんなシーンで使える?3 Easy Form Makerで できること3.1 お問合せフォームを作成3.2 質問を自由に決めてアンケートフォームを作成3.3 Webサイトへの設置はショートコード1行3.4 問合せやアンケート結果をデータベースへ蓄積3.5 複数のフォームを設置するこ […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。