SWELL初心者講座！ノーコードでシングルページサイト制作【初級編】

WordPressの有料テーマ『SWELL』を使ったノーコード制作講座、いよいよ【初級編】です。

今回の記事から、いよいよ初期設定を完了した架空のカフェ「Komorebi Cafe」のサイトを、ワイヤーフレーム通りに実際に作り込んでいきます。SWELLの強力なブロック機能を活用し、プロレベルのサイトを一緒に構築していきましょう！

初級編では、「標準機能のみ、完全ノーコード」をコンセプトとしています。
実際の案件では少々物足りないかもしれませんが、CSSやブログパーツ活用などのカスタマイズは、全て標準機能にプラスアルファで装飾を上乗せしていく形になります。初期設定編と今回でWordPressやSWELLの基本操作をマスターし、スムーズなステップアップにつなげていきましょう！

トップページ構成の確認とSWELLのブロック概念

いよいよ制作開始です。ここからは、まずワイヤーフレーム（設計図）を確認し、それをWordPressのブロックエディタ上でどのように実現していくか、SWELLの基本的なブロックの概念から理解していきましょう。

また、画像素材提供サイトの「Unsplash」にてKomorebi Cafe のサイト制作に使用する画像を選定しました。
使用される場合はこちらを参考にしてください。

ワイヤーフレームの再確認

私たちが今回目指す「Komorebi Cafe」のシングルページサイトは、HTMLのアンカーリンク（#home, #conceptなど）で区切られた以下の5つのセクションに分解できます。

セクションID	セクション名	該当するコンテンツ	使用するブロックの考え方
–	–	メインビジュアル：キャッチコピー、ボタン	カスタマイザーを使用。
#concept	CONCEPT	理念、3つのこだわり	メディアとテキストブロックやリッチカラムブロックでレイアウトを構成。
#menu	MENU	DRINK, FOOD, DESSERTのリスト	メディアとテキストブロックやリッチカラムブロックを使用。 複製からのモディファイを繰り返し、ブロックエディタ操作の反復練習。
#access	ACCESS	Googleマップ、店舗情報、GALLERY	カスタムHTMLブロック、テーブルブロック、ギャラリーブロックを使用。
#contact	CONTACT	電話、メールでの問い合わせ先	リッチカラムブロックでレイアウトを構成。 背景画像の設定や、特殊なリンク設定も使用。

この分解イメージを持つことで、「この部分はカスタマイザーで設定する」「ここはカラムブロックを使う」といった判断がしやすくなります。

SWELLのブロック機能の基本（復習）

WordPress 5.0以降、コンテンツ制作の中心となっているのは「Gutenberg（ブロックエディタ）」です。SWELLでは、このブロックエディタを最大限に活用するために、独自の強力なブロックが多数用意されています。

たとえば、特に頻出のブロックには以下のようなものがあります。実際に制作しながら確かめていきましょう。

• フルワイドブロック:
  • コンテンツの背景色・背景画像や余白などを設定できる、レイアウトの土台となるブロックです。
  • ワイヤーフレームで区切られた各セクション（例: サービス紹介、アクセス）の土台として活用します。
• リッチカラムブロック:
  • コンテンツを横並びに配置するためのブロックです。SWELLのカラムブロックは、PC/タブレット/モバイルで表示比率を細かく設定でき、レスポンシブなデザインが簡単に行えます。
  • 「サービス紹介」など、画像とテキストを横に並べたい箇所で多用します。

これらのブロックを組み合わせることで、コーディング知識なしで、ワイヤーフレーム通りの構造を再現していきます。

トップセクションの制作：メインビジュアルとキャッチコピー

サイトの顔となるメインビジュアルは、訪問者に店の雰囲気やコンセプトを一瞬で伝える最も重要な要素です。今回は、複数の画像を切り替えるスライダー機能を使って、動的な印象を与えます。

メインビジュアルの設定（SWELLカスタマイザー）

メインビジュアルの設定は、WordPressのカスタマイザー内の「トップページ」設定から行います。

1. アクセス: 管理バーの「カスタマイズ」から トップページ → メインビジュアル へ進みます。
2. 各スライドの設定: 「各スライドの設定」セクションに進み、スライド1～3を設定します。

【スライド1の設定】

項目	設定内容	意図
スライド画像[1] (PC)	内観写真（テーブルや席の様子）をアップロード	店内の落ち着いた雰囲気を伝える
メインテキスト[1]	「いつもの日常に、木漏れ日のひと休みを。」	サイトの主要なキャッチコピー
サブテキスト[1]	「Komorebi Cafeは、こだわりの自家焙煎豆と心安らぐ空間をご提供します。」	コンセプトを補足する文章
ボタンテキスト[1]	「MENUを見る」	メニューセクションへ誘導
リンク先URL[1]	「#」	原状は仮で「#」（ページ内リンクを想定）を設定

【スライド2とスライド3の画像設定】

スライド2と3についても同様に画像をアップロードし、視覚的なバリエーションを持たせます。

スライド	設定画像
スライド画像[2] (PC)	アイスコーヒーのクローズアップ写真
スライド画像[3] (PC)	ハンドドリップしている写真

トップセクションの制作：メインビジュアルとキャッチコピー

サイトの顔となるメインビジュアルは、訪問者に店の雰囲気やコンセプトを一瞬で伝える最も重要な要素です。今回は、複数の画像を切り替えるスライダー機能を使って、動的な印象を与えます。

メインビジュアルの設定（SWELLカスタマイザー）

メインビジュアルの設定は、WordPressのカスタマイザー内の「トップページ」設定から行います。

1. アクセス: 管理バーの「カスタマイズ」から トップページ → メインビジュアル へ進みます。
2. スライダーの有効化: スライダー機能を利用するため、以前の初期設定で無効化していた場合は、ここで有効化（「スライダーを設置する」を選択）します。
3. 各スライドの設定: 「各スライドの設定」セクションに進み、スライド1～3を設定します。

【スライド1～3のコンテンツ設定】

スライド1～3に画像、メインテキスト、ボタンを設定します。

スライド	設定画像	メインテキスト	ボタンテキスト
スライド1	内観写真	「いつもの日常に、木漏れ日のひと休みを。」	「MENUを見る」
スライド2	アイスコーヒーの写真	（空欄）	（空欄）
スライド3	ハンドドリップ写真	（空欄）	（空欄）

【アニメーションとテキスト固定表示の設定】

スライド設定の下部にある「画像スライダー設定」と「テキストの固定表示設定」を行います。

1. スライドのアニメーション設定
   • スライドの表示中アニメーション：画像が切り替わる際のアニメーションを「左から右へ」に設定します。これにより、画像に動きが加わり、よりダイナミックな印象になります。
2. テキストの固定表示設定
   • ☑ スライド1枚目のテキストを常に表示する にチェックを入れます。
   • この設定により、画像がスライドで切り替わっても、スライド1に設定したキャッチコピーは常に画面上に固定表示されます。これにより、どの画像が表示されていてもサイトのコンセプトが一貫して訪問者に伝わります。

【スマートフォン画像とその他調整】

• スライド画像 (SP)：PC画像とは別に、縦長で見やすいスマートフォン用の画像を別途設定することを推奨します。
• 装飾の調整: テキストの視認性を高めるため、必要に応じて「オーバーレイ（背景を暗くする効果）」や「テキストの影」を設定します。

メインビジュアルの設定はカスタマイザーで完了しました。

CONCEPTセクションの構築：理念とこだわりを伝える

このセクションは、フルワイドブロック、メディアとテキストブロック、そしてリッチカラムブロックを組み合わせて作成します。

ページ編集画面を開く

まず、トップページとして割り当てた固定ページを開き、ブロックエディタの編集画面に入ります。

1. 管理画面メニューから 固定ページ → 固定ページ一覧 へ進みます。
2. 「トップページ」をクリックして編集画面を開きます。
   （初級編から始めていない方は、新規固定ページを用意しましょう！）

フルワイドブロックの挿入と設定

このセクション全体を包み込む土台として、SWELL独自のフルワイドブロックを挿入します。

1. ブロックの追加（+アイコン）から「フルワイド」ブロックを挿入します。（ショートカット /full でも追加可能）。

2. フルワイドブロックの設定:
   • ブロックを選択し、右側の設定パネル（ブロックタブ）を開きます。
   • コンテンツの横幅を「サイト幅」に設定します。
   • 上下のPADDING量 (PC/SP)：PC/SPともに「40」を設定し、コンテンツの上下に適切な余白を確保します。
   • 背景色の不透明度を0に変更します。
   • HTMLアンカー：「高度な設定」のHTMLアンカーへcontactと入力します。

セクションタイトルの挿入とサイズ調整

フルワイドブロックには見出しブロックが含まれているので、セクションのタイトルを設定します。

1. タイトル入力: 見出しに「CONCEPT」と入力します。
2. 文字サイズ調整:
   • タイトル「CONCEPT」を全選択します。
   • ツールバーにある「文字サイズ」アイコン（Tのアイコン）をクリックします。
   • サイズ設定で「XL」を選択します。これにより、セクションタイトルとして適切な大きさになります。

コンセプト概要の構築（メディアとテキストブロック）

フルワイドブロック内に、ワイヤーフレーム上部の「画像＋テキスト」のレイアウトを構築します。WordPress標準のメディアとテキストブロックを利用します。

1. フルワイドブロック内に「メディアとテキスト」ブロックを挿入します。（ショートカット /media）
2. 画像とテキストの配置:
   • 左側（メディア）: 「画像をアップロード」ボタンから、コンセプトを象徴する画像を設定します。
   • 右側（テキスト）:
     • 見出し: 豆から空間まで、すべてにこだわりを
     • 本文: ここにコンセプトの概要説明文が入ります。
3. 配置の調整: ワイヤーフレームでは画像が左、テキストが右ですが、メディアとテキストブロックのツールバーで左右の配置を入れ替えることも可能です。

見出しは、装飾の有無を選択することができます。今回、見出しは装飾なしも活用してみましょう。

見出しを選択して、右側の編集パネルから、「ブロック」「スタイルタブ」「セクション用」を選択することで、デフォルトの装飾をオフにすることができます。

通常の段落は、そのまま入力していくだけで問題ありません。
レイアウトが一つ完成しましたね！

CONCEPTセクションの「こだわり」ブロック詳細設定手順

ワイヤーフレームにある「3つのこだわり」（アイコン＋テキスト）を表現するレイアウトを構築します。この3カラム構造は、SWELL独自のリッチカラムブロックを使って作成します。

リッチカラムブロックの挿入と初期設定

1. コンセプト概要の「メディアとテキスト」ブロックの下に、SWELL独自の「リッチカラム」ブロックを挿入します。（ショートカット /rich でも追加可能）
2. カラム数: 表示された設定画面で「3カラム」（均等）を選択します。

画像ブロックの詳細設定

SWELLでは、画像ブロックに高度なデザイン設定が可能です。ワイヤーフレームの意図に合わせ、画像のデザインを調整します。

1. カラム内に画像ブロックを設置します。画像を選択したら、右側パネルからも設定を進めましょう。

2. アスペクト比と幅の調整:
   • 画像ブロックの右側設定パネルで、アスペクト比を「正方形 – 1:1」に設定します。
   • 幅を「120 px」に設定し、高さは「自動」のままにします。
   • 伸縮設定は「cover」を選択します。

2. スタイル（角丸）の適用:
   • スタイル設定で「角丸」を選択し、アイコンのような丸いデザインにします。

見出しと説明文の挿入

画像ブロックの下に見出しと説明文を挿入します。

1. 画像ブロックの下に「見出し」（h4レベル推奨）を挿入し、「自家焙煎の豆」と入力します。
2. 見出しの下に「段落」ブロックを挿入し、説明文を入力します。

設置が完了しましたが…なんだか間延びしていますね！！
SWELLでは、ブロック下の余白をノーコードで設定できる機能が備わっていまるので、調整していきましょう。

ブロック下の余白設定（間延び防止）

画像と見出しの間隔を調整し、デザインの密度を高めます。

1. 画像ブロックを選択し、右側設定パネルのSWELL設定にある「ブロック下の余白量」の設定で、「0.5em」を選択します。これにより、画像と見出しが近くなり、一体感が増します。

カラムの複製とコンテンツの差し替え

設定が完了した最初のカラム（グループ）を複製し、残りの2つのカラムを効率よく作成します。

1. リッチカラムブロックのツールバーで、設定が完了した最初の「カラム項目」を「複製」します。
2. 余分なカラム項目は削除しておきましょう。
3. それぞれのカラムで、画像とテキストを差し替えます。

やっと一つのセクションが完成しましたね！
手順を見ながらの慣れない作業だと大変だと感じるかもしれませんが、慣れればイメージ通りに手早く制作することができるようになるはずです。

左側メニューでのブロック選択と、右側メニューでの調整。これらの使い方がわかったてきたかと思いますので、次のセクションからは少しだけスピードアップして進めていきましょう！

MENUセクションの構築：おすすめメニューを魅力的に

CONCEPTセクションに続き、ワイヤーフレームのMENUセクションを構築します。ここでは、おすすめのドリンク、フード、デザートをメディアとテキストブロックで表示します。
CONCEPTセクションでも使用したリッチカラムブロックとメディアとテキストブロックを活用し、画像付きで統一感のあるメニューリストを構築します。

MENUセクションの土台の準備

これまでのセクションと同様に、フルワイドブロックを複製し、以下の設定を済ませた状態からスタートします。

1. セクションタイトルの変更: 見出しブロックのテキストを「MENU」に差し替えます。（文字サイズ「L」）
2. コンテンツの整理: CONCEPTセクションの内容は削除しておきましょう。
3. フルワイドのHTMLアンカーをmenuと設定します。

メニューカテゴリーの構築（DRINKセクション）

まず、最初のカテゴリーであるDRINKメニューを作成します。

このセクションは少し雰囲気を変えて、背景色とセクションの境界を設定してみましょう！

フルワイドセクションを設置・選択し、右側メニューから設定します。

• 背景色：
  • 色を「#FFF5F2」に設定します。
  • 背景色の不透明度を100に設定します。
• 上下の境界線の形状：
  • 上部・下部の境界線の形状「波」を選択し、高さレベルを2.5に設定します。

カテゴリー見出しの挿入

1. MENUタイトルの下に「見出し」ブロック（h3）を挿入し、「DRINK」と入力します。
2. テキストを中央寄せに設定します。

2カラムレイアウトの構築（リッチカラム）

1. DRINK見出しの下に、SWELL独自の「リッチカラム」ブロック（/rich）を挿入ます。このリッチカラムが、メニューリスト全体の土台となります。

メニュー項目の詳細構築（テンプレートの作成）

リストを構成する個々のメニュー項目（商品カード）を、WordPress標準の「メディアとテキスト」ブロック（/media）を使って作成します。

ここで作成する最初の1つが、すべてのメニュー項目のテンプレートとなります。

これが完成形です。

1. 「メディアとテキスト」ブロックの挿入と設定

1. 左側のリッチカラム内に、「メディアとテキスト」ブロックを挿入します。

2. ブロックを選択した状態で、右側の設定パネル（ブロックタブ）を開き、以下の設定を行います。
   • メディアの幅：40に設定します。
   • 画像を切り抜いて調整: トグルを ON にします。これにより、アップロードする画像の縦横比が異なっても、画像エリアの高さが均一に揃い、レイアウトが美しくなります。

2. コンテンツの配置と詳細な余白調整

次に、ブロック内に画像とテキストを配置し、テキスト間の「間延び」を防ぐために余白を調整します。

1. メディア（左側）: 商品画像（例：Komorebiブレンドの写真）をアップロードします。
2. テキスト（右側）:
   • 見出し（h4）: 「Komorebiブレンド」と入力し、左揃えに設定します。
   • 見出しのスタイル設定：スタイルを「セクション用」に設定します。
   • 見出しの余白設定: 見出しブロックを選択し、右側設定パネルのSWELL設定（または余白設定）で「ブロック下の余白量」を「0.5em」に設定します。
   • 段落（説明文）: 「フルーティーな酸味と豊かなコク。」と入力します。
   • 説明文の余白設定: この段落ブロックも同様に、「ブロック下の余白量」を「0.5em」に設定します。
   • 段落（価格）: 「¥ 550」と入力し、テキストを選択してツールバーで太字に設定します。

3. 残りのメニューを構築してみましょう！

見出し（h3）とリッチカラム、メディアとテキスト一つを用意したことで、必要なレイアウトは揃いましたね。

ブロックを選択してコピー&ペーストしてもよいですし、メニューから「複製」を選択、もしくは [ Ctrl + Shift + D ]で複製するなど…これまでの操作を駆使してワイヤーフレーム通りに構築してみましょう！

ACCESSセクションの構築：店舗情報とギャラリー

MENUセクションに続き、店舗へのアクセス情報や詳細情報を掲載するACCESSセクションを構築します。

ACCESSセクションの土台の準備

これまでのセクションと同様に、まずは土台を作成します。

1. フルワイドブロックを挿入（または複製）します。
2. コンテンツの横幅を「サイト幅」に設定します。
3. 上下のPADDING量を PC/SP ともに「40」に設定します。
4. フルワイドブロック内に見出しブロックを挿入し、「ACCESS」と入力、文字サイズを「L」に設定します。
5. HTMLアンカーへaccessと入力します。

Googleマップの埋め込み（カスタムHTML）

ACCESSセクションの上部に、店舗の場所を示すGoogleマップを配置します。SWELL標準のマップブロックもありますが、今回はGoogleマップの公式埋め込みコードを使用して、より詳細な地図を表示します。

1. Googleマップで埋め込みコードを取得

1. Googleマップ（ブラウザ版）を開き、店舗の場所（今回は例として「東京駅」）を検索します。
2. 表示されたパネルの「共有」アイコンをクリックします。

3. 「地図を埋め込む」タブを選択し、「HTMLをコピー」をクリックしてコードをコピーします。

2. カスタムHTMLブロックの挿入

1. WordPressの編集画面に戻ります。

2. ACCESS見出しの下に、「カスタムHTML」ブロック（/html）を挿入します。
3. コピーしたコードを貼り付けます。

3. 横幅を100%に調整（重要テクニック）

貼り付けたコードのままだと横幅が固定（例: width=”600″）されており、スマホなどで見切れてしまう可能性があります。これを画面幅に合わせて伸縮するように修正します。

1. 貼り付けたHTMLコード内の width="600" （数字は場合により異なります）という部分を探します。
2. この数値を width="100%" に書き換えます。

これで、どのようなデバイスで見ても横幅いっぱいに地図が表示されるようになります。

店舗情報と外観写真の構築

マップの下に、店舗の詳細情報と外観写真を配置します。

1. メディアとテキストブロックの挿入: マップの下に「メディアとテキスト」ブロックを挿入します。
2. ワイヤーフレームに合わせ、画像を右側に設定しましょう。ブロックの標準機能で、ボタン一つで設定可能です。

3. 左カラム（店舗情報）:
   • 見出し（h3）で「店舗情報」と入力します。
   • テーブルブロックを挿入し、「店名」「住所」「電話番号」「営業時間」「定休日」などを入力します。
   • 右側メニューのスタイル設定から、「シンプル」を選択します。
4. 右カラム（外観写真）:
   • 店舗の外観をアップロードし、設定から「画像を切り抜いて調整」をオンに設定します。

店舗ギャラリー（GALLERY）の構築

最後に、店内の雰囲気を伝える写真を並べます。

1. メディアとテキストブロックの下に、見出し（h3、中央寄せ）で「GALLERY」と入力します。
2. ギャラリーブロックの挿入: 見出しの下に「ギャラリー」ブロックを挿入します。
3. 画像の追加: 複数の内観写真をアップロードし、カラム数（例: 4カラム）を調整して並べます。

画像をクリックしてみましょう。もし、解像度が「サムネイル」になっている場合は、せっかくのギャラリーなのに表示される画像がボヤけてしまいます。

解像度は「フルサイズ」に設定します。

CONTACTセクションの構築：お問い合わせ先を明示する

ACCESSセクションに続き、ワイヤーフレームの最後となるCONTACTセクションを構築します。ここは訪問者がアクションを起こすための重要なセクションです。

CONTACTセクションの土台の準備

これまでのセクションと同様に、フルワイドブロックを挿入（または複製）し、以下の設定を行います。

1. セクションタイトルの設定: 見出しブロックのテキストを「CONTACT」とし、文字サイズを「L」に設定します。
2. タイトル下テキストの設定：段落ブロックにてワイヤーフレーム通りテキストを入力し、中央揃えにします。

3. コンテンツの横幅を「サイト幅」に設定します。
4. 上下のPADDING量: PC/SPともに「40」に設定します。
5. 背景画像の変更:
   • フルワイドセクションを選択し、
6. HTMLアンカーをcontactと設定します。

セクションのデザインをワンランクアップさせるために、フルワイドブロックに背景画像を設定しましょう。今回は、画像がスクロールしても動かない「固定背景」の設定を行い、奥行きのあるデザインにします。

1. 背景画像の設定

1. 対象となるフルワイドブロックを選択します。
2. 右側の設定パネルにある「背景画像の設定」セクションを開きます。
3. 「メディアから選択」をクリックし、背景にしたい画像を選択します。

2. 背景効果とオーバーレイの調整

画像をそのまま表示すると、上の文字が読みにくくなることがあるため、オーバーレイ（薄い膜）と動きの設定を行います。

1. オーバーレイカラー: デフォルト（白）またはサイトの雰囲気に合わせた色を選択します。
2. オーバーレイの不透明度: 画像の主張を抑え、テキストを読みやすくするために数値を上げます。今回は「90」に設定し、うっすらと画像が見える程度にします。
3. 背景効果: 「固定背景」のスイッチを ON にします。

リッチカラムブロックの構築（レイアウト作成）

お問い合わせ先（電話とメール）を横並びのカード形式で表示するため、リッチカラムブロックを使用します。

1. CONTACT見出しの下に、「リッチカラム」ブロック（/rich）を挿入します。

左側のカラム（お電話でのお問い合わせ）から中身を作っていきます。要素をグループ化して管理しやすくします。

2. グループブロックの挿入: 左側のカラム内に、「グループ」ブロック（/group）を挿入します。
   • グループの背景を白に設定します。
3. 見出しの設置と入力:
   • グループブロック内に「見出し」ブロックを挿入し、見出しレベルを「H3」に変更します。
   • テキストを「お電話でのお問い合わせ」と入力します。
   • ツールバーで「中央寄せ」に設定します。
4. 段落で要素を入力:
   • 見出しの下に「段落」ブロックを挿入します。
   • テキストや電話番号を入力し、中央揃えにします。
   • 文字サイズをXL、太字にして目立たせましょう。
   • さらに、「ブロック下の余白量」を調整して、レイアウトを整えましょう。
5. 電話番号リンク化:
   • リンク先はURL以外にも設定できます。
   • tel:電話番号で電話の起動、mailto:メールアドレスでメーラーの起動を設定しましょう。

電話グループはこのような設定になりました。

カラムの複製とメール情報の作成

左カラム（電話）が完成したら、右カラム（メール）を作成します。

1. 作成した左カラムの中身（グループブロック）を複製し、右側のカラムに移動（または貼り付け）します。

2. 内容の差し替え:
   • 見出し、電話番号、補足情報を変更します。
   • 電話起動リンクはtel:、メーラー起動はmailto:でしたね。リンクを「mailto:info@example.com」と設定しましょう。

いよいよページの制作は終わりましたね後はナビゲーション（グローバルナビ/ヘッダーメニュー、フッターなど）を整えていきましょう！

ナビゲーションの作成：ページ内リンクを設定する

トップページのコンテンツが完成したら、最後にユーザーを目的の場所へスムーズに案内するための「グローバルメニュー」を作成します。

今回はシングルページ構成なので、クリックするとページ内の該当セクションまでスクロールする「ページ内リンク」を設定します。

1. メニューの新規作成

1. 管理画面の 外観 → メニュー に進みます。
2. メニュー名：任意の名前（例：「グローバルメニュー」）を入力します。
3. 「メニューを作成」ボタンをクリックします。

2. カスタムリンクでメニュー項目を追加する

固定ページそのものではなく、ページ内の特定の場所へリンクさせるために「カスタムリンク」機能を使います。

1. 左側のメニュー項目追加パネルから「カスタムリンク」を開きます。
2. 以下の通りに入力し、「メニューに追加」をクリックします。

メニュー名	URL (リンク先)	リンク文字列 (表示名)
コンセプト	#concept	コンセプト
メニュー	#menu	メニュー
アクセス	#access	アクセス
お問い合わせ	#contact	お問い合わせ

3. メニューの位置設定と保存

1. 必要な項目をすべて追加したら、右側のメニュー構造で並び順をドラッグ＆ドロップで調整します。
2. メニュー設定：「グローバルナビ」「スマホ開閉メニュー内」「フッター」にチェックを入れます。
3. 「メニューを保存」ボタンをクリックします。

長い制作工程、本当にお疲れ様でした！ ついに「Komorebi Cafe」のトップページが形になりましたね。

トップページ完成、おめでとうございます！

長時間の作業、本当にお疲れ様でした！

これで、メインビジュアルからお問い合わせフォームへの誘導まで、必要な要素がすべて揃った「Komorebi Cafe」のシングルページサイトが完成しました。完全ノーコードで、本格的なホームページ制作のプロセスを一通り体験していただけたのではないでしょうか。

公開前の最終チェック：「抜け・漏れ」はありませんか？

サイトが形になると達成感で胸がいっぱいになりますが、プロの制作において「抜け・漏れ」はつきものです。

最後に、作成したページを実際のブラウザやスマートフォンで開き、機能面・デザイン面でミスや破綻がないか、入念にチェックしましょう。

これらのチェックをクリアして初めて、自信を持って「完成」と言えます。
細部までこだわって、あなただけの素敵なサイトを仕上げてくださいね！

ちなみに今回は…メインビジュアルのMENUボタン、リンク先アンカーが仮入力のままでした！

「外観」>「カスタマイズ」>「トップページ」>「メインビジュアル」から、リンク先URL[1]を、#から#menuに変更、公開しておきましょう！

ついでに、
・「外観」>「カスタマイズ」>「ヘッダー」の最下部、「リンク先URL」を#contactとし、
・「外観」>「カスタマイズ」>「フッター」の最下部「その他の設定」、「フッターにSNSアイコンリストを表示する」もオンにしておきましょうか！

他にも、デザインの微調整が甘い部分がありそうですが、今回は「完全ノーコードでトップページ型のコーポレートサイトを制作する」という初級編のコンセプトに則り、この辺にしておきます。

今回制作していただいたサイトは、ポートフォリオの一つとして公表していただいても構いません！
最もベーシックなプランとして、安価な制作例として公表しておけば、クオリティの同意が取れた上で進められるので、お互い良いかもしれないですね。

さらなるステップアップへ：SWELL制作のロードマップ

今回は【初級編】として、ノーコードでの基本的な制作フローを体験していただきましたが、SWELLのポテンシャルはこんなものではありません。

今後、さらなるスキルアップを目指す方に向けて、以下の講座を予定しています。

今後の連載予定

• 【中級編】実案件レベルへ！複数ページの本格コーポレートサイト制作
  • お問い合わせフォームの実装やプライバシーポリシーの作成などを含む、複数ページの本格コーポレートサイトを制作します。
  • ここからが本番です。自信を持って営業・納品していける「実務レベル」のスキルを習得します。
• 【上級編】自由自在に！CSS/JavaScript活用・カスタムフィールドカスタマイズ
  • テーマの機能だけでは実現できない、お客様の細かな要望に応えるためのカスタマイズ講座です。
  • セレクタの調べ方からAIへの指示の出し方まで、コードを活用して、よりオリジナリティの高いサイト制作を目指す方向けの内容です。

🔰 全ての土台となる「初期設定」を忘れずに

中級・上級へとステップアップしても、サイト制作の「土台」が変わることはありません。

セキュリティ、SEO、ユーザビリティの基礎となる【初期設定編】の内容は、どのレベルの制作においても必須となる工程です。制作に慣れてきても、基本を疎かにしないよう、迷った時はいつでもこのガイドに戻ってきてください。

---

これにて、SWELL制作講座【初級編】は完結です。 最後までお付き合いいただき、本当にありがとうございました！

さらなる高みへ：SWELL制作講座【中級編】始動！

初級編での基礎固め、お疲れ様でした！ SWELLを使えば、ノーコードでも綺麗なサイトが作れることを実感していただけたかと思います。

しかし、プロのWeb制作者として活躍するためには、もう一歩踏み込んだスキルが必要です。

次回の【中級編】では、いよいよ「実務レベル」のサイト制作に挑戦します！

▼ 中級編：架空のWeb制作会社「Studio Haku」公式サイト構築

単なるブログやお遊びサイトではありません。実際にクライアントに納品できるクオリティの「コーポレートサイト」を、ゼロから構築していきます。

【中級編で身につく実践スキル】

• 投稿機能の応用テクニック：カスタム投稿タイプを使わずに、カテゴリー設定だけで「お知らせ」と「制作実績」を綺麗に出し分けるSWELL独自の運用術。
• お問い合わせフォーム：Snow Monkey Formsを使った、確認画面・自動返信メール付きの本格フォーム実装。
• 効率的なサイト管理：「ブログパーツ」機能を活用し、共通エリアを賢く管理する方法。
• 洗練されたデザイン：フルワイドブロックや余白（マージン）を駆使した、脱・初心者デザイン。

＼ ポートフォリオにも使える本格コーポレートサイト ／

「Web制作の仕事を受けたいけど、まだ自信がない…」 そんな方が、自信を持って「サイト作れます！」と言えるようになるための完全ロードマップです。

「これから営業を始めるのに、まだ実績が無い！」という方にも、デモサイトとしてのポートフォリオとしてご利用いただけるレベルですので、ぜひ挑戦してみてください！

[👉 SWELL制作講座【中級編】実案件レベルのコーポレートサイトを作ろう！ はこちら]