3/13(水) まで最大53%OFF1,000円クーポンあり(コノハウィング)

ツールなしでフィルター加工【3つ】SWELLでできる画像カスタマイズ

プロモーションが含まれる場合があります
SWELLでできる画像カスタマイズ
  • URLをコピーしました!
質問

デザインが苦手です。SWELLは、画像のカスタマイズはできますか?

SWELLは、ブログ初心者でも美しいサイトが作れます。

美しいサイトが作れる理由は、画像カスタマイズができることが一因です。

そこでこの記事は、SWELL歴3年目の私が、SWELLでできる画像カスタマイズを3つ紹介します。

この記事を読めば、PhotoshopやCanva(キャンバ)のような、画像編集ソフトに課金せずに済みます。

やたろう

時間とお金が節約できたので、GRCなどの分析ツールに投資ができました。

この記事を書いている人
プロフィール
筆者のプロフィール画像
やたろう
  • ConoHaWINGユーザー4年目
  • SWELLユーザー3年目
  • SEO検定一級合格
  • 月収6ケタ(プラチナランク)
  • 某ASPの社員
A8プラチナ会員
A8:プラチナ会員

スクロール&拡大できます

SEO検定1級
SEO検定1級
登場人物
登場人物

2024年2月28日の情報です。

この記事でわかること(もくじ)

画像のカスタマイズができる箇所【フィルター処理】

画像のカスタマイズができる箇所

SWELLで画像をカスタマイズできる箇所は、3つあります。

それぞれ解説します。

メインビジュアルの画像

ストウブライフ:メインビジュアル

1つ目は、メインビジュアル部の画像です。

「メインビジュアル」とは、トップページを開いたとき、最初に目に入るエリアです。

SWELLは、メインビジュアル内の画像を、クリックだけで、カスタマイズできます。

SWELL:カスタマイズ

メインビジュアルの出し方は、「カスタマイズ」をクリック。

トップページ→メインビジュアル

「トップページ」→「メインビジュアル」と進みます。

トップページ→メインビジュアル→フィルター処理

メインビジュアルの画像カスタマイズは「フィルター処理」より、以下選択できます。

SWELL画像フィルタの動画

上記動画は、各フィルターを画像に適用した動画です。

画像が、どんな見た目になるか、ざっくり把握できます。

それぞれ解説します。

ブラー

ブラー処理は、画像全体に「ぼかし」を加えるフィルタです。画像をぼかすことで、柔らかくおしゃれな見た目になります。

グレースケール

グレースケールは、画像を白と黒の濃淡だけで表現するフィルタです。グレースケールを利用することで、モダンでシックなトップページを作成できます。

ドット

ドットは、画像にドット効果を適用するフィルタです。ドットを適用することで、レトロでアートな外観を作れるメリットがあります。

ブラシ

ブラシは、画像に、筆や手書き効果を加えることができるフィルタです。ブラシを画像に適用することで、かすれた画像になり、ダサい素材でもオシャレに見えます

SWELLは、メインビジュアルの画像(動画)に、ブラシ、ドット状のテクスチャ、カラーオーバーレイを加えることができます。

オーバーレイ

オーバーレイカラーは、フィルタ処理した画像の上から、好きな色のカラーオーバーレイを「任意の不透明度で被せることができる機能」です。

※オーバーレイカラーとは、複数枚の画像データを重ねて合成すること

例えば「ドット」に白の不透明度をかぶせることで、白いドット画像が作成で手軽に作成できます。

投稿、固定ページの画像

SWELL :画像スタイル
SWELL :画像スタイル

2つ目の画像カスタマイズは、投稿、固定ページの画像カスタマイズです。

SWELLは、画像と動画に、6つのスタイルをかけられます。

画像にスタイルをかけた実例

デフォルト
デフォルト
角丸
角丸
枠あり
枠あり
影あり
影あり

フォトフレーム
フォトフレーム
ブラウザ風
ブラウザ風
デスクトップ風
デスクトップ風

例えば、画像を丸くすることで、やわらかい印象に変更できます。また、Photoshop(フォトショップ)不要で画像修正できるので、時短にも繋がります。

swell:画像に枠をつける

特に便利なのが「デスクトップ風」のスタイルです。画像や動画をデスクトップ風にすることで、モックアップが簡単に作成できます。

スクロール可能

「デスクトップ風」のすごいところは、スクロールさせることができること(画像参照)。

ココがポイント

上記スクロールは、600px3000pxの画像で作成しております。

スクロール表示するための手順は、以下2ステップです。

STEP
縦長の画像を用意する

縦長(1000ピクセル以上)の画像を用意して、投稿ページに配置します。画像は「フルサイズ」に変更します。

STEP
画像をグループ化

縦長画像をグループ化します。その後「ブラウザ風」または「デスクトップ風」のスタイルを適用する

モックアップはこんなシーンに使えます
  • Webサイト紹介モックアップ
  • デザインモックアップ
  • SWELLユーザーとの差別化

モックアップ画像は、SWELLだけの特権。そのため、ライバルサイトと差別化できます。結果的に、SEOに有利に働きます。

有料テーマ別に、画像スタイルの種類を比較

テーマ画像AFFINGER6SWELL
THE-SONIC
SANGO

JIN
テーマ名AFFINGER6SWELLTHE SONICSANGOJIN
価格(込)14,800円17,600円8,580円(1年)11,000円14,800円
画像スタイル・デフォルト
・角丸
・シャドウ
・ワイド
・枠線
・ポラロイド風
・デフォルト
・角丸
・枠あり
・影あり
・フォトフレーム
・ブラウザ風
・デスクトップ風
・デフォルト
・角丸
・デフォルト
・角丸
・影(小)
・影(大)
・枠線
・デフォルト
・角丸
総合評価(スコア)
(4.5 / 5.0)
(5.0 / 5.0)
(3.0 / 5.0)
(4.0 / 5.0)
(3.0 / 5.0)
URL詳細を見る詳細を見る詳細を見る詳細を見る詳細を見る
ワードプレステーマ:デフォルトページ速度一覧

SWELLは、画像スタイルが多いため、美しいサイトに仕上がります。

SWELLの便利さを証明するため、有料テーマ別に画像スタイルの種類を比較してみました。

それぞれ解説します。

AFFINGER6 (アフィンガー6)
アフィンガー6:デフォルトスタイル
デフォルト

デフォルト画像です

アフィンガー6:角丸スタイル
角丸

画像を丸くできるスタイルです。柔らかく丸みのある印象を与えます。ただし、アフィンガー6は、角の丸みが小さめ

アフィンガー6:シャドウスタイル
シャドウ

画像に影を配置できるスタイルです。影を加えることで、画像を目立たせる効果や強調することができます。

アフィンガー6:ワイドスタイル
ワイド

画像の横幅が長くなるスタイルです。小さい画像を大きく表示させたいときに利用します。

アフィンガー6:枠線スタイル
枠線

画像に枠を配置できるスタイルです。枠をつけることにより、画像や要素を強調することができます。

アフィンガー6:ポラロイドスタイル
ポラロイド

画像をポラロイド風に枠をつけるスタイルです。視覚的なコントラストが生まれるため、注目されやすくなります。

アフィンガー6は、6つの画像スタイルに対応しております。シャドウや枠線など、基本スタイルがそろっているので、柔軟なカスタマイズが可能です。

JIN(ジン)
ジン:デフォルトスタイル
デフォルト

デフォルト画像です

ジン:角丸スタイル
角丸

画像を丸くできるスタイルです。柔らかく丸みのある印象を与えます。ただし、JINは、角の丸みが小さめ

JINは、角丸しかないです。そのため、枠や影は、別途CSSで設定する必要があります。


SANGO(サンゴ)
サンゴ:デフォルトスタイル
デフォルト

デフォルト画像です

サンゴ:角丸スタイル
角丸

画像を丸くできるスタイルです。角丸の画像は、柔らかく丸みのある印象を与えます。女性サイト、動物サイトなどと相性良し。

サンゴ:影(小)スタイル
影(小)

画像に影を配置できるスタイルです。影を加えることで、画像を目立たせる効果や強調することができます。

サンゴ:影(大)スタイル
影(大)

画像に影を配置できるスタイルです。影のついた要素は、周囲との視覚的なコントラストが生まれるため、注目されやすくなります。

サンゴ:影(枠線)スタイル
枠線

画像に枠を配置できるスタイルです。枠をつけることにより、画像や要素を強調することができます。

SANGO(サンゴ)は、影や枠線など、基本的なスタイルの適応ができます。

THE SONIC(ソニック)
ソニック:デフォルトスタイル
デフォルト

デフォルト画像です

ソニック:角丸スタイル
角丸

画像を丸くできるスタイルです。角丸の画像は、柔らかく丸みのある印象を与えます。

THE SONIC(ソニック)は、角丸しかないです。そのため、枠や影は、別途CSSで設定する必要があります。

SWELL(スウェル)
SWELL:デフォルトスタイル
デフォルト

デフォルト画像です

SWELL:角丸スタイル
角丸

画像を丸くできるスタイルです。角丸の画像は、柔らかく丸みのある印象を与えます。

SWELL:枠ありスタイル
枠あり

画像に枠を配置できるスタイルです。コンテンツや商品の写真などで重要な要素を枠で囲むことで、注目度や関心を高めることができます。

SWELL:影ありスタイル
影あり

画像に影を配置できるスタイルです。影のついた要素は、周囲との視覚的なコントラストが生まれるため、注目されやすくなります。

SWELL:フォトフレームスタイル
フォトフレーム

フォトフレームは、写真のようなフレームを画像に配置できるスタイルです。

SWELL:ブラウザ風スタイル
ブラウザ風

ブラウザ風は、パソコンのブラウザ枠を配置できるスタイルです。

SWELL:デスクトップ風スタイル
デスクトップ風

デスクトップ風は、デスクトップ画面を画像に配置できるスタイルです。

デスクトップ風、ブラウザ風は、SWELLだけができる強みです。

モックアップ画像は、記事にメリハリがついて、読者の理解を促進させるため、成約率が高くなります。

そのため、

  • 「商品購入手順記事」が多い
  • 「〇〇する方法」などの記事が多い

こんなブログを始めたい人に、SWELLはおすすめです。

SWELLバナーリンク

SWELLバナーリンクとは、画像にリンクを設置できる機能です(ブロックエディタのデフォルト機能)。

ブログ初心者の方にとって、バナーを作るのに時間がかかることがあります。そのため、記事作成の進行が遅れてしまい、ブログを続けることが難しくなる場合もあります。

そんな時、SWELLバナーリンクを使うと便利です。

例えば、

  • 画像にオーバーレイを設定
  • 画像に丸みを持たせる
  • 画像の上に文字リンクを配置する

など、画像のカスタマイズできます。

SWELLは、画像編集ソフト不要でブログができる【まとめ】

まとめです。

SWELLは、画像編集ソフト不要でブログができる、コスパの高いワードプレステーマです。

SWELLでブログを始めることで結果的には、

  • 商品レビュー記事作成がサクサク進む
  • 画像の修正工数が少なくなる
  • 差別化できるのでSEOがあがりやすい

といったメリットを得られます。

もう、ブログで画像加工に悩みません。記事作成もサクサク進み、月5万円なんて簡単に稼げるようになります。

やたろう

お金を気にせずに飲みに行けることが、SWELLにしてよかった点です。

よかったらシェアしてね!
  • URLをコピーしました!
この記事でわかること(もくじ)