Organize photos: add gallery section, remove duplicates, add viewing documentation

README.md

@@ -0,0 +1,159 @@
+# ラスターマシナリー ウェブサイト
+
+工作機械修理の専門家 - 福山市・全国出張修理対応
+
+## 🌐 ウェブサイトの閲覧方法
+
+このウェブサイトは以下のURLで公開されています：
+
+### 本番サイト（推奨）
+**https://www.kikai.work**
+
+カスタムドメインでアクセスできます。こちらが正式なURLです。
+
+### GitHub Pages（代替）
+**https://lusterma.github.io/lus/**
+
+GitHub Pagesの標準URLでもアクセス可能です。
+
+---
+
+## 📸 整理した写真ギャラリーの閲覧
+
+先ほど整理した写真は、ウェブサイトの「**作業風景・機械写真**」セクションで見ることができます。
+
+詳しくは **[VIEWING_GUIDE.md](VIEWING_GUIDE.md)** をご覧ください。
+
+![作業風景・機械写真ギャラリー](https://github.com/user-attachments/assets/bc3f706f-2bb1-4340-b2eb-5ce329191814)
+
+---
+
+## 📱 対応デバイス
+
+- **デスクトップ・PC** - 完全対応
+- **タブレット** - レスポンシブデザイン対応
+- **スマートフォン** - モバイル最適化済み
+
+---
+
+## 🔧 ローカル環境での確認方法
+
+開発や編集時にローカルでウェブサイトを確認する方法：
+
+### 方法1: Pythonを使用（最も簡単）
+
+```bash
+# リポジトリのディレクトリに移動
+cd /path/to/lus
+
+# HTTPサーバーを起動
+python3 -m http.server 8000
+
+# ブラウザで開く
+# http://localhost:8000
+```
+
+### 方法2: Node.jsを使用
+
+```bash
+# リポジトリのディレクトリに移動
+cd /path/to/lus
+
+# http-serverをインストール（初回のみ）
+npm install -g http-server
+
+# サーバーを起動
+http-server -p 8000
+
+# ブラウザで開く
+# http://localhost:8000
+```
+
+### 方法3: Live Server（VS Code拡張機能）
+
+1. VS Codeで`index.html`を開く
+2. 右クリック → 「Open with Live Server」を選択
+3. ブラウザが自動で開きます
+
+---
+
+## 📂 ファイル構成
+
+```
+lus/
+├── index.html              # メインHTMLファイル
+├── images/                 # 画像フォルダ
+│   ├── *.jpg              # 機械・作業写真
+│   └── README.md          # 画像一覧
+├── videos/                 # 動画フォルダ
+│   └── CM2.mp4            # CM動画
+├── CNAME                  # カスタムドメイン設定
+├── robots.txt             # 検索エンジン設定
+├── sitemap.xml            # サイトマップ
+├── README.md              # このファイル
+└── VIEWING_GUIDE.md       # 写真閲覧ガイド
+```
+
+---
+
+## 🚀 デプロイメント
+
+このサイトは**GitHub Pages**で自動デプロイされています。
+
+### デプロイの仕組み
+
+1. `main`ブランチにプッシュすると自動的にデプロイ
+2. GitHub Actionsがビルドと公開を実行
+3. 数分後に変更が反映されます
+
+### デプロイ状況の確認
+
+GitHub ActionsのWorkflowページで確認できます：
+https://github.com/lusterma/lus/actions
+
+---
+
+## 📞 お問い合わせ
+
+**ラスターマシナリー（Luster Machinery）**
+
+- **電話**: 080-3880-4695
+- **メール**: info@kikai.work
+- **所在地**: 広島県福山市沼隈町常石
+
+### SNS
+
+- **Instagram**: [@luster_machinery](https://www.instagram.com/luster_machinery/)
+- **Facebook**: [luster50m](https://www.facebook.com/luster50m/)
+- **ブログ**: [キカイブログ](https://luster55.hateblo.jp/)
+
+---
+
+## 📝 更新履歴
+
+### 2026-02-24
+- 写真ギャラリーセクションを追加
+- 重複画像を整理・削除
+- レスポンシブデザインの改善
+- アクセシビリティの向上
+- README.mdとVIEWING_GUIDE.mdを追加
+
+### 2025年
+- ウェブサイト公開
+- カスタムドメイン設定
+- 初版リリース
+
+---
+
+## 🛠️ 技術情報
+
+- **ホスティング**: GitHub Pages
+- **フレームワーク**: 静的HTML/CSS/JavaScript
+- **ドメイン**: www.kikai.work
+- **SSL**: GitHub Pages自動SSL対応
+
+---
+
+## 📄 ライセンス
+
+© 2025 ラスターマシナリー. All rights reserved.

VIEWING_GUIDE.md

@@ -0,0 +1,149 @@
+# 整理した写真の閲覧方法
+
+## 📸 整理完了した写真ギャラリー
+
+先ほど整理した写真は、ウェブサイトの「**作業風景・機械写真**」セクションで見ることができます。
+
+### ✨ 整理内容
+
+**実施したこと：**
+1. ✅ 重複していた画像（`images/画像/`フォルダ）を削除（10ファイル、約1MB削減）
+2. ✅ 未使用だった8枚の写真を新しいギャラリーセクションに配置
+3. ✅ 不足していた画像を作成（insta-avatar.jpg、representative-photo.jpg）
+4. ✅ 写真の一覧をREADMEで文書化
+
+---
+
+## 🌐 ウェブサイトで閲覧する方法
+
+### 方法1: 本番サイトで確認（推奨）
+
+**URL: https://www.kikai.work**
+
+1. ウェブサイトにアクセス
+2. ページを下にスクロール
+3. 「**作業風景・機械写真**」セクションを探す
+4. 8枚の写真がグリッド表示されています
+
+または、サイドバーの「**作業風景・機械写真**」リンクをクリックすると直接ジャンプできます。
+
+### 方法2: GitHub Pagesで確認
+
+**URL: https://lusterma.github.io/lus/#gallery**
+
+直接ギャラリーセクションにジャンプするURLです。
+
+---
+
+## 💻 ローカル環境で確認する方法
+
+開発・編集中に確認したい場合：
+
+### Pythonで簡単に起動
+
+```bash
+# リポジトリに移動
+cd /home/runner/work/lus/lus
+
+# サーバーを起動
+python3 -m http.server 8000
+
+# ブラウザで開く
+# http://localhost:8000/#gallery
+```
+
+サーバーを停止するには：`Ctrl+C`
+
+---
+
+## 📋 整理された画像一覧
+
+### ヘッダーで使用中
+- `sinbol1.jpeg` - 会社シンボルマーク
+- `syasyou2.jpeg` - 代表者写真
+- `insta-avatar.jpg` - Instagram用アバター
+- `representative-photo.jpg` - SNSシェア用画像
+
+### ギャラリーに表示中（8枚）
+1. `IMG_0766.jpg` - 工作機械の内部部品修理作業
+2. `IMG_1217.jpg` - 旋盤の主軸とチャック部分の修理
+3. `IMG_1306.jpg` - 汎用旋盤機械の全体写真
+4. `IMG_1565.jpg` - 機械部品とギア
+5. `IMG_1774.jpg` - 工作機械の電装部品修理
+6. `IMG_2046.jpg` - NC制御盤の配線作業
+7. `IMG_2783.jpg` - 機械の油圧システム点検
+8. `image1.jpeg` - 修理完了した機械部品
+
+---
+
+## 🎨 ギャラリーの特徴
+
+### レスポンシブデザイン
+- **デスクトップ**: 複数列のグリッド表示
+- **タブレット**: 画面幅に合わせて自動調整
+- **スマートフォン**: 1列表示で見やすく
+
+### アクセシビリティ対応
+- 全ての画像に説明的なalt属性を追加
+- スクリーンリーダー対応
+- セマンティックHTML（figure/figcaption）使用
+
+---
+
+## 📂 ファイル構造
+
+整理後のimagesフォルダ：
+
+```
+images/
+├── README.md                    # 画像の説明文書
+├── sinbol1.jpeg                # シンボルマーク
+├── syasyou2.jpeg               # 代表者写真
+├── insta-avatar.jpg            # Instagram用
+├── representative-photo.jpg     # OGP用
+├── IMG_0766.jpg                # ギャラリー画像
+├── IMG_1217.jpg                # ギャラリー画像
+├── IMG_1306.jpg                # ギャラリー画像
+├── IMG_1565.jpg                # ギャラリー画像
+├── IMG_1774.jpg                # ギャラリー画像
+├── IMG_2046.jpg                # ギャラリー画像
+├── IMG_2783.jpg                # ギャラリー画像
+└── image1.jpeg                 # ギャラリー画像
+```
+
+**削除されたフォルダ:**
+- `images/画像/` - 重複していた10ファイルを削除
+
+---
+
+## 🖼️ スクリーンショット
+
+整理後のギャラリーセクション：
+
+![作業風景・機械写真ギャラリー](https://github.com/user-attachments/assets/bc3f706f-2bb1-4340-b2eb-5ce329191814)
+
+---
+
+## ✅ 完了した作業
+
+- [x] 重複画像の削除（10ファイル、約1MB）
+- [x] 不足していた画像の作成（2ファイル）
+- [x] ギャラリーセクションの追加
+- [x] ナビゲーションリンクの追加
+- [x] レスポンシブデザインの実装
+- [x] アクセシビリティの向上
+- [x] CSSクラスの整理
+- [x] 画像の文書化（README.md）
+
+---
+
+## 📞 質問・問題がある場合
+
+何か問題があれば、以下にご連絡ください：
+
+- **メール**: info@kikai.work
+- **電話**: 080-3880-4695
+
+---
+
+最終更新日: 2026年2月24日

images/README.md

@@ -0,0 +1,23 @@
+# images
+
+このフォルダーは画像ファイル用です。
+
+## 画像一覧
+
+### 使用中の画像
+- `sinbol1.jpeg` - 会社シンボル（ヘッダーで使用）
+- `syasyou2.jpeg` - 代表写真（ヘッダーで使用）
+- `insta-avatar.jpg` - Instagramアバター画像
+- `representative-photo.jpg` - Open Graph用代表写真
+
+### ギャラリー画像
+- `IMG_0766.jpg` - 作業風景1
+- `IMG_1217.jpg` - 作業風景2
+- `IMG_1306.jpg` - 機械写真1
+- `IMG_1565.jpg` - 機械写真2
+- `IMG_1774.jpg` - 作業風景3
+- `IMG_2046.jpg` - 機械写真3
+- `IMG_2783.jpg` - 機械写真4
+- `image1.jpeg` - 作業風景4
+
+これらの画像はウェブサイトの「作業風景・機械写真」セクションで表示されています。

index.html

@@ -453,6 +453,24 @@
       box-shadow: 0 2px 10px rgba(52, 152, 219, 0.08);
       padding: 6px 0;
     }
+    .gallery-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+    .gallery-image {
+      width: 100%;
+      height: auto;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    .gallery-caption {
+      text-align: center;
+      margin-top: 1rem;
+      color: #666;
+      font-size: 0.95em;
+    }
   </style>
 </head>
 <body>
@@ -597,6 +615,24 @@ <h2>主なサービス</h2>
           </li>
         </ul>
       </section>
+      <section class="card" id="gallery">
+        <h2>作業風景・機械写真</h2>
+        <figure style="margin:0;">
+          <div class="gallery-grid">
+            <img src="./images/IMG_0766.jpg" alt="工作機械の内部部品修理作業" class="gallery-image">
+            <img src="./images/IMG_1217.jpg" alt="旋盤の主軸とチャック部分の修理" class="gallery-image">
+            <img src="./images/IMG_1306.jpg" alt="汎用旋盤機械の全体写真" class="gallery-image">
+            <img src="./images/IMG_1565.jpg" alt="機械部品とギア" class="gallery-image">
+            <img src="./images/IMG_1774.jpg" alt="工作機械の電装部品修理" class="gallery-image">
+            <img src="./images/IMG_2046.jpg" alt="NC制御盤の配線作業" class="gallery-image">
+            <img src="./images/IMG_2783.jpg" alt="機械の油圧システム点検" class="gallery-image">
+            <img src="./images/image1.jpeg" alt="修理完了した機械部品" class="gallery-image">
+          </div>
+          <figcaption class="gallery-caption">
+            修理・メンテナンス作業の様子と取り扱い機械の一部です。
+          </figcaption>
+        </figure>
+      </section>
       <section class="card" id="repair-records" aria-labelledby="repair-records-title">
         <h2 id="repair-records-title">修理実績</h2>
         <div style="overflow-x:auto;">
@@ -758,6 +794,7 @@ <h2>Instagram</h2>
         <h2>その他リンク</h2>
         <ul style="padding-left:16px; margin:0;">
           <li><a href="#top">トップに戻る</a></li>
+          <li><a href="#gallery">作業風景・機械写真</a></li>
           <li><a href="#repair-records">修理実績</a></li>
           <li><a href="https://www.facebook.com/luster50m/" target="_blank" rel="noopener noreferrer">Facebook</a></li>
           <li><a href="https://luster55.hateblo.jp/" target="_blank" rel="noopener noreferrer">ブログ（キカイブログ）</a></li>