Google chrome（グーグル ク...
続きを読む
Elementorとは何？？特徴とインストール方法を紹介
2024/02/21
ワードプレスやWEB制作界隈で近年急速に耳にするようになった「Elementor（エレメンター）」とは何?? 詳しく紹介します！
WEBサイトが「なんだかごちゃごちゃして見づらい…」その原因、実はパディングにあるかも！？
WEBデザインにおける「余白」は、単なる空間ではなく、情報を整理し、見やすさや高級感を演出する重要な要素です。
パディングを適切に設定すれば、プロフェッショナルなデザインに近づけることができます。
今回の記事では、パディングがもたらす効果と実践的な使い方を解説します。
パディングや余白を意識して、カッコよくておしゃれなWEBサイトを作っていきましょう！
↑まずは上記の2つの画像をご覧ください。
左と右で書いてある内容自体は同じですが、文字の周りの余白が有るか無いかで、見え方にかなり差が出るのがわかると思います。
↑ページの要素を「見出し」「画像」「テキスト」として分けて考えた時も、余白の重要さが際立ちます。
ページ全体で見たときの印象はもちろん、各要素別で見た時も「余白」が適度に確保された右側の方が見やすくないでしょうか？
各要素の文字の周辺の余白だけでなく、それぞれの間の空間（見出しと画像の間、画像とテキストの間 など）にも余白を入れることで各要素をしっかり見分けることができています。
↑「無印良品」の公式WEBサイトは、余白を効果的に活用して、ユーザーに情報の見やすさとシンプルで洗練されたブランドイメージの両方を与えています。
↑阪急阪神不動産の「UMEDA VISION（梅田ビジョン）」のWEBサイトも余白が効果的に使われています。
上部のヒーロー画像では空の部分を多く使ってそこに文字を挿入し、画像内の余白部分を効果的に使用しています。
また、下に続く各セクションにおいても、「見出し」「テキスト」のそれぞれの要素が適切な距離感で配置され、シンプル且つ見やすい配置になっています。
WEBサイトにおける「余白」には「パディング」と「マージン」の２種類があります。
ここからは、「パディング」と「マージン」の違いについて詳しく解説します。
↑上記のようなWEBサイトがあった場合、「パディング」は内側の赤い矢印を表します。
一方、「マージン」は外側の紫色の矢印を表します。
↑例えば、文字の上下の余白を大きくしたい場合は、上下の「パディング」の値を大きくすることによって、上下に余白をつけることができます。
↑パディングを「０」にすると、文字の周りの余白が無くなります。
文字の視認性を向上させて、読みやすい見出しやテキストにする場合（特に文字に背景色をつける場合）は、パディングの値を大きくして文字の周辺に余白を設けることが大切です。
↑上記の2つの見出しを例にするとわかりやすいかもしれません。
上の方は「パディング」が「0」（＝文字の周りに余白が無い）の見出しテキストです。
一方で下の方は「パディング」が「15」（＝文字の周りの余白が有る）の見出しテキストです。
２つを見比べると、パディングがある方の見出しの方が、文字が読みやすく感じるのでは無いでしょうか。（文字の大きさは同じです。）
このように、「パディング」を効果的に設定することで、文字の視認性や読みやすさを改善することができます！
ここまででパディングや余白の重要性について解説しました。
では、実際にワードプレスでのパディングの設定方法について具体的に紹介していきます。
↑投稿または固定ページの編集画面で、今回は「見出し」のパディングを設定します。
見出し部分を選択した状態で、画面右側の「ブロック」の「スタイル（円の半分が黒、半分が白になっているマーク）」を選択します。
その下の「タイポグラフィ」の２つ下の「サイズ」の横の「＋」をクリックすると、「パディング」が表示されます。
↑「パディング」を選択すると、左右上下のパディングをスライダーで設定することができます。
↑「パディング」のスライダーを調節してパディングを大きくすると、見出しテキストの上下左右の周りの余白が大きくなっています！
↑Elementorでパディングを設定する場合も同様に、投稿または固定ページの編集画面から設定をしていきます。
見出しにパディングを設定していくので、まずは見出しを選択した状態で、「高度な設定」をクリックします。
↑「パディング」という箇所の値を大きくすると、見出しテキストの周辺の余白を大きくすることができます。
一番左のリンクマーク（クリップのようなマーク）をクリックすると、上下左右個別でパディングの大きさを設定することもできます。
ワードプレスやWEB制作界隈で近年急速に耳にするようになった「Elementor（エレメンター）」とは何?? 詳しく紹介します！
今回の記事では、WEBサイトにおいて「余白」を気を付けることの大切さと、「パディング」についてを紹介しました。
ワードプレスでの「パディング」の設定方法も詳しくご紹介しましたので、ぜひ参考になれば幸いです！
「余白」を意識して、見やすくかっこいいおしゃれなWEBサイトを一緒に作っていきましょう〜！
2025-01-25
Saturday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
Elementorの新テーマ「Hello...
続きを読む
