田島光祥のポートフォリオへ
ようこそ!!

日本伝統工芸職人会の架空サイト制作

日本伝統工芸職人会のサイト制作

制作時間: 10.5h
役割: コーディング

技術スタック

HTML CSS JavaScript

プロジェクト期間

2025年12月
画像書き出し: 1h
コンポーネントの作成: 0.5h
ページの作成: 8h
全体確認・調整: 1h

チーム構成

デザイナー(生成AI Readdy): 1つ
コーダー: 1名

プロジェクト概要

日本全国の伝統工芸職人の技術や作品を広く国内外に紹介し、伝統工芸品の販路拡大と後継者育成の支援を目的としています。近年、グローバル化により日本の伝統工芸が注目される一方で、職人の高齢化や後継者不足という課題に直面しています。デジタルプラットフォームを通じて伝統工芸の魅力を発信し、新たな顧客層の開拓と若手育成の機会創出を図ります。


本プロジェクトでは、生成AIとFigmaを使用してデザインカンプを制作しました。そして、HTMLとCSS,JavaScriptを使って、デザインカンプを実装しました。

       

「イベント・ワークショップ」セクションのタブで切り替え可能なカレンダーのコンテンツは、デザインカンプに指示がなかったため省略しました。


CSS設計はBEMを使用し、保守性・拡張性・再利用性を高めました。コンポーネント化も行いました。


ピクセルパーフェクトを意識し、デザインカンプを忠実に実装しました。画面幅が変わってもデザインが崩れないようにしました。

技術的実装詳細

コーディング技術

  • 作品ギャラリーは、タブボタンを押下すると作品が切り替わるようにJavaScriptで実装
  • CSS設計 BEM による保守性・拡張性・再利用性の向上
  • PerfectPixel によるデザインカンプの忠実実装
  • Nu Html Checker によるHTMLコードチェック
  • CSS Validation Service によるCSSコードチェック
  • Analyze OGP and Twitter Cards によるOGPチェック

パフォーマンス最適化

  • アイコン画像はSVGで対応
  • TinyPNG 画像軽量化