MENU

【Word Press x SWELL】最低限のサイトデザイン設計をしよう!

1. 最初にやるべきサイトのデザイン設計

「「WordPressをインストールして、SWELLを有効化してみたけど、サイトがまだ真っ白…」

これ、SWELLでブログ始めたばっかりの時はめちゃくちゃよくある悩み。

私も最初にWordPressを立ち上げたとき、真っ白な画面に文字だけのブログを見て

新人ブロガー

こんな内容で人に読んでもらえるのかな…

と不安になりました。

安心してください。
実は、最低限整えるべきは以下のたった3つ

  1. サイト名(ブログ名
  2. サイトアイコン(ファビコン)
  3. ブログロゴ

これだけで、サイトの印象は「素人のメモ」から「ちゃんとしたメディア」へと変わります。

あとはただひたすらブログを書き続けるだけ。

今日はそんな「最初に抑える


目次

1. サイト名(ブログ名)を決めよう

5.ブログタイトルを決めよう

SWELL管理画面から設定する方法

SWELLでは、ブログ名(=サイトタイトル)を次の手順で設定できます。

外観 → カスタマイズ → サイト基本情報 → サイトのタイトル

ここで入力した名前が、サイト上部のロゴ部分や検索結果に表示されます。


ありがちな悩み:ブログ名が決まらない…

「名前が決められない」という悩み、初心者ブロガーの8割が通る道です。
でも安心してください。ドメイン名と違って、あとからいくらでも変えられるんです。

私も最初は「とりあえず」でつけた名前で半年運営して、方向性が固まってから変えました。
だからまずは 仮でOK


読者が覚えやすい・検索されやすい名前にするコツ

ブログ名を考えるときに抑えるべきポイント
  • 短くてわかりやすい(長いと紹介しづらい)
  • テーマが伝わる(旅・駐在・子育てなど)
  • 検索されやすいキーワードを含める

海外在住ブロガーなら:

  • 「駐在ブラジル日記」
  • 「ロンドン留学ブログ」
  • 「旅する駐妻ライフ」

読者は「どこの人が書いているのか」で親近感を持ちやすいです。


思いつかないときのアイデア例

  • 自分の名前+ブログ(例:Shinji’s Blog)
  • 好きな単語+日記(例:Global Life 日記)
  • 日本語+英語MIX(例:TOKYOログ、ロサンゼルス生活 等)

実例:

  • じぶんMedia Lab:「自分の発信を研究する実験室」
  • 駐在Base:「駐在員の生活を支える基地」

2. サイトアイコン(ファビコン)を作ろう

2. サイトアイコンを作ろう

ファビコンって何?

3.ファビコンって?

ファビコンとは、ブラウザのタブやスマホのホーム画面に表示される小さなアイコンです。
サイトをブックマークしたときに、ロゴが出ているサイトと出ていないサイト、どちらが信頼できそうですか?

正解はもちろん「出ている方」です。
だからこそ、最初に整えておきたい部分です。


SWELLで設定する手順

4.Word Pressの初期設定

外観 → カスタマイズ → サイト基本情報 → サイトアイコン

推奨サイズは 512×512px
PNG形式でOKです。

設定すると、スマホやPCのタブに小さなアイコンが表示されるようになります。

(※ここにブラウザのタブに並んだファビコン例画像を入れると◎)


デザインするときの注意点

  • 小さいので 複雑な図形はNG
  • シンプルに イニシャル1文字ワンポイントアイコン
  • 背景色と文字色はコントラストを強めに

無料ツール例

  • Canva → デザインが苦手でもテンプレからサクッと作れる
  • Favicon.io → 入力した文字から自動で作成可能

所要時間はわずか5分。
「とりあえず」で十分なので、まずは設定してみましょう。


3. ブログロゴを作ってアップしよう

8.ブログロゴを作ろう

ロゴがあるとどう変わる?

ロゴはサイトの「顔」です。
たとえ記事内容が同じでも、ロゴがあるだけで「ちゃんとしたブログ」という印象を与えます。

私もロゴを設定した瞬間、ブログ仲間から「一気にメディアっぽくなったね!」と言われた経験があります。


Canvaで簡単に作る方法

12.Canvaでおすすめのヘダーロゴサイズは1200x200
  1. Canvaで「ロゴ」と検索
  2. テンプレを選んで、文字を差し替える
  3. サイズは 1200×200px(横長) を推奨
13. Canvaでの作成イメージ

SWELLでロゴを設定する手順

9.ブログロゴの設定方法

外観 → カスタマイズ → サイト基本情報 → サイトロゴ

10.ブログロゴのSwellでの設定方法
11.ブログロゴのSWELLの設定方法

ここに作成したロゴをアップロードするだけ。

さらにSWELLでは、

  • ヘッダーの高さ調整
  • スマホ表示時のロゴサイズ調整
    も可能です。

SWELL x WordPress のPC/スマホのおすすめロゴサイズ

SWELLでおすすめのヘダーロゴ画像設定

よくある悩み

  • 「ロゴが大きすぎてはみ出る」
    → SWELLの「ロゴサイズ調整」スライダーで微調整できます。
  • 「そもそもロゴを作れない」
    → Canvaの無料テンプレをベースにするか、外注や相談もアリです。

まとめ:まずはこの3つを整えよう

最低限整えるべきはこの3つです。

  1. サイト名 → あとから変更OK。仮決めで十分
  2. サイトアイコン → 小さいけど信頼感を生む要素
  3. ブログロゴ → サイトを一気に「メディアっぽく」見せる

ここまでできれば、もう読者に見せられるブログになります。
デザインに完璧は求めなくて大丈夫。

大事なのは「まず整えて公開すること」。
SWELLは直感的に操作できるので、今日から少しずつ進めてみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次