ホームページ(カフェサイト)を自分で低コストで作成する方法を詳しく図解入りで一から全て解説【WordPressテーマSWELL使用】

デモサイトSatenn de Recoが表示されているPC

自分のカフェのサイト作りたいな〜

個人でカフェを経営されていて、ホームページをずっと欲しいと気にはなっていたけど
なかなか費用もかかるしと、持てずにいませんか?

カフェをオープンする予定だけど、ホームページ制作費用が高額になるので、
諦めていませんか?

サイト制作の勉強を始めたばかりの方は、
先ずはノーコードでホームページを作ってみて、制作の流れを把握したり自信に繋げてみたいと思いませんか?

でも自分で作るとしてもサイト制作の知識ゼロなので、実際作れるのか不安だな。。。

安心してください!大丈夫です!!

サイト制作の知識が全くなくても作成できるように、
初心者の方でも超わかりやすく、デモサイトと画像付きで解説してみました。

出来上がったサイトはカスタマイズしたり画像やテキストなどを入れ替えたりと、自由に使っていただけますので、
是非とも一緒に作っていきましょう!

どなたでもご自由に制作していただいて結構なのですが、このデモサイトをそのままご自身のポートフォリオとして掲載されるのはお控えください。

オススメ

カフェ経営されている方は、Googleビジネスプロフィール(旧名Googleマイビジネス)に無料で登録すると、
Google Mapに登録したお店の詳しい紹介やサイトのURLを掲載できますので、宣伝効果は抜群です。

目次

作成するホームページのデモサイト

今回はこのような架空サイトを作成していきます。

画像をクリックすると、デモサイトがご覧になれます。

デモサイトSatenn de Recoのファーストビュー

他のサイトを制作したい方はこちらをご覧ください。↓

あわせて読みたい

Q & A

Web制作(ホームページ制作)の知識が全くありませんが制作できますか?

全く初心者の方でも制作できるように、詳細に図解入りで解説していますので、その通りに進めていただくと制作できます。

テンプレですか?

テンプレートではありません。

デモサイトと同じデザインしか作れませんか?

いいえ。
制作過程で徐々にWordPressやテーマのSWELLの仕様に慣れてくると思いますので、「ここのこの部分は別のデモサイトに載っているデザインで作る」や「これと同じ項目をもう一つ増やそう」「これは必要ないので削除しよう」「ここの色や大きさをを変更しよう」などなどご自由にレイアウトやデザインしていただけます。

一度制作したサイトのデザインを変更できますか?

何度でも変更可能です。
ローカル環境でもサーバーアップロード環境でも可能です。

短期間で作れますか?

初めての方はかなり時間がかかると思いますので、時間に余裕を持って始められることをお勧めします。

いますので、時間に余裕を持って始められることをお勧めします。

ホームページ作成の工程

2パターン紹介しますので、
適した方で作成してください。

パターン1
XserverのWordPress簡単インストールで、サーバー上に直接サイトやブログを構築する方法です。
ご自身のサイトやブログを構築するのにおすすめです。

パターン2
ローカル環境(Local)でサイトやブログを作成し、出来上がってからAll-in-one WP Migrationを使ってXserverのWordPress簡単インストールで立ち上げたWordPressに引越しさせる方法です。
クライアントワークににはこちらがおすすめです。

【パターン1】ホームページ作成の工程

STEP
WordPressテーマSWELLを購入 17,600円(税込)
WordPressテーマSWELLをダウンロードします。
STEP
Xserverでレンタルサーバーとドメインを取得し(初期費用3,300円 約1,000円/月)、Xserver WordPress簡単インストールでWordPressをインストールし、SSL化します。
SWELLの親テーマ子テーマをインストールします。
STEP
SWELL子テーマを有効化し、サイトやブログを作成していきます。

【パターン2】ホームページ作成の工程

STEP
WordPressテーマSWELLを購入 17,600円(税込)

SWELLをダウンロードします。

子テーマもダウンロードします。

STEP
LOCAL(無料)を使用してローカル環境でWordPressを構築します。

LOCALをダウンロードし、SWELLとSWELLの子テーマもインストールし、ローカル環境(サーバー上にアップロードされていない環境)でWordPressのホームページを作成していきます。

STEP
ホームページ作成後、WordPressのプラグインAll-in-one WP Migrationをインストールします。

All-in-one WP Migrationをインストールし、バックアップファイルとエクスポートファイルを作成します。

STEP
Xserverでレンタルサーバー契約した後(初期費用3,300円 約1,000円/月)、WordPress簡単インストールでWordPressを立ち上げ、All-in-one WP Migrationをインストールします。

All-in-one WP Migrationをインストールし、先ほどのエクスポートファイルをインポートします。

どちらの方法で作成するにしても、WordPressテーマSWELLXserverが必要になります。

実質かかる費用はたったこれだけ!
初期費用17,600円 税込 (買い切りWordPressテーマSWELL価格)
初期費用3,300円 税込 (サーバー契約初期費用)
約1,000円/
月 (サーバーとドメイン代)

WordPressテーマSWELLダウンロードします。

日本人の了さんが直感的に簡単に楽しく素早く操作でき、細部までこだわって作られた、
WordPressテーマです。

ブログでもとても人気のテーマですので、
サイト制作した後にブログを始めてみるのもいいですね!
もちろん買い切り価格ですので、追加料金は発生しません。

今回は完全ノーコードでの制作ですが、追加CSSでより機能性やデザイン性の高いものが作れます。

商品名WordPressテーマ SWELL
販売価格¥17,600(税込み)
※お支払いは一度限りです。月額や年額ではありません。
販売元株式会社LOOS
動作必須環境PHP7.3以上

WordPress5.5以上 (推奨 : 5.6 ~)

※必須環境をみたしてない場合は、エラーが発生します。推奨バージョン未満では、ブロック機能が一部使えません。
※WordPress.comでは利用できません。SWELLはインストール型WordPress.org向け商品です。
対応ブラウザEdge / Chrome / Firefox / Safari (各最新版)
決済方法クレジットカード ( VISA / Master / AMEX / JCB )
※銀行振込での購入は対応できません。
ライセンスSWELLはGPL100%テーマです。
ライセンス制限はなく、複数サイトでご自由にご利用頂けます
SWELL公式サイトより引用
  • SWELLをダウンロードしたら、子テーマもダウンロードしましょう。
    (子テーマはSWELL会員サイト SWELLERS’ のマイページにあります。)
  • 親テーマも子テーマもダウンロードした後、zipファイルのままで大丈夫です。

わからないことがあれば、会員サイトのフォーラムで検索や質問ができます。
(フォーラムへは、ガイドラインをよく読んで参加しましょう。)

サブスクではありませんので、一度の購入で複数のブログやサイトが作れます。

Xserverでサーバーとドメインを取得します。

Xserver

エックスサーバー

Xserverのお申し込み方法の解説になります。↓

お名前.com

コチラは特にドメインが1円〜という破格で人気ですね!

もちろんレンタルサーバーもありますが、
サーバーとドメインを別会社にしたい方は、ドメインだけはお名前.comって方法もあります。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■

     ■お名前.com

Xserver WordPress簡単インストールとSSL設定の解説になります。
申し込みが終わればここまで設定しておいてくださいね。↓

【パターン2】の方のみ Local設定

LocalでWordPressをローカル環境構築していきますので、こちらをご覧になって設定してくださいね。↓

WordPressにSWELLをインストールする

では!頑張って作っていきましょう!
とても時間がかかりますので、無理をしない様に途中休憩を適度に取りながら、水分も忘れず補給しながら進めていってくださいね!

WordPressにログインします。

【パターン1】の方は、Xserver簡単インストールしたWordPress
【パターン2】の方は、Local環境で構築したWordPressです。

外観→テーマアップロードをクリックします。


swellのファイルをzipファイルのままドラッグ&ドロップします。
(ファイルを選択してもいいです)


今すぐインストールをクリックします。


今度はswell_childのファイルをzipファイルのままドラッグ&ドロップします。
(ファイルを選択してもいいです)


今すぐインストールをクリックします。


今度は有効化をクリックします。


親テーマSWELLがインストールされていて、子テーマSWEL CHILDが有効になっていればOKです。

基本的に今有効になっている子テーマを使って制作していきます。

画像をメディアに入れます

今回使用する画像です。

メディアから新規追加をクリックします。


ダウンロードして解凍した画像全てを、ファイルをドロップしてアップロードにドラッグ&ドロップします。
これで画像が入りました。

画像や動画について

画像や動画はご自身で用意、またはweb上で見つけたものを使用される場合の参考になさってください。

画像・動画フリーダウンロードサイト

デザインツール

無料の範囲でも素敵なデザインが作れます。
有料1,000円/月にすると、背景透過やたくさんの素材を使用することができかなり充実しています。

■Canva

7500万点の素材が無料

画像加工サイト

私は頻繁に利用させていただいており、助かっています。

BANNER KOUBOU

画像サイズの変更

画像が大きいと重くなりサイト表示が遅くなります。
画像サイズの変更方法はこちらをご覧ください。↓

画像サイズの目安

大体の目安です。
このサイズじゃないといけないってことではありませんので、
その辺りは臨機応変にご使用ください。

メインビジュアル1600px
中サイズ1000px
小サイズ600px

画像を圧縮してくれる無料サイト

ドラッグ&ドロップで使用でき、
圧縮して、ファイルサイズを小さくしてくれます。

TinyPNG

動画を圧縮してくれる無料サイト

こちらもドラッグ&ドロップで使用できます。

VideoSmaller

背景削除してくれる無料サイト

画像の背景を削除してくれます。

ロゴなどによく使用します。

removebg

固定ページ

固定ページを作っていきます。

WordPressの管理画面を開きます。

固定ページ一覧をクリックします。

Privacy PolicySample Pageゴミ箱へ移動をクリックして削除します。


固定ページの新規追加をクリックします。


ポップアップ画像の×をクリックします。


HOMEと入力します。

右上の公開をクリックします。


再び公開をクリックします。

公開をクリックするとセーブされますので、覚えておいてくださいね。


パーマリンク

ページを作成する時にタイトルが日本語だと、長〜〜い訳のわからないurlになったり(https://〇/%e7%a7%81%e3%81%9f%e3%81%a1%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/)

なので、わかりやすい英語表記(スラッグ)にしておきましょう!

そのページの、画面右側→固定ページパーマリンクのurlスラッグを日本語ではなくわかりやすい英語表記に変えましょう!!


HOMEがホームページ(トップページ)になります。

同様にNEWSCONTACTの固定ページを作ります。

管理画面の固定ページ一覧をクリックすると
左の様に表示されてたらオッケーです。
(順序は気にしなくて大丈夫です。)


外観カスタマイズ

管理画面から外観のカスタマイズをクリックします。


WordPress設定

WordPress設定をクリックします。


サイト基本情報をクリックします。


キャッチフレーズを今回は表示させないので消します。

サイトアイコンを選択をクリックします。


メディアライブラリから画像を選び、選択をクリックします。


切り抜かないをクリックします。

これで、ブラウザのタブにアイコンが表示されましたね。


公開をクリックします。

をクリックして戻ります。


ホームページ設定をクリックします。


ホームページの表示固定ページに丸をつけます。

ホームページHOMEを選びます。

投稿ページNEWSを選びます。

公開をクリックします。

をクリックし戻ります。


もう一度  をクリックして戻ります。


サイト全体設定

サイト全体設定をクリックします。


基本カラーをクリックします。


メインカラー色を選択をクリックします。

#bbb8adに変更します。

同様に、テキストカラー#5e503fに変更します。

公開をクリックします。

をクリックし戻ります。


基本デザインをクリックします。


全体の質感全体に丸みを持たせるにチェックを入れる。

フォント設定ベースとなるフォンントヒラギノゴシック>メイリオを選びます。

公開をクリックします。

をクリックし戻ります。


パンくずリストをクリックします。


「ホーム」の文字列HOMEに変更します。

公開をクリックします。

をクリックします。


を再びクリックします。


ヘッダー

ヘッダーをクリックします。


ヘッダー背景色色を選択をクリックし、#bbb8adに変更します。

ヘッダー文字色色を選択をクリックし、#ffffffに変更します。

画像を選択をクリックします。


画像を選び、画像を選択をクリックします。


ヘッダーのレイアウト(SP)ロゴ:左/メニュー:右を選びます。

ヘッダーの背景を透明にするかどうかは、する(文字色:白)を選びます。

透明時のロゴ画像画像を選択をクリックします。


画像を選び、画像を選択をクリックします。


追従ヘッダー(PC)の背景不透明度0.8にします。

表示設定SNSアイコンリストを表示するのチェックを外します。


公開をクリックします。

をクリックして戻ります。


フッター

フッターをクリックします。


フッター背景色色を選択をクリックします。

#bbb8adに変更します。

同様にフッター文字色も、#5e503fに変更します。

コピーライトのテキストを、Satenn-de-Recoと入力します。

その他の設定二つにチェックを入れます


公開をクリックします。

をクリックして戻ります。


サイドバー

サイドバーをクリックします。


トップにサイドバーを表示する固定ページにサイドバーを表示するのチェックを外します。

公開をクリックします。

をクリックして戻ります。


トップページ

トップページをクリックします。


メインビジュアルの表示内容動画にチェックを入れます。

Scrollボタンを表示するにチェックを入れます。

メインビジュアルの高さ設定は、ウィンドウサイズにフィットさせるを選びます。


フィルター処理なしを選びます。

動画を選択をクリックします。


動画を選び動画を選択をクリックします。


ポスター画像(PC/Tab)画像を選択をクリックします。


画像を選び、画像を選択をクリックします。


公開をクリックします。

をクリックして戻ります。


記事スライダーをクリックします。


設置しないにチェックを入れます。

公開をクリックします。

をクリックして戻ります。


再び をクリックして戻ります。


メニュー

メニューをクリックします。


メニューを新規作成をクリックします。


メニュー名グローバルナビと入力します。

メニューの位置は、グローバルナビスマホ開閉メニュー内にチェックを入れます。

をクリックします。


項目を追加をクリックします。


右側にあるHOME NEWS CONTACTをクリックして選ぶと、左側にその3つのメニューが表示されます。

左側の順序を入れ替えたい時は、ドラッグ&ドロップで変更できます。

公開をクリックします。

をクリックして戻ります。


再び をクリックして戻ります。


ウィジェット

ウィジェットをクリックします。


フッター(PC)1をクリックします。


ウィジェットを追加をクリックします


画像をクリックします。


画像を追加をクリックします。


画像を選択し、ウィジェットに追加をクリックします。


ウィジェットを追加をクリックします。


テキストをクリックします。


テキストを入力します。

公開をクリックします。

をクリックして戻ります。


Google Mapの埋め込み

フッター(PC)2をクリックします。


ウィジェットを追加をクリックします。


カスタムHTMLをクリックします。


ここで一旦WordPressを離れ、ブラウザの別タグで、Google Mapで所在地の検索をします。

共有をクリックします。


地図を埋め込むをクリックします。


左のを選び、HTMLをコピーをクリックします。


WordPressに戻り、内容に先ほどコピーしたものを貼り付けます。

貼り付けた内容の
width=”400″ width=”100%” に書き換えます。

公開をクリックします。

をクリックして戻ります。


再び をクリックして戻ります。


をクリックして管理画面に戻ります。


お疲れ様でした。
ヘッダーとフッター、そしてメインビジュアルの部分がこれで出来上がりました。
初めての方は一つ一つの作業に手間と時間がかかり、大変だったと思いますが、無理のないペースで進めていってくださいね。

サイトを表示  管理画面

サイトを表示するには、管理画面左上あたりのサイト名をホバーすると、サイトを表示の文字が現れますので、クリックします。


管理画面に戻るには、サイト左上あたりのサイト名をホバーすると、ダッシュボードの文字が現れますので、クリックします。

気をつけていただきたい事

これからブロックエディターで制作していきますが、こちらからはお知らせしませんので、ご自分のタイミングで頻繁にセーブしていってください。(でないと、せっかく作ったのが消えてしまいます。)

セーブは画面右上、公開を1回クリックもしくは2回クリックします。
(Localで作成されている方は、公開をクリックしてもサーバー上にはアップされません。セーブされるだけです。)

テキストの改行は、シフトを押しながらエンターキーで、普通に改行されます。

エンターキーだけで改行すると、1段落分のスペースが空きます

どこの なのか注意してください。

わかリにくければ ↓

画面左下で確認できます。

ブロックの位置を上下移動させたい時は、そのブロック場所をクリックして四角で囲われるように指定して をクリックして移動します。

トップページ(HOME)

ここからは固定ページのトップページを作っていきます。

管理画面固定ページ一覧HOME編集をクリックします。


をクリックしてポップアップ画像を閉じます。


をクリックします。

すべて表示をクリックします。


画面左側ブロックから、メディアとテキストをクリックします。


今回は左にテキスト、右に画像を表示させたいので、赤丸で囲んだマークをクリックします。

これでテキストが左、画像が右になります。


左側にテキストを入力し、そのテキスト全てを指定し
をクリックします。

グループ化をクリックします。


画面右側に表示されているブロックから、ボーダー設定の04をクリックします。

もしブロックが表示されていなければ、 をクリックすると表示されます。


メディアライブラリをクリックします。


画像を選び、選択をクリックします。


画面右側のブロックで、カラム全体を塗りつぶすように画像を切り抜くをオンにします。


NEWS

次はNEWSのセクションを作っていきます。

管理画面投稿一覧をクリックします。

サンプルのHello world!ゴミ箱へ移動をクリックし削除します。


投稿新規追加をクリックします。


ポップアップの をクリックし閉じます。


タイトルを追加の場所に、新しいメニューが登場しました!と入力します。

ブロックを選択するには「/」を入力の場所に本文を入力します。


画面右側 投稿をクリックします。

アイキャッチ画像を設定をクリックします。


画像を選びアイキャッチ画像を設定をクリックします。


公開をクリックし保存します。

※今回は説明しましたが、ご自分のタイミングで小まめに公開をクリックして保存するようにしましょう。


画面左上の をクリックすると管理画面に戻ります。


同様に、年末年始の休業のご案内の投稿を作成します。


管理画面の固定ページHOME編集をクリックします。


次のセクションを作っていきますので、赤丸で囲んでいる をクリックします。


画面左側のブロックでフルワイドをクリックします。


見出しと書いてある場所に、NEWSと入力します。

をクリックします。


画面左側のブロックの、投稿リストをクリックします。


画面右側ブロックのレイアウトを選択で、テキスト型をクリックします。


管理画面→固定ページ一覧→HOME→編集から

次はMENUのセクションを作りますので、赤丸で囲んでる をクリックします。


画面左側のブロックのフルワイドをクリックします。


画面右側のブロックの背景色好きな色を選択できますの左の◯をクリックします。

をクリックし、#ffffff に変更します。


見出しの場所に、MENUと入力します。

をクリックします。


タブ

画面左側ブロックでタブをクリックします。


画面右側ブロックで、タブのスタイル下線をクリックします。


ここからはアイコンを表示させるのにインライン画像として使用する方法と、Font Awesome というアイコンサイトを読み込んで使用する方法の2通り解説します。
お好きな方で制作してくださいね。

インライン画像

Tab 1を消して、ツールバーの をクリックします。


インライン画像をクリックします。


画像を選び、選択をクリックします。


少し間を空けてFoodと入力します。

同様にDrink、Setのタブも作ります。

3つ目のタブは、 をクリックすると出現します。

Foodのタブをクリックし、 をクリックします。


Font Awesome

管理画面のSWELL設定をクリックします。


Font Awesomeのタブをクリックします。

読み込み方は、CSSで読み込むを選択します。

バージョンはv6を選択します。

変更を保存をクリックします。


管理画面固定ページのHOMEのMENUに戻ります。

タブ1を指定し、ツールバーの</>をクリックします。


</>アイコンをクリックします。


XXXXを指定し、fa-solid fa-utensilsに書き換えます。

スペースを空けてFoodと入力します。


タブ2も同様に</>アイコンをクリックしXXXXを指定したら、fa-solid fa-mug-saucerと入力し、スペースを空けてDrinkと入力します。

3つ目のタブは をクリックすると出現しますので、同様に2つのショートコードを入力し、スペースを空けてSetと入力します。


このようになります。

Foodから作成していきますので、Foodのタブをクリックし、 をクリックします。


テーブル

画面左ブロックのテーブルをクリックします。


カラム数は2行数は3にして表を作成をクリックします。


画面右側ブロックの表のスタイルシンプルをクリックします。

表の設定ヘッダーセクションをオンにします。


Riceからメニューと価格を入力します。

価格を指定し、ツールバーのカラムの位置を右寄せをクリックします。


キャプションを追加にカーソルをおいてエンターを押します。

出現した をクリックします。

同様に、Pasta,Pizza,Cakeを作成します。


画面右側ブロックのカラムをクリックします。


カラムの50/50をクリックします。


左の をクリックします。


画像をクリックします。


画像を選び、選択をクリックします。


同様に右側の の画像も選択します。

画面一番下のカラムをクリックすると、カラムが指定されますので、ツールバーの でフードメニューの一番上まで移動させます。


同様にDrinkとSetのタブの中身も作成します。


お疲れ様でした。
以上で、HOME(トップページ)が出来上がりました。
NEWSのページはすでに出来上がってますので、
残るはCONTACTページですね。
あと少しです!無理のない程度に頑張ってください!

CONTACT

CONTACT(お問い合わせフォーム)はこちらに詳しく解説していますのでご覧ください。↓

以上で・・・
で、で、で、
出来ました〜!!
本当に、お疲れ様でした!!

【パターン2】で作成された方はLocalからXserverにアップロード

今の状態ではまだローカル環境ですので、

作ったサイトを、サーバー上に公開する方法です。

詳しくは、こちらをご覧ください。

その他のプラグイン

・Snow Monkey Forms

・All in one WP Migration

以上の二つは既に入れていますが、その他セキュリティーの為のお勧めプラグインなどは、
SWELLの公式サイトをご覧になり参考になさってください。

私は他にWP Multibyte PatchとAll In One WP Securityを入れています。

まとめ

初めて自分で作ったサイトはいかがでしょうか?
かなり時間もかかり大変だったと思いますが、
それ以上に、達成感や自信がついたのではないでしょうか。

是非このままで終わらず、
画像やテキストの変更や、自由にカスタマイズして、
素敵なご自分のサイトに仕上げて利用してください。

〜本日も最後まで読んでいただき、ありがとうございました。〜

カフェサイト以外も作成したい方は、こちらをご覧ください。↓

あわせて読みたい
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる