WordPressテーマ簡単カスタマイズで豊富なデザインが可能に！

ウェブロードでは、様々なテーマをテスト利用した中で、とても自由度が高く、初心者でも使いやすいLightningテーマを使用しています。

これは、WordPressを習熟した制作者だけでなく、制作後にそのサイトを運用されていくクライアントが無理なく更新でき、操作しやすいテーマを使用するべき、と考えているからです。

とはいえ、パッとみた印象で、そのサイトのイメージが決まってしまいますから、デザインもやはり重要です。

Lightningのデフォルトデザインはシンプルなものですが、今回はそのLightningテーマを使用して、デザイン性を重視した架空のコワーキングカフェのデモサイトを制作してみました。

Lightningテーマデフォルトデザイン

Lightningテーマカスタマイズ

カスタマイズといっても、難しい操作は一切せず、あくまでこのサイトを運用されるクライアントが今後も更新しやすいよう意識して制作しました。

Lightningデモサイト

（コワーキングカフェ)

デザインは見た目を印象付けるだけでなく、客観的な視点で、人に情報や目的を伝える役割があります。

サイトを閲覧するユーザーに、例えば「かっこいい」「おしゃれ」「可愛い」というイメージを持ってもらう目的は、ただホームページ自体を「かっこいい」「おしゃれ」「可愛い」と思ってもらいたいわけではなく、実店舗（ここではコワーキングカフェ）のイメージをこのホームページを通して視覚的にユーザーに伝えるのが本来の目的です。

このデモサイトは「おしゃれで洗練された都会のコワーキングカフェ」というコンセプトで制作しました。

今回は、そのイメージに近づけるポイントと、実際の制作手順の一部を公開しようと思います。

洗練されたデザインを作る

ポイントは主に4つ

デザインのイメージを決めるのは画像はもちろんですが、フォントや装飾、動きの要素も大きいです。

Font

Decoration

Color

Motion

フォント -Font-

見出しには明朝体を使用し、「高級感」「信頼感」のイメージを与えます。

本文にはゴシック体を用いて視認性をよくしています。

見出しと本文の字体を変えることで、メリハリがでて読みやすい印象を与えます。

装飾 -Decoration-

見出しなどに装飾をすることは多いですが、洗練されたイメージを出したい時は、なるべくシンプルを心がけます。

デモサイトでは一切装飾をつけずシンプルにしました。

カラー -Color-

今回のデモサイトでは、「メインカラー＋無彩色」のみ。

茶系のカラーのみ使用していますが、本来カラフルなアイコンなども黒に統一、その他の背景などもグレーや白に限定しています。

動き -Motion-

トップページの画像切り替えや、ふわっと次のコンテンツが出てくる動きを適度につけています。

やりすぎはユーザービリティが劣るので注意しましょう。

制作手順

LightningやWordPressの基本的な操作やCSSについてはここでは割愛いたしますが、今回のデモサイトの特徴的なデザインとしては

一部を全幅にして広がりや空間を演出していること
比率の違うカラムを取り入れ、画像と文字だけの単調さを解消してること

があげられます。簡単に基本ブロックで設定できる部分ですので、まずは日々のブログなどからでも取り入れてみてください。

Lightningデモサイト

（コワーキングカフェ)

全幅にして広がりや空間を演出

■ カラムブロック

デモサイトでは、コンテンツを横に並べて表示できる、カラムブロックを多く使用しています。

カラムは画像のように比率を選択して1：1（50/50）以外の比率でもブロックを挿入することができます。

■ 全幅設定

デフォルトのままなら左右に適度な余白ができますが、画像のようにカラム全体を選択し、全幅にすることができます。

デモサイトではトップページすべて全幅にしています。

カラムの比率を変更する

先に述べたように、カラムは画像のように比率を選択して1：1（50/50）以外の比率でもブロックを挿入することができますが、後からの変更も可能です。

カラムの一つを選択し、右の設定から、カラム設定＞幅を％やpxで指定することができます。

デモサイトでも、「1：1：1」や「7：3」の比率をセクションごとにかえ、画像と文字のみのシンプルな作りに多様感を生み出しています。

Lightningテーマでさまざまなデザインを表現できる

おしゃれなテンプレートが揃ったWordPressテーマもありますが、Lightningテーマは操作性もよく、あらゆるデザインを表現することができます。

今回のデモサイトでは、プラグインやCSSも極力使用せず、ほとんどが基本ブロックとその設定のみで制作していますので、後々のデザイン変更も簡単です。

サイト制作や作り替えをお考えの方は、ぜひLightningテーマを検討してみてください。

Lightning無料版でも操作性はとてもよいですが、有料版にすると使用できるブロックが増えるうえ、設定部分でワンクリックで変更できる部分が増えてとても便利です。ウェブロードでも、有料版を使用しています。

Lightning有料版はこちら

投稿者プロフィール

Asuka: 元銀行員。退行後手に職をつけたい気持ちからと元々興味があったWeb制作の道へ。
訓練校でHTMLやCSS、デザインについて半年間学び、その後デザイン会社で2年程度の実務経験を積む。
日々の業務を通して、お客様自身で日々更新・運用できる生きたサイトを作成できるWordPressの需要を感じ、2024年7月より株式会社ウェブロードに入社。
技術やデザイン、知識を磨きながらお客様視点での制作・運用を行っている。