今回は、実際に私が使っているWordPressテーマ「DIVI（ディヴィ）」を活用して作成したホームページの実例を紹介します。リアルな画面を見ながら、どんなことがDIVIでできるのかを一緒に確認していきましょう。
今回お届けするノウハウはこちら
DIVIで作成した私のホームページを上から順に見てみよう
まず、私のホームページのトップからご紹介していきます。
このトップの写真、もともとは四角い画像でした。ですがDIVIを使えば、こんなふうにカーブを描いたデザインに変更することができます。背景色も黄色を指定していますが、こういった細かい色の指定も直感的に設定できます。
次に目を引くのがボタン。以前まではボタンにアイコンを入れるために画像を用意したり、複雑な設定が必要だったのですが、DIVIではテキストだけでボタンが作れて、さらに黄色く色を指定したり、ボタンに丸みを持たせたりも簡単にできるんです。
アニメーションも加えていて、ページをスクロールするたびに「ヒュン」と動くような演出が施されています。
デザインと動きで魅せるサイト構成も簡単に
この写真も同様に丸くデザインして、上と同じ色味に合わせています。ページを下に進めていくと、ボタンにもアニメーションがついていて、「ヒュン」と浮かび上がるような動きが見えると思います。
この丸いアイコンもDIVIの中にある機能を使って配置していて、昔は画像を使って自分で作る必要があったところが、今ではテンプレート機能で簡単にできてしまうのが嬉しいポイントです。
コンテンツは6つの項目に分けてわかりやすく整理しています。それぞれのセクションには、動きのあるアニメーションを追加して、現代的で目を引くデザインにしています。
そして、それぞれのアイコンやボタンにはリンクを設定してあり、クリックすると他のページへ飛ぶようになっています。お問い合わせフォームもページ内に組み込んであって、訪問者がすぐにアクションできるように整えています。
LP的な作りにも対応多様なレイアウトが可能
さらにもう一つ、私の別のホームページをご紹介します。こちらはランディングページ（LP）的な構成になっています。
ページのトップには「こんなお悩みありませんか？」というセクションがあり、これも自由にカスタマイズ可能です。横からスライドするようなアニメーションも簡単に設定できるので、視覚的にもとても印象的なページを作れます。
アイコンの色も自分で変更できるので、ブランディングに合わせたカラー展開が可能です。
動画の挿入もDIVIなら簡単に行えます。さらに、アニメーション付きのカウンターも設置できるので、動きのあるビジュアルで訪問者の目を惹きつける工夫も自在です。
DIVIならデザインパーツも豊富SNS連携もスムーズ
最後にもう一つだけ、別の例をご紹介します。こちらもLPスタイルで、DIVIに元から用意されているパーツを使って、上手にレイアウトしています。
画像の挿入も非常に柔軟で、自由に組み合わせてデザインができます。プロフィールセクションや自己紹介文、そこに添える装飾デザインも、画像ではなくDIVIに用意されているパーツだけで十分に対応可能です。
また、SNSとの連携も簡単。Facebookのタイムラインをページ内に埋め込んで表示することもできます。
そしてページの最後には、お問い合わせフォームへのリンクが設定してあります。全体を通して、非常に洗練された、そして今の時代に合ったホームページに仕上がっています。
DIVIを使えば実用的でおしゃれなサイトが誰でも作れる
今回ご紹介したように、DIVIを使えば複雑な操作をせずとも、動きのある魅力的なホームページを誰でも作ることができます。
実際に私が使っているサイトを見ていただくことで、イメージも湧きやすかったのではないでしょうか？
ファネルや講座の販売にも応用できるので、これからオンラインで何かを始めたい人には特におすすめです。