SWELL×Figmaでホームページ制作！作り方をデモサイトのデザイン・CSSで解説

本記事では、有料WordPressテーマ「SWELL」×Webデザイン制作ソフト「Figma」を組み合わせて、Webサイトをどのように制作しているのか解説いたします。当事務所の制作フローに基づき、一見分かりにくい「ホームページ制作」の裏側を紹介するものです。

実際のデモサイト紹介

まずは、SWELLとFigmaで制作した実際のデモサイトをご紹介いたします。

上記のデモサイトは「士業事務所」を想定したものです。
全体的にシンプルで落ち着いたデザインで、誠実さを感じさせるものにしています。

SWELLの機能を使う前に「BtoBで信頼される情報の見せ方」を意図していることが分かるかと思います。

実務で通用するデザインの水準

「SWELLはカンタン」「誰でもすぐ綺麗なサイトが作れる」と紹介されることが多いです。

とはいえSWELLが「（個人ブログではなく）法人向けのWeb制作サービスとして提供できる品質か」という点は、多くの方が気にされる部分だと思います。

しかし、実務で通用するレベルのサイトを構築するには、SWELLを使う以前の「情報設計・丁寧なデザイン」が欠かせません。「SWELLの操作がカンタン」なのは確かですが、「SWELLを入れれば誰でも良いWebデザインができる」は誤りです。

こうした基本が整っていないサイトは、どうしてもサービス自体の品質まで低く見えてしまいます。

SWELLはとても扱いやすく、コードを書く量も通常のサイト制作と比較すれば大幅に減らせます。デザインの基本を積み重ねて丁寧に作れば、非常に上品に仕上がってくれるWordpressテーマですが、「簡単だからこそ、差がつきやすい」と理解していただければ幸いです。

Web制作の大まかな流れ

当事務所では、次の手順でWeb制作を進めています。

デザインに関しては、最初からSWELLで作るのではなく、まずWeb制作ツールである「Figma」を使ってデザインしています。Figmaはゼロから自由にデザインレイアウトが作れるソフトウェアで、Web制作に特化した機能がたくさんあります。

いきなりSWELLを触ってしまうと「SWELLの機能でカンタンに実現できる範囲」に思考が制限されてしまうので、まずは枠を外して、何もない状態からデザインを考えていきます。

Figmaでのデザイン制作

実際のFigma画面をお見せします。

余白の広さやブランドカラー、見出しや本文のフォント・色・サイズなど、何度も出てくる要素はFigmaに設定を登録することができます。

ちなみに、Figmaの新規ファイルを開いて最初は「マジで真っ白」です。デザイナーは、本当の白紙からデザインを考えています。

SWELLでデザインを再現する

一通りデザインができた後、「これをSWELLで再現するにはどうしたら良いか？」と考えたり調べたりしながら、実装します。

いよいよ「FigmaのデザインをSWELLのブロックでどのように再現するか」の例を紹介していきます。

ファーストビュー

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

から、最上部の画像を設定しています。PCとスマホで別の画像を用意します。

画像自体には「無料相談はこちら」のボタンは描かれていません。実際に押せるボタンは「ブログパーツ」で設定しています。

ボタンを置くだけなので、めちゃめちゃシンプルなブログパーツです。PCとスマホで表示させたい位置がだいぶ違うので、SWELL標準機能でPC/SP表示を切り替えています。

このままでは思い通りの位置にボタンが配置されないので、

外観＞カスタマイズ＞追加CSS

にCSSを書いて位置を調整します。

@media (min-width: 960px) {
.mv-btn {
 position: absolute;
 top: 9vw;
 width:35vw;
}
}

@media (max-width: 960px) {
.mv-btn {
 position: absolute;
 top: 28vw;
 width:92%;
}
}

CSSクラス名の「mv-btn」は、ブログパーツでSWELLボタンを選択した状態で「高度な設定」から付与しています。topとwidthの値が中途半端な気がしますが、試行錯誤の結果、この数値と単位ならデバイス幅に左右されずにデザインを再現できたものです。

フルワイド背景＋カード型レイアウト

ここは実際のデモサイトとWordpressの編集画面でかなり見え方が違いますね。

「フルワイド」ブロックには背景写真を入れて、オーバーレイでブランドカラーの青色を薄くかけています。

特徴一覧カードは「リッチカラム」ブロックで作っています。

SWELLの機能（右側のカスタマイザー）で、ブロックごとにパディング（隙間の大きさ）や揃え位置が指定できるので、後で書くCSSの量が激減します。

外観＞カスタマイズ＞追加CSS

特徴一覧のカードデザインとして、白背景や角丸、ドロップシャドウを指定します。これも超シンプルなコードですね。

.feature {
	background-color: #fff;
	box-shadow:0px 4px 4px rgb(0, 0, 0, 0.2);
	border-radius: 20px;
}

box-shadowだけ若干複雑ですが、「影を右にずらすpx（0px）」「影を下にずらすpx（4px）」「影のぼかしpx（4px）」「影の色・不透明度（RGBすべて0＝黒、20%）」の順です。

CSSクラス名「feature」は、それぞれのカード（＝各「カラム項目」ブロック）の「高度な設定」に書きます。

アニメーション

標準機能が豊富なのでプラグインが少なくて済むSWELLですが、こちらのデモサイトではアニメーション機能のために、プラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」をインストールしています。

「フルワイド」ブロック全体にアニメーションを設定することで、ページをスクロールするごとに、コンテンツ全体がフワッと出現するようにできます。

ユーザーが見たときには無意識に収まる程度のアニメーションですが、これがあるとないとで、結構印象が変わると思います。特に、今回のようなシンプルな見た目のサイトでは、ぱっと見を寂しい印象にしない効果が大きいです。

なお、左側の「リストビュー」で「フルワイド」ブロックばかり並んでいますが、管理効率を考えると、TOPページの要素は全て「フルワイド」ブロックで囲ってしまうのが楽だと思います。

お問い合わせフォーム

「お問い合わせフォーム」もSWELLだけでは賄えないですが、非常に重要な機能なので「Contact Form 7」プラグインを使って設置しています。

「Contact Form 7」で自動出力されるフォームのデザインは、何もしなければ以下の形で、非常にシンプルなものです。

このデザインはSWELLの機能ではコントロールできないので、自分でCSSを書いてデザインを作っていく必要があります。なので実は「お問い合わせフォーム」デザイン用のCSSが最も長いです（といっても50行くらいですが）。

.wpcf7 input:not([type=checkbox]):not([type=radio]):not([type=submit]), .wpcf7 select, .wpcf7 textarea {
 width: 100%;
 border-radius: 8px;
 background-color:#fff;
 margin-top:.5rem;
}

.wpcf7 input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus-visible, .wpcf7 select:focus-visible, .wpcf7 textarea:focus-visible {
 outline: 1px solid #ccc;
}

.wpcf7 form p {
 margin-bottom: 20px;
 font-weight:700;
}

/*入力欄*/
::placeholder {
 color:#ccc
}

/*「必須」文字*/
.CF7_req{
 font-size:.8em;
 padding: 4px;
 background: #426EB5;
 color: #fff;
 border-radius: 3px;
 margin-right:.5em;
}

/*「任意」文字*/
.CF7_unreq{
 font-size:.8em;
 padding: 4px;
 background: #aaa;
 color: #fff;
 border-radius: 3px;
 margin-right:.5em;
}

/* 「送信する」ボタン */
.wpcf7 .wpcf7-submit {
 border: none;
 background-color: var(--color_main);
 color: #fff;
 border-radius: 40px;
 padding: 12px 38px;
 box-shadow: var(--swl-btn_shadow);
 transition: box-shadow .25s;
 width:100%;
}

.wpcf7 .wpcf7-submit:hover {
 box-shadow:0 4px 12px rgb(0 0 0 / 10%),0 12px 24px -12px rgb(0 0 0 / 20%);
}

このCSS調整は、実際にCSSが反映された後のページで「デベロッパーツール（検証ツール）」を開き、どのクラスがどう干渉しているのか探しながら試行錯誤をする必要があります。

紹介しきれていない部分もかなり多いですが、なんとなくSWELLでのWebサイト作りの雰囲気が伝わっていれば幸いです。

どうしても再現が難しいデザインもある

ちなみに「どうやったらSWELLでデザインを再現できるか？」と、しばらく考えたり調べたりした結果

といった事情で、Figmaで作ったデザインから少しだけ変更することもあります。

Webサイトは印刷物と違って、数値やルールやデバイスでかなり「型」が決まっているので、どうしても実現できない・実現しようとすると時間やお金がかかる・リスクの高い方法を取らなければいけない（1文字でも間違ったらサイトが見れなくなるような重要ファイルを編集する必要がある）、などということもあります。

そこまでするよりは、印象があまり変わらない範囲でデザインを変えてしまう方が、早いし安いし安全だし、後々の更新も楽になります。

SWELLのメリット、Figmaとの相乗効果

SWELLを実際に触っていて、特に感じる利点は以下のとおりです。

また、Figmaと併用することで起こる相乗効果は以下のとおりです。

SWELL×Figmaの併用で、従来 Adobe IllustratorやPhotoshopで行っていた工程と比べ、スピードや再現性が大幅に向上しています。

SWELL×Figmaで「ローコード×高品質」を実現しよう

SWELLは、専門的知識が必要となる「コーディング」を減らしながら、クオリティの高いサイトを構築できる優れたテーマです。

かなり機能が豊富で操作が簡単なので、ついつい「SWELLの機能で簡単にできるデザイン」を作りたくなってしまいます。その枠を外すためには、まずFigmaで白紙からデザインを設計するのがおすすめです。

Figmaでデザインが出来上がった後、SWELLの標準機能で構築しつつ、CSSで見た目を調整すれば、制作業務として形にできるレベルのWebサイトが作れます。

買い切り型なので購入ハードルは若干ありますが、SWELLが気になる方はまず公式サイトをご確認いただくのが良いと思います。

Web以外のデザインも同時に承ります

当事務所では、Webサイト制作だけでなく、印刷物、ロゴ、スライド、漫画、イラスト制作などもワンストップで対応しております。

複数のクリエイティブ領域を横断して制作を進めることで、デザインに一貫性が生まれ、貴社の管理工数の大幅削減が可能です。さまざまな制作物をどこに頼むかお悩みの際は、ぜひBUNデザイン事務所にお任せください。