HTMLコーディングを効率的に作業するコツとは

　ホームページのHTMLコーディングは、次のような手順で作業しましょう。

• サイト全体の基本的な設定を決める
• ヘッダー・フッターなどの共通部分をコーディング
• トップページのコーディング
• よく使用するパーツ（コンポーネント）のコーディング
• 主要ページのコーディング
• 下層ページのコーディング

　ポイントは、ホームページ全体で使用するパーツを見極めてコーディングし、パーツを流用することです。効率よくコーディングできてミスも少なくなります。

　僕は以前、Web制作会社でホームページのコーディングを担当していました。制作したホームページは40サイト以上です。制作をする中で、効率よくコーディングするために工夫した工程が上記でした。

　この記事ではコーディング手順を中心に、ホームページ制作のコツをお伝えしていきます。

HTMLコーディングの最大のコツとは

　HTML、CSS、JavaScriptは、それぞれ単一でマークアップしてしまうことです。それぞれの言語を並行して作業してしまうと、パソコンのブラウザ移動やツールの切り替えの回数が多くなり、作業が中断してしまいます。

　具体的には、HTMLをすべて書き切ってから、CSSで装飾をしていくイメージです。全ページ、HTMLだけを書いてしまって問題ないくらいです。
　慣れないうちは、単一ページのHTMLをコーディングして、CSSでレイアウトを組んでいくといいでしょう。

　これが効率化の最大のコツになります。

　くわえて、ソースコードを生成してくれるツールやスニペット（ソースコードのコード郡を保存しておくこと）を使えば、かなり早くコーディングできるようになります。

HTMLコーディングの効率的な手順とは

　それでは、具体的なコーディングの手順を紹介していきます。

• サイト全体の基本的な設定を決める
• ヘッダー・フッターなどの共通部分をコーディング
• トップページのコーディング
• よく使用するパーツ（コンポーネント）のコーディング
• 主要ページのコーディング
• 下層ページのコーディング

サイト全体に関わる基本的な設定をコーディングする

　HTMLを書き始める前に、ホームページの全体に関わる仕様や設計を確認しましょう。その後、HTMLの基本的な設定をコーディングしていきます。

要件を確認する

　まずはホームページの要件を確認しましょう。仕様を間違ったまま制作してしまうと、後戻りできず、取り返しが難しくなってしまいます。

ワイヤーフレームを確認する

　ホームページの設計書となるワイヤーフレームを確認します。ワイヤーフレームはWebデザインのひとつ前の工程で、導線の設計やシステムの細かい要望などが記載されています。

デザインを確認する

　要件や仕様・設計を確認したあと、はじめてWebデザインを確認します。すぐにデザインデータを開いて、HTMLコーディングをはじめることはやめましょう。重大な見落としに後から気づいても、後戻りできない場合が出てきます。

HTMLコーディングの基本的な設定を書く

　ホームページ全体に関わる、サイト幅やフォント設定・文字の大きさ・余白設定などをコーディングしていきます。

• ホームページのサイト幅を記述する
• フォントサイズ・Webフォントの使用を記述する
• 文字サイズの大きさを記述する
• ホームページで使用するカラー設定をする
• ブラウザ間の表示を調整するCSS（ノーマライズ）を設定する
• レスポンシブ対応の記述を書く

　ホームページ全体に影響する項目をはじめにコーディングしておきましょう。CSSのコーディングは最低限しておきます。

ヘッダー・フッターなどの共通部分をHTMLコーディングする

　共通部分を先にコーディングすることで、ホームページの骨格ができあがっていきます。

　複数人でコーディングを進めていく場合に、共通パーツを先にコーディングしておくと複数人で並行して作業を進められ作業効率が上がります。

　ひとりはトップページのコンテンツをコーディングし、もう一人は下層ページのコーディングをするなどです。

ヘッダーのコーディング

　ロゴ・資料ダウンロードやお問い合わせボタンなど、ホームページの行き先を案内する重要なパーツです。ページをスクロールした時に、ヘッダーが固定で追従するヘッダーなど、仕様も確認しておきましょう。

　レスポンシブ対応する場合は、ハンバーガーメニューといわれるヘッダーメニューを格納して表示する機能も必要になります。

グローバルナビのコーディング

　ヘッダーに格納されている場合がほとんどで、下層ページへの導線になります。ボタンなどのリンクをマウスオーバーした時に、色が変化したり、文字が太字になったりするアニメーションをつけると、ユーザーの利便性が向上します。

フッターのコーディング

　ロゴ・ホームページのサイトマップとなる下層ページへのリンクを設置します。ページのトップへ戻るボタンを実装しておくと、ユーザーの利便性が上がります。

お問い合わせへの導線（オファー）

　電話番号やお問い合わせページへの導線となるリンクなど、ユーザーが何かしらのアクションを起こすためのコンテンツやパーツをオファーといいます。トップページはもちろん、下層ページにも設置することが多いパーツです。

下層ページのヘッダーコーディング

　下層ページのヘッダーには、そのページのカテゴリー・コンテンツをイメージさせたり説明する、画像やキャッチコピー・リード文を掲載します。

トップページのHTMLコーディング

　トップページのHMTLコーディングは、時間をかけてしっかりと実装していきましょう。

• 見出し（h1〜h6）
• ボタン・テキストリンク
• ブロックの余白（上下左右）
• 下層ページでも流用するブロック
• レスポンシブ対応

　トップページには、下層ページや他のページでも流用する装飾やブロックがいくつもあります。時間をかけて細かくコーディングしておくことで、その他のページのコーディングが効率的に作業できます。

よく使用するパーツ（コンポーネント）のコーディング

　HTMLコーディングでは、あるパターンのレイアウトやブロックのことを、コンポーネント（部品）といいます。

　下層ページで使用するコンポーネントを事前にコーディングしておくと、下層ページの制作はパーツを組み合わせるだけでページが完成します。

その他のページのHTMLコーディング

　トップページを複製し、共通コンポーネントを流用しながら以下のページをコーディングしていきましょう。

• 主要ページのコーディング
• 下層ページのコーディング
• お問い合わせページのコーディング

　ホームページの制作会社では、カテゴリーごとに担当を分け複数人でコーディングしていくこともあります。

システムを組み込むページのコーディング

　ブログやお知らせのコンテンツには、記事の投稿・管理するシステムを導入します。CMS（コンテンツマネジメントシステム）といい、代表的なソフトウェアにWordPressがあります。

　WordPressの投稿機能を実装する際の注意点は、投稿記事や要素が追加されたときにレイアウトが崩れないようにコーディングすることです。

• お知らせ一覧のテキストが多くなった時
• お知らせ記事のリンクやカード式リンクが多くなった時

　これらの場合を想定し、事前にHTMLコーディングの段階で確認しておくといいでしょう。

SEOを意識したHTMLコーディング

　HTMLコーディングすることをマークアップといいます。ホームページを正しい基準に従ってマークアップすると、SEO（Search Engine Optimization）、Google検索などの検索エンジン対策に効果があると言われています。

タイトルタグ <title>

　ページのタイトルを記述するタグです。検索エンジンの検索結果に表示される文章で、ページに関連するキーワードを入れたタイトルにします。

見出しタグ <h1> 〜 <h6>

　見出しタグです。<h1>は、通常ページにひとつ記述されていることがいいとされています。ページの見出しに<h1>タグを使い、コンテンツのセクションごとに<h2>タグを記述していくといいでしょう。

画像タグ <img>のalt属性

　<img>のalt属性は、画像の代わりとなるテキストです。 何かしらの理由で画像が表示されなかったとき、代替手段として表示させるための文言で「代替テキスト」と呼ばれています。Google検索では、画像検索でヒットする場合があるため、きちんと記述しておきましょう。

HTMLチェックツール

　HTMLコーディングのマークアップを確認したいときは、以下のツールで確認しましょう。

W3C

https://validator.w3.org/

　ここで紹介したSEO対策はほんの一部です。また、正しいマークアップをしたからといって、必ずしも検索順位が上位に表示されるとも限りません。正しいマークアップをすることで、HTMLのメンテナンス性が向上し、ユーザーの利便性も上がります。

　社内のリソースや外部のコンテンツとも連携をはかり、成果を挙げていきましょう。

HTMLコーディングのテスト・デバッグ

　HTMLコーディングが完了したら、テスト・デバッグを行います。HTMLタグの閉じ忘れ・リンク切れのチェックなど、初歩的な記述ミスから、ブラウザの表示崩れなど、細かく確認をしていきましょう。

HTMLコーディングを効率化するツール

　エディターやブラウザでの確認を手助けしてくれるツールなどを活用すると、HTMLコーディングは効率的・正確に作業できます。

Visual Studio Code

　Visual Studio Codeは、マイクロソフト社が提供している無料のテキストエディタです。エディタに迷ったら「VS Code」を使うといいでしょう。HTML・CSSのタグやプロパティのサジェストはもちろんのこと、ディレクトリ構造を見ながら作業できるので、常に全体像を把握しながら作業できます。

Notion（ノーション）

　Notionは、メモやタスク管理・ドキュメント管理・データベースの作成など、さまざまなツールをひとつにまとめられるので便利です。しかも無料で使用できます。
　オススメの使い方は、何度も使用するHTMLのコードをスニペット（コード群）として保管しておくことや、制作の手順・制作タスクをメモしておくことです。

GitHub

　GitHubは、バージョン管理サービスです。HTMLやCSS・JavaScriptなどのソースコードの保存先として使用でき、変更の履歴も保存できるので、バックアップとしても使用します。保存したファイルは、いつでもどのバージョンでもダウンロードできるので、ホームページ制作会社では、必須のツールとなっています。

CSS三角形作成ツール

　CSSのコードを自動で生成してくれるジェネレーターです。CSSで記述することが可能な装飾・テクニックは無数にあり、中でもCSS三角形で三角形を描くことはよくあります。

　ジェネレーターを使えば簡単に再現できるため、時間の短縮になります。他にもグラデーションを再現するものや、アニメーションを再現してくれるジェネレーターもあるので、積極的に活用しましょう。

Figma（フィグマ）

　Figma（フィグマ）は、ホームページデザイン・アプリデザインに特化したデザインソフトです。HTMLコーディングをしていると、画像の書き出しや・パーツのリサイズを行うことが多くあります。デザインで使用したAdobeなどのソフトを使用してもいいですが、デザインデータに変更をかけたくない場合に、簡易的にFigma（フィグマ）などのツールを使用します。

　Figma（フィグマ）は、オンラインツールでソフトのインストールが不要なツールです。ブラウザベースで使用できるので、活用すると効率的にコーディングができます。

TinyPNG

　TinyPNGは、画像のファイルサイズを圧縮してくれるツールです。ホームページに掲載する画像は、適切なサイズで表示し、できる限りファイルサイズを圧縮して設置する必要があります。画像の容量を圧縮しないまま掲載すると、ホームページの読み込み速度が遅くなり、ユーザーの利便性を低下させ、Googleなどの検索エンジンにも影響を及ぼしてしまうからです。

　ここで紹介したツールはほんの一部です。ブラウザにインストールできるアドオンや有料のサービスを使うのもいいでしょう。

運用を考えたコーディング

　HMTLコーディングは、無駄なく正確に丁寧に作業することで、ホームページの運用を楽にしてくれます。

　ホームページは公開してから長い運用期間に入ります。制作の期間よりも圧倒的に運用の期間が長いのです。
　HTMLコーディングが複雑で整理されていないと、ページやコンテンツの修正や追加が難しくなり、メンテナンス性は著しく低下します。運用していく中で管理者・担当者が変わることもあるでしょう。

　運用を想定してコーディングすることは、デザイン工程の段階から考えておくといいでしょう。HTMLコーダーもデザインの工程を知ることはとても重要です。

　制作経験や知識を積まないと難しいかもしれません。ですが、意識してコーディングを続けていくことで慣れてきます。そして、ユーザーにとって使いやすいホームページを目指してコーディングしていきましょう。

　この記事が、お役に立てればうれしいです。

のざき寿

物書き

TwitterInstagram

元芸人 / Webエンジニア5年 / SEOライティング2年 / コピーライター養成講座卒業