【デモサイト有り】SWELLで和風なWebサイトをデザインしてみた!

初心者

WordPress「SWELL」で和風なWebサイトって作れるの?
和風なデザインのデモサイトを見てみたいなぁ

そんな人向けにWordPress有料テーマSWELLで作成した和風デザインのデモサイトとそのサイトの作り方を解説しま。SWELLのテーマファイルを一切編集せずにどんな和風デザインに仕上がるかご覧ください。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
かんた です
目次

SWELLで作った和風テイストなWebサイト

SWELL企業デモサイト
旅館
茶葉農園
茶葉農園
かんた

制作時間は3時間、かっこよく仕上がりました!

和風サイト制作に使ったプラグイン

和風のSWELLデモサイト制作に以下2つプラグインを使いました。

①Blocks Animation: CSS Animations for Gutenberg Blocks

デモサイト上でフォントが「フワッ」と浮き出てくるアニメーションを設定しています。アニメーションの種類やタイミングなどをブロック単位で制御できます。

あまり派手にやり過ぎると素人感が出てしまいサイトの質を落とすことなるのでバランスが大事。なるべくアニメーションの種類を増やさず、速度や再生のタイミングを調整すると高級感を演出できます。

②Countdown Block

数字が刻々と減っていく様子を表現するのにピッタリなのがこのCountdown Blockです。

和風のデモサイト上ではイベント部分の告知に使っています。「イベント開催まであと何日」的な場面に使えるプラグインです。

カウントダウンの日付は年~秒単位、フォントの大きさやデザインもブロックオプションから設定できるのでノーコードでオシャレなカウントダウンタイマーが設置できます。

かんた

Countdown Blockプラグインの使い方は次の記事で詳しく解説しています。

【セールやイベント告知に使える】Countdown Block使ったカウントダウンタイマーの作り方

【結論】和風なテイスト用プラグインは不要

SWELLのデモサイトではプラグインを2つ使いましたが、正直和風テイストのWebデザインに役立つプラグインはありません。今回導入したのはアニメーション系のプラグインのみです。

プラグインは使わなくても和風のテイストに影響は出ません。

かんた

和風なデザインを表現するために必須なプラグインはありません。

和風サイトデザインに使った機能

パーツ制作に使った機能
メインビジュアルのスライドショーSWELLの機能
コンテンツの全幅表示カバーブロック
画像とテキストを2カラムで表示メディアとテキストブロック
ギャラリーギャラリーブロック
デザイン作成に使った機能

サイトの上部に表示されるメインビジュアル部分はSWELLの機能で作成しています。SWELLはメインビジュアル部分を全画面に表示させるオプションがあるので、インパクトの強いファーストビューが作成できます。

メインビジュアルにはSWELLのスライドショー機能を使いました。スライドショー以外にも動画を指定することができます。

ギャラリー部分はWordPress標準のギャラリーブロックです。一切独自カスタマイズはしていません。

CSSを少しだけ追加

和風デモサイトでは既存のCSSを変更せずCSSを少し加えました。SWELLのテーマファイルは一切変更していません

かんた

どんなコードを追加したかを紹介します!

グロナビを縦書きで和風っぽさを出した

ページ上部に表示させるグローバルナビゲーションはSWELL標準の出力です。ダッシュボード上でメニューの設定をした後、グローバルナビゲーションを縦書きにするCSSコードを加えました。

.c-gnav>.menu-item>a .ttl{
writing-mode: vertical-rl;
}

グローバルナビゲーションを縦書きにするとメニュー間の距離が窮屈に感じたのでメニュー間の余白を設定しました。

.c-gnav>.menu-item>a .ttl{
margin:0px 16px;
padding:30px 0;
}


グローバルナビゲーションのメニューの縦位置が中央揃えになっているのを「上」を基準に揃えるコードを設定しました。

.c-gnav>.menu-item>a{
justify-content:normal !important;
}

コンテンツエリアにも縦書きのアクセントを追加

コンテンツエリアの一部もフォントが縦書きになるCSSを追加しました。デモサイト上は特定のカバーブロックと特定のフルワイドブロックが縦書きになるよう設定しています。

かんた

縦書きにしたいフルワイドブロックにtateクラスを付けています。

.tate .swell-block-fullWide__inner{
writing-mode: tb-rl;
}

フルワイドに設定した縦書きのフォントは、標準だと文字間がキツキツで窮屈に感じたので余白を設定しました。

.tate .swell-block-fullWide__inner{
letter-spacing: .11em ! important;
}

1つ1つの文字間同様に列の間の余白を広げました。

.tate .swell-block-fullWide__inner{
line-height: 45px;
}

グーグル・マップを白黒に調整

和風らしさを出すために「色味」を減らす加工です。グーグル・マップを黒に変更するCSSコードを加えました。

.gmap{
    filter: grayscale(1);
}

グーグル・マップの埋め込みコードに「gmap」クラスを設定しています。

まとめ

WordPres人気有料テーマ「SWELL」で作成した和風サイトと作り方を紹介しました。

ぜひSWELLで和風デザインのサイト制作にチャレンジしてみてください!

よかったらシェアしてね!
もくじ
先頭へ
目次
閉じる