クリックボタンを四角くしたい！デザイン済みデータを使わない「SWELL流」時短術

ボタンの文字を直すのに、
Photoshopを開く時代はもう終わりました

WordPressテーマ「SWELL」を使っていると、そのあまりの便利さに、昔ながらの苦労を忘れそうになる瞬間があります。 その代表例が「クリックボタン（CVボタン）」の作成です。

以前のWeb制作の現場では、ボタン一つ設置するのも一苦労でした。 「お問い合わせはこちら」という文字が入った画像をPhotoshopやIllustratorで作り、書き出し、アップロードしてリンクを貼る…。

「やっぱり『申し込み』に変えてください」と言われたら、また画像作成ソフトを開くところからやり直し。 今思うと、恐ろしく手間のかかることをしていました。

SWELLなら「形状」を選ぶだけ。一瞬でデザイン変更

SWELLの「SWELLボタンブロック」を使えば、画像編集ソフトは不要です。 エディターの右側にある設定パネルをポチポチするだけで、色も形も自由自在です。

• 色を変えたい → カラーパレットから選択
• 立体にしたい → スタイル設定で「立体」を選択
• 四角くしたい → 形状設定で「四角」を選択

たったこれだけです。 デフォルトでは少し丸みを帯びたデザインになっていますが、サイトの雰囲気に合わせて「パキッとした四角」にしたい場合も、CSSを書く必要すらありません。

プロが「画像ボタン」を使わなくなった理由

私たち制作会社が、最近のサイト制作で画像ボタンを使わず、こうしたテーマ標準のボタン機能を使うのには、単に「楽だから」以上の理由があります。

１.修正コストが圧倒的に低い

クライアント様から「文言を変えたい」と言われた時、管理画面から文字を打ち直すだけで完了します。これが画像だと、修正費用が発生してしまうこともあります。

2.サイトの表示速度が速くなる（SEO対策）

画像データは容量が重くなりがちです。SWELLのボタンは「CSS」というコードで描画されているため、データ量が圧倒的に軽く、ページの読み込み速度を邪魔しません。

3. スマホでも綺麗に見える

画像ボタンは、スマホで縮小表示された時に文字が潰れて読みにくくなることがあります。コードで書かれた文字なら、どんな画面サイズでもくっきり鮮明です。

まとめ：便利な機能は使い倒そう

「ボタンを四角くしたい」。 そんな小さな要望も、SWELLなら一瞬で叶います。

画像作成に費やしていた時間を、記事の中身をブラッシュアップする時間に使って、より良いWebサイトに育てていきましょう。