SWELLでコーポレートサイトを作ってみた!【デザインカンプあり】

こんにちは、ゆうじ(@yuji_sgs_prog)です。

本記事から、SWELLを活用したコーポレートサイトの作り方を解説していきます。

本記事に全てをまとめると非常に長くなってしまうので、5記事のシリーズで解説していきます。

本シリーズを再現していただくと、SWELLで簡単なコーポレートサイトは誰でも作れるようになるはずなので、ぜひ最後までご覧ください。

本シリーズの対象者は以下の通りです。

本シリーズの対象者
  • SWELLでコーポレートサイトを作ってみたい方
  • ブロック+CSSでのコーポレートサイト制作について知りたい方
  • Web制作を学習していて、デザインカンプからコーディングをしたい方

本シリーズを実現するために、XDのデザインカンプまで用意しました。

SWELLでのコーポレートサイト制作は素晴らしいので、デザインカンプをもとに一緒に手を動かしていきましょう。(SWELLを持っていない方もWeb制作の練習にしていただけると嬉しいです。)

本記事の内容
  • SWELLで作っていくコーポレートサイトの概要
  • SWELLでコーポレートサイト制作するための下準備

本記事では、SWELLでコーポレートサイトを作っていくための概要と下準備を行なっていきます。

本当のゼロの状態から進めていき、WordPress自体が初心者の方でも作れるように設計しているので安心してください。

また、本記事を書いている筆者はSWELLを2年ほど活用しており、10個以上ものサイトを作ってきました。

そのため、SWELLに対する知識量は問題ないと思っています。

この知識を活かして、SWELLのコーポレートサイトについて事細かに解説していくので、ぜひご覧になってください\(^o^)/

\  国内人気No.1のWordPressテーマ! /

目次

SWELLで作っていくコーポレートサイトの概要

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

SWELLで作成したコーポレートサイト
クリックすると開きます。

作成したら実績として掲載OKで、素材は下記にまとめておきます。

素材

また、以下のようなステップで解説しています。

STEP
下準備(本記事)

SWELLをコーポレートサイト型にしていくための準備をしていきます。

STEP
メインビジュアル編

メインビジュアルを作成していきます。

STEP
コンテンツ編

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

STEP
ヘッダー編

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

STEP
フッター・プラグイン編

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

掛かる時間(見込み)
  • SWELLあり:3〜5時間(本記事に沿って作っていくので必要スキルなし。HTML CSSの知識があり、開発者ツールが使えるとより理解が深まります。)
  • SWELLなし:15〜30時間(必要スキル:HTML CSS JavaScript PHP)

スキルや慣れにもよりますが、だいたいこのくらいの時間が掛かるといったイメージです。

CSSも100行程度と、極力コードを書かないような設計にしてます。(SWELLありの場合)

フルでコーディングして、WordPress構築したことがある人ならわかると思いますが、SWELLで作ると「え、こんな簡単にできるの?」ってなるはずです。

まさしくSWELL開発者さんが仰っている通りで、ブロック+CSSで作っていくので衝撃を受けるはず。

それでは前置きはこれくらいにして、早速コーポレートサイトを作っていきましょう。

SWELLでコーポレートサイト制作するための下準備

ここからは、SWELLがある方向けです。

SWELLを有効化している状態という前提で進めていきます。わからない方は下記事の「SWELLを導入する方法」を参考にどうぞ。

SWELLデフォルト

まずはこの状態から、コーポレートサイト型にカスタマイズしていきます。

SWELLでコーポレートサイト型にカスタマイズする方法
  1. 「Hello World」の投稿ページ削除
  2. 固定ページで「フロントページ」と「投稿ページ」の作成
  3. カスタマイズで各種設定

カスタマイズ方法を順番に解説していきます。

1.「Hello World」の投稿ページ削除

投稿」→「投稿一覧」をクリックして、デフォルトで存在する「Hello World」の投稿ページを削除します。

「Hello World」の投稿ページ削除

2. 固定ページで「フロントページ」と「投稿ページ」の作成

次に、「固定ページ」→「固定ページ一覧」から「フロントページ」と「投稿ページ」を作成していきましょう。

その前に、ここでもデフォルトにある「Sample Page」を削除します。

固定ページで「フロントページ」と「投稿ページ」の作成

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

固定ページでフロントページの作成

この時パーマリンクは変更しなくてOKです。

次に「投稿ページ」を作っていきます。

固定ページで投稿ページの作成

画像の通り「投稿ページ」を作成して、公開をクリック。

この時パーマリンクは「news」に変更しましょう。

3. カスタマイズで各種設定

固定ページで「フロントページ」と「投稿ページ」の作成が完了したら、「外観」→「カスタマイズ」をクリックして、各種設定を行っていきましょう。

Wordpressのカスタマイズ

コーポレートサイト型に変更

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

カスタマイズのWordpress設定

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

Wordpressカスタマイズのホームページ設定

サイドバーの削除

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

サイドバー」の項目をクリック。

Wordpressカスタマイズのサイドバー

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

Wordpressカスタマイズでサイドバーを削除

ヘッダーバーの削除

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

ヘッダー」の項目をクリック。

Wordpressカスタマイズのヘッダー

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

SWELLのWordpressカスタマイズでヘッダーバーを削除

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

SWELLコーポレートサイト型の下準備完了

このような感じになればOKです!

それでは今回は以上とします。最後まで読んでいただきありがとうございました。

\  次回の記事はこちら /

Thank you for sharing my post !!
  • URLをコピーしました!

おすすめのWordPressテーマ

楽しく、簡単に、おしゃれなブログを作れるWordPressテーマ
コーポレートサイト制作にも使える神テーマです

プロモーション

目次