【初心者向け】SWELLを使ったサイト型トップページの簡単な作り方～メインビジュアル編～

今回は、SWELLを使ったサイト型トップページのメインビジュアルを、簡単に作る方法とそのポイントを詳しくご紹介します。

メインビジュアルは、サイトを訪れる人々の第一印象を決める大切な要素です。
ぜひ、最後まで読んで試してみてくださいね！

まだ、SWELLを購入・インストールしていないという方は、こちらの記事からどうぞ。

メインビジュアルの役割と重要性　

メインビジュアルは、ブログやWebサイトのトップページにおいて訪問者が最初に目にする画像や動画のことを指します。この部分は、訪問者がサイトに抱く最初の印象を決定づける非常に重要なパーツです。

たとえば、魅力的なメインビジュアルがあれば、訪問者に「このサイトをもっと見てみたい」という好奇心を引き出すことができます。
逆に、内容や雰囲気にそぐわないビジュアルだと、訪問者がすぐに離れてしまう可能性もあるため、特に注意が必要です。

これは、実際にお客様を迎える時と同じように、訪問者に対して心地よさや興味を提供することを意識するという意味です。

メインビジュアルを通じて、サイトのテーマや雰囲気を瞬時に伝えることで、訪問者に安心感や共感を抱かせ、サイト内をさらに探索してもらうことができます。

たとえば、自然をテーマにしたブログであれば、豊かな風景の写真を使用したり、ビジネス系のサイトであれば信頼感を与えるようなクリーンなデザインを選ぶことが効果的です。

メインビジュアルをうまく活用することで、サイトの魅力を最大限に引き出し、訪問者にとって「また来たい」と思わせるような特別な空間を作り出せるのです。

メインビジュアルの準備

メインビジュアルの画像を準備する前に、サイズを確認しておきましょう。
PC用、モバイル用の画像を準備することでどちらでもキレイに表示されるようになります。

パソコン用メインビジュアルのおすすめサイズ

SWELL公式サイトでは、1600×900pxで作られています。
横幅は1600pxがおすすめです。1600pxあると、画像の解像度のまま表示されるようになります。

高さはお好みでOKです。
使おうと考えている画像のデザインにもよるとおもうので、いいバランスを作ってください。

スマホ用メインビジュアルのおすすめサイズ

スマホ用は、横幅960pxであれば高さはお好みでOKです。
私はメインビジュアルを正方形にして、下部分にメニューやブログを載せるのが好みです。

SWELLでメインビジュアルを設定する手順

SWELLでは、初心者でも簡単にメインビジュアルを設定できます。以下の手順で設定してみましょう。

メインビジュアルの画像をアップロード

WordPressの管理画面から【外観】→【カスタマイズ】を選択します。

その中の【トップページ】→【メインビジュアル】をクリック。
「メインビジュアルの表示内容」で「画像」が選択されています。

下の方にいくと「各スライドの設定」があるので「画像の選択」をクリックして準備しておいたメインビジュアルの画像をアップロードします。

メインビジュアルの高さ設定

メインビジュアルの表示位置を、PC版とスマホ版での表示調整がかわります。

メインビジュアルに表示するテキストの設定

メインビジュアルに表示するテキストを入力します。SWELLでは、フォントの種類やサイズ、位置の調整が可能なので、ブログのテーマに合わせたデザインを選びましょう。

テキストの表示位置とリンク先も設定できるので、これもしっかり確認します。

プレビューで確認し、公開

※画面キャプチャで、私が作成中のサイトはこちら 「トラマサ」→ https://tyn-c.com/toramasa

プレビュー機能で実際の表示を確認し、問題がなければ「公開」ボタンを押して設定完了です。

かなりたくさんの項目を設定できて、迷いますね。

サンプルのサイトでは、私はこんな感じで考えました。

• スマホで大きくメインビジュアルを表示させたい。　縦長にしても可愛いので、じっくり見てほしい！
• パソコンでは、ショッキングなくらいイメージを見せたい。

試しているうちに、ベストなバンランスが見つかるのでいろいろ試してみてください🎵

メインビジュアルをオシャレに見せるコツ！

テーマに合った画像を選ぶ

メインビジュアルを効果的に活用するためには、ブログのテーマやコンセプトに合った画像を選ぶことが大切です。
サイトの雰囲気やメッセージを視覚的に伝えることで、訪問者にとって魅力的な第一印象を与えられます。

例えば、お料理関係のブログなら、楽しい食卓や美味しそうな料理の写真を、
シンプルで洗練された印象を持たせたい場合は、クリーンなデザインの画像を使うと良いでしょう。

キャッチコピーを活用する

メインビジュアルに訪問者の関心を引くキャッチコピーを添えるのも効果的です。
短いフレーズやキーワードを画像に載せることで、ブログのテーマや提供する価値を瞬時に伝えることができます。

ただし、キャッチコピーを追加する際は、画像全体のバランスに注意が必要です。

文字が多すぎたり配置が不適切だと、画像の美しさが損なわれ、逆に訪問者にとって見づらくなってしまうこともあるので注意しましょう。

PC用とモバイル用の画像を使い分ける

SWELLでは、PC用とモバイル用で異なる画像を設定することが可能です。
これにより、デバイスごとに最適なビジュアルを用意することができ、ユーザー体験を向上させることができます。

PCとモバイルでそれぞれに適したメインビジュアルを準備することで、訪問者がどのデバイスからアクセスしても快適に閲覧できるサイト作りができます。

メインビジュアル作成時の注意点

メインビジュアルを作成する際には、３つの注意点を意識することが大切です。

ページの読み込み速度に注意:

画像のファイルサイズが大きすぎると、ページの読み込み速度が遅くなり、訪問者の離脱率が高くなります。画像は圧縮して使いましょう。

モバイル対応を意識する

モバイル端末での表示が崩れないように、SWELLの設定を使ってレスポンシブ対応を確認します。

とくに、SWELLではPC用とモバイル用の画像を分けることもできるので、モバイルにして違和感があるようならば別の画像として準備することをお勧めします。

著作権に配慮

使用する画像や動画は、著作権を守るためにフリー素材を利用するか、自作のものを使いましょう。
とくに他のサイトから勝手に画像を持ってくるのはNGです。

まとめ

いかがでしたか？SWELLを使ったメインビジュアルの設定は、初心者でも簡単に取り組むことができます。

メインビジュアルを工夫して設定することで、訪問者にとって魅力的でわかりやすいサイトを作り上げることが可能です。
画像の選び方やキャッチコピーの工夫など、少しのポイントを押さえるだけで、サイトの印象が大きく変わります。

追伸：
こちらの記事では、私のSWELL購入から使い始めるまでのレビューを書いています。
今思うと、あちゃーっという失敗もありますが、使い始めの感想を書いています！