【プロが実演】SWELLを使ったコーポレートサイトの作り方

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

結論、コーポレートサイト・企業サイトはWordPressテーマ『SWELL』で作りましょう！

なぜなら、こんな素敵なサイト「麦わらの一味の求人サイト｜DEMO」が作れるから。

そこで、記事の前半で「SWELLでコーポレートサイトを作るべき理由と、おすすめのデモサイト」を。

後半では「コーポレートサイトの作り方〜下準備編と完全保存版〜」について解説します。

本記事を最後まで読むことで、初心者でも企業サイトのトップページを作り上げることができますよ！

この記事はこんな方におすすめ

自作できなかったら、私がいるのでご安心を👇

SWELLでコーポレートサイトを作るべき５つの理由

SWELLでコーポレートサイトを「作るべき理由」は、次のとおり。

この章のもくじ

順番に見ていきましょう！

理由①ノーコードで作りやすい

『SWELL』でのコーポレートサイト制作にプログラミング知識は一切必要なし！

直感的な操作、つまりマウスをポチポチしていくだけで「機能」や「デザイン」を実装できるんです。

とはいえ、知識があればできることも増え、自由度も上がります。

理由②コーポレートサイト向けの機能がいっぱい

表は横にスクロールできます

このようにコーポレートサイトに必要な「機能」や「デザイン」はひと通り実装できますよ。

あえてテーマに内蔵されていないのは「お問い合わせフォーム」くらいです。

作り方は「プラグイン・Googleフォーム」どちらも用意しています。

関連記事【SWELL】お問い合わせフォームの作り方｜Contact Form 7編

関連記事【たった５分】ブログのお問い合わせフォームの作り方【必要です】

理由③アップデートが早い

これが『SWELL』を使う大きなメリットです。

SWELLは現在進行形で人気のテーマなので、アップデートにすぐ対応してくれるんです。

アップデートの流れ

これが結構な頻度でありますからね。

無料テーマは無料なので、アップデートする義務がないんです。

ほかにも

こんなときも『SWELL』は対応が早かったですね。

理由④サポートが充実している

SWELLには『SWELLERS'』というユーザー限定の会員サイト（フォーラム）があるんです。

フォーラムとは

開発者の「了（@ddryo_loos）さん」が、当たり前のように答えていますよ。さらに・・・

これは主に「ブロガー向け」ですが、『SWELL』にはユーザー同士が交流できるコミュニティまで用意されているんです。

理由⑤複数サイトで使い回せる

個人のブログでは、よくあるケースですよね。しかし、『SWELL』なら・・・

つまり、企業ごとに『SWELL』を購入しなくていいのです。これを「100%GPL」と言います。

WordPressのように「無料」なら聞いたことありますが、有料テーマでは極めて異例です。

表は横にスクロールできます

４大テーマの中でも『SWELL』だけが、１つ買えば複数のコーポレートサイトを作ることができます。

例えばこんなケースも

同じ会社でも２サイト作るケースはよくありますよね。

あなたがWebデザイナーなら

案件を１つ受注すれば、実質「無料」ですね！

ちなみに、どのWordPressテーマも使おうと思えば複数サイトに使えますが・・・

だいたいこんな罰則が設けられてるので、普通に『SWELL』を使いましょう👇

＼使いやすさなら／

国内人気No.1

SWELLで作られたコーポレートサイト３つの事例・サイト例

SWELLで作られた「コーポレートサイトの事例」は、次のとおり。

この章のもくじ

まずは、SWELL公式のデモサイトから。

事例①公式のデモサイト【デザインテンプレート】

『SWELL』には公式に６つの「デモサイト」が用意され、着せ替えデータ（デザインテンプレート）まで配布されています。

とはいえ、公式のデモサイトはぜんぶ「ブログ用」なんですよね。

事例②ボクのデモサイト【おすすめ】

いわゆる「コーポレートサイトあるある」の全部乗せです。

デモサイトの内容

不要なセクション（要素）はスキップすればOK！

くわしくは「コーポレートサイトの作り方」で解説するので、別タブで開いておいてくださいね。

事例③ボクの実案件【企業サイト】

「ブログにも実績を公開していいか」確認中です🙌

SWELLを使ったコーポレートサイトの作り方【下準備編】

SWELLを使った「コーポレートサイトの作り方〜下準備編〜」は、次のとおり。

この章のもくじ

レンタルサーバーも『SWELL』も購入済みの方は、初期設定までスキップしてくださいね。

ステップ①レンタルサーバーと契約する

結論、レンタルサーバーは『エックスサーバー』がおすすめ。

なぜなら

当ブログももちろん『エックスサーバー』です。

また、申し込みと同時に『SWELL』をダウンロードすると・・・

さらに880円引き

レンタルサーバーとの契約がまだの方は、『お友達紹介』をご活用くださいね👇

\ 初期費用無料！ /

キャンペーンは予告なく変更・終了する可能性あり

ステップ②SWELLを購入する

すでにレンタルサーバーをお持ちの方は、まず『SWELL』を購入しましょう。ちなみに・・・

SWELLには

なので、『公式サイト』一択です（もしくはエックスサーバー経由）👇

＼使いやすさなら／

国内人気No.1

ステップ③初期設定をする

「SWELLの初期設定〜完全保存版〜」は別記事で解説するので、ここではコーポレートサイトの下準備を👇

コーポレートサイトの下準備

とはいえ、超かんたん！

3-1：パーマリンクを変更する

「投稿名」を選んで「変更を保存」をクリック。

これでURLをあなたが自由に決めることができますよ。

この設定はもう二度とイジらないでください！

変更すると、すでに公開済みのページのURLも変わってしまいますからね。

3-2：固定ページを作る

タイトルに「フロントページ（なんでもOK）」と入力して、「公開」をクリック。

デフォルトのトップページは「ブログ型」になっています。

投稿記事が新しい順番に表示されるタイプですね。

それを「サイト型」に変更していきます。

3-3：トップページをサイト型に変更する

ホームページの表示を「最新の投稿 → 固定ページ」に。

ホームページをさっき作った「フロントページ」に設定すれば、トップページが「ブログ型 → サイト型」になります。

これでパーマリンクも自動でトップページのURLに変更されますよ。

3-4：サイドバーを非表示にする

「トップページにサイドバーを表示する」の✅を外して、「公開」をクリック。

コーポレートサイトのトップページに「サイドバー」はいらないですよね。

3-5：記事スライダーを非表示にする（任意）

「記事スライダーを設置するかどうか」で「設置しない」を選択して、「公開」をクリック。

すでにブログやコラムがあるなら、そのままでもOKです。

3-6：サンプルページとHello, world!を削除する（任意）

それぞれ「固定ページ一覧」「投稿一覧」から「ゴミ箱へ移動」をクリック。

ゴミ箱の中身は「30日以内」なら復元できますよ。

※削除せず「編集」してもいいですが、ここではいったん削除します。

3-7：ユーザー認証（アクティベート）する

気になるので、サクッとアクティベートしましょう。

『SWELLERS'』の「認証済みサイト一覧」にサイトURLが表示されます。

これで『SWELL』をいつでもアップデートできますよ。

ステップ④サイトの構成を考える

とはいえ、自分でイチから考えなくて大丈夫。

なぜなら、コーポレートサイトには「型」があるから。

ユーザーに完読してもらうために、先人たちが「お金と時間」をかけて〝データ〟をとってくれたわけですね。

これがテンプレート

ただし、コーポレートサイトもブログ記事も一発で正解にはたどり着きません。

テンプレートがそのまんま「あなたのサイト」でも100%の力を発揮するとは限らないのです。

毎月ABテストする

『SWELL』なら変更も、担当者への引き継ぎもカンタンですよ。

ステップ⑤素材を用意する

本記事では「サイトアイコン（ファビコン）」や「背景画像」の設定方法も解説しています。

あなたがWebデザイナーでも、素材はクライアントが用意するのが一般的です（料金プランにもよる）。

とくに「キャッチコピー」や「メッセージ」は、商品やサービス内容を熟知する本人が考えたほうが刺さりますからね。

画像の作り方

念のため、「画像の作り方」と「おすすめのフリー画像サイト」も貼っておきますね。

おすすめのフリー画像サイト

デモサイトの画像は『いらすとや』と『O-DAN』のものです。

SWELLを使ったコーポレートサイトの作り方【完全保存版】

これが『SWELL』のデフォルトのトップページになります（サイドバーと記事スライダーを非表示）👇

そして、これが「デモサイト」の完成図です👇

※重くなるので、あえて画質を粗くしています。

トップページの構成は、大きく次の４つに分けられます。

トップページの構成

デモサイトを別タブで開きながら読み進めてくださいね👇

この章のもくじ

さぁ、始めよう。

全体基本カラー

の「メインカラー」に「カラーコード（#d53633）」を入力して「公開」をクリック。

メインカラーとは

このあたりのカラーを一括変更できますよ。

ほかにも

「テキストカラー」と「リンクカラー」はデフォルトのままでいいと思います。

とくに、「リンクは青と相場は決まっている」ので、青文字じゃないとクリックしてもらえないですからね。

拡張機能『ColorPick Eyedropper』をブラウザに入れるだけ。

カラーコードの調べ方

ちなみに、デモサイトの「カラーコード（#d53633）」は『ONEPIECE.COM』の赤です。

ヘッダーヘッダーバー

まず、ヘッダーバーがいらない方は、以下で非表示になります。

「ヘッダーバー設定」の「SNSアイコンリストを表示する」の✅を外して「公開」をクリック。

※ヘッダーバーの表示はPCのみです。

SNSの設定は以下に「URL」をコピペするだけ。

設定できるSNS

デフォルトで入ってる「Feedly」は〝空欄〟にすれば非表示にできますよ。

また、「検索ボタン」を非表示にしたいなら・・・

の「検索ボタンの設定（PC・SP）」を「表示しない」に変更してください。

コーポレートサイトなら「SP：スマホのヘッダー」にもいらないかもしれませんね。

ヘッダーバーのカラー

もちろん、ヘッダーバーのカラーも変更できますよ。

ヘッダーヘッダーロゴ画像

会社名やお店の名前は「ロゴ画像」を設定するのが一般的です。

の「ヘッダーロゴの設定」で「画像を選択」をクリック。

ロゴ画像をアップロードするだけです。

テキストを入力

Googleのクローラー（ロボット）は、ロゴ画像で「社名」を判断しているわけではありません。

「テキスト」で判断しているのです（SEO対策）。

とはいえ、「ただの装飾」として使う画像に「代替テキスト」はいりませんよ。

「サイトのタイトル」や「キャッチフレーズ」は上記で設定できますよ。

「サイトのタイトル」はヘッダーロゴを設定していても入力してくださいね。

では、このまま「サイトアイコン」も設定してしまいましょう。

全体サイトアイコン（ファビコン）

「サイトアイコンを選択」から画像をアップロードしてください。

サイトアイコンは

もちろん、サイトアイコンにも「代替テキスト」を入れてくださいね。

ヘッダーヘッダーエリア

ここでは、ヘッダーロゴ画像以外の「ヘッダーエリア全般」を作っていきます。

まずは、「背景色」から。

カラー設定

レイアウトも自由自在です。

レイアウト・デザイン設定

※「ナビ（グローバルメニュー）」は次で解説します。

トップページでの特別設定

ヘッダーは「透明」にもできます。

ヘッダーの追従設定

デフォルトでは、スクロールするとヘッダーが追従するようになっています。

背景色はそのままに、追従時のヘッダーを透過させることもできますよ。

ヘッダー＆フッターグローバルメニュー

グローバルメニューとは、ヘッダーやフッターに表示する「リンク」のこと。

メニューに設置するリンク

デモサイトでは、ヘッダーに「ページ内リンク」を。

フッターに「下層ページへのリンク」を設置しています（よくあるケース）。

※フッターは後ほど作ります。

「メニューを新規作成」をクリック。

スマホも同時に作る

「次」をクリック。これでヘッダーにあった「フロントページ」が非表示になります。

つづけて、「＋ 項目を追加」をクリック。

ここでグローバルメニュー内のリンクを作っていきます。

デモサイトの場合

最終的にユーザーに「問い合わせてもらう」のが目的です。

カスタムリンク

「メニューに追加」をクリック。これをリンクの数だけ作ってください。

さいごに「公開」をクリックすると、ヘッダーに「リンク」が表示されますよ。

スマホの「三本線（ハンバーガーメニュー）」内にも同じリンクができているので、確認してくださいね。

※リンクのジャンプ先は「セクション見出し」で作ります。

の「ヘッダーメニュー（グローバルナビ）設定」で、リンクにカーソルを合わせたときの「エフェクト」を設定できます。

マウスホバーエフェクト

デフォルトでは「ラインの出現（中央から）」になっています。

デモサイトのように、ヘッダーの背景色を「メインカラー」すると同色でラインが見えないので・・・

ホバー時に出てくるラインの色

これで「白いライン」が出現しますよ。

スマホスマホ開閉メニュー

デモサイトは「デフォルトのまま」ですが、ここでメニュー内をカスタマイズできますよ。

カラー設定

「メインメニュー上に表示するタイトル」も「MENU → 好きな名前」に変更可能です。

メインメインビジュアル（ファーストビュー）

サイトを開いて、最初に目に入る部分を「ファーストビュー」といいます。

『SWELL』では「メインビジュアル」と呼ばれています。

メインビジュアルは設定したいですよね！

メインビジュアルの表示内容

公式によると、画像の推奨サイズは次のとおり。

画像の推奨サイズ

設定は「スライド画像[1]（PC）」の「画像を選択」をクリックしてアップロードしてください。

※１枚でもスライド画像にアップロードします。

まずは、メインビジュアルの「高さ」から。

メインビジュアルの高さ設定

「ウィンドウサイズにフィットさせる」を選ぶと、高さが「ユーザーのデバイスいっぱい」に広がります。

とはいえ、これだと下にスクロールしてもらえないかもなので「Scrollボタンを表示する」に✅を入れましょう。

フィルター処理

フィルターは画像に合わせて選んでくださいね。

オーバーレイカラー

画像の上には「テキスト」や「ボタン」を重ねることができます。

各スライドの設定

それぞれに文字を入力するだけで、大小のテキストが表示されますよ。

テキスト編

もちろん、テキストの「位置」も「カラー」も変更できます。

ボタンを表示

「URL」と「テキスト」を入れると、ボタンが出現します。

デモサイトはシャレで「WANTED」と〝企業目線〟にしていますが・・・

ユーザー目線にする

このほうがクリックされますよ。

ボタン編

ボタンの「カラー」や「タイプ」も変更できます。

全体フォント

「フォント設定」から「ベースとなるフォント」を変更できます。

ベースとなるフォント

「フォントサイズ」や「字間（letter-spacing）」も一括で変更できますよ。

メインセクション見出し

トップページを構成する要素を「セクション」といいます。

各セクションに「見出し」をつけてあげると、ユーザーにとって親切です。

また、グローバルメニュー内のリンク先に指定することで、ユーザーが読みたいセクションまでジャンプできます。

では、「各セクション見出し」をまとめて作っていきましょう！

から、さっき作った「フロントページ」を開いてください。

大前提として、ページの中の要素は「ブロック」で作ります。

ブロックの中に「テキスト」や「画像」や「装飾」を入れていくわけですね。

ブロックの作り方

最初はどんな「ブロック」があるかわからないと思うので「すべて表示」して触ってみてくださいね。

まずは、ブロック「見出し」から👇

見出しのスタイルは「デフォルト（ブログ用）」ではなく「セクション用」を選んでください。

入力した見出しを選択した状態で・・・

をクリックすると、「小さい見出し」を作れますよ。さらに・・・

にグローバルメニューで設定したURL「#Vision」なら「Vision（#は不要）」と書くことで、ジャンプ先に指定できます。

デモサイトでは、「セクション見出しのデザイン設定」で〝見出し下に線〟を入れています。

セクション用見出し2のデザイン

見出しの左右に線を入れることもできますよ。

あとは、このセクション見出しをまとめて作るだけです。

見出しにかぎらずブロックは「複製」できるので、コピーして変更するのが◎

メイン背景色・背景画像（フルワイドブロック）

各セクションは背景色を変えてあげると、さらにわかりやすくなります。

例えば

「フルワイドブロック」でかんたん！

デフォルトで背景色「#F7F7F7」がついていますが、もちろん自由に変更可。

コンテンツサイズ

中身のコンテンツの幅も変えられますが、変更するなら「統一」しましょうね。

メインビジョン（段落＋縦書き＋ステップブロック）

いちばんよく使うブロックが「段落」です。

２つの設定

右の「スタイル」タブをクリックすると・・・

色

それぞれの色を変えられますよ。

デモサイトに「縦書き」テキストを実装してみました。

まずは、以下を「カスタムHTML」にコピペしてください。

右上のCopyをクリック

<div class="tategaki-box"><p class="tategaki">テキストA<br>テキストB<br>テキストC</p></div>

「<br>」タグで改行しています。

つづけて、以下を「追加CSS」にコピペします。

右上のCopyをクリック

/* 縦書き */
.tategaki-box {
  text-align: center; /* 中央寄せ */
}
.tategaki {
  writing-mode: vertical-rl; /* 縦書き */
  display: inline-block;
  text-align: left; /* 上揃え */
  line-height: 7; /* 行間 */
}

テキストを縦書きにして、中央に寄せて、上に揃えるCSSです。

ちなみに、編集画面（エディタ）の下にある「カスタムCSS & JS」の「CSS用コード」に書いたコードは、そのページにしか適用されません。

サイト全体に適用させたくないCSSは「カスタムCSS & JSのCSS用コード」に書いてくださいね。

「ステップブロック」も重宝しますよね。

スタイル

ぜんぶ使いたいですね！

ステップ設定

「STEP」の文字も「LESSON」など自由に変えられますよ。

メインメンバー（リッチカラム）

要素の〝横並び〟は「リッチカラム」が便利です。

スタイル

まずは、カードのスタイルを選んでください。

設定

デモサイトでは、「PCで３列」「タブレット以下で１列」にしています。

あとは、カードの中に「段落」を作り、「画像」や「テキスト」を入れていくだけです。

「要素の横並び」はWebデザイナーが最初につまづくポイントですが、『SWELL』なら楽勝ですよね。

ちなみに、「画像ファイル（xxx.jpg）の命名規則」について話が。

画像の命名規則

「luffy.jpg」でも悪くはないですが、「セクション名＋数字」にしたほうがイチイチ悩まなくていいですよ。

フォルダ内の画像も順番どおりに並びますしね。

せっかくなので、麦わら大船団は「リスト（箇条書き）」で入れてみましょう。

コーポレートサイトでもブログでも重宝しますからね。

スタイル

スタイルは大きく分けると、数字かそれ以外か。

リストの追加スタイル

デモサイトでは下線を引いています。

設定

初期値を「1」以降にしたり、ローマ数字に変更することもできますよ。

メインお客様の声の作り方（商品レビュー）

デモサイトでは〝お客様の声〟を「リッチカラム＋商品レビュー」で実装してみました。

項目

「メリット・デメリット」も試してみてくださいね。

また、お客様の声の「ボーダー」と「総合評価」はデフォルトでは黒です。

これをメインカラーに変更したい方もいますよね？

以下のコードを「追加CSS」にコピペしてください👇

右上のCopyをクリック

/* 商品レビュー */

/* ボーダーの色 */
.swell-block-review__inner {
    border-top: 2px solid #d53633;
}
/* 総合評価の色 */
.swell-block-review__rating .__label {
    background-color: #d53633;
}
/* 画像を丸く */
.swell-block-review__image img {
    border-radius: 50% ;
}

ついでに「画像を丸く」しておきました😌

さらに、プラグイン『Real Testimonials』を入れると、お客様の声をスライドショーにできますよ。

メインよくある質問（FAQブロック）

『SWELL』には「FAQ（よくある質問）」まで用意されています。

コーポレートサイトでもブログ記事でも必須ですよね。

スタイル

FAQの「スタイル」は４パターン。

形と色

Q&Aの「形や色」もポチポチするだけで変わりますよ。

メインブログ（投稿リストブロック）

「ブログ」や「コラム」を書いているなら、トップページに表示させましょう。

まずは、「ブログ記事」をサンプルでいいので作ってください。

とりあえず「３本」でOK。

これだけでブログ記事が表示されます。

レイアウトを選択

他にもいろいろ「設定」できるので、触ってみてくださいね。

ボタンを表示する

「もっと見る」ボタンはつけたほうがいいでしょう。

メインYouTubeの埋め込み＋SWELLボタンブロック

YouTube動画を埋め込みたいケースもありますよね。

やり方は超かんたん！

埋め込みたいYouTube動画のURLをコピペして、「埋め込み」をクリック。

下に「キャプションを追加」することもできますよ。

同じ要領で「X（Twitter）」も埋め込めます。

ボタンは３種類

ボタンの実装は「ボタン」ではなく、「SWELLボタン or マイクロコピー付き」がおすすめ！

「マイクロコピーとアイコン付きのボタン」はデモサイトの「さいごに」で実装しています。

スタイル

「SWELLボタン」でもアイコンは設定できますよ。

アイコン設定

デモサイトでは、「メインカラー」に合わせて「赤」にしていますが・・・

ボタンSEO

要するに、ボタンとは「青信号」です。

ボタンを「グリーン系」、矢印で促すことで、ユーザーを進めることができるのです。

だから、レッド系はNGですよ。

メインアクセス（Googleマップ＋テーブル）

アクセスには『Googleマップ』と、テーブル表で「会社概要」を作ってみます。

まずは、「リッチカラム」で２列にしましょう（１列にすると左が上になります）。

つづけて、『Googleマップ』にアクセスしてください。

Googleマップ編

あとは「カスタムHTML」にコピペするだけ。

これで『Googleマップ』が表示されます。

「カラム数（列数）」と「行数」を決めて、「表を作成」をクリック。

あとは項目を埋めていくだけです。

下に「キャプションを追加」することもできますよ。

メインお問い合わせフォーム

お問い合わせフォームの実装は長くなるので、別記事を用意しました。

お問い合わせフォームの機能

お問い合わせフォームの機能２

必要な機能はすべて実装しています。

お問い合わせフォームの作り方

コーポレートサイトには、プラグイン『Contact Form 7』一択です👇

関連記事【SWELL】お問い合わせフォームの作り方｜Contact Form 7編

関連記事【たった５分】ブログのお問い合わせフォームの作り方【必要です】

メインアコーディオン＋画像（ブラウザ風・デスクトップ風）

長い文章や、ネタバレ回避には「アコーディオンメニュー」を使いましょう。

スタイル

これもポチポチして、スタイルを試してみてください。

アコーディオン設定

右端の「開閉ボタン」も３パターン選べますよ。

アコーディオンメニューの中には「テキスト・画像・リンク」なんでも入れられますが・・・

せっかくなので『SWELL』で人気の「ブラウザ風」装飾を画像に施して、リンクをつけてみましょう。

画像をアップロードしたら、スタイルを選んでください。

スタイル

スタイルを選んだら、「リンク」にURLを入れて「ENTER」をクリック。

これで画像にリンクがつきました。

「キャプションを追加」すると、ブラウザの「タブ風」にキャプションもつけられますよ。

フッターフッターエリア

いよいよフッターです。

フッターエリアのカスタマイズ

ここでは「フッターエリア全般」を作っていきます。

もう慣れたもんですよね！

では、ここで「コピーライト（著作権表示）の豆知識」を一つ。

右上のCopyをクリック

Copyright © 発行年 所有者名 All Rights Reserved.

コピーライトはこのように表記するのが一般的です。

All Rights Reservedは「全ての権利を留保している」という意味。

とはいえ、コピーライトの表記がなくても、著作権を放棄したことにはならないんです。

なので、「© 会社名」のようなシンプルなものでOKですよ。

フッターフッターメニュー

「メニューを新規作成」をクリック。

フッターメニューの作り方

「次」をクリック。

つづけて、「＋ 項目を追加」をクリック。

デモサイトの場合

フッターメニューには、コーポレートサイトに最低限「必要なページ」を設置するのが一般的です。

誰も読みはしないけど、なくてはならないページですね。

※デモサイトはトップページ内に「お問い合わせ」がありますが、別ページで作るほうが多いはず。

ヘッダーメニューは「カスタムリンク」でしたが、フッターメニューは「固定ページ」を作って、それを呼び出します。

固定ページ

タイトルだけでいいので、それぞれの「固定ページ」を作っておいてくださいね。

スマホ固定フッターメニュー

スマホのフッターに固定するメニューも必要ですよね！

から「メニューを新規作成」をクリック。

メニューの設定

「次」をクリック。つづけて、「＋ 項目を追加」をクリック。

メニュー項目

「メニュー開閉ボタン」のみ、固定フッターを「公開」するとデフォルトで設定されています。

「固定ページ」と「投稿」は選ぶだけ。

「カスタムリンク」には自由にURLを入れられるので、YouTubeやX（Twitter）などの「外部リンク」も設定できます。

追加したら

ナビゲーションラベルは「固定ページ」や「投稿」も変更できますよ。

アイコン名は公式サイト「SWELLで使えるアイコンの一覧」からコピペしてくださいね。

特殊メニューボタンの表示設定

この４つはカスタマイズから設定します。

それぞれの「ラベルテキスト」も変更できますよ。

その他

これで「固定フッターメニュー」も完成です！

メニューは多くても「６つ」が限界ですね。

全体プラグイン

その他コーポレートサイトに必要な機能は「プラグイン」で補完しましょう。

プラグインとは、スマホでいう「アプリ」です。

表は横にスクロールできます

プラグインは多くても「10個ほど」に収めましょう（理由はすぐ後述します）。

くわしくは別記事にまとめました👇

関連記事SWELL初心者におすすめのプラグイン10選と設定方法

全体アニメーション

サイトに動きをつける「アニメーション」もプラグインで実装できます。

おすすめは『Blocks Animation』一択！

日本語にも対応

これ１つで思いつくかぎりのアニメーションを実装できますよ。

ローディングは全55種類！

とはいえ、そもそもサイトにアニメーションなんていりません！

２つの理由

クライアントに見せる「デモサイト」や「ポートフォリオ」に実装してアピールするにはいいですが・・・

実案件ではあまり使わないですね（なのでデモサイトでは多用しまくってます）。

本当にあった怖い話です👇

目次プラグインをアップデートしたら

WordPress本体やテーマとの干渉が原因です。

対処法

プラグインが増えるということは、エラーが出る可能性が上がるということ。

クライアントに渡したあとにエラーが起きたら、あなたのせいにされるかも。

プラグインは最低限に抑えるべきです。

関連記事【最新】WordPressのおすすめプラグイン３選＋７

その他下層ページ

トップページが完成したら、下層ページも作りましょう。

必要なページ

とはいえ、トップページのように作り込む必要ないので、一瞬で終わるはず。

すべて「投稿」ではなく、「固定ページ」で作ってくださいね。

コピペOKな「プライバシーポリシー・免責事項」の雛形は別記事をどうぞ👇

関連記事【雛形コピペ可】ブログ用プライバシーポリシー・免責事項の書き方

SWELLを使ったコーポレートサイトの制作代行やってます【ワードプレス】

初心者でもコーポレートサイトが作れるように、徹底解説しました。とはいえ・・・

餅は餅屋に

あなたは「あなたの得意領域」に全時間を投下すべき。

私があなたの代わりに「あなたのサイト」を制作します。

どんなジャンルでもOK

※ペットショップやブリーダーのみNG（理由：生体販売キライだから）。

こんな悩みを解決します👇

新規サイトの場合

リニューアルの場合

その他

とはいえ、コーポレートサイトはあくまで「手段」です。

オシャレで機能的なサイトも、誰にも届かないのであれば「この世に存在しない」も同然。

１サイトで

むしろ「Webデザイン」より「Webマーケティング」のほうが得意です。

まずは、サクッとお問い合わせくださいな👇

＼最高33万PVブロガー／

実質SWELLがもらえる！

【Q&A】SWELLのコーポレートサイトに関するよくある質問

SWELLのコーポレートサイトに関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

長くなってしまったので、一つだけ。

Q1：コーポレートサイトに必要なページは？

A次の４ページになります。

必要最低限

「お問い合わせフォーム」はトップページ内に入れてもいいですね。

必要なページ

下層ページは作るだけでなく、かならずトップページからリンクしてくださいね。

【まとめ】SWELLでコーポレートサイトを作ろう！

SWELLを使った「コーポレートサイトの作り方」について解説しました。

まとめ

『SWELL』があれば、あなたのコーポレートサイトに欲しい機能やデザインはかならず実装できます。

上から順番に試してみて、ダメなら私にお任せください🙌

＼最高33万PVブロガー／

実質SWELLがもらえる！

SWELLを導入したい方へ