Elementorでホームページを 作ろう！とは？
Elementorでホームページを 作ろう！のシリーズでは、ゼロから ホームページ 完成までの基本の流れを紹介していく連載企画です！順番に記事をご覧頂き、作業して頂くだけ ホームページ が出来てしまう！（・・・を目標に）皆さんと一緒に実際に ホームページ を作って行きたいと思います。途中寄り道もあるかもしれませんが、気長にお付き合い頂けると幸いです。
バックナンバー
https://elefantastic.tokyo/makehomepage/
https://elefantastic.tokyo/elemento/
https://elefantastic.tokyo/elementor_2/
https://elefantastic.tokyo/elementor-3/
https://elefantastic.tokyo/elementor4/
今回は、プロフィールを作ろう！
会社のホームページなら代表あいさつや、会社概要。個人事業主やフリーランス、個人の活動であれば、プロフィールになるかと思います。マーケティング視点で言えば、加点を稼ぐコンテンツかと思います。
例えば、大型家電量販店へ冷蔵庫を買いに行くとします。カタログやネットで商品情報はしっかり把握し、あとは実物を見て！と意気込んで店舗へ向かいます。そこで接客対応に来た店員、もしこの店員さんが感じの良い人なら、購入確率はあがると思いませんか？ホームページでも、サービスや商品は理解して気に入り、購入しようか迷ってる時に、社長プロフィールを見て「同い年なんだ〜」とか「同郷だ！」「情熱がすごいな・・・」とか、なにか引っかかれば加点になります。
ただ注意が必要なのは、プロフィールよりも優先度が高い事は沢山あるという事です。プロフィールが良くても商品は売れません（笑）
はな
失礼しました。それではプロフィールを作って行きましょう！
レイアウト決め
プロフィールに欠かせないコンテンツとしては、写真と程よい長さの挨拶文や経歴です。それをどうやって配置するかを決めましょう。オーソドックスなパターンとしては、
タイトルがあって、右か左に写真、その反対側に挨拶と簡単な経歴などではないでしょうか。
まずは、このパターンを作ってみましょう！
タイトルから作ってみる！
まず、ページまたはコンテンツのタイトルを入れる為のセクションを追加し、下の図の様に見出しウィジェットと区切り線ウィジェットを挿入してみました。
デザインは皆さんにお任せします・・・（汗）
セクションの中に２カラムのセクション？
次にタイトル下にテキストと画像のセクションを入れていきます。
上の画像の様に、純粋に２カラムのセクションを下に配置しても良いのですが、後で他のページで使う時や、背景をコントロールしやすくする為、極力１セクションでの作成をおすすめします。
あっ、大丈夫ですよ・・・これは自由なので。
この様な時に役立つのが「innersectionウィジェット」です！
これは、ウィジェット名のとおり、セクションの中にセクションを作る事が出来るウィジェットです。早速入れてみます。
青枠が最初に入れたセクションで、赤枠がインナーセクションになります。こうすることで、プロフィールテンプレートとして保存もしやすくなります。また、背景も簡単に設定する事が出来るので、個人的にはおすすめです！
ウィジェットを入れる
今回は左にテキスト、右に画像ウィジェットを入れてみます。
（医者になりきって書いてみました！笑）
どうも、文章の長さとカラムの長さが気になりませんか？そんな時に役立つのが、カラム背景！
カラムにも背景を入れる事ができます！詳しくはこちらの記事も是非ご覧下さい。
カラム背景でプロフィール写真
どうでしょう、下部を特に見て頂くと分かるかと思いますが、写真とテキストのバランスが良い感じになったかと思います。これは、背景の機能でもある「カバー」を利用してみました。
カラムを選択し、スタイルにて背景を設定します。この時便利なのが「カバー」です。自動的にカラム領域を隙間なく画像で埋めてくれます。ただ、入り切らない部分は非表示になる為、上手く本人が枠内に入る様に、時には画像編集などをして調節します。
その場合は、スタイルの背景設定の中にある「位置」を上手く使いましょう！
それでも駄目な場合は、画像自体を編集するしかありませんが、意外と簡単で、横にずれている場合は、画像編集ソフトで余白の幅を付け加えたりするだけで、上手く真ん中に人物が来る場合が多いです！
ちょっとした小技で表現してみる
小技その①「丸み」
デザインの良し悪しは置いておいて・・・写真を丸くする事もできます！実際は写真を丸くしているのではなく、カラムを丸くしました。
カラムの設定で、スタイルの中にあるボーダーで、「ボーダー丸み」というのがあります。そこに大きめな数値を入れる事で、カラムが円になります。また、その円にボックスシャドウを付ける事ができます。これはカラムに対しての影なので、カラム自体が円という事は、影も円状に付きます。
小技その②「内側ボックスシャドウ」
セクションにグラデーションで背景を付けています。
セクション内のカラム（プロフィール写真のカラムではなく）の背景を白にし、先程のボーダーの丸みで少し丸くしてみました。さらに、ドロップシャドウで影を落とすのではなく、内側に影を配置しました。
小技③「時間と動き」
まずは動画をご覧下さい！これがカッコいいとかではなく、動きを出す事で、印象やインパクトが与えられえます。（いまさらですが、無料版でここまでできちゃいます）遅延ロードをずらしてあげる事で、ストーリーがある動きを作る事も出来ます！
時間の関係で、詳しい設定方法は次の機会とさせて頂きます。
おじさんだって大人でしょ！（笑）
まとめ
いくつかレイアウトパターンを作ってみようと思ったのですが、これだけでもボリュームが多いので、一旦オーソドックスな物を作ってみました。今回の中で習得したいポイントとしては、
・インナーセクション
・カラム背景
・ボーダーの丸み
・カラムのドロップシャドウ
ではないでしょうか。Motion effectも時間軸を設ける事で、インパクトのあるコンテンツの登場が表現出来るので、別途ご紹介したいと思います。
ヘッダーからヒーロー、サービス、プロフィールと形になってきました！最下部のフッターまでを目標に頑張って作って行きましょう！
【Elementor公式サイトはこちら】
https://elementor.com/
関連記事
