【図解】ファイル整理の4つの鉄則｜「探す時間」をゼロにするフォルダ管理術

import React from 'react';

const App = () => {

  const rules = [
    {
      title: '1. ファイル名の付け方',
      description: '誰が見ても内容が推測できるよう、命名規則を統一します。日付、案件名、内容、バージョン情報を含めることで検索性が格段に向上します。',
      example: '20250727_新サービス企画_議事録_v2.docx',
      sources: [
        { url: 'https://ones.com/ja/blog/document-management-best-practices/', text: 'ones.com' },
        { url: 'https://www.ricoh.co.jp/magazines/workstyle/column/file-naming-structure/', text: 'ricoh.co.jp' }
      ]
    },
    {
      title: '2. フォルダの分け方',
      description: '業務内容やプロジェクトに応じてフォルダを分類します。階層は3〜4階層程度に抑え、フォルダ名の先頭に番号を振ると意図した順序で表示できます。',
      example: '例: 01_営業部, 02_開発部',
      sources: [
        { url: 'https://note.com/light_pika7804/n/na75e5a557721', text: 'note.com' },
        { url: 'https://insights-jp.arcserve.com/file-server-organization', text: 'arcserve.com' }
      ]
    },
    {
      title: '3. 不要ファイルの削除・保管',
      description: '定期的に不要なファイルを整理するルールを設けます。「temp」や「archive」フォルダを活用し、完了したプロジェクトのファイルなどを移動させます。',
      example: '最終更新日から1年以上経過したファイルをアーカイブ',
      sources: [
        { url: 'https://business.ntt-east.co.jp/service/coworkstorage/column/folderkanri/index.html', text: 'ntt-east.co.jp' },
        { url: 'https://www.boxsquare.jp/blog/folder-management', text: 'boxsquare.jp' }
      ]
    },
    {
      title: '4. アクセス権限のルール化',
      description: '情報漏洩リスクを低減するため、部署や役職に応じてフォルダやファイルへのアクセス権限（閲覧のみ、編集可など）を適切に設定します。',
      example: '経理フォルダは経理部員のみ編集可能',
      sources: [
        { url: 'https://www.narekan.info/guide/file-sharing-rule/', text: 'narekan.info' },
        { url: 'https://ones.com/ja/blog/knowledge/optimize-shared-server-folders/', text: 'ones.com' }
      ]
    }
  ];

  const folderStructure = `
📂 01_プロジェクトA
  ├── 📁 01_資料
  │   ├── 📄 20250701_競合調査レポート_v1.pptx
  │   └── 📄 20250715_要件定義書_v3.docx
  ├── 📁 02_議事録
  │   └── 📄 20250727_定例会議事録.md
  └── 📁 03_成果物
      └── 📄 20250801_モックアップ_v2.png

📂 02_定例会議
  └── 📁 2025年
      ├── 📁 01_月次報告
      └── 📁 02_議事録

📂 03_共有資料
  ├── 📁 01_テンプレート
  └── 📁 02_マニュアル
  `;

  return (
    <div className="bg-gray-50 font-sans p-4 sm:p-6 md:p-8">
      <header className="text-center mb-10">
        <h1 className="text-3xl sm:text-4xl font-bold text-gray-800">社内フォルダ・ファイル整理のベストプラクティス</h1>
        <p className="text-gray-600 mt-2">業務効率と生産性を向上させるための具体的なテクニックと考え方</p>
      </header>

      <main>
        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-700 mb-6 text-center">ファイル・フォルダ管理の4大基本ルール</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {rules.map((rule, index) => (
              <div key={index} className="bg-white rounded-xl shadow-md p-6 flex flex-col hover:shadow-lg transition-shadow duration-300">
                <h3 className="text-xl font-bold text-blue-700 mb-3">{rule.title}</h3>
                <p className="text-gray-600 text-sm mb-4 flex-grow">{rule.description}</p>
                <div className="bg-gray-100 rounded p-3 text-sm font-mono text-gray-800 break-words mb-4">
                  <span className="font-semibold">例:</span> {rule.example}
                </div>
                 <div className="text-xs text-gray-500 mt-auto">
                  <span className="font-semibold">出典:</span>{' '}
                  {rule.sources.map((source, i) => (
                     <span key={i}>
                        <a href={source.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">{source.text}</a>
                        {i < rule.sources.length - 1 && ', '}
                     </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="bg-white rounded-xl shadow-md p-6">
          <h2 className="text-2xl font-semibold text-gray-700 mb-4">フォルダ構造の具体例</h2>
          <p className="text-gray-600 text-sm mb-4">番号付けと階層化により、誰が見ても直感的に理解できる構造を目指します。</p>
          <div className="bg-gray-800 text-white rounded-lg p-4 font-mono text-sm whitespace-pre-wrap">
            {folderStructure}
          </div>
           <div className="text-xs text-gray-500 mt-4">
              <span className="font-semibold">出典:</span>{' '}
              <a href="https://note.com/light_pika7804/n/na75e5a557721" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">note.com</a>
           </div>
        </section>
      </main>
    </div>
  );
};

export default App;