参考デザインをジャンル別に見る場合はこちら
- 趣味系ブログの参考デザイン
- 暮らし系ブログの参考デザイン
- グルメ系ブログの参考デザイン
- マネー系ブログの参考デザイン
- 美容/ファッション系の参考デザイン
- どのジャンルにも合う参考デザイン
- みんなのサイト型トップページデザイン集
SWELLの導入を悩んでいる方はこちら
Canvaの使い方を個別に見る場合はこちら
スクロールできます
contact form
お問い合わせはこちらから【お問い合わせ・ご質問・ご連絡はこちらから】 お問い合わせフォーム
SWELLメインビジュアル・ヘッダーロゴ・ファビコンの作り方【Canvaデザイン動画あり】
当ページは広告が含まれているリンクがあります。
本記事では、SWELLトップページのメインビジュアルとヘッダーロゴの作り方、設定方法について詳しく解説していきます。
記事の最後にファビコンの設定方法も解説していますので、余裕があればやってみてくださいね！
この記事の内容は2022年12月時点の情報です。
[SWELLバージョン: 2.7.2.1]
最新情報についてはSWELL公式サイトをご確認ください。
Canvaでブログアイキャッチ等の公式テンプレを作ってます。
クリエイターページのフォローをしていただけるととっても励みになります！
目次
SWELLメインビジュアルの画像サイズは？
デザインを作成する前に、メインビジュアルの推奨サイズを確認しましょう。
PC・スマホそれぞれに適したサイズで作っておくと、端が見切れたり画像が荒くなったりが防げます。
当サイトで使っているサイズで解説しますので、お好みに合わせて作ってみてください。
パソコン用メインビジュアルのおすすめサイズ
最適サイズに正解はありませんが、SWELL公式サイトのパソコン用メインビジュアルのサイズは「横幅1600×高さ900px」です。
このサイズだと、画面を開いた時に全面的にメインビジュアル画像または動画が表示されます。
全面に画像が出るよりも、もっとさりげなく画像を表示したいという方は、横幅は1600px：高さを【500〜700px】くらいにして仕上がりイメージを見ながら調整してみてください。
SWELL公式のトップページは動画ですが、海の中のように水が流れていてとてもおしゃれですよね！
ファーストビューで画面いっぱいにドドーンと動画や画像が現れ、インパクトが出ますね。
スマホ用メインビジュアルのおすすめサイズ
スマホ用のサイズですが、私は【横幅960px：高さ800px】で作っています。ちょうどいいバランスでいい感じです。
当サイトのスマホメインビジュアル
スマホ用は【横幅960px、高さは500〜1200px】くらいの間でこれもまたお好みで調整しながら作ってみてくださいね。
Canvaでメインビジュアルを実際に作ってみよう
Canvaでのメインビジュアルの画像作成の実例を図解と動画で解説していきます。
ちなみに上記のデザインは慣れてくれば数分あれば作成できますよ。
もふこCanvaの素材は1つ使うだけでもおしゃれに！短時間で素敵なデザインが完成します！
まだCanvaを使ったことがない方はこちらから
この先の実例では、SWELL公式サイトと同じ【1600px × 900px】でPC用メインビジュアルを作ってみます！
STEP
Canvaホームからカスタムサイズを指定
カスタムサイズに【幅1600px：高さ900px】と入力し、新しいデザインを作成。
STEP
自由にデザインを作成
STEP
メインビジュアル画像が完成しました
シンプルなデザインなら背景画像とタイトルだけでもそれっぽく見えます。
Canvaのテンプレートを使うのもかんたんにおしゃれなデザインができるのでおすすめです！
STEP
合わせてスマホサイズでも作成しましょう
PC・スマホとも同じデザインで良ければ、そのままスマホサイズも作りましょう。
普通のCanva無料版だと、またここでホーム画面に戻りイチから作り直すんですが、 pro版のマジックリサイズ機能なら一瞬でスマホサイズに作り直せます。
Canvaでのデザイン作成過程の動画
もふこさんによる１分半で作れるブログメインビジュアル
デザインの製作手順が見たい方はこちらの動画も参考にしてください。
こちらの動画では１分半でPC用メインビジュアルが完成した様子が見れます。
デザインのポイント
・タイトルは中央よりに
デバイスによって画像の端が切れる場合を想定して、ブログ名など重要な部分はできるだけ中央よりの配置がおすすめ。さらに、日本語テキストは文字間隔を広めに取ると見やすくなります。
・色選びは「写真の色」から
動画にもありますが、文字の色選びに迷ったらカラーパレットの「写真の色」から選ぶと統一感が出ておしゃれに。
・透明度で抜け感
背景画像は透明度を下げると抜け感が出てセンスよく見えます。
メインビジュアルの設定方法｜SWELL
デザインが出来上がったところで、さっそくメインビジュアル画像を変えてみましょう。
STEP
カスタマイザーからトップページメニューへ
【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】へ進みます。
STEP
画像か動画のどちらかを選択
STEP
画像をアップロードして設定
【画像を選択】→作った画像をアップロード
STEP
サイズや見え方の設定
画像をアップロードしたら、細かい設定をしていきます。以下は希望があればチェックを入れてください。
表示設定
- 周りに余白をつける
- scrollボタンの表示
メインビジュアルの高さ設定
メインビジュアルの高さ設定は、【画像・動画サイズのまま】が一番かんたんです。
もし見切れたり、サイズが合わないようなら数値を指定するか、Canvaでもう一度画像を調整してください。
フィルター処理
お好みによってフィルター処理を選択してください。
- ブラー効果
- グレースケール
- ドット加工
- ブラシ加工
私はなしにしてますが、フィルターをかけると柔らかい印象になりますよ。
これで、メインビジュアルの設定が完了しました！
ヘッダーロゴを作ろう【Canva】
次は、ヘッダーロゴを作ってみましょう。
SWELLヘッダーロゴの最適なサイズは？
当サイトのヘッダーロゴは、SWELL公式サイトと同じ【1600×360px】で作っています。
ページ読み込み速度が気になる方はもう少し小さめサイズで作ってもいいですが、解像度が下がるので個人的にはこのサイズがおすすめです。
Canvaでヘッダーロゴを作ってみよう
STEP
カスタムサイズを指定して「新しいデザインを作成」をクリック
カスタムサイズに【幅1600px：高さ360px】と入力して、新しいデザインを作成します。
STEP
【おすすめ方法】メインビジュアルからブログ名部分をコピーして流用する
メインビジュアルの編集画面を開いて、ブログ名の部分をコピーします。
おすすめの時短＆統一感テク
メインビジュアルで作ったタイトルロゴ（ブログ名）をそのままコピーして流用すると、またイチから作り直す必要がありません。
メインビジュアルと同じデザインにすることで、ブログ全体の統一感やブランド力も上がりさらにおしゃれに！
STEP
ヘッダーロゴの編集画面を開いて貼り付け
STEP
ヘッダーロゴ用にサイズや装飾を編集
ヘッダーロゴ用にテキストのサイズ等を自由に編集しましょう。
今回はメインビジュアルの雰囲気に合わせて、ラベンダーのイラスト素材を足してみました。
シンプルにブログ名だけでもスッキリしてて見やすいのでお好みで作ってみてください！
STEP
ヘッダーロゴの完成
テキストの色も少し濃くして、見やすくしました。これで完成です！
もふこタイトルテキストのコピペだけなら数十秒でヘッダーロゴが作れてしまいます。
あまりデザインに時間をかけられない方はこんな風にやってみてくださいね！
保存の仕方について
背景透過保存がおすすめ！
ヘッダーが白ならそのまま保存でいいですが、ヘッダーに色を付けたい場合やヘッダーを透明にする場合は背景透過で保存するとおしゃれに仕上がります。
背景透過のありなしでこんなに差がつく！
背景透過処理：あり
おしゃれで垢抜けた印象に！
背景透過処理：なし
ただ画像を貼り付けただけ…な印象。
この背景透過はかなり使えます。他に、画像の背景をワンクリックで消す背景リムーバという機能も便利です。どちらも有料機能となりますが、30日間おためしで無料で使うことができます！
ヘッダーロゴの設定方法｜SWELL
ヘッダーロゴのデザインが完成しところで、さっそく設定してみましょう！
STEP
カスタマイザーからヘッダーメニューへ
【外観】→【カスタマイズ】→【ヘッダー】へ進みます。
STEP
画像をアップロード
【画像を選択】から画像をアップロードします。
サイズはひとまずデフォルトのままで、気になるところがあれば数値を調整してください。
表示が小さいな？と思ったら【画像サイズ】の数値をいったん最大（例：PC:120px、スマホ:80pxなど）にしてバランスを見ながら数値の調整をしてみてください。
STEP
レイアウト設定
ヘッダーのレイアウトはプレビューを見ながらお好みで選択してください。
もふここれでヘッダーロゴまで完成です。お疲れさまでした！
もう一歩差別化！ファビコンの設定方法
余裕があれば、せっかくなのでサイトのアイコンである【ファビコン】も作ってみましょう。
小さいところなのであまり目立ちませんが、ファビコンも統一するとさらにブログがおしゃれになりますよ。
もふこちなみに当サイトのファビコンはこんなデザインにしてみました。
ファビコンの設定方法はこちらから
STEP
Canvaでファビコンを作成
Canvaで自由にファビコンを作ってみましょう。
デザインが思いつかない場合は、ロゴテンプレートを使うとかんたんに作れますよ。
Canvaのロゴテンプレートは【500×500px】になっています。
見た目はあまりわかりませんが、WordPress推奨サイズの【512×512px】にリサイズして作ったほうが無難です。
pro版体験中の方はマジックリサイズ、無料版の方はヘッダーロゴの時と同じようにコピペしてサイズを変更しましょう。
STEP
WordPress設定からファビコンを設定する
【WordPress設定】→【サイト基本情報】→【サイトアイコンを選択】で画像をアップロード
STEP
ファビコンの設定完了
ファビコンは変えるとすぐに反映されます。
もふこ何気ないところですが、こんなところでもファビコンは見られてるんですよ！
まとめ｜SWELLメインビジュアルとヘッダーロゴの作り方
今回は、メインビジュアルとヘッダーロゴ、そしてファビコンの作成までを解説しました。
この3つが整っていると、サイト型にカスタマイズしなくてもブログ全体の統一感や素敵な世界観が出せます。
また、当サイトでは様々なジャンル別にブログデザインのアイディアを公開しています。どんなデザインにしようかな〜と迷ったときは記事下のリンクからデザインを探してみてくださいね。
もふこご紹介した作り方を参考に、あなただけのオリジナルデザインを作ってみてください。
最後までご覧いただきありがとうございました！
SWELLのサイト型カスタマイズまとめ記事はこちらから
個別記事はこちらから
Canvaで編集できるSWELLサイト型トップページのデザインテンプレートも販売しています（¥1,000）
あわせて読みたい
おしゃれなブログデザインテンプレート｜Canva×SWELLサイト型トップページ
ブログのトップページを手軽におしゃれにしたいあなたへ。Canvaで使えるSWELLサイト型テンプレートをご用意しました。
当サイトのテーマはSWELLを使用しています
- 取り入れた瞬間からおしゃれなブログに
- だれでもサクサク使える直感操作
- 他テーマからの乗り換えプラグインも充実
- サイトスピードが大幅アップ
- カスタマイズもかんたんで自分好みに！
この記事が気に入ったら
フォローしてね！