つくりたいサイトを、妥協しない。デザインも、機能も、思いのままに。

企業サイトも、ブログも、LPも。Utopiaなら、サイトの目的に合わせたデザインとページ構成を、ひとつのテーマで実現できます。

「こんなサイトをつくりたい」「もっと自由にカスタマイズしたい」「運営の手間を減らしたい」。

その想いに応えるUtopiaの機能を、設定方法から具体的な活用例まで詳しくご紹介します。

5つのサイトタイプ

サイトの目的に合わせて、構成やデザインを切り替える

Utopiaでは、ひとつのテーマで5つのサイトタイプを利用できます。

サイトタイプを選ぶことで、制作するサイトの目的に合った設定を利用できます。用途の異なるサイトを制作する場合にも、同じテーマをベースに構築できます。

テーマカラー設定

用意された配色から選び、サイト全体の色を整える

COLOR PRESETS

選ぶだけで、理想の配色に。

6つのカラープリセットから、サイトのイメージに合う配色を選べます。

01

信頼・誠実

#163A5F

#3984D6

企業・ビジネスに合う、誠実で信頼感のある配色。

02

モダン・洗練

#252525

#B5B5B5

建築・デザイン向けの、都会的なモノトーン。

03

清潔・安心

#2878B5

#F0A83C

医療・サービスに合う、明るく親しみやすい配色。

04

安定・自然

#245747

#C59A45

自然・暮らしに似合う、落ち着いたグリーン。

05

力強さ・活力

#343B43

#E87532

スポーツ・事業向けの、力強く活動的な配色。

06

高級感・先進性

#202F4F

#20A69A

高級・テクノロジー向けの、上質で先進的な配色。

配色は自由にカスタマイズ可能。 プリセットをベースに、サイトのイメージに合わせて色を調整できます。

Webサイトの配色は、ブランドの印象やページの読みやすさに関わる重要な要素です。一方で、メインカラー、背景色、文字色、アクセントカラーを個別に決め、サイト全体のバランスを整えるには手間がかかります。

Utopiaでは、あらかじめ用意されたテーマカラーから配色を選択できます。

配色セットを利用することで、色の組み合わせを一つずつ考えることなく、サイトの基本的な色調を整えられます。

また、カラーを自分で指定したい場合には、カスタマイズ設定を活用して、サイトのイメージやブランドに合わせた配色に調整できます。

テーマカラーは、デザインの方向性を決めるための出発点としても活用できます。まずは用意された配色を選び、必要に応じて細部を調整することで、カラー設定にかかる時間を減らせます。

トップページのセクション設定

用意されたセクションを組み合わせてトップページを構成する

セクション一例（スライダー記事）

トップページには、メインビジュアル、サービス紹介、特徴、実績、料金、よくある質問、問い合わせへの案内など、さまざまな情報を掲載できます。

Utopiaでは、トップページに使用するセクションを活用し、必要な情報を組み合わせてページを構成できます。

セクションごとに用意された入力項目にテキストや画像などの情報を設定することで、レイアウトを一から作成する手間を減らせます。

例えば、企業サイトなら事業内容や実績を中心に、サービスサイトなら特徴や料金、問い合わせへの導線を中心に構成できます。

掲載する情報や順番を整理し、サイトの目的に合ったトップページを作成できます。

ヘッダー・メインビジュアル・フッターの設定

ヘッダーは、ロゴやサイト名、ナビゲーションなどを配置する領域です。
Utopiaでは、これらの領域について、サイトタイプに応じた設定を利用してデザインを調整できます。

各領域の設定を活用し、訪問者が必要な情報を見つけやすいサイトを目指せます。

メガメニュー

下層メニューには、デザインの異なる2種類のメガメニューを搭載。サイトの雰囲気や目的に合わせて、最適なスタイルを選べます。

見出し・タイトルのデザイン設定

ページタイトルからサイドバーまで、デザインをまとめて整えることができます。

それぞれのデザインが統一されていると、情報の階層が分かりやすくなり、サイト全体にも一貫性が生まれます。

Utopiaでは、用意されたデザインスタイルから選択し、対象となる見出しやタイトルの見た目を整えられます。

個々のパーツを一つずつ装飾するのではなく、設定を通じてデザインの方向性を統一できるため、ページ数が増えた場合にも一貫した見た目を維持しやすくなります。

コンテンツブロック

記事や固定ページに、さまざまな表現を取り入れる

投稿や固定ページでは、文章だけでなく、見出し、画像、ボタン、リスト、カラム、カードなどを組み合わせることで、情報を整理して伝えられます。

Utopiaでは、コンテンツの内容や目的に応じて利用できるブロックを用意しています。

サービスの特徴を複数のカードで紹介する、重要な情報をリストにまとめる、ボタンで関連ページへ誘導する、複数のカラムで情報を整理するなど、用途に合わせてページを構成できます。

デザインを一から作成する必要を減らし、ブロックを組み合わせながら記事を作成できるため、日々の更新にも活用できます。

記事の内容に適した表現を選ぶことで、文章の読みやすさとページの見やすさを両立できます。

サムネイル未設定時の表示例

サムネイル画像が未設定の記事も、統一感のあるデザインで美しく表示。画像がなくてもレイアウトが崩れず、サイト全体の見栄えを保ちます。

サイト運営を支える標準機能

複数のプラグインに頼りすぎないサイト構成を目指す

WordPressサイトの運営では、問い合わせフォーム、SEO設定、画像の最適化など、デザイン以外にも必要な機能があります。

Utopiaでは、こうした定番機能の一部をテーマ内に備え、必要な設定をまとめて管理できる構成を目指しています。

テーマに備わっている機能を利用することで、用途が重複するプラグインを追加する必要性を減らし、管理するツールを整理しやすくなります。

※対応する機能の範囲や画像最適化の方式など、詳細は実際の仕様に基づいて掲載します。

CTA・固定ボタン

必要な案内を、適切な場所に表示する

CTAは、問い合わせ、資料請求、購入など、訪問者に次の行動を案内するためのコンテンツです。

Utopiaでは、利用できる設定に応じてCTAや固定ボタンを設置し、サイト内の導線を整えられます。

ページの内容に合わせて問い合わせへの案内を配置したり、画面上の特定の位置にボタンを表示したりすることで、訪問者が次の操作に進みやすい構成を目指せます。

サイトの目的に合わせて表示内容や設置場所を考えることで、必要な情報へのアクセスをサポートします。

パンくずリスト・目次・関連記事

サイト内の移動と、記事の閲覧をサポートする

コンテンツが増えるほど、訪問者が現在どのページを閲覧しているのか、どこに必要な情報があるのかを把握しやすくすることが重要になります。

パンくずリスト

サイト内の階層や現在のページの位置を示し、上位のカテゴリやページへ移動しやすくするためのナビゲーションです。

目次

記事内の見出しを一覧で表示し、読みたい項目へ移動しやすくします。長い記事でも、必要な情報を見つけやすくなります。

関連記事

閲覧中の記事に関連するコンテンツを紹介し、読者が次に読む記事を探すための手がかりを提供します。

これらの機能を適切に活用することで、サイト内の情報を整理し、訪問者がコンテンツを探しやすい環境を整えられます。

読書体験を高める機能

記事を読む人の使いやすさにも配慮する

記事の内容だけでなく、読み進めやすさや閲覧中の分かりやすさも、サイトの使い心地に関わります。

Utopiaでは、対応する読書体験関連の機能を利用して、記事の閲覧をサポートする表示を設定できます。

例えば、読了までの進捗を視覚的に示すプログレスバーや、読了時間の目安など、読者が記事を読む際に役立つ情報を提供できます。

記事の長さやサイトの性質に合わせて機能を活用することで、読者にとって内容を把握しやすいページを目指せます。

Cookie関連の設定

サイトの利用に関する案内を整える

Cookieは、サイトの設定や利用状況などに関わる情報をブラウザに保存する仕組みです。サイトによっては、Cookieの利用目的や関連する情報を訪問者に案内する必要があります。

Utopiaでは、対応するCookie関連機能を利用し、サイトの運営方針に合わせた案内を設定できます。

実際に必要な表示や同意管理の範囲は、サイトで使用するCookie、アクセス解析、広告サービス、対象地域の法令などによって異なります。

Cookie関連の機能を利用する際は、サイトの利用状況に合わせて設定し、必要に応じて適切な同意管理ツールなどを組み合わせてください。

サイトタイプに応じた設定管理

必要な設定を整理し、効率よくサイトを運営する

Webサイトには、デザイン、レイアウト、記事表示、ナビゲーション、サイト運営など、多くの設定項目があります。

Utopiaでは、サイトタイプや機能ごとに設定を整理し、目的に応じて必要な項目を調整できる構成を目指しています。

基本的なデザインを設定したうえで、必要な機能を有効にし、サイトの目的に合わせて細部を調整する。こうした流れで設定を進めることで、作業の見通しを立てやすくなります。

シンプルな構成で運用したい場合にも、細かな部分まで調整したい場合にも、必要な設定を確認しながらサイトを構築できます。

Utopiaの機能を活用して、自分に合ったサイトを構築する

Utopiaには、サイトタイプの選択、デザインのカスタマイズ、トップページの構成、記事作成に使えるブロック、サイト運営に役立つ機能など、さまざまな機能があります。

すべての機能を使う必要はありません。まずはサイトの目的に合ったタイプを選び、カラーやフォントを整え、必要なセクションやブロックを使ってページを作成する。その後、サイトの成長や運営方針に合わせて、細かな設定を追加していくこともできます。

各機能の特徴や設定方法を理解し、自分のサイトに必要なものを選びながら活用してください。