こんにちは、ユキです＾＾
ノーコードツールの登場によってWebサイトが簡単に作れるようになったんだけど、
「簡単に作れるって言ってもある程度プログラミングの知識は必要なんでしょ」と
思ってる人も多いんじゃないかしら。
確かにより複雑な構造の本格的なWebサイトを作ろうと思ったら、
ノーコードを使うにしてもある程度プログラミングの知識が必要になるわ。
でも自分の書いたブログを投稿するようなサイトだったら、
全然プログラミングの知識が無くてもノーコードで作れちゃうのよ。
ノーコードツールの中でも比較的使いやすいと言われてるのが「WordPress」で、
さらに「Divi」というものを使うとホントに簡単にWebサイトが作れるのよね。
じゃあDiviってどんなものなのか、どういった使い方をするのかなどについて
詳しく見ていきましょう。
DiviはWordPressのテーマ
WordPressがノーコードでWebサイトが作れるツールで、
そのWordPressで使えるテーマの1つがDiviなの。
「テーマ」っていう言葉自体には馴染みがあるけど、
WordPressで使えるテーマって言われてもちょっと意味が分かりにくいわよね。
WordPressにはプラグインとテーマっていう拡張機能みたいなものがあって、
プラグインはWordPressで作るWebサイトに色んな機能を付けるためのツールなのよ。
簡単に言うと、Webサイトにリンクを貼ったりだとか、問い合わせフォームを設置したり、
決済機能を付けたりするのがプラグインの役割なの。
それに対してテーマは、WordPressで作るWebサイトのデザインを作るためのツールで、
簡単に言えばビジュアル担当みたいなものね。
テーマを使ってWebサイトのデザインを作って、プラグインを使ってそのデザインに
色んな機能を付けていく、といったようにプラグインとテーマ1セットでWebサイトを
作るのが本来の形なのよ。
でもここで紹介するDiviは多機能テーマで、Webサイトのデザインが作れるのは
もちろん、作ったデザインに色んな機能を付けることができるわ。
だからDiviはWordPressのテーマなんだけど、それだけでWebサイトが作れちゃうテ
ーマとプラグインが1つになったようなツールなのね。
Diviは有料テーマ
WordPressのテーマやプラグインには無料で使えるものも多いけど、
Diviは基本的に有料となってるのよ。
Diviの料金プランは年間プランと売り切りプランの2つで、具体的な料金は
・年間プラン・・・年額89ドル（約9,000円）
・売り切りプラン・・・249ドル（約25,000円）
なのね。
アメリカの会社が提供してるだけにDiviの料金はドル決済になるから気を付けてね。
どちらも30日間の返金保証が付いてるから、
利用開始から30日以内に解約すると支払った料金が返ってくるわ。
また一応無料で使えるお試し版も用意されてて、
メールアドレスを登録すると5日間だけDiviが無料使えるわ。
だからまずは無料のお試し版を使ってみて、使いやすいと思ったら年間プランを契約、
さらにDiviを使ってもっとWebサイトを作りたいとなったら売り切りプランを契約する
といったように、段階的に使っていくのが良いんじゃないかしら。
Diviは基本的に英語対応
Diviは残念ながら完全には日本語に対応してなくて、Divi自体も英語表記だし、
公式のサポートも基本的には英語対応になってるのよ。
そのためある程度英語が理解できないと、
Diviを使っててちょっと不便に感じる部分が出てくるかもしれないわね。
ただ最近は日本でもDiviのユーザーが増えてきてて、公式じゃないけど、
日本語でDiviの使い方などを解説してくれてるサイトや動画なんかも結構あるの。
だから公式以外のサイトや動画を利用すれば、
そんなにDiviの使い方で困ることはないと思うわ。
Diviの使い方
それじゃDiviの使い方を詳しく見ていくけど、大まかには
1.Diviの利用契約を結ぶ
2.Diviをインストールする
3.固定ページを作る
4.作った固定ページを公開する
という流れになるわ。
DiviはあくまでWordPressのテーマだから、Diviを契約してインストールする前に
WordPressをパソコンにインストールしておいてね。
また無料のテーマやプラグインはWordPressでインストールできるんだけど、
有料テーマであるDiviは提供してる会社の公式サイトで契約を結んでダウンロード・
インストールしないとダメなのよ。
Diviで作ったWebサイトを公開するならサーバーとドメインの調達も忘れずに
Diviで作ったWebサイトは当然インターネット上に公開することになるわけだけど、
それにはサーバーとドメインが必要になるわ。
サーバーは、簡単に言うと、
インターネット上に公開するWebサイトなんかのデータを保存しておくところよ。
通常はパソコンやスマホからインターネット回線を通じてサーバーにアクセスすることで、
Webサイトが閲覧できたりするってわけ。
ドメインはインターネット上に公開するWebサイトの住所となるURLの一部で、
「http://www.×××」のwww.の後の×××の部分がドメインなの。
サーバーは自分で立てることもできるけど、よっぽどの通信上級者でないと無理で、
レンタルするのが一般的ね。
ドメインは自分ではどうすることもできないから、
専門業者やサーバーのレンタル業者で取得することになるわ。
WordPress以外のノーコードツールでは、サーバーもドメインも用意されてて、
Webサイトの制作から公開まで一括でできたりするのよ。
でもWordPressにはサーバーもドメインも用意されてないから、WordPressでできるのは
Webサイトの制作までで、公開するには別途サーバーとドメインを自前で用意しなきゃ
ダメなのね。
Diviの利用契約を結ぶ
Diviを使うには利用契約を結ぶところから始めるんだけど、
パソコンにWordPressがインストールされてることを前提に説明していくわね。
まずGoogleなどで「Divi」と検索してDiviの公式サイトにアクセス、
画面右上の「PRICING」をクリックするの。
料金プランの選択画面に移ったら、「YEAR ACCESS」か「LIFETIME ACCESS」の
どちらかの「SIGN UP TODAY!」を選択。
アカウントの作成画面が表示されたら
・ユーザー名
・メールアドレス
・パスワード
・パスワードの確認
・下の名前
・苗字
・居住国
を入力して、料金の支払方法をクレジットカードかPayPalから選び、
「COMPLETE REGISTRATION」ボタンを押すの。
（クレジットカードの場合はカード番号など必要事項の記入も必要）
そして登録したメールアドレスに、アカウント作成が完了した旨のメールが届けば
Diviの利用契約は完了よ。
Diviをインストールする
アカウント作成完了メールに記載されてるURLからDiviの公式サイトにアクセスして、
ログインページに進んで登録したユーザー名とパスワードを入力してログイン。
「Downloads」の項目に進み、アルファベットのDをマルで囲んだアイコンの
「installing Divi～」の「Download」ボタンをクリックするの。
そうするとDiviのダウンロードが始まるから、ダウンロードが完了したら「Divi.zip」の
ファイルをデスクトップなど分かりやすい場所に保存しておいてね。
次にWordPressを起動してログイン、ダッシュボードの「外観」から「テーマ」を選び、
「新規追加」→「テーマのアップロード」の順にクリックするのよ。
アップロード画面が表示されたら「ファイルを選択」をクリックして、先にダウンロードして
保存しておいた「Divi.zip」ファイルを選択して「今すぐインストール」をクリック。
Diviのインストールが完了したら「有効化」をクリックして、
これでようやくWordPressでDiviが使えるようになるわ。
固定ページを作る
WordPressにDiviをインストールすれば準備完了、
いよいよ実際にWebサイトを作っていくことになるわ。
WordPressのダッシュボードで「固定ページ」→「新規追加」を選び、
「タイトルを追加」の欄に作る固定ページのタイトルを入力、
「Edit With The Divi Builder」をクリックするとWebサイト作成がスタートするのよ。
最初に
・最初から構築
・レイアウトを選択
・既存ページの複製
という3つの選択肢から1つを選ぶの。
「最初から構築」を選ぶと、何も無い白紙のページにセクションを配置して、
そのセクションにモジュールを組み合わせていってというように1から固定ページが
作れるのね。
「レイアウトを選択」を選ぶと、Diviが用意したレイアウトから1つ選んで、
そのレイアウトを元に画像やテキストを入れ替えて固定ページを作っていくのよ。
「既存ページの複製」は、これまでにDiviを使って自分が作った固定ページを呼び出し、
それを元に画像やテキストを入れ替えることになるわ。
だから初めてDiviを使ってWebサイトを作る場合には、既存ページは無いから、
「最初から構築」もしくは「レイアウトを選択」を選ぶことになるの。
Webサイトを作ること自体が初めてだったら、一から構築するより、
「レイアウトを選択」を選んでテンプレートの画像やテキストを入れ替える方が
簡単なんじゃないかしら。
初めてのレイアウト選択ではアカウント認証が求められる
DiviでWebサイトを作るのに、初めて「レイアウトを選択」を選んでテンプレートを
ダウンロードする際にはアカウント認証が求められるから気を付けてね。
「Edit With The Divi Builder」をクリックして3つの選択肢が表示されて、「レイアウトを
選択」を選ぶと、Diviで利用できるレイアウトのテンプレート一覧が表示されるわ。
その中から使いたいテンプレートを選ぶとダウンロードが始まり、
完了すると編集画面に選んだテンプレートが表示されて編集できるようになるの。
ところが初めて「レイアウトを選択」を選んだ場合、
使いたいテンプレートを選択した時点でアカウント認証画面が表示されて
・ユーザー名
・APIキー
の入力が求められるのよ。
ユーザー名は自分で登録したものだから良いとして、最初のアカウント作成で
発行された覚えの無い「APIキー」の入力を求められても困るわよね。
アカウント認証画面のAPIキーという表示の横に「？」マークがあるはずだから、それを
クリックして、さらに「You can find your API Key here.」のhereの部分をクリックするの。
そうするとDiviのアカウント画面が表示されるから、「Your API Key」を選択して、
「Manage API Keys」の項目に表示されてるのがAPIキーになるわ。
それをアカウント認証画面のAPIキーの欄に入力して「送信」ボタンを押せば、
レイアウトのダウンロードが始まるのよ。
レイアウトのダウンロードでアカウント認証が求められるのは最初だけで、
2回目以降はAPIキーを入力する必要は無いから安心してね。
セクションを追加する
画面にセクションを追加して、そのセクションに画像やテキストなどのモジュールを
組み込んでいく、というのがDiviの基本的な使い方なの。
セクションは簡単に言うと画像とかテキストなんかを入れるための「箱」みたいなもので、
まずは画像なりテキストなりの配置場所を決めるのね。
配置場所を決めたら、その場所に実際の画像なりテキストなりを組み込んで、
また次の配置場所を決めて画像なりテキストなりを組み込んでを繰り返して
Webサイトを作っていくのよ。
じゃあどうやってセクションを追加してモジュールを組み込むかだけど、Diviの
編集画面にある緑の「＋」ボタンをクリックするとセクションの追加ができるの。
WordPressではセクションは最大6つまで左右に分割することができて、
右や左あるいは両側にサイドバーを作ったりすることができるわ。
セクションのアイコンボタン
セクションを追加すると、
そのセクション上に十字矢印や歯車など6つのアイコンボタンが表示されるわ。
アイコンボタンは左から
・ドラッグ&ドロップ
・設定画面の表示
・複製
・セクションの形の変更
・保存
・削除
の順に並んでるの。
「ドラッグ&ドロップ」のボタンを押しながらマウスを動かすことで、
セクションに組み込んだモジュールの位置を変えることができるわ。
ただしモジュールはセクション内にしか置くことができないから、
セクションを配置してない位置にモジュールを動かせないのよ。
またドラッグ&ドロップのボタンを使えば、
左右に分割したセクションを入れ替えることもできるわ。
「設定画面の表示」を押すと組み込むモジュールを選ぶ設定画面が表示されて、
「複製」を押すとそのセクションの複製を作ることができるの。
「セクションの形の変更」ボタンは、
左右に分割するセクションの数を増やしたり減らしたりするのに使うのね。
「保存」ボタンを押すとそのセクションがDiviのライブラリに保存されて、
後で呼び出して使ったり、別のサイトを作る時にテンプレートとして使ったりできるわ。
「削除」ボタンはそのままで、配置したセクションそのものを削除するのに使うのよ。
セクションにモジュールを組み込み
配置したセクションにグレーの「＋」ボタンがあって、
それをクリックすると「モジュールを挿入」というウインドウが現れるから、
画像やテキストなど組み込みたいモジュールを選べばOK。
画像やテキストなどのモジュールはセクションに組み込んでから編集できるから、
パソコンに保存してる画像を貼り付けたり、文章を入力して表示させることが可能よ。
モジュールの設定画面の下部には、バツ印・反時計回りの矢印・時計回りの矢印・
チェックの4つのボタンが設置されてるわ。
バツを押すと組み込んだモジュールを削除することができて、
反時計回りの矢印を押すと編集状況を1つ前の状態に戻せるのね。
時計回りの矢印は編集状況を1つ先に進めて、
チェックを押すと編集内容が決定・保存されるの。
作ったページをインターネット上に公開する
セクションを追加してはモジュールを組み込むということを繰り返してページが
完成したら、最後に完成したページをインターネット上に公開するのよ。
Divi以外のテーマやプラグインだとそのまま公開はできなくて、
一旦テーマやプラグインを閉じてWordPressの方で公開しないといけないわ。
でもDiviの場合は、いったん閉じなくてもDiviからそのまま完成したページを
インターネット上に公開することができるの。
Diviの編集画面の一番下にある紫の三点リーダーをクリックすると、
画面右に「下書きを保存」と「発行」というメニューボタンが表示されるわ。
その「発行」の方をクリックすると、
Diviで作ったページをインターネット上に公開することができるのよ。
もし途中で作業を中断したり、他のテーマやプラグインを使って編集を続ける場合は
「下書きを保存」をクリックして編集画面を保存すると良いわ。
作業中はこまめに保存する
DiviでWebサイトを作る際、できるだけこまめに保存するのがおすすめよ。
停電なんかでパソコンの電源が落ちたり、何かしらの不具合でDiviやWordPressが
落ちたりすることがあるかもしれないわ。
ExcelとかWordみたいに自動保存の機能があれば、
作業中にパソコンの電源やExcelなどが落ちても大きな問題にはならないのよ。
でもDiviには自動保存の機能が無いから、何時間も保存せずに作業を続けてて
パソコンの電源やDiviが何かの拍子に落ちたらとんでもないことになるのよね。
だからDiviでWebサイトを作る時には、1つセクションやモジュールを追加するごとに
保存する必要は無いけど、できるだけこまめに保存しながら作業した方が良いってわけ。
Diviでスマホ用やタブレット用のWebサイトを作るには
Diviではパソコン用はもちろん、
スマホ用やタブレット用のWebサイトページも作れるようになってるのよ。
画面最下部にある紫の三点リーダーをクリックすると、
画面左にメニューアイコンが表示されて、
そのメニューアイコンの右側3つのボタンで編集画面の大きさが変更できるの。
右から3つ目はパソコンの画面の大きさで、右から2つ目はタブレット用、
一番右がスマホ用となるわ。
だからパソコン用のWebサイトを作って複製して、1つは保存して、
もう1つは画面の大きさをタブレット用やスマホ用に変えて編集し直せば良いのね。
パソコン用だと1行で収まってたものが、
タブレット用やスマホ用にすると画面の横幅が狭くなって2行になったりするのよ。
そうすると画像は貼り付け位置がズレたりするし、
テキストだと日本語としては変な位置で改行されて読みにくくなっちゃうことがあるわ。
そこで画像の位置や大きさを変えたり、改行場所を変更するなどの編集を行って
タブレットやスマホでも見やすいページに作り変えれば良いってわけ。
ツアーでDiviの使い方を学ぶ
Diviには「ツアー」という説明チュートリアルが用意されてるから、
そちらで実際の画面を見ながらDiviの使い方を学べるようになってるのよ。
初めてDiviを使ってWebサイトを作ろうとすると、
「Divi Builderへようこそ」という見出しとともに簡単な説明文が表示されるの。
その説明文の下に「構築を開始する」と「ツアー開始する」という2つのボタンがあって、
ツアーを開始するを選ぶと説明チュートリアルが始まるわ。
ツアーでは、レイアウトを選択して読み込み、セクションやモジュールを追加したり
削除したりと実際に編集画面を操作しながら完成したページをインターネット上に
公開するまでのDiviの基本的な使い方が学べるのよ。
使い方が分かってるステップは説明を飛ばすこともできるし、
途中でツアーを終了することも可能なの。
WordPressの他のテーマやプラグインはもちろん、WordPress以外の
ノーコードツールでも基本的な使い方は同じようなものだったりするのよねぇ。
だから、すでにノーコードツールを使ってWebサイトを作ったことがあるならツアーは
使わなくて良いけど、初めてノーコードツールを使ってWebサイトを作るならツアーで
基本的な使い方を学んでおいて損は無いわよ。
DiviでWebサイトを作るならセキュリティ対策についても考えておく
Diviなどのテーマやプラグインを使ってWordPressでWebサイトを作るんだったら、
作ったWebサイトのセキュリティ対策についても考えておいた方が良いわよ。
最初の方でも書いたけど、WordPressはWebサイトを作るだけのツールで、
それを公開するためのサーバーは自分で調達しないといけないわ。
制作から公開まで一括でできるノーコードツールだと、公開したWebサイトの
セキュリティは基本的にノーコードツールのプラットフォームに依存することになるの。
以前はノーコードツールのプラットフォームのセキュリティは少し甘いと言われてたけど、
最近は強化されてきてるのよね。
プラットフォームのセキュリティがある程度しっかりしてるから、
自分が公開するWebサイトに施すセキュリティ対策もある程度で十分だったりするわ。
でもWordPressで作ったWebサイトを公開するのに、
レンタルにしろ自前にしろ自分で調達したサーバーを使うの。
レンタルサーバーも最近はセキュリティ対策が強化されてるものの、
レンタル業者によってはセキュリティが甘くて利用者側がしっかりと対策しないと
いけないケースもあるのよ。
とは言え、自分で作ったWebサイトに自分でセキュリティ対策を施すのって大変で、
専門業者にお願いしてセキュリティ対策を施してもらうのが一般的だわ。
でも専門業者にお願いするとまたお金がかかるから、できればセキュリティ対策が
しっかりしてるレンタルサーバーを選ぶようにした方が良いわね。
セキュリティ対策がしっかりしてるレンタルサーバーを選んで、その上Webサイトにも
セキュリティ対策を施しておけば万全よ。
まとめ
WordPressのビジュアルテーマであるDiviの使い方などについて詳しく紹介したわ。
使い方自体は難しくないんだけど、Diviは基本的に有料だから、
まずは無料のお試し版で使い勝手を確かめてみると良いんじゃないかしら。
WordPressにはDivi以外にもページビルダー系のテーマやプラグインがあり、
中には無料で利用できるものもあるのよ。
だから無料のお試し版でDiviを使ってみて自分に合わないと思ったら、
WordPress自体の利用を止めるんじゃなくて、別のテーマやプラグインを使ってみてね。
