デザインから、意味のあるHTMLへ。

見た目だけで
終わらせない。

ブリーフの段階から意味構造を考え、セマンティックなHTMLへつなぐオープンソースプロジェクト。

リポジトリを見る設計資料とスキル草案をまとめた、開発中のスターター

デザインとコードを、意味でつなぐ

三つの作業経路を草案として整理しています。

01 / DESIGN TO CODE

デザインカンプを手がかりに、コンテンツの意味や操作を考えながらHTMLへつなげます。

02 / BRIEF TO DESIGN

ブリーフの段階から意味構造を考え、実装につながるデザインカンプを目指します。

03 / REVIEW

既存サイトを読み解き、根拠と検証範囲を明らかにして改善の手がかりを示します。

<main>
  <article>
    <h1>記事のタイトル</h1>
    <p>内容に合った要素を選ぶ。</p>
  </article>
</main>

見た目を組み立てるときも、コンテンツのまとまりや見出し、操作の意味をデザインの早い段階から考えます。ここに示すHTMLは考え方を伝える短い例です。