セカンドコミュニティ株式会社
セカンドコミュニティ株式会社
Webページ作成ルール
2024/01/17 09:21 に作成
![Webページ作成ルール](https://toaster-prod.s3.ap-northeast-1.amazonaws.com/uploads/image_preset/7K7BkwezoARdqLew7qCnKyKV/image/c976e4d3e2fd24c60ecb0ce2ef652e88.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIA3AVTWH7LDZAZTAUB%2F20240117%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240117T094839Z&X-Amz-Expires=900&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEBEaDmFwLW5vcnRoZWFzdC0xIkgwRgIhAOyMKyFcTbwa%2BQU7vfsyDEAgYL591RhB%2BmVIpVYZRGTOAiEAuiP%2BZTowayE17mdCxp5UgpU2IZH2n8okS2R3Ez35RK0qlwUIuv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARAEGgw3NTczNjQ4MzQyNjIiDGsY3OdJmory6QUrayrrBIm2Yp5IQEF8Xq6Tfd6cwmVozl2bKOI%2BwGtSu5EHPUcQZTbKD6JVfbigcq5%2BK9olfdw1r%2Fx1ANQZ0m0%2F98HQYbcc0PoSyL6s3PmUu6aUOVMo9GRsjqaAm7c0141NqUpmrj42G%2FzDUh2LFDpw%2FmO1Sm%2FhxxqThadnOynW%2FAoRtszhf5v8%2FUFOw9adJpFBAiO2%2BnhD1By7VoI5FClUzAKqOt4Kot2l405O8Gl4QexI%2B0QEEm8Tkx7YYxYrNpnv%2FPfJ%2FbJ%2F9S9wt2OPpRJ3c6kykyJpCe56LaEaX1Mi6BQTk8OyA%2B8oUb6CydSaXi8qJ6AV0Guc5rqvqwtEsK614KXs2y4w%2FjP0PU8neZjKj9%2ByA13dtYzdZYPpuUU7LHupsBhOnTHlJIpPEfqVjJeVzaZmICnw%2FDlW43yYW3FoGHxp%2F9EmRPc8Vmu9p2NZ85ZrjN%2FKIZfFm2jWPB6w6InPzZ117oOuwR8eg0Ml%2BzED%2BbP4CRwnlhRND5JEdwc8tG%2BzqeIxSWpkFY0oJlxOc3EiajypX%2BSTvXVZGMyKGDWqPsiW4tLcmgtHcEg9NyLII%2BlUhwEyeyN82%2BA4BctsjjY26g8brQ8BEjkBfIqf16mnCwUJnT6on9MxrpkSQiV8naoMo%2FHl8KffE9baURXUZjeWSeMZIheBPU5CQ2xe28R8au3%2FXQFVJ7Y0ghp731xzjNWlhwnKNfjt%2BW6SnTvGQnH%2FLtb%2FOERN1NHztoGfvZIhe%2F5HW9XLggK0%2FGyevr7asf%2BeHfC2krJDVr7I%2B6FFivKzXt7ZXpFxzTg75ESWwGaMOtXgc3%2FXPlo%2Fnr9ZMitJu1YwobierQY6mgGWzD6vNMeIDcf6XJ4tB6Bq8NXV7g5YyZYdUUBVnunVM5J89ctqh16bJaAVoRfh4rmBHVShk9gmOLM63K4rmseL1piNxKZHqNM1nb1k60T7FliCVWWQIBfQsGFmZjdI4ityXGg8Si0rMh311aH%2BFEEXAifVaa1sE2acOa%2BBEVZ79yYAuv42exixtOzURwGJQ5f%2FWd8FvpojgAWm&X-Amz-SignedHeaders=host&X-Amz-Signature=a99cdffb2738c478b561b39561ec1721fc12e86cba6e86480d1016648970c22f)
1開発環境
Nuxt3の最新版を使用し、jQuery等は使用しないこと
SSGモードでビルドし、S3, CloudFrontにデプロイできる作りとする
2画像
原則webp形式で配置すること
ブラウザ標準の lazyload を使用すること loading="lazy"
原則 width, height 属性を指定すること
3コンポーネント化
複数ページで使用する可能性がある部分はコンポーネントとして作成すること
デザインファイルに色枠で指定は下記の意味を表している
赤:作成済み
青:未作成
緑:参考になる実装ありでコンポーネント化すべきもの
作成したコンポーネントの情報共有のための管理については下記を参照
[共通コンポーネント・テンプレートの管理方法]
https://toaster.how/sharing/recipes/AtP6tR2z0FpXdHLnx5cgURqM
4実装後のチェック
下記ページに従い、実装後にツールを使い文法・表示スピード等問題がないかチェックを行う
[Webページ作成・改修確認手順]
https://toaster.how/sharing/recipes/vyVaNX6JpZWUa8cTYyvJCNY2