MENU
 参考デザインをジャンル別に見る場合はこちら


スクロールできます
Canva公式クリエイターページ
SWELLサイト型トップページTemplate販売ページ
You Tubeチャンネルはこちらから


SWELLメインビジュアル・ヘッダーロゴ・ファビコンの作り方【Canvaデザイン動画あり】

当ページは広告が含まれているリンクがあります。
SWELLメインビジュアルヘッダーロゴファビコンのつくりかた (15
  • URLをコピーしました!


本記事では、SWELLトップページのメインビジュアルとヘッダーロゴの作り方、設定方法について詳しく解説していきます。

この記事の内容
  • SWELLのメインビジュアル・ヘッダーロゴ・ファビコンのカスタマイズ解説
  • 各画像の推奨サイズがわかる
  • Canvaでのデザイン画像の作り方を動画で解説
Canva公式クリエイターのもふこです




記事の最後にファビコンの設定方法も解説していますので、余裕があればやってみてくださいね!

メインビジュアル・ヘッダーロゴの解説



WordPressファビコンの説明



この記事の内容は2024年9月時点の情報です。

[SWELLバージョン: 2.12]

最新情報についてはSWELL公式サイトをご確認ください。

Canva公式テンプレートはこちらから

Canvaでブログアイキャッチ等の公式テンプレを作ってます
クリエイターページのフォローをしていただけるととっても励みになります!

目次

SWELLメインビジュアルの画像サイズは?

SWELLメインビジュアルのパソコン・スマホ対応最適サイズ
諸説ありますが当サイトはこんな感じです


デザインを作成する前に、メインビジュアルの推奨サイズを確認しましょう。


PC・スマホそれぞれに適したサイズで作っておくと、端が見切れたり画像が荒くなったりが防げます。

当サイトで使っているサイズで解説しますので、お好みに合わせて作ってみてください。

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

SWELLメインビジュアルのパソコン用最適サイズ
イメージです

最適サイズに正解はありませんが、SWELL公式サイトのパソコン用メインビジュアルのサイズは「横幅1600×高さ900px」です。


このサイズだと、画面を開いた時に全面的にメインビジュアル画像または動画が表示されます。


全面に画像が出るよりも、もっとさりげなく画像を表示したいという方は、横幅は1600px:高さを【500〜700px】くらいにして仕上がりイメージを見ながら調整してみてください。




SWELL公式のトップページは動画ですが、海の中のように水が流れていてとてもおしゃれですよね!

SWELLメインビジュアルのサイズ
引用元:SWELL公式サイト

ファーストビューで画面いっぱいにドドーンと動画や画像が現れ、インパクトが出ますね。

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

SWELLメインビジュアル・スマホ・タブレット対応最適サイズ
あくまでもイメージですが…



スマホ用のサイズですが、私は【横幅960px:高さ800px】で作っています。ちょうどいいバランスでいい感じです。

当サイトのスマホメインビジュアル

メインビジュアル




スマホ用は【横幅960px、高さは500〜1200px】くらいの間でこれもまたお好みで調整しながら作ってみてくださいね。

Canvaでメインビジュアルを実際に作ってみよう

メインビジュアル例
この画像を作ってみましょう!

Canvaでのメインビジュアルの画像作成の実例を図解動画で解説していきます。


ちなみに上記のデザインは慣れてくれば数分あれば作成できますよ。


もふこ

Canvaの素材は1つ使うだけでもおしゃれに!短時間で素敵なデザインが完成します!


まだCanvaを使ったことがない方はこちらから


この先の実例では、SWELL公式サイトと同じ【1600px × 900px】でPC用メインビジュアルを作ってみます!

STEP
Canvaホームからカスタムサイズを指定
Canvaでメインビジュアルをつくる方法

カスタムサイズに【幅1600px:高さ900px】と入力し、新しいデザインを作成。

STEP
自由にデザインを作成
Canvaメインビジュアルの作り方
STEP
メインビジュアル画像が完成しました
メインビジュアル例

シンプルなデザインなら背景画像とタイトルだけでもそれっぽく見えます。

Canvaのテンプレートを使うのもかんたんにおしゃれなデザインができるのでおすすめです!

STEP
合わせてスマホサイズでも作成しましょう
メインビジュアル


PC・スマホとも同じデザインで良ければ、そのままスマホサイズも作りましょう。


普通のCanva無料版だと、またここでホーム画面に戻りイチから作り直すんですが、 pro版のマジックリサイズ機能なら一瞬でスマホサイズに作り直せます。

Canvaマジックリサイズ

Canvaでのデザイン作成過程の動画

もふこさんによる1分半で作れるブログメインビジュアル



デザインの製作手順が見たい方はこちらの動画も参考にしてください。

こちらの動画では1分半でPC用メインビジュアルが完成した様子が見れます。

デザインのポイント


・タイトルは中央よりに
デバイスによって画像の端が切れる場合を想定して、ブログ名など重要な部分はできるだけ中央よりの配置がおすすめ。さらに、日本語テキストは文字間隔を広めに取ると見やすくなります。


・色選びは「写真の色」から
動画にもありますが、文字の色選びに迷ったらカラーパレットの「写真の色」から選ぶと統一感が出ておしゃれに。


・透明度で抜け感
背景画像は透明度を下げると抜け感が出てセンスよく見えます。

メインビジュアルの設定方法|SWELL

デザインが出来上がったところで、さっそくメインビジュアル画像を変えてみましょう。

STEP
カスタマイザーからトップページメニューへ
メインビジュアル設定

【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】へ進みます。

STEP
画像か動画のどちらかを選択
メインビジュアル設定
STEP
画像をアップロードして設定
SWELLメインビジュアル

【画像を選択】→作った画像をアップロード

STEP
サイズや見え方の設定
メインビジュアル設定

画像をアップロードしたら、細かい設定をしていきます。以下は希望があればチェックを入れてください。

表示設定
  • 周りに余白をつける
  • scrollボタンの表示
メインビジュアルの高さ設定


メインビジュアルの高さ設定は、【画像・動画サイズのまま】が一番かんたんです。

もし見切れたり、サイズが合わないようなら数値を指定するか、Canvaでもう一度画像を調整してください。


フィルター処理

お好みによってフィルター処理を選択してください。

  1. ブラー効果
  2. グレースケール
  3. ドット加工
  4. ブラシ加工

私はなしにしてますが、フィルターをかけると柔らかい印象になりますよ。

SWELLフィルター処理
SWELLのフィルター処理パターン

これで、メインビジュアルの設定が完了しました!

ヘッダーロゴを作ろう【Canva】

次は、ヘッダーロゴを作ってみましょう。

ヘッダーロゴの見本
ヘッダーロゴとはこれのこと!

SWELLヘッダーロゴの最適なサイズは?

当サイトのヘッダーロゴは、SWELL公式サイトと同じ【1600×360px】で作っています。


ページ読み込み速度が気になる方はもう少し小さめサイズで作ってもいいですが、解像度が下がるので個人的にはこのサイズがおすすめです。

Canvaでヘッダーロゴを作ってみよう

STEP
カスタムサイズを指定して「新しいデザインを作成」をクリック
SWELL・Canvaヘッダーロゴの作成

カスタムサイズに【幅1600px:高さ360px】と入力して、新しいデザインを作成します。

STEP
【おすすめ方法】メインビジュアルからブログ名部分をコピーして流用する
SWELLヘッダーロゴ・Canva設定



メインビジュアルの編集画面を開いて、ブログ名の部分をコピーします。

おすすめの時短&統一感テク

メインビジュアルで作ったタイトルロゴ(ブログ名)をそのままコピーして流用すると、またイチから作り直す必要がありません。


メインビジュアルと同じデザインにすることで、ブログ全体の統一感やブランド力も上がりさらにおしゃれに!

STEP
ヘッダーロゴの編集画面を開いて貼り付け
Canvaでヘッダーロゴをつくる方法
STEP
ヘッダーロゴ用にサイズや装飾を編集
Canvaでヘッダーロゴをつくる方法

ヘッダーロゴ用にテキストのサイズ等を自由に編集しましょう。


今回はメインビジュアルの雰囲気に合わせて、ラベンダーのイラスト素材を足してみました。


シンプルにブログ名だけでもスッキリしてて見やすいのでお好みで作ってみてください!

STEP
ヘッダーロゴの完成
ヘッダーロゴの完成
背景あり
ヘッダーロゴの完成
背景透過で保存すると、色のついたヘッダーでも綺麗に


テキストの色も少し濃くして、見やすくしました。これで完成です!



もふこ

タイトルテキストのコピペだけなら数十秒でヘッダーロゴが作れてしまいます。

あまりデザインに時間をかけられない方はこんな風にやってみてくださいね!



保存の仕方について


背景透過保存がおすすめ!

ヘッダーが白ならそのまま保存でいいですが、ヘッダーに色を付けたい場合やヘッダーを透明にする場合は背景透過で保存するとおしゃれに仕上がります。


背景透過のありなしでこんなに差がつく!

見出し例

背景透過処理:あり

おしゃれで垢抜けた印象に!

見出し例

背景透過処理:なし

ただ画像を貼り付けただけ…な印象。



この背景透過はかなり使えます。他に、画像の背景をワンクリックで消す背景リムーバという機能も便利です。どちらも有料機能となりますが、30日間おためしで無料で使うことができます!

ヘッダーロゴの設定方法|SWELL

ヘッダーロゴのデザインが完成しところで、さっそく設定してみましょう!

STEP
カスタマイザーからヘッダーメニューへ
ヘッダーロゴ設定

【外観】→【カスタマイズ】→【ヘッダー】へ進みます。

STEP
画像をアップロード
SWELLヘッダーロゴの設定

【画像を選択】から画像をアップロードします。

サイズはひとまずデフォルトのままで、気になるところがあれば数値を調整してください。


表示が小さいな?と思ったら【画像サイズ】の数値をいったん最大(例:PC:120px、スマホ:80pxなど)にしてバランスを見ながら数値の調整をしてみてください。

STEP
レイアウト設定

ヘッダーのレイアウトはプレビューを見ながらお好みで選択してください。

もふこ

これでヘッダーロゴまで完成です。お疲れさまでした!

もう一歩差別化!ファビコンの設定方法

SWELLファビコンの設定


余裕があれば、せっかくなのでサイトのアイコンである【ファビコン】も作ってみましょう。


小さいところなのであまり目立ちませんが、ファビコンも統一するとさらにブログがおしゃれになりますよ。

もふこ

ちなみに当サイトのファビコンはこんなデザインにしてみました。


現在のファビコンです

ファビコンの設定方法はこちらから

STEP
Canvaでファビコンを作成
SWELLファビコンの設定


Canvaで自由にファビコンを作ってみましょう。


デザインが思いつかない場合は、ロゴテンプレートを使うとかんたんに作れますよ。

Canvaのロゴテンプレートは【500×500px】になっています。


見た目はあまりわかりませんが、WordPress推奨サイズの【512×512px】にリサイズして作ったほうが無難です。

pro版体験中の方はマジックリサイズ、無料版の方はヘッダーロゴの時と同じようにコピペしてサイズを変更しましょう。

STEP
WordPress設定からファビコンを設定する
WordPress設定
サイト基本情報↓
WordPress設定
サイトアイコンを選択

【WordPress設定】→【サイト基本情報】→【サイトアイコンを選択】で画像をアップロード

STEP
ファビコンの設定完了
SWELLファビコンの設定

ファビコンは変えるとすぐに反映されます。



もふこ

何気ないところですが、こんなところでもファビコンは見られてるんですよ!


SWELLファビコンの設定

まとめ|SWELLメインビジュアルとヘッダーロゴの作り方

今回は、メインビジュアルとヘッダーロゴ、そしてファビコンの作成までを解説しました。

この3つが整っていると、サイト型にカスタマイズしなくてもブログ全体の統一感や素敵な世界観が出せます。



また、当サイトでは様々なジャンル別にブログデザインのアイディアを公開しています。どんなデザインにしようかな〜と迷ったときは記事下のリンクからデザインを探してみてくださいね。

もふこ

ご紹介した作り方を参考に、あなただけのオリジナルデザインを作ってみてください。

最後までご覧いただきありがとうございました!


SWELLのサイト型カスタマイズまとめ記事はこちらから


個別記事はこちらから


ブログトップページのデザイン 公開しています! (2)



Canvaで編集できるSWELLサイト型トップページのデザインテンプレートも販売しています


\ ブログデザインはこちらから /

デザインをさがす



当サイトのテーマはSWELLを使用しています

  1. 取り入れた瞬間からおしゃれなブログに
  2. だれでもサクサク使える直感操作
  3. 他テーマからの乗り換えプラグインも充実
  4. サイトスピードが大幅アップ
  5. カスタマイズもかんたんで自分好みに!


SWELLメインビジュアルヘッダーロゴファビコンのつくりかた (15

この記事が気に入ったら
フォローしてね!

SNSでご紹介いただけると嬉しいです
  • URLをコピーしました!
目次