WordPressテーマ「SWELL」を使って、企業サイト(コーポレートサイト)を実際に作ってみました。
SWELLはブログだけでなく企業サイトや店舗サイト、個人事業主のホームページ制作にも使いやすいWordPressテーマです。
実際にWordPressの管理画面を操作しながら、ファーストビューから各セクションを作っていく様子を動画で紹介しています。
今回のコーポレートサイトは、SWELLを使って約50分ほどで制作しました。
初心者でも1時間くらいで出来るかな？
実際のホームページ制作では、文章を考えたり、サイトに合う画像を探したり、ロゴを準備、設定したり、画像を加工したりといった準備にも時間がかかります。
今回くらいのボリュームのコーポレートサイトであれば、文章の作成から画像選び、デザイン・制作まで含めて、3日〜1週間程度を目安に考えておくとよいでしょう。
今回SWELLで制作したコーポレートサイト
今回制作したのは、Web・IT系企業をイメージした架空のコーポレートサイトです。
完成したサイトが見たい方はこちらです。
http://okamotosanti.xsrv.jp/sample3/
今回のサイトは、できるだけCSSを使わず、SWELL・WordPressの標準機能だけで制作しています。
基本的なレイアウトやデザインはブロックの設定だけで作成していますが、スマートフォン表示の一部のフォントサイズやレイアウトの余白調整のみCSSを使用しています。
完全なノーコードではありませんが、CSSを使っているのは細かな調整のみになります。
内容は最初に作る企業サイトとして使いやすい構成にしています。
- ファーストビュー
- 私たちについて
- 事業内容
- 選ばれる理由
- 数字で見る会社
- 会社概要
- お問い合わせ導線
まずは完成したサイトをご覧ください。
※不要な部分は倍速やスキップで飛ばしながらご覧ください要な部分は倍速やスキップで飛ばしながらご覧ください
今回使用した主なブロック
今回のサイトでは、特別なページビルダーなどは使用せず、SWELL・WordPressのブロックを組み合わせて制作しています。
主に使用したのは、次の4つです。
リッチカラム
サービスを3列で並べたり、複数のコンテンツを横並びにしたりするときに使用しました。
通常のカラムよりも（左右、上下の余白など）レイアウトを細かく調整しやすく、コーポレートサイト制作では特に使いやすいブロックです。
フルワイドブロック
背景色や背景画像を画面いっぱいに表示したいセクションで使用しています。
セクションごとに背景を切り替えることで、ページ全体にメリハリをつけやすくなります。
メディアとテキスト
画像と文章を横並びにするセクションで使用しました。
「画像＋説明文」のような企業サイトでよく見るレイアウトを簡単に作成できます。
表（テーブル）
会社概要の表示に使用しました。
会社名・所在地・設立・事業内容などを整理して掲載するのに便利です。
横幅の設定、セルの背景設定、スクロール設定、SPでは縦並び設定など、細かい調整が可能です。
セルの縦幅だけcssで調整しています。
基本的なブロックを組み合わせるだけでも、SWELLならコーポレートサイトらしいトップページを作ることができます。
他にも『SWELLの独自ブロックでどんなデザインが出来るの？』という方はぜひ合わせて参考にしてみてください。
SWELLをさらに使いやすくしたい方へ
SWELLは標準機能だけでも十分使いやすいテーマですが、実際にホームページ制作で使っていると「ここにもリンクを設定できたら便利なのに」と感じることがあります。
そこで、SWELLでのホームページ制作をさらに使いやすくするために「Block Linker」というプラグインを作りました。
Block Linkerを使うと、WordPressやSWELLの一部ブロックに、ブロック全体をクリックできるリンクを簡単に設定できます。
特に今回のコーポレートサイトでも使用したリッチカラムやフルワイドブロックにリンクを設定できるので、サービス紹介やカード型のデザインを作るときにも便利です。
WordPressの標準のカラムブロックやカバーブロックにも対応しています。
無料でダウンロードできますので、SWELLでホームページを制作している方はぜひ使ってみてください。
Block Linkerの詳細や使い方はこちらを参考にしてみてください。
まとめ
正直なところ、『プロが作り込んだようなデザイン』までは仕上がりません。
しかし、ブロックを積み重ねていくだけでここまでの見た目にできるのであれば、SWELLは十分に使いやすいテーマだと感じました。
今回、細かい部分は多少コードで調整しましたが、それでもCSSをほとんど使わずにここまで自分の手で作れるのであれば、企業サイトとして十分に信頼できるクオリティに仕上がると思います。
「デザインの知識はないけれど、ちゃんとしたコーポレートサイトを自分で作りたい」という方にとって、SWELLは十分に選択肢になるテーマです。
今回はSWELLを使って実際にコーポレートサイトを制作してみましたが、SWELLが実際の企業サイトでどのように使われているのか気になる方も多いと思います。
以下の記事では、SWELLで制作された企業・店舗・事業者などのサイトを44サイト厳選して紹介しています。
業種によってデザインや構成も大きく異なるので、「SWELLでどんなサイトが作れる？」「自社サイトのデザインを考える参考にしたい」という方は、ぜひあわせてご覧ください。
『SWELLでホームページを作ってみたい』と思った方は、まずSWELLをWordPressに導入してみましょう。
次の記事では、SWELLの購入からダウンロード、WordPressへのインストール・有効化までの流れを、初心者の方にもわかりやすく解説しています。
もし「自分で作る時間がない」「デザインの微調整が出来ない」「事業に合ったデザインで作りたい」という場合は、ホームページ制作のご相談も承っています。
個人事業主や小規模事業者向けに、WordPressを使ったホームページ制作を行っており、デザインだけでなく、公開後の更新や運用のしやすさも考えたサイト制作をしています。
まずは「どのようなホームページが必要なのか分からない」といった段階でも問題ありません。
事業内容や目的をお聞きし、必要なページ構成や制作方法についてご提案いたします。
ホームページ制作についてご相談をご希望の方は、お問い合わせページよりお気軽にご連絡ください。
このサイトもWordPressテーマ「SWELL」で制作しています。
実際に私自身、クライアントサイトを含めて50サイト近くSWELLで制作してきました。ブロックエディターの使いやすさやデザインの整えやすさ、制作効率の高さから現在もメインテーマとして利用しています。