ウェブサイトを制作する前には必ず設計を行いましょう。設計を行うことでメンバーが変わってもクオリティを保ったままウェブサイトを制作することが可能です。
また、これはディレクションの領域ですが、ディレクターのいない小さな現場では自分でやるしかありません。いきなり制作を始めると時間もかかってしまいますので、「どのようなもので、どのようなルールで制作するか」という設計をあらかじめ行うことが大切です。
なぜ設計が必要なのか？
設計通りに作ると時短になるだけでなくメンテナンスもしやすくなります。クライアントが知識のある人であれば、正しく美しいフォルダ構成を提供することで自分の評価も上がります。
また、他に編集者が居る場合はルールの記載されたファイルを渡すだけで共通の認識を持って制作していくことが可能です。
試しに、このブログの設計図は下記のようになっています。
設計に必要なもの
設計に必要なものは多くありますが、下記のものが最低限必要です。
テーマやコンセプト
どのような方向性で制作していくか、そのテーマに則ってデザインされているかを設計します。どの部分に誰が何人必要か、それはどれくらいの期間が終わらせる必要があるのかを決めましょう。
カラースキーム
どのような色を使い、どのような色は使わないか、トンマナを合わせるために明確にしておく必要があります。プライマリ、セカンダリ、アクセントなどのカラーを決めておく必要があります。
ライティングルール
「です/ます」などの敬体や「だ/である」などの常体の使い方、読点と句点のルールなど、SEOに直結するライティングのルールを決めておく必要があります。クライアントがブログを更新していくスタイルになったときにユーザーが離れてしまわないように整理しておきましょう。
命名規則
CSSやJavaScriptに使う命名規則も決めておきます。命名規則には単語の最初を大文字にする「パスカルケース」や、JavaScriptで使われている最初の単語のみ小文字にする「キャメルケース」、全て小文字で単語同士をハイフンで繋げる「ケバブケース」などがあります。
命名規則はソースをウェブからコピーしたときに壊れることがあり、そのまま放置しておくと他にも影響が出ることがあるため必ず守るようにしましょう。
マークダウンで設計する
では、具体的な設計方法を見てみましょう。
マークダウンが使えるのであれば、いくつかの注意事項やスキーム、レギュレーション、フォルダ構成を記載しましょう。
VSCodeではAscii Tree Generatorというエクステンションを使えば下記のようなファイルツリーも簡単に作成することができますよ。
. ├── .htaccess └── wp-content ├── index.php └── themes ├── index.php ├── theme └── theme-child ├── front-page.php ├── single.php ├── category.php ├── footer.php ├── style.css ├── style.scss ├── css │ ├── common.scss │ ├── reset.scss │ └── index.scss └── js ├── script.js └── jquery.js
ただフォルダ構造が深くなると理解するまで時間がかかるので、適宜使い分けるようにしておきましょう。
Googleスプレッドシートで設計する
無料で使えるGoogleスプレッドシートであれば図形描画を使って直感的に作ることができます。Googleスプレッドシートは招待したユーザー同士で共同編集もできるので、複数人でブレインストーミングを行いながら作っていく…なんてことも可能ですよ。
レギュレーションや注意事項などはシートごとにまとめておきましょう。
ちなみに図形描画は上部の「挿入」から作成することができます。
さいごに
設計図がなければトラブルが起こったときにもナレッジを蓄積させることができなくなり、トラブルの対応に不要なコストがかかってしまう原因にもなります。ウェブサイトを作成する前には必ず設計を行ってから共通認識を持って作っていきましょう！
