はじめてのWeb制作を、
8つのステップで。

誰に、何を伝えるかを決める。

最初から大きなサイトを目指さず、「自己紹介」「作品の紹介」「連絡先」のように、1ページに必要な内容をメモします。読み手が最初に知りたいことを見出しにし、その説明、画像、次の行動へのリンクという順で整理してみましょう。

白紙から考えるのが難しいときは、公式ポートフォリオテンプレートの構成が出発点になります。Guestでは1ページ、無料アカウントでは1プロジェクト10ページまで利用できます。

HTMLは内容と構造、CSSは見た目。

<h1 class="element-1">私の作品集</h1>
<p>Web制作で学んだことを紹介します。</p>

.element-1 {
  font-size: 36px;
  color: #2563eb;
}

Webcraftでは、画面上の編集からこれらのコードを生成します。最初からすべて覚える必要はありません。ひとつ操作して、対応するコードを探すところから始めましょう。

要素を追加して、内容を入れる。

1. エディターを開きます。初期サンプルには見出し「Hello World」、本文、ボタンが配置されています。テンプレートは上部の「新しいサイト / テンプレート」から選べます。
2. 左側の「要素を追加」で「見出し」「テキスト」「画像」「ボタン」などを選びます。要素は基本的にページやコンテナの流れに沿って追加されます。
3. キャンバスの文字をクリックして編集します。左のレイヤー一覧から要素を選び、右側の「文字内容」を書き換えることもできます。
4. 順序を変えるときはドラッグ＆ドロップ、サイズを変えるときは選択枠のハンドルや右側の数値入力を使います。

画像はPCからドロップするか、画像設定のファイル選択から追加します。利用権のあるPNG・JPG・WebP・GIF・AVIFを使ってください。1ファイルの上限は10 MBです。画像を説明する代替テキストも設定しましょう。

色・文字サイズ・余白を少しずつ調整する。

要素を選ぶと、右側にその要素の設定が表示されます。まず見出しの「フォントサイズ」を36px、「文字色」を青色にして、変化を確認してみましょう。次に背景との読みやすさや、本文との大きさの差を見直します。

一度に多くの設定を変えず、ひとつずつ比較すると仕組みを理解しやすくなります。試した結果が合わなければ、上部の「元に戻す」で戻せます。

下部のHTML / CSSで、操作の結果を確かめる。

1. 下部の「HTML」タブを開き、編集した見出しの文章を探します。<h1>が見出しのタグです。
2. 「CSS」タブへ切り替え、同じクラスの設定を確認します。文字サイズはfont-size、文字色はcolor、中央揃えはtext-align: center;です。
3. 上部の「学習モード」をONにして、設定変更時の説明を読みます。コードパネルの拡大ボタンも利用できます。

コード表示は、ビジュアル操作の結果を確認する場所です。自由なHTML/CSSやJavaScriptの追加は高度な操作に含まれ、現在準備中のPro向け機能です。

Desktopから、Tablet・Mobileへ。

Desktopを基本にデザインし、上部のTablet / Mobileボタンで画面幅を切り替えます。Webcraftは小さい画面向けに文字・余白・レイアウトを自動調整しますが、内容によっては確認と手直しが必要です。

• 見出しが読みにくい位置で改行されていないか
• 画像やカードが横にはみ出していないか
• ボタンの文字が収まり、押しやすい幅になっているか
• 左右の余白が狭すぎたり、広すぎたりしないか

修正したい画面幅に切り替えたまま、右側で必要な項目だけ変更します。手動の上書きは「自動に戻す」で解除できます。最後はプレビューや実際のスマホでも確認しましょう。

保存先を確認して、制作の続きを残す。

Guest：同じブラウザで続ける

制作データはブラウザ内に保存され、画像も同じブラウザの保存領域に保持されます。別の端末やブラウザには自動では移りません。ブラウザデータを削除すると作品を失う場合があるため、重要な内容は控えを残してください。

Free：クラウドに保存して、別のブラウザでも開く

アカウント画面から無料登録・サインインを行い、「現在のサイトをクラウドに保存」を選びます。サインインだけでは、ブラウザで制作中の内容が別の作品に切り替わることはありません。クラウド保存した作品は、一覧から選んで読み込めます。

Freeのクラウド保存は3プロジェクトまで。既存の作品を編集する場合と、別名で新しいプロジェクトを保存する場合で、使用する枠が異なります。保存状況を確認してから閉じましょう。

HTML/CSSと画像を書き出して、公開前に確認する。

1. 上部の「エクスポート」を開きます。コードを調べたいときはHTML/CSSのコピー、サイト一式が必要なときはZIPを選びます。
2. 画像を含むサイトはZIPで書き出します。HTML単体には画像が付属しません。ZIPには各HTMLと、参照中の画像ファイルが含まれます。
3. ZIPを展開し、index.htmlを開いて見た目とリンクを確認します。画像を別の場所へ移動すると、相対パスが合わなくなるため、フォルダー構造を保ってください。
4. 一般公開する場合は、ご自身で選んだホスティング先へHTML・画像等を配置します。公開先でページ間リンク、スマホ表示、画像、連絡先を再確認してください。

index.html
その他のHTMLページ
assets/
  images/
    あなたが使用した画像ファイル

迷ったときの確認ポイント。

画像が書き出したHTMLで表示されない

HTML単体ではなくZIPを利用し、画像フォルダーを含めて展開してください。クラウド画像の同期が失敗しているときは、エディターの案内から再試行します。

追加できない機能やページがある

Guest / Freeの利用範囲や上限を、機能紹介の比較表で確認してください。クラウド保存・複数ページ・共通パーツは無料アカウントで利用できます。Webcraft Proは現在準備中です。

使い方や不具合について相談したい

エディター内の操作ガイド、またはお問い合わせフォームを利用してください。困った操作と表示されたメッセージを添えると、状況を確認しやすくなります。

次の一歩へ。