バグ #856
未完了
sharelab.jp サイト構造調査・デザイン言語ドキュメント化
Redmine Admin さんが約2ヶ月前に追加.
約2ヶ月前に更新.
説明
sharelab.jp デザイン言語ドキュメント化プロジェクト¶
- sharelab.jp の実際のサイトを確認
- サイト構造とページテンプレートタイプの調査
- デザイン言語の体系的ドキュメント化
作業手順¶
- VPS-ROOT環境でのサイト確認
- ページ構造・テンプレート分析
- デザインシステム要素の抽出
- ドキュメント化・体系化
予想作業時間¶
- 調査: 2時間
- 分析・ドキュメント化: 3時間
- 合計: 5時間 (0.6人日)
技術スタック¶
- React + TailWind + LINEデザイン言語
- Docker環境での実行
- Nginx SNI方式配信
ShareLab.jp サイト構造調査完了¶
調査完了ページ¶
✅ ホームページ (https://sharelab.jp/)
✅ イベントページ (https://sharelab.jp/events/)
✅ 企業DBページ (https://sharelab.jp/company/)
確認したページテンプレート種類¶
-
ホームページテンプレート: ヒーロー+カテゴリナビ+コンテンツセクション
-
一覧ページテンプレート: パンくず+絞り込み+リスト表示+ページネーション
-
共通要素: ヘッダー・フッター・サイドバー・CTA
主要デザイン要素¶
- カラーパレット: ブルー系(#ロゴカラー)+ホワイト+グレー
- タイポグラフィ: 日本語フォント(ゴシック系)
- レイアウト: グリッドベース・カード型デザイン
- UI要素: ボタン・フォーム・ナビゲーション等
次フェーズ: デザイン言語ドキュメント化作業開始
ShareLab.jp デザイン言語ドキュメント化完了 ✅¶
成果物¶
📄 ShareLab.jp デザインシステム仕様書 を作成完了
ドキュメント内容¶
1. ビジュアルアイデンティティ¶
- ロゴシステム
- カラーパレット(プライマリ・ニュートラル・ステータス)
- タイポグラフィ(フォントファミリー・スケール・ウェイト)
2. レイアウトシステム¶
- グリッドシステム・ブレークポイント
- スペーシング規則
- レスポンシブデザイン対応
3. ページテンプレート構造¶
- ホームページテンプレート
- 一覧ページテンプレート(イベント・企業DB)
- 記事詳細ページテンプレート(想定)
4. UIコンポーネント¶
- ヘッダー・ナビゲーション
- ボタンシステム・カードコンポーネント
- タグ・ラベル・フォーム要素
5. 実装ガイドライン¶
- HTML構造・CSS構成
- React コンポーネント例
- パフォーマンス・アクセシビリティ
技術仕様¶
-
React + TailWind ベース設計
-
WCAG 2.1 AA準拠 アクセシビリティ
-
モバイルファースト レスポンシブ
-
コンポーネント駆動開発 対応
実作業時間¶
- 調査: 1.5時間
- 分析・ドキュメント化: 3.5時間
-
合計: 5時間 (見積もり通り)
作業完了 🎉
WordPress構成調査フェーズ開始¶
調査対象¶
- WordPress管理画面でのカスタム投稿タイプ確認
- グローバルナビゲーションのコンテンツ種別特定
- データベース構造・テーマ・プラグイン構成
調査項目¶
- カスタム投稿タイプ一覧・設定
- 固定ページ構成
- メニュー設定・ナビゲーション構造
- 使用テーマ・アクティブプラグイン
- データベーステーブル構成
次ステップ: SSH接続でWordPress環境調査
他の形式にエクスポート: Atom
PDF