こんにちは、ゆうじ(@yuji_sgs_prog)です。
本記事から、SWELLを活用したコーポレートサイトの作り方を解説していきます。
本記事に全てをまとめると非常に長くなってしまうので、5記事のシリーズで解説していきます。
本シリーズを再現していただくと、SWELLで簡単なコーポレートサイトは誰でも作れるようになるはずなので、ぜひ最後までご覧ください。
本シリーズの対象者は以下の通りです。
- SWELLでコーポレートサイトを作りたい方
- ブロック+CSSでのコーポレートサイト制作について知りたい方
- Web制作を学習していて、デザインカンプからコーディングをしたい方
本シリーズを実現するために、XDのデザインカンプまで用意しました。
SWELLでのコーポレートサイト制作は素晴らしいので、デザインカンプをもとに一緒に手を動かしていきましょう。(SWELLを持っていない方もWeb制作の練習にしていただけると嬉しいです。)
- SWELLで作っていくコーポレートサイトの概要
- SWELLでコーポレートサイト制作するための下準備
本記事では、SWELLでコーポレートサイトを作っていくための概要と下準備を行なっていきます。
本当のゼロの状態から進めていき、WordPress自体が初心者の方でも作れるように設計しているので安心してください。
また、本記事を書いている筆者はSWELLを3年ほど活用しており、10個以上ものサイトを作ってきました。
そのため、SWELLに対する知識量は問題ないと思っています。
この知識を活かして、SWELLのコーポレートサイトについて事細かに解説していくので、ぜひご覧になってください\(^o^)/
\ 国内人気No.1!簡単なコーポレートサイトは誰でも作れる! /
なお、「SWELLでコーポレートサイトを作ってほしい!」という方向けに、受託での制作サービスを提供しています。興味のある方は「こちら」よりご確認ください。
SWELLで作っていくコーポレートサイトの概要
![](https://sgs-prog.com/wp-content/uploads/2022/03/23124243_s.jpg)
本シリーズでは、SWELLで以下のようなデモサイトを作っていきます。
作成したら実績として掲載OKで、素材は下記にまとめておきます。
また、以下のようなステップで解説しています。
SWELLをコーポレートサイト型にしていくための準備をしていきます。
メインビジュアルを作成していきます。
![](https://sgs-prog.com/wp-content/uploads/2022/03/jong-marshes-79mNMAvSORg-unsplash-300x225.jpg)
セクションごとにコンテンツを作成していきます。
![](https://sgs-prog.com/wp-content/uploads/2022/03/beach-gf22748acf_1280-300x169.jpg)
ヘッダーをカスタマイズしていきます。
![](https://sgs-prog.com/wp-content/uploads/2022/03/yucar-fotografik-cfR-V1QuEKw-unsplash-300x200.jpg)
フッターをカスタマイズして、プラグインを使って動きをつけていきます。
![](https://sgs-prog.com/wp-content/uploads/2022/03/11-2-300x199.jpg)
- SWELLあり:3〜5時間(本記事に沿って作っていくので必要スキルなし。HTML CSSの知識があり、開発者ツールが使えるとより理解が深まります。)
- SWELLなし:15〜30時間(必要スキル:HTML CSS JavaScript PHP)
スキルや慣れにもよりますが、だいたいこのくらいの時間が掛かるといったイメージです。
CSSも100行程度と、極力コードを書かないような設計にしてます。(SWELLありの場合)
フルでコーディングして、WordPress構築したことがある人ならわかると思いますが、SWELLで作ると「え、こんな簡単にできるの?」ってなるはずです。
まさしくSWELL開発者さんが仰っている通りで、ブロック+CSSで作っていくので衝撃を受けるはず。
それでは前置きはこれくらいにして、早速コーポレートサイトを作っていきましょう。
SWELLでコーポレートサイト制作するための下準備
![](https://sgs-prog.com/wp-content/uploads/2022/05/tree-ga278a7f8e_640.jpg)
ここからは、SWELLがある方向けです。
SWELLを有効化している状態という前提で進めていきます。わからない方は下記事の「SWELLを導入する方法」を参考にどうぞ。
なお、SWELLでコーポレートサイトを作って、Web上で公開するためにはレンタルサーバーが必要です。現在、Xserverのキャンペーンで最大10,000円OFFでサーバーを借りれますので、少しでも費用を抑えたい方は下記リンクよりどうぞ<(_ _)>
» Xserverのキャンペーンによって最大10,000円OFFでレンタルサーバーを借りる
![SWELLデフォルト](https://sgs-prog.com/wp-content/uploads/2022/03/1-1024x537.jpg)
まずはこの状態から、コーポレートサイト型にカスタマイズしていきます。
- 「Hello World」の投稿ページ削除
- 固定ページで「フロントページ」と「投稿ページ」の作成
- カスタマイズで各種設定
カスタマイズ方法を順番に解説していきます。
1.「Hello World」の投稿ページ削除
「投稿」→「投稿一覧」をクリックして、デフォルトで存在する「Hello World」の投稿ページを削除します。
![「Hello World」の投稿ページ削除](https://sgs-prog.com/wp-content/uploads/2022/03/2-1024x505.jpg)
2. 固定ページで「フロントページ」と「投稿ページ」の作成
次に、「固定ページ」→「固定ページ一覧」から「フロントページ」と「投稿ページ」を作成していきましょう。
その前に、ここでもデフォルトにある「Sample Page」を削除します。
![固定ページで「フロントページ」と「投稿ページ」の作成](https://sgs-prog.com/wp-content/uploads/2022/03/3-1024x512.jpg)
まず、画像の通り「フロントページ」を作成して、「公開」をクリック。
![固定ページでフロントページの作成](https://sgs-prog.com/wp-content/uploads/2022/03/4-1024x546.png)
この時パーマリンクは変更しなくてOKです。
次に「投稿ページ」を作っていきます。
![固定ページで投稿ページの作成](https://sgs-prog.com/wp-content/uploads/2022/03/5-1024x544.png)
画像の通り「投稿ページ」を作成して、公開をクリック。
この時パーマリンクは「news」に変更しましょう。
3. カスタマイズで各種設定
固定ページで「フロントページ」と「投稿ページ」の作成が完了したら、「外観」→「カスタマイズ」をクリックして、各種設定を行っていきましょう。
![Wordpressのカスタマイズ](https://sgs-prog.com/wp-content/uploads/2022/03/6-1024x486.jpg)
コーポレートサイト型に変更
コーポレートサイト型に変更していくために、「WordPress設定」→「ホームページ設定」をクリック。
![カスタマイズのWordpress設定](https://sgs-prog.com/wp-content/uploads/2022/03/7-1024x585.jpg)
下記のような設定にしていきましょう。
![Wordpressカスタマイズのホームページ設定](https://sgs-prog.com/wp-content/uploads/2022/03/8-1024x562.jpg)
サイドバーの削除
次に、トップページにおいてサイドバーはいらないので削除していきます。
「サイドバー」の項目をクリック。
![Wordpressカスタマイズのサイドバー](https://sgs-prog.com/wp-content/uploads/2022/03/9-1024x557.jpg)
下記のようにしてサイドバーを消していきましょう。
![Wordpressカスタマイズでサイドバーを削除](https://sgs-prog.com/wp-content/uploads/2022/03/10-1024x561.jpg)
ヘッダーバーの削除
今回作るサイトではヘッダーバーを表示するつもりはないので、ヘッダーバーを削除していきます。
「ヘッダー」の項目をクリック。
![Wordpressカスタマイズのヘッダー](https://sgs-prog.com/wp-content/uploads/2022/03/11-1024x558.jpg)
下記のようにして、ヘッダーバーを消していきましょう。
![SWELLのWordpressカスタマイズでヘッダーバーを削除](https://sgs-prog.com/wp-content/uploads/2022/03/12-1024x563.jpg)
最後に「公開」をクリックして、下準備完了です(*`・ω・)ゞ
![SWELLコーポレートサイト型の下準備完了](https://sgs-prog.com/wp-content/uploads/2022/03/13-1024x538.jpg)
このような感じになればOKです!
それでは今回は以上とします。ここまで読んでくださった方はありがとうございました。
\ 次回の記事はこちら /
![](https://sgs-prog.com/wp-content/uploads/2022/03/jong-marshes-79mNMAvSORg-unsplash-300x225.jpg)
最後に:SWELLでコーポレートサイト制作をお手伝いいたします
![](https://sgs-prog.com/wp-content/uploads/2024/02/computer-2563737_1280-1024x682.webp)
本シリーズをもとに手を動かしていくと、SWELLで簡単なコーポレートサイトは誰でも作れるようになるはずです。
しかし、Webの知識に疎かったり、そもそもの時間が取れない方も一定数いるかと思います。
そういったわけで、上記のような方に向けて、SWELLに慣れている僕がコーポレートサイトの制作をお手伝いいたします。
お手伝いできること
- 作成部分において全ての工程をお手伝いいたします。
- 安心安全にサイト運営できる設計をさせていただきます。
- サイト運営でつまづく部分をサポートさせていただきます。
作成部分だけでなく、運営面でのサポートも行います。
当ブログもそうですし、企業サイトを運営しています。作成面だけでなく、運営面での知識量も問題ないです。
制作の条件
- サーバー・ドメインは取得した状態でお願いします。(必要な方は取得のサポートもいたします。| Xserverの紹介経由ですと安く取得できます。)
- ページ数は5〜7ページほどでお願いします。
- SWELLで可能な範囲の実装のみとさせていただきます。
上記の条件で、作成代行料金は「18万円」とさせていただきます。(ページ数が増える場合や工数が増えそうな場合は別途料金を見積もりさせていただきます。)
サーバー・ドメイン代と合わせて20万円もいかない価格となっており、需要に応じて値上げさせていただいているため、HP制作をご検討の方はお早めのお問い合わせを推奨いたします。
お問い合わせは当ブログのフォームか、ツイッター(@yuji_sgs_prog)でのDMへよろしくお願いいたします<(_ _)>