1. 基本ルールと思想
基本構造
※ バージョンによって多少ネーミング等が異なる場合があります
2. 基本方針
- コーディング作業の効率化とデザイン資産の再利用
- デザイン・レイアウトの自由度の高さを維持
- 表示の高速化
- 基本的なSEO対策と障害者への配慮
- モバイルフレンドリー
- 柔軟にバージョンアップ、修正を行う
2-1. コーディング作業の効率化とデザイン資産の再利用
「MOD」概念の導入
1度作成したことがあるデザインで汎用性のあるものは「MOD」というレイアウト資産として蓄積していきます。
具体的には「 /scss/modules.scss 」内にスタイルシートを追加していきます。
別プロジェクトでもHTMLコードをコピー＆ペーストするだけでレイアウトやパーツを再利用できるようにしていくことが狙いで、この「modules.css」は随時バージョンアップしていきます。
コンパイル済modules.cssは、現在は各プロジェクトごとにインストールされていますが、将来的にはCDN等で外部読み込みをすることも視野に入れています。
また、日常のコーディングにおいても、
- PHPやjQueryを上手に利用し、一度書いたコードは何度も書かないで済むような工夫をする
- かわいい、かっこいいという理由だけではなく、プロジェクト本来の目的やUI、人間工学的視点も視野に入れ合理的で説明可能なデザインを行う
- できるだけ汎用性が高まるような構造設計を行う
などで、プロジェクトを完成させるたびに効率化は高まると考えています。
2-2. デザイン・レイアウトの自由度の高さを維持
とはいえ合理一辺倒で面白みのないデザインになってしまうのは本末転倒です。
機能をあまり硬直化させず、自由にレイアウトできる余地も残していきます。
「MOD」内にレイアウト規制はありません。
2-3. 表示の高速化
表示の高速化への努力として、
- CSSはSassを利用し、コンパイル形式は「Compressed」
- 使用画像の圧縮
- サーバーサイドでのgzip圧縮設定（Apacheで、利用可能な場合）
をできるだけ行います。
この方針から、ALL IN ONE SEO PACK など非常に負荷が高く表示速度を低減させるようなプラグインの使用は注意して行ってください。
2-4. 基本的なSEO対策と障がい者への配慮
HTML構造の文法通りに記述することがまずSEOの基本と考え、「正しいコード」を目指すようにしています。
またWebサイトは健常者だけでなく、視覚障がい者が利用することもあります。
目先の顧客の利益優先ではなく、「Webサイトという世界の利益」に寄与することが結果的に高度なSEOにつながると考え、ホリスティックな正常化をめざします。
2-5. モバイルフレンドリー
MODを作成する場合は、必ずモバイルでの表示の正常化を確認してから実装します。
2-6. 柔軟にバージョンアップ、修正を行う
使用していく中で、バグや問題があった場合にはできるだけ早く修正します。
またお客様等の意見は柔軟に吸収して、適宜バージョンアップを行います。
ただし、身勝手なSEOに関する修正は行いません。