ネットショップとデリバリーを連動させたcafeのHP作成
【誰でも簡単に作成】

動画を見ながら一緒に作ろう(ワードプレス利用)

自社のホームページでお店紹介だけでなく、ネットショップやデリバリーサイトへの連動もしたいという方向けのサイトです。

↓↓このホームページを一緒に作ろう↓↓
(ウーバーイーツなどのデリバリーサービスへの登録やネットショップがあれば1日で完成します。)

難易度
2/5

POINT

ホームページ作成準備編

0かのスタートの場合:
NO1よりスタート
ワードプレスの準備が整っている場合:
制作編からスタート

( )は動画時間

ホームページ作成編

全11工程、合計1時間20分の動画です。
素材、文章があれば1日で完成するコースです。

( )は動画時間

<費用>
ドメイン代:年間1,000円前後~
(アルファベットの人気度による)
レンタルサーバー:年間13,000円前後
有料プラグイン:年間49ドル

その他必要な事

デリバリー、ネット販売、SNSと連動するにあたり、事前にそれらのサイトに登録作成しておく必要がございます。

・デリバリーサイト
ウーバーイーツ
https://www.ubereats.com/jp
出前館
https://demae-can.com/
・通販サイト
ストアーズ
https://madeinsul.tokyo/stores/

1.ワードプレステーマ設定

テーマとはホームページを構成するスキンのような物です。車で例えるならボディー(外枠)のようなイメージです。ワードプレスにテーマ(ボディー)を入れ、ボディー(テーマ)の中に配置を考えながらハンドル(写真)やシートなど(文章、ボタンなど)のパーツをはめ込んでいきます。このパーツを簡単にはめ込みやすくする「テンプレのようなツール」をプラグインといいます。また車はボディーによって注目度が上がったり、パーツによって操作性が変わったりしますが、ワードプレスでもテーマやプラグインによって大枠が変わったりSEOが向上したりします。それらを踏まえお勧めなテーマが「emanon」です。特に有料版の「emanon Pro」は抜群に操作性、SEOに優れてますが、無料版でも十分に効果を得ることが可能です。(後からいつでも無料版から有料版への変更も可能です。)

動画を見ながら簡単設定(動画2分40秒)

この動画は無料テーマの「emanon」をダウンロードしワードプレスに設定するまでの動画です。

2.プラグインの設定

テーマの項目でプラグインの説明を致しましたが、ワードプレスで無料で利用できるプラグインは数多く存在します。必要に応じ利用することによって簡単にホームページの制作が可能になります。この動画はワードプレスに最低限必要な無料で利用できるプラグインをダウンロードし設定する動画となっています。

文章の1文字1文字にそれぞれ装飾(色、下線、太さなど)ができたり、文章にリンクをつけることができたり、表(エクセル)を挿入することができるプラグインです。
https://ja.wordpress.org/plugins/tinymce-advanced/

HTMLやPHPなどの知識がなくても直観的にホームページが作成できるプラグインで、非常に汎用性の高い枠組みのテンプレートが配置でき、その枠組みに組み込む様々なコンテンツを利用できるスーパープラグインです。(有料版にすると多くのコンテンツがプラスされている)
https://ja.wordpress.org/plugins/elementor/

Elementorの有料版になります。
年間49ドル~の費用がかかりますが、無料版に比べて複数のコンテンツが利用可能となります。

よく利用する有料コンテンツ
・投稿ページのおしゃれなデザインコンテンツ
・写真ギャラリーのおしゃれ版
・おしゃれなナビメニュー
・おしゃれなコールトゥーアクション
無料版では補えないおしゃれ感を演出するのに最適なプラグインです。
https://elementor.com/pro/

複数のページを作成するときに便利なプラグインで作成したページを複製することができます。その為1ページ作成してしまえば、それを複製し内容を変更するだけで済むため制作効率が格段に向上致します。
https://wordpress.org/plugins/duplicate-page/

動画を見ながら簡単設定(動画3分40秒)

3.WAFの設定

ワードプレスでは初期設定でWAFを「ON」にしてウイルスなどの脅威からサイトを守るセキュリティー設定を行います。ただしこの設定を行うと、いくつかの操作項目で管理者がワードプレスをいじること自体も攻撃とみなされセキュリティーがかかってしまいます。そのため、「この操作に関しては安全ですよ」ということをワードプレスに設定し、セキュリティがかからないようにする必要があります。

動画を見ながら簡単設定(動画1分40秒)

4.TOPページ作成:表紙

↓↓この部分を作成します。↓↓

動画を見ながら簡単作成(動画18分30秒)

5.Cafeページ作成

↓↓この部分を作成します。↓↓

動画を見ながら簡単作成(動画27分30秒)

6.Menuページ作成

↓↓この部分を作成します。↓↓

動画を見ながら簡単作成(動画12分)

7.Newsページ作成

↓↓この部分を作成します。↓↓

動画を見ながら簡単作成(動画7分30秒)

8.Contactページ作成

↓↓この部分を作成します。↓↓

動画を見ながら簡単作成(動画4分50秒)

9.ナビメニューの作成

↓↓この部分を作成します。↓↓

動画を見ながら簡単作成(動画7分)

10.ヘッターフッターの作成

↓↓この部分を作成します。↓↓

動画を見ながら簡単作成(動画2分30秒)

11.各ページへのリンク設定

動画を見ながら簡単作成(動画2分30秒)

BETA

BETA

ホームページ制作スタジオ「madeinSUL」でクリエイターをしているBETA(ベタ)です。「気軽に簡単!スキル0からのホームページ制作」をテーマにしたブログ「With Me」をスタートしました。今後いろいろなパターンのホームページ作成記事を掲載していく予定です。

ホームページのご用命はこちら