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

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

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

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

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

Lightningテーマカスタマイズ

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

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

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

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

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

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

ポイントは主に4つ

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

Font

Decoration

Color

Motion

フォント -Font-

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

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

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

装飾 -Decoration-

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

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

カラー -Color-

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

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

動き -Motion-

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

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

制作手順

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

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

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

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

■ カラムブロック

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

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

■ 全幅設定

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

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

カラムの比率を変更する

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

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

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

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

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

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

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

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

投稿者プロフィール

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

お問合せフォームはこちら

弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)