ウェブロードでは、様々なテーマをテスト利用した中で、とても自由度が高く、初心者でも使いやすい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無料版でも操作性はとてもよいですが、有料版にすると使用できるブロックが増えるうえ、設定部分でワンクリックで変更できる部分が増えてとても便利です。ウェブロードでも、有料版を使用しています。
投稿者プロフィール
-
2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに入社し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。
最新の投稿
- WordPress講座2024年4月5日カスタムフィールドの簡単な作り方をご紹介!
- WordPressのプラグイン2024年3月18日カスタム投稿でウェブサイトを簡単カスタマイズ
- ホームページ制作2024年3月6日物件情報デモサイトを公開!〜自社ホームページでも便利な機能を導入しませんか?〜
- サイト運営ノウハウ2024年1月18日ホームページの入力作業を効率化!!ワードプレスカスタムフィールド
お問合せフォームはこちら
(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。