こんにちは、ゆうじ(@yuji_sgs_prog)です。
本記事から、SWELLでコーポレートサイト(カフェ風デモサイト)の作り方を解説していきます。
本記事に全部をまとめると、どえらいことになるので、4〜5記事ほどのシリーズで解説していきます。
本シリーズを再現していただくと、SWELLで簡単なコーポレートサイトは誰でも作れるようになるはずなので、ぜひ最後までご覧ください。
本シリーズの対象者は以下の通りです。
- SWELLでコーポレートサイトを作ってみたい
- ブロック+CSSでのコーポレートサイト制作について知りたい
- Web制作を学習していて、デザインカンプからコーディングをしたい
本シリーズを実現するために、XDのデザインカンプまで用意しました。
SWELLでのコーポレートサイト制作は素晴らしいので、デザインカンプを元に、一緒に手を動かしていきましょう。(SWELLを持っていない方もWeb制作の練習にしていただけると嬉しいです。)
- SWELLコーポレートサイトの概要
- SWELLでコーポレートサイト制作するための下準備
本記事では、SWELLでコーポレートサイトを作っていくための概要と下準備を行なっていきます。
本当のゼロの状態から進めていき、Wordpress自体が初心者の方でも作れるので、安心してください。
また、本記事を書いている僕は、SWELLで10個以上ものサイトを作ってきました。
そのため、SWELLに対する知識量は問題ないと思っています。
この知識を活かして、SWELLのコーポレートサイトについて事細かに解説していくので、ぜひご覧になってください\(^o^)/
- 22歳国立理系大学生(機械学習をテーマに研究)
- Web系のプログラミング言語を勉強→ITベンチャーで長期インターン
- SWELL利用歴2年(ブログ運営、コーポレートサイト制作)
- 現在は法人のWebマーケティングの仕事を受けています
\ SWELL公式サイトはこちら /
SWELLコーポレートサイトの概要

本シリーズでは、以下のようなデモサイトを作っていきます。


作成したら実績として掲載OKです!
また、以下のようなステップで解説しています。
SWELLをコーポレートサイト型にしていくための準備をしていきます。
メインビジュアルを作成していきます。


セクションごとにコンテンツを作成していきます。


ヘッダーをカスタマイズしていきます。


フッターをカスタマイズして、プラグインを使って動きをつけていきます。


- SWELLあり:3〜5時間(本記事に沿って作っていくので必要スキルなし。HTML CSSの知識があり、開発者ツールが使えるとより理解が深まります。)
- SWELLなし:15〜30時間(必要スキル:HTML CSS JavaScript PHP)
スキルや慣れにもよりますが、だいたいこのくらいの時間が掛かるといった感じ。
CSSも100行程度と、極力コードを書かないような設計にしてます。(SWELLありの場合)



このレベルのコーポレートサイトをCSS100行程度で作れるのは、本当にすごいと思います(笑)
フルでコーディングして、Wordpress構築したことがある人ならわかると思いますが、SWELLで作ると「え、こんな簡単にできるの?」ってなるはずです。
まさしくSWELL開発者さんが仰っている通りで、ブロック+CSSで作っていくので衝撃を受けるはず。
それでは前置きはこれくらいにして、早速コーポレートサイトを作っていきましょう〜
SWELLでコーポレートサイト制作するための下準備


ここからは、SWELLがある方向けです。
SWELLの子テーマを有効化している状態前提で進めていきます。わからない方は下記事の「SWELLを導入する方法」を参考にどうぞ。






この状態から、コーポレートサイト型にカスタマイズしていきます。
- 「Hello World」の投稿ページ削除
- 固定ページで「フロントページ」と「投稿ページ」の作成
- カスタマイズで各種設定
カスタマイズ方法を順番に解説していきます。
1.「Hello World」の投稿ページ削除
「投稿」→「投稿一覧」をクリックして、デフォルトで存在する「Hello World」の投稿ページ削除します。


2. 固定ページで「フロントページ」と「投稿ページ」の作成
次に、「固定ページ」→「固定ページ一覧」から「フロントページ」と「投稿ページ」を作成していきましょう。
その前に、ここでもデフォルトにある「Sample Page」を削除します。


まず、画像の通り「フロントページ」を作成して、「公開」をクリック。


この時パーマリンクは変更しなくてOKです。
次に「投稿ページ」を作っていきます。


画像の通り「投稿ページ」を作成して、公開をクリック。
この時パーマリンクは「news」に変更しましょう。
3. カスタマイズで各種設定
固定ページで「フロントページ」と「投稿ページ」の作成が完了したら、「外観」→「カスタマイズ」をクリックして、各種設定を行っていきましょう。


コーポレートサイト型に変更
コーポレートサイト型に変更していくために、「WordPress設定」→「ホームページ設定」をクリック。


下のような設定にしていきましょう。


サイドバーの削除
次に、トップページにおいてサイドバーはいらないので削除していきます。
「サイドバー」の項目をクリック。


下のようにして、サイドバーを消していきましょう。


ヘッダーバーの削除
今回作るサイトでは、ヘッダーバーを表示しないつもりなので、ヘッダーバーを削除していきます。
「ヘッダー」の項目をクリック。


下のようにして、ヘッダーバーを消していきましょう。


最後に「公開」をクリックして、下準備完了です(*`・ω・)ゞ


このような感じになればOKです!
それでは今回は以上とします。最後まで読んでいただきありがとうございました。



次回はメインビジュアルをカスタマイズしていきます!
\ 次回の記事はこちら /

