WordPress

wordpressでデザインを自作する方法とかっこいいトップページの一覧

wordpress development 2544896 1920 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

wordpressでサイトを作りたいけど、他の人と同じ見た目になるのは嫌だ…でも、下手に操作するとデザインが壊れそうで怖い…

そんな風に思っている方もらいっしゃるのではないでしょうか?

また、wordpressは設置も簡単で操作も分かりやすいCMSのため、多くの人に広まりすぎてしまって、他の人と同じようなサイトになりかねないです。

そこで今回の記事では、初心者でもWordpressでオリジナルのデザインが創れるように、4ステップに分けて具体的な方法をお伝えします。

wordpressでおすすめできるお洒落な有料テーマ比較はこちら

WordPressでオリジナルデザインのテンプレートを自作する方法

WordPressでテンプレートをオリジナルのデザインにする場合には、大体以下の流れが必要となります。

① テーマを選択する

まずは、テーマを準備しましょう。

自分の好きなテーマを選んでください。なお、デザインを変更しやすいテーマは後述しています。

② 子テーマを作成する

子テーマを作成し、子テーマのフォルダにStyle.cssをコピーします。

子テーマを作成しておかないと、大元のテーマが更新(アップデート)された際に、せっかく編集したCSSが全て消えてしまいます。

③ オリジナルスタイルシートを作成する

続いて、実際にオリジナルのスタイルシートを作成していきます。これは、既にあるstyle.cssなどを編集していく形で作っていきます。

編集の仕方は以下のステップです。

1.デベロッパーツールを開く

まずは、デベロッパーツールを開きます。

c6be234d00ed3ab6a7bd74172010a72c 1024x475 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

2.CSSを書き換える

デベロッパーツール上でCSSを書き換えましょう。ここだと表示を確認しながら行えるので、便利です。

css 1024x476 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

3.Sourceページを見る

編集が終わったら、Sourceページからコピーをしておくと、編集を反映するのが簡単になります。

0fba590b05374b85a0225fae2a6dedab 1024x471 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

4.「テーマを編集」に貼り付ける

こうして完成状態が分かったら、ダッシュボードの「外観」→「テーマを編集」に貼り付けてください。

b4a3a19645ae20004100a04d8eafb01a 1024x567 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

ここでは例としてXeoryBaseを使っていますので、バズ部さんの表記が入っていますね。

デザインを変更・カスタマイズしやすい無料テンプレート

なお、オリジナルのデザインに変えるとしても、変えやすいテーマと変えにくいテーマが存在します。

個人的には、途中から有料になるようなロックがかかっているテーマや、訳の分からない英数字のidやclassがついているテーマはおすすめしません。

OPEN CAGE

まずはOPENCAGE(オープンケージ)0 - wordpressでデザインを自作する方法とかっこいいトップページの一覧のテーマです。

すでにおしゃれなデザインですが、カスタマイズもしやすいですし、ネット上に様々な情報があります。

有料でも構わない方は、OPENCAGE(オープンケージ)0 - wordpressでデザインを自作する方法とかっこいいトップページの一覧のテーマを利用されるのが良いでしょう。

XeoryBase

Xeory Base

続いて、Xeory Baseです。こちらは無料テーマの中では編集が簡単な部類かと思われます。

Twenty Sixteen

Twenty Sixteen

wordpress標準テーマの中では、使いやすい方な気がします。seventeenはヘッダー部分が結構クセあって難しい印象です。

Simplicity

Simplicityの特徴

Simplicityは、wordpressなのにブログカードさえ設定されていないくらいシンプルです。そのため、後から編集するにも向いていると思います。

表示速度がはやいのも優秀なポイントです。

最近のデザインのトレンドについて

続いて、できれば「トレンドを踏まえたかっこいいデザインにしたい!」という思いがある方もいるかと思いますので、最近のデザイントレンドをざっくりと纏めてお伝えします。

リキッドレイアウト

まず、リキッドレイアウトは日本語で言う可変レイアウトです。

レスポンシブ対応サイトの進化版みたいなイメージで考えてください。CSSが%指定などで表されているのが特徴です。

グリッドレイアウト

4ab99d757785fb29fd1bcee10c2accbf 1024x595 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

グリッドレイアウトは、リキッドレイアウトから派生してよく使われるようになった手法で、格子状に分割してデザイン設計をするものです。

グリッドデザインに関しては、前の記事で細かく書いています。

あわせて読みたい
grid2 - wordpressでデザインを自作する方法とかっこいいトップページの一覧
グリッドレイアウトの作り方!リキッドレイアウトにおすすめwebデザインの業界で、最近はデザイン手法にもトレンドがあります。 その時々によって、全体構想が変わったり、アニメーションを加えた...

ヒーローヘッダー

c9c146c27598558b3b7b565c18e9a7bd 1024x560 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

ヒーローヘッダーは、まだいけるかな?という程度のトレンドですが、魅せ方としては綺麗です。

最近は、ヒーローヘッダーも一歩進歩して、背景が黒目で文字が白のものが増えたり、動画が使われるのが多くなってきています。

マテリアルデザイン

36e23a66a5bfda1ab9534e40e7ad6ff9 1024x556 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

Googleが提唱したマテリアルデザインは、デザイン方針・設計も丁寧に書かれているので基準が定めやすいです。

フラットデザインに物理的な(マテリアル)要素を追加したものだと考えてください。個人的に、カードを浮かす部分のCSSが難しいなと思っています。

ホワイトスペース

9ba0cbd0b927a0746bf81abdd2e4fa12 1024x585 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

最近は、ホワイトスペースを押し出したデザインも増えてきました。

実は、このデザインはホワイトスペースが多くなればなるほど伝えたいことが明確になりますが、バランスを取るのが難しいです。

ホワイトスペースでしっかりデザインが組める方は、かなりの技術を持っているように思われます。

ダイヤモンドカット

3c43b327a95a5fc142fe95693bb71ffb 1024x592 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

ダイヤモンドカットは、画像などを四角形に切り、しかも斜めに表示しているものです。

デザインを外注・依頼する際の基礎知識

オリジナルデザインにしようと思って手を加えてみたけど、分けわからない上に思ったより時間がかかる…もう、いっその事人に任せてしまったほうが楽だな。

といった方向けに、外注する場合の基礎知識を纏めています。料金相場なども記載しておりますので、参考にしてみてください。

あわせて読みたい
social 2470875 - wordpressでデザインを自作する方法とかっこいいトップページの一覧
wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ「ワードプレスでホームページを作りたい!ただ、何から始めたら良いのか分からない!」という方も、いらっしゃるのではないでしょうか? ...

WordPressでかっこいいトップページを創る方法

questions 2212771 640 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

続いて、ホームページを作る際には必ず必要となるトップページ。

ユーザが使い続けてくれるようなWebサイトにするためにはトップページに載せる情報を整理し、わかりやすくする必要があります。

トップページはWebサイト全体の「顔」になります。

トップページとは、特定のWebサイトへの入り口にあたるページのことである。各Webページへのリンクなどを含み、サイト全体の顔としての役割を果たす。(IT用語辞典バイナリより)

なので、トップページをかっこいいデザインにして、ユーザに強い印象を与えることも有効な手段の1つです。

トップページに載せるべき情報とは?

entrepreneur 593378 640 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

ただし、デザインでユーザに強い印象を与えることも重要ですが、「ユーザが知りたい!」と思っている情報が載っていなければ意味がありません。

ユーザが価値を感じてくれなければ、そのWebサイトは再び見てもらえる可能性は非常に低いです。

だからこそ、トップページで載せるべき情報の取捨選択は重要になってきます。ここでは、トップページを作る際に考えるべき5つのことについて紹介します。

1.何のサイトなのか?

まず、「パッと見て何のサイトなのか」わかるようにすることが必要です。

例えば、企業のサイトであれば企業のロゴや、企業が提供しているサービスが目につくところに載せることなどです。

ここで重要なのが、ユーザに一瞬でも考える隙を与えないことです。考える隙ができてしまうと、ものすごいファンでない限りそのページをすぐに閉じてしまいます。

2.何を提供しているのか?

提供しているサービスはどんなものか、何のためのサイトなのかを明確に伝えます。

例えば、フリーで働いているWebデザイナーの方であれば、自分の存在やスキルを知ってもらい、仕事の依頼を増やすことが目的になるかもしれません。

目的は何でも良いですが、ユーザに対して簡潔に伝えることが重要です。企業名やロゴの隣に提供するサービスを一文程度でまとめて簡潔に伝えると良いでしょう。

3.どんな情報が掲載されているのか?

サイトの構成は多種多様です。シンプルで文章をできるだけ少なくしていることやページ数や情報量が非常に多くなっていることもあります。

シンプルなデザインであれば、ユーザが求めているページには行きやすいかもしれません。ですが、情報量が多いページのときを考えてみてください。

情報量が多いと、ユーザがパッと見て一瞬で必要な情報を見つけることは難しいです。

だからこそ、メニューやナビゲーションを設置してユーザが求めている情報にスムーズにたどり着くようにする配慮も必要になります。

メニューの項目やその配置にも気を配りましょう。メニューがせっかくあっても、わかりにくい位置にあったら意味がありません。

4.どんな特徴があるのか?

サイトのデザインを通して企業や自分をアピールしていきましょう。このデザイン1つが変わるだけでもユーザに与える印象は大きく変わります。

ユーザに強い印象を与えるためにはどのようなデザインにする必要があるのか考えてみましょう。

デザインを考える1つの手段としては、フォントのスタイルや配色、アイコンが挙げられます。

5.次へのステップがわかりやすくなっているか?

トップページの情報を一通り読んでくれたユーザを、次のページに誘導していくことを考えてみましょう。

次のページに良い情報が載っていたとしても、次のページに誘導するための行動喚起がされていなければ、すぐにそのページを閉じてしまいます。

例えば、「次のページへ」や「お問い合わせはこちら」などのボタンやリンクを設置しましょう。

このボタンやリンクの位置としては目につきやすく、クリックしやすい場所に配置することがポイントになります。

2ページ目の作り方は?

to think about 1722755 640 - wordpressでデザインを自作する方法とかっこいいトップページの一覧

トップページでは、ユーザに強い印象を与え、行動喚起をして次の行動に移ってもらうことを意識して作っていきます。

そのため、ユーザは期待して2ページ目を開いてくれることが多いです。

しかし、そこで求める情報が載っていなかったり、内容が薄かったりすれば、すぐにページを閉じてしまいます。

ユーザにしっかりと呼んでもらうためには、トップページ以上にユーザへの配慮が必要になります。

例えば、次のようなことが挙げられます。

  • 文章が多くなる分、画像も多めに入れていくこと
  • 画像を入れてイメージしやすくする
  • 「どこからどこまでがどんな内容になっているか」を明確にする

画像を入れることで、どんな内容が書かれているのかイメージしやすくなり、内容も頭に入りやすくなります。

また、「文字ばかりが載っている」というマイナスイメージを少なくすることができるので、読んでもらいやすくなります。

トップページの参考になるトップページギャラリーとは?

ここで、トップページの参考となるギャラリーサイトを紹介します。

「かっこいいデザインが思い浮かばない…」「ユーザに印象を与えるデザインがよくわからない…」と悩んでいるあなたもこのサイトを見て参考にしてみましょう。

今回は日本のギャラリーサイトと海外のギャラリーサイトを分けていくつか紹介します。

日本版

1.MUUUUU.ORG

muuuuu - wordpressでデザインを自作する方法とかっこいいトップページの一覧

http://muuuuu.org/

デザイン別、色別などとカテゴリ分けがされているので、検索がしやすくなっています。

2.ウェブ・ファインダー

finder - wordpressでデザインを自作する方法とかっこいいトップページの一覧

http://w-finder.com/

こちらも細かくカテゴリわけがされているので、目的に合わせた検索ができます。

3.週刊ウェブデザイン

webdesign - wordpressでデザインを自作する方法とかっこいいトップページの一覧

http://www.dailywebdesign.com/

こちらのサイトは、毎週追加サイトが追加されています。毎週追加されているので、非常に量が多いです。

海外版

1.AWWWARDS

awwwards - wordpressでデザインを自作する方法とかっこいいトップページの一覧

https://www.awwwards.com/

ギャラリーのユーザの投稿によって、掲載されているサイトの評価が決まるのが特徴的なサイトになります。

2.Admire The Web

admiretheweb - wordpressでデザインを自作する方法とかっこいいトップページの一覧

https://www.admiretheweb.com/

シンプルなデザインのサイトになっていて、ギャラリーそのものがわかりやすくなっています。

3.Siiimple

siiimple - wordpressでデザインを自作する方法とかっこいいトップページの一覧

https://siiimple.com/

このサイトは、更新頻度が高く、常に新しいデザインを閲覧することができます。

WordPressのデザイン、かっこいいトップページに関するまとめ

以上になりますが、今回はWordpressのデザインや、かっこいいトップページの作り方を中心にお伝えしました。

トップページの印象が変わるだけでも、多くのユーザに訪れてもらいやすくなります。

最後に紹介したサイトを参考に、ユーザの印象に残るようなトップページを作ってみてはいかがでしょうか?

最後まで読んでいただき、ありがとうございました。