SWELLデモサイト事例：アーティスト・作品紹介サイトの作り方【トラマサキカク】

今回は、WordPressテーマ「SWELL」を使って私が作成したアーティスト紹介のホームページ紹介と、作る時に意識するポイントをお伝えします。特に、アーティストサイトを立ち上げる方にとって、どんなサイト構成にすればいいのかまとめました。

最初に結論：SWELLで作ったアーティストサイト「トラマサキカク」

まずは論より証拠。実際に私がSWELLを使って制作し、現在も運営しているアーティストサイトをご覧ください。

【制作実例：トラマサキカク】

サイト名	トラマサキカク公式サイト
URL	https://tyn-c.com/toramasa/
WordPressテーマ	WordPressテーマ「SWELL」
素材	イラスト：全て手書き（点描・アクリル絵の具など）

このサイトは、アーティスト【寅眞（トラマサ）】の作品プロモーションを目的に作成しました。 制作してみて、SWELLというテーマがとても「アート活動」に向いてるということを実感。

サイトのコンセプト：世界観重視のLP（ランディングページ）型

アーティストサイトで最も重要なのは、「作品の世界観を邪魔せず、かつ引き立てること」です。

トラマサキカクでは、以下の点にこだわってSWELLの設定を行いました。

背景色はあえての「サビ赤」、メインカラーに「金」

作品自体がポップで力強いため、白背景だと少し寂しく、黒だと重すぎると感じました。

そこでSWELLの「基本カラー設定」を使い、背景色に作品と調和しつつ個性を放つ「サビ赤」を設定。
また、ボタンなどのメインカラーに「金」を選びました。

複雑なCSS（プログラム）を書かなくても、クリック一つでこの独自の色が出せるのはSWELLの大きな強みです。

1ページで完結するLP構成

あちこちのページに移動させるのではなく、スクロールするだけで「作品」「プロフィール」「お知らせ」すべてが見られる「1ページ完結型（LP型）」を採用しました。 スマホで見るユーザーにとって、この構成は非常にストレスが少なく、最後まで見てもらいやすい設計です。

制作期間はたったの3日！ノーコードで作るメリット

驚かれるかもしれませんが、このサイトの立ち上げにかかった時間は約3日です。

• 1日目： SWELLのインストール ～ トップページの構成作成
• 2日目： 微調整とコンテンツ（作品画像など）の流し込み
• 3日目： 公開！

もし、これをゼロからプログラミング（HTML/CSS）で作ろうとしたら、数週間はかかっていたでしょう。

SWELLを使う最大のメリットは、「コードを書く時間を、作品を選ぶ時間・見せ方を考える時間」に充てられることです。 「Web制作は素人」という方でも、マウス操作だけでプロ並みのレイアウトが組めるため、クリエイティブな部分だけに集中してサイトを作ることができます。

アーティストサイトに必要な「４つの構成」とSWELL設定術

アーティストサイトの目的はシンプルです。「作品を見てもらうこと」と「活動を知ってもらうこと」。

あれこれ詰め込まず、以下の4つの要素があれば十分機能します。

私が実際に「トラマサキカク」で行った、SWELLの設定テクニックとあわせて解説します。

【構成１】メインビジュアル：スマホでも「作品の全体」を見せる設定

サイトの顔となるメインビジュアル。アーティストなら、ここで一番自信のある作品をドカンと見せたいですよね。

しかし、Webサイトの仕様上、「PCでは綺麗に見えるのに、スマホだと作品の端が切れてしまう（拡大されすぎる）」という問題がよく起こります。

SWELLなら、この問題を「画像設定」だけで解決できます。

設定場所： 外観＞カスタマイズ ＞ トップページ ＞ メインビジュアル

ここがポイント：
方法１ PC用の横長の画像をそのままスマホで表示したい場合→「画像・動画サイズのまま」
方法 2 スマホ対応したい！ → 「SP（スマホ）用の画像」を別途設定する

方法２「SP（スマホ）用の画像」を別途設定する

細部をもっと見てほしいという作品の場合は、「SP（スマホ）用の画像」を別途設定しましょう。

「スマホの画面サイズに合わせてトリミング（縦長に加工）した画像」を別途用意し、SWELLのSP用画像枠にアップロードすればOKです。

これにより、スマホで見ても作品の構図が崩れず、意図した通りの「世界観」をファーストビューで伝えることができます。

【構成２】お知らせ＆NEWS：「投稿リスト」でイベント告知

トラマサキカク公式ページ

個展や新作の発表など、最新情報はトップページですぐ分かるようにします。 ここで使うのが、SWELL専用の「投稿リスト」です。

設定のコツ： 好みに合わせて、デザインを「カード型」もしくは「リスト型」を選択する

このサイトでは、ワクワク感を出したかったので、あえて「カード型」を選べました。

ただ、アーティストによって、作品画像（メインビジュアルやギャラリー）を目立たせたい場合は、お知らせ部分はあえて文字だけの「リスト型」を選ぶのもOKです。

これでサイト全体がうるさくならず、「情報の強弱」がつきます。

【構成３】作品紹介：なぜ「ギャラリー」ではなく「スライダー」を選んだのか？

トラマサキカク公式ページ

作品を見せる「ポートフォリオ」のセクションです。

WordPressには標準で画像を並べる「ギャラリーブロック」がありますが、私はあえて「スライドショー」を選びました。

理由： 「縦スクロール疲れ」を防ぐため

作品数が10点、20点と増えていくと、ギャラリー表示ではページがどんどん縦に長くなってしまいます。これでは、訪問者が下にあるプロフィールや問い合わせまで辿り着く前に離脱してしまいます。

スライダー表示（横スクロール）にすれば、作品が増えても縦幅（ページの長さ）は変わりません。 省スペースでたくさんの作品を見てもらえる、SWELLのブロック機能の勝利です。

トラマサキカクの場合は、縦長、横長の作品ごとにスライダーを作り、表示させました。

ただ、作品の見せ方は好みなので、アーティストの要望に合わせて最適なものを選びましょう。

【構成４】プロフィール：「カバーブロック」で画像上に文字を載せるコツ

トラマサキカク公式サイト

「どんな人が描いているのか？」を伝えるプロフィール。 単に顔写真と文章を並べるだけでも良いですが、より雰囲気が出るのがSWELLオリジナルの「カバーブロック」を使った手法です。

1. カバーブロックを選択し、背景に「作品」「制作風景」や「アトリエ」の写真を設定。
2. その上に「段落ブロック」でプロフィール文を書く。

【文字を読みやすくするSWELLテクニック】

背景画像がごちゃごちゃしていると文字が読みにくくなりますが、カバーブロックの設定（右サイドバー）にある「オーバーレイ（被せる色）」の不透明度を調整します。

薄く黒や白を重ねることで、「背景の雰囲気を感じさせつつ、文字もしっかり読める」プロっぽいデザインが一瞬で完成します。

集客を加速させる！SWELLの『ひと工夫』機能

作品を見てもらうだけがサイトの役割ではありません。

「グッズを買ってほしい」「お仕事の依頼がほしい」

そんなアーティストの願いを叶えるために、私がトラマサキカクで実践した「クリックしたくなる仕掛け」をご紹介します。

LINEスタンプへ誘導する「マイクロコピー」と「キラッと光るボタン」

トラマサキカクでは、公式LINEスタンプの販売ページへの誘導を強化したいと考えていました。

ただリンクを貼るだけでは素通りされてしまいます。
そこで使ったのが、SWELLボタンブロックの「マイクロコピー」と「キラッと設定」です。

マイクロコピー機能： ボタンの真上に、小さい文字で「\ 待望の新作！ /」や「\ 誰でも使いやすい /」といった補足テキストを入れられます。これがあるだけで、ボタンのクリック率は跳ね上がります。

キラッと光る演出： ボタンブロックの設定サイドバーにある「キラッとさせる」にチェックを入れるだけで、ボタンが定期的にピカッと光るアニメーションがつきます。

難しいコードは一切不要。チェックを入れるだけで「思わず押したくなるボタン」が作れるのは、SWELLならではの強力な機能です。

インスタグラムを問い合わせ窓口にする判断（フォームを置かない選択）

Webサイトといえば「お問い合わせフォーム（Contact Form 7など）」を作るのが一般的ですが、あえて設置しませんでした。

• 理由1： アーティストへの連絡は、メールよりもInstagramのDMの方が気軽で、ユーザーの心理的ハードルが低いから。
• 理由2： フォームの設置やスパム対策の手間を省き、サイト制作をシンプルにしたかったから。

その代わり、プロフィールの下に「Instagramでメッセージを送る」というSWELLボタンを大きく配置しました。

アイコン付きのボタンもSWELLならワンクリックで設定可能です。

「しっかりしたフォームを作らなきゃ……」と悩んでサイト作りが止まってしまうくらいなら、まずはSNSへの誘導ボタンひとつでスタートさせる。これも、個人アーティストがサイトを長続きさせるコツです。

---

SWELLがアーティスト・クリエイターに愛される理由

ここまで「トラマサキカク」の実例を紹介してきましたが、なぜ多くのクリエイターがSWELLを選ぶのでしょうか？ 実際に運営して感じた、「アーティストだからこそSWELLを使うべき理由」は以下の3点に集約されます。

SWELL公式サイト　2025年12月時点

作品の邪魔をしない「シンプルで洗練されたデザイン」

アーティストサイトの主役は、あくまで「作品」です。 デザインが派手すぎるテーマを使うと、サイト自体が目立ってしまい、肝心の絵や写真の印象が薄れてしまうことがあります。

SWELLのデザインは、「究極のキャンバス」です。

余計な装飾がなく、余白の取り方が絶妙なので、作品画像を配置するだけで「美術館の白い壁（ホワイトキューブ）」に飾ったような高級感が生まれます。

スマホ閲覧率が高いアートファンに響く「完全レスポンシブ」

アーティストが活動を発信するのは、主にInstagramやX（旧Twitter）などのSNSですよね。つまり、サイトへの訪問者の90%以上はスマホからやってきます。

SWELLは、PCで作ったレイアウトを自動的に、かつ美しくスマホ用に変換してくれます。

「スマホで見たらデザインが崩れていた…」という心配が一切ないので、SNSからの集客を最大限に活かすことができます。

難しいコード不要！「制作」に集中できる環境

これが最大の理由です。 私たちは「作品を作るプロ」であって、「Webプログラムのプロ」ではありません。

サイト制作でエラーが出たり、コードの記述に悩み始めると、本来やるべき創作活動の時間が奪われてしまいます。

マウス操作だけで直感的に作れるSWELLは、「クリエイターの時間を守ってくれるツール」だと言えます。

---

まとめ：SWELLなら「作品」が主役のサイトがすぐに作れる

今回は、WordPressテーマ「SWELL」を使って作成したアーティストサイト「トラマサキカク」の事例と、具体的な作り方を紹介しました。

これらはすべて、特別なプログラミング技術を使わず、SWELLの標準機能だけで実現しています。

「自分の作品をまとめたポートフォリオが欲しいけど、難しそう…」 そう思っていた方こそ、ぜひSWELLを使ってみてください。

「追記」

【追記】
この記事をきっかけにSWELLを始めた方が増えています！