• コーディング ファクトリーHOME
  • Coding Methodology
  • モジュール集制作時のコーディングチェックポイント

コーディングメソドロジー

第127回 モジュール集制作時のコーディングチェックポイント

何百ページもの大型案件はもちろん、運用時にも重要なものとなるモジュール集。その制作には高い技術力、あらゆる使用ケースを想定して作る想像力が必要とされます。今回は、モジュール集制作時にチェックするポイントとコーディングテストについてご紹介します。

1.余白(margin and padding)

ポイント

モジュール集はモジュールを単体で取り扱うため、要素間の「余白」についての調整を忘れてしまいがちです。実際にモジュールを使ってページをコーディングした後に余白を調整するという進め方もありますが、簡単なテストをして事前に最低限の調整をしておくことで、その後のチェックや修正の工数が大きく削減できます。

coding test
テスト1.
異なるモジュール間の余白テスト
モジュール集内の各モジュールを、セクションなどで区切らずにすべて続けてコーディングして、モジュール間の余白が保たれているか確認する。
テスト2.
同じモジュール間の余白チェック
テキスト・テーブルなど、同じモジュールを2回以上連続してコーディングする。<li>は中間行の余白も見るために3回以上。

2.増減(Maximum and minimum)

ポイント

実際のページ制作や運用時のことを考慮せずモジュール制作を進めると、後々起こりがちなのが、モジュールのアイテム自体やコンテンツの増減による表示崩れです。

coding test
テスト1. アイテムの数やコンテンツが増えたときの見た目が崩れないか。とくにflexboxを使用したボタンリストや横並びのリスト。
テスト2. PDFや外部リンクアイコンの付いたリンクモジュールは、複数行になった時のアイコンの位置やテキストの折り返し位置に注意する。
テスト3. アイテムの数やコンテンツが少なくなっても問題が無いか。特に横並びカードリストは文字量によって不揃いになりがちなので、高さ揃えの対策を。
テスト4. <figure>などの画像モジュールに、大きな画像・小さな画像を配置して、見た目に問題が出ないかを確認する。
テスト5. 長めのURLなど、英文を入れたときにモジュールから突き出してしまわないか。

3.入れ子(Nesting)

ポイント

モジュール集のデザインは個々のモジュールの見た目を確認するためのものなので、テーブルの中にリストが入ったり・またはその逆など、モジュール同士が「入れ子」になる場合については省略されていることが多いです。入れ子にすると、CSSが競合したり、継承されてしまうこともあり、後々に調整工数が最も多くかかりがちな点でもあります。こちらも事前に調整しておけば後々工数の大きな削減に繋がります。
右の項目は表示崩れが起こりやすい「入れ子」の例と、実際にチェックするポイントです。

coding test
テスト1.
「リスト」の中に「リスト」を入れ子にする
1-1. 入れ子されたリストはインデントされて一段下がっているか
1-2. 前後の<li>と余白が競合して、見た目に違和感が出ていないか
テスト2.
「テーブル」の中に「リスト、画像、グリッド」を入れ子にする
2-1. 入れ子されたモジュールの持つmarginがテーブルセルのpaddingと競合していないか
2-2. 入れ子されたモジュールがテーブルセルに収まっているか
テスト3.
「リスト、グリッド」の中に「テーブル、画像」を入れ子にする
3-1. 入れ子されたモジュールが親モジュールに収まっているか

モジュール集とは別に、コーディングテスト用のサンプルページを用意しましょう。デザインには反映されていない、実際使用した際のモジュールの見た目について、ディレクターやデザイナーと協議したり、クライアントに確認をとるのに使えます。また、ともに作業するコーダーにもルールが展開しやすくなります。

各項目のテスト実施は、余白テスト・調整→増減テスト・調整→入れ子テスト・調整、の順で行うことをお勧めします。
入れ子はCSSもネストすることになりがちなため、個々のモジュールで余白と増減をしっかり調整した後に行う方が安全かつスムーズです。
余白・増減・入れ子のコーディングテスト・チェックリストを作成し、制作・運用時に役立ててみてはいかがでしょうか。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム