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