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

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

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

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

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

新人ブロガー

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

と不安になりました。

安心してください。
Word PressとSwellを導入した後に最低限整えるべきは以下のたった3つ

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

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

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

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


目次

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

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

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

新人ブロガー

最初の一歩ね!

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

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

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


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

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

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


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

ブログ名を考えるときに抑えるべきポイント
ブロガー

ブログ名をつけるときに押さえておきたいポイント。

以下3要素が入ったブログはアクセスが伸びやすいです。

  • 短くてわかりやすい(長いと紹介しづらい)
  • テーマが伝わる(旅・駐在・子育てなど)
  • 検索されやすいキーワードが入っている。

    海外在住ブロガーならたとえば

    • 駐在ブラジル日記 (場所とターゲットが明確)
    • ロンドン留学ブログ (同様)
    • 旅する駐妻ライフ (特定の地域の読者に響く)

    グルメブログならたとえば

    • 旅メシ手帖(シンプルで覚えやすい)
    • 週末、美食トリップ。(「週末」というワードが社畜・会社員に刺さる)
    • 世界モグモグ紀行(少し可愛らしく、親しみやすい)

    子育てブログなら

    • 共働き育児ハック(「共働き」「ハック」で効率重視派を狙う)
    • ゆるっとワンオペ日記(「ワンオペ」で孤独なママ・パパを惹きつける)
    • 男の子3人、毎日がサバイバル(「男の子3人」という圧倒的パワーワード
    駐妻

    確かにわかりやすいわね!

    読者はタイトルを見て、「どんな人が書いているのか」親近感を持ちやすいです。


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

    新人ブロガー

    それでもブログ名が思いつかない・・・

    そんな方へ!

    ブログ名は最悪、後で変更も可能です。

    なので「どうしても思いつかない!」という人は以下の名前でもOKです。

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

    実例:

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

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

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

    ファビコンって何?

    3.ファビコンって?
    新人ブロガー

    ファビコンって何?

    ファビコンとは、ブラウザのタブやスマホのホーム画面に表示される小さなアイコンです。

    こんなやつです。

    これがファビコンです


    サイトをブックマークしたときに、ロゴが出ているサイトと出ていないサイト、どちらが信頼できそうですか?

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


    SWELLで設定する手順

    作成手順

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

    推奨サイズは 512×512px

    WordPressのAdmini画面でここを開く

    ファビコンの設定方法1

    2.ここにアップロード

    ファビコンの設定方法2


    JPEGでもPNG形式でもOKです。

    3.ちゃんと設定されているか確認。

    ファビコンの設定方法3

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


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

    ブロガー

    ファビコン設定する時の注意点。

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

    シンプルis ベスト。


    無料ツール例

    新人ブロガー

    ファビコンってどこから作れるの?

    PCにデフォルトで入っているソフトでもいいですが、おすすめは


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

    ファビコン作るのに所要時間はわずか5分。
    「とりあえず」で十分なので、まずは設定してみましょう!


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

    8.ブログロゴを作ろう

    さて、

    1. ブログの名前が決まった
    2. ファビコンも設定した

    次はブログロゴです。

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

    新人ブロガー

    もう力尽きそう・・・・

    後少しで最低限のセットアップはおわります!!

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

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


    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つを整えよう

    ブロガー

    まとめです。


    Word PressとSwellを導入した後に最低限整えるべきは以下のたった3つ

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

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

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

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