AI Web Lab

Day 1: はじまりの宣言とHTMLの骨格

Day 1

正直なところ、コーディングには抵抗があります。しかし、「AI時代だからこそ、裏側で何が起きているか（基礎的な構造）を理解していることが強みになる」と感じ、自ら手を動かしてコードに触れる決意をしました。

Webページの骨組みとなる基本タグを打ち込んでみました。これまではただの「暗号」に見えていたものが、「ブラウザに指示を出すための箱」だと分かると少し親近感が湧きます。

<!DOCTYPE html>
<html>
  <head>
    <!-- 裏側の情報（タイトルなど） -->
  </head>
  <body>
    <!-- 画面に表示される情報 -->
  </body>
</html>
                

Day 2

<body>の中に、さらに見出しタグ（<h1>〜<h6>）や段落タグを入れていく「入れ子構造」の概念を体感しました。

見出しタグは単に「文字を大きくする」ためのものではなく、「検索エンジン（SEO）に情報の重要度を伝える」ための構造だということに気づき、デザイナーとしての視点が一段引き上がった気がします。

Day 3

<a href="..."> タグを使ってリンクを作る方法を学びました。ここで初めて「絶対パス」と「相対パス」という概念が登場し、ファイル同士の「住所」の関係性を意識するようになりました。

リンクは単なる文字の装飾ではなく、ユーザーを「お問い合わせ」や「購入」などのキャッシュポイントへ導くための「導線設計」そのものです。この仕組みを理解したことで、Webサイト全体の設計図がよりクリアに見えてきました。

Day 4

<img> タグで画像を表示しました。ここで重要なのは alt 属性（代替テキスト）です。単なるデザイン要素としてではなく、画像検索からの流入やアクセシビリティを担保する「意味を持つ情報」として画像を扱う視点を得ました。

Day 5

<ul> や <ol> と <li> を組み合わせて、情報を箇条書きにする構造を学びました。これも「入れ子構造」の代表格です。

タグの役割と入れ子構造という、Web制作の「一番大事な土台」が自分の中に築かれました。これらがSEOや導線を支えていることを実感し、いよいよ「デザインを当てる」ための魔法の準備に入ります！