Webサイトでよく使うモジュールを作りました
SE・情シス担当歴20年のコウノです。
本記事では、Web制作におけるモジュール設計について解説します。
「制作期間を短縮したい」、「複数人で協力してサイト制作を進めたい」といった希望はあるけど、なかなかうまくいかないと悩んでいませんか？
複数の大規模サイトを運営している人・組織では、シッカリしたガイドラインがあり、メンバーがガイドラインに従う仕組みがあります。モジュール一覧は、ウェブサイトの品質やメンテナンスのしやすさを向上させるのに役立つツールです。複数のサイトを制作・運営するときの生産性向上にも役立ちます。私が自作して絶賛活用中のモジュール一覧も掲載しますので、参考にしてみてください。
なお、モジュールの重要性や概要は理解しているから、Webサイト制作やWebサイト運用業務を依頼したいというかたは、以下のページから「無料相談」とメッセージをいただければと思います。
＼自社にノウハウが貯まる業務代行／「パソコン業務・情シス代行」を詳しく読む
モジュール（コンポーネント）とは
頻繁に使用する要素を他にも使い回せるように考慮した部品をモジュールといいます。モジュール化を意識した設計をモジュラーデザインと読んだりもします。
製品を設計する前に限定された製造設備で造られる互換性が高いモジュラー部品群を設計しておき、個別の製品は顧客要求に合う部品をモジュラー部品群から選択してカスタマイズ設計する「製品多様化と部品種類少数化を両立して売り上げアップと原価低減を同時に実現する」設計の方法
ウェブサイトのモジュールの具体例を紹介します。モジュールのことをコンポーネントと呼んだりもします。
- 見出し
- リンク
- ボタン
- ボックス
- 表
- フォーム など
見出しやボタンは、サイトによってデザインを変更する必要があるかと思いますが、キーカラーやアクセントカラーを定義しておけば、カラーコードを置換するだけで新しい部品に生まれ変わらせることもできます。
モジュール一覧デモ
モジュールのプレビューだけでなく、利用するためにHTMLタグも出力すると活用しやすいです。
モジュール設計を導入してよかったこと（メリット）
実体験をもとに、モジュール設計をしてよかったことを紹介します。
制作メンバーの意思疎通がスムーズ
デザインデータの過不足によるデザイナーとコーダーのケンカが減ります。
トップと下層１ページのデザインデータでコーディング工程に進み、途中でデザインが不足していることに気がつくことはよくあります。モジュール一覧を見ながら、不足しているモジュールのデザインをディレクターを交えて話し合って決めることができます。
品質が一定（制作者に依存しない）
モジュール一覧がガイドラインになり、デザイナーのデザインが散らかるのを防げます。
また、コーディングは、モジュール一覧に掲載したモジュールをマークアップ（コピペ）するだけなので、「HTMLを始めたばかりでCSSはよくわかりません」というコーダーでもコーディングに参画できるのがメリットです。
ただし、モジュール一覧を作るコーダーは、CSS設計を熟知したベテランコーダーを任命しましょう。
RPA・ITツール導入・検討