これで決まり!WordPress(ワードプレス)のおしゃれデザインテーマ7選

こんにちは! ライターのナナミです。

WordPress、ブログもサイトも作れてとっても便利ですよね。
しかも難しいコードを書かなくても、素敵なデザインのテーマがたくさんあります。

でもいっぱいありすぎてどれがいいのかわからない…
せっかくだから流行りのデザインにしたいけど、今の流行りってなんだろう…

そんなお悩みをサクッと解決!
今回は数あるテーマの中から、2018年のデザイントレンドにぴったりなテーマをご紹介します。

この記事は下記の流れで進めていきます。

【基礎】そもそもテーマって何?
【基礎】2018年のデザイントレンド
【基礎】2018年おすすめテーマ7選
【おまけ】自分でデザインしてみよう

おまけで自作デザインについてもちょっとだけ解説しちゃいます。

2018年もとうとう折り返し。
しっかりトレンドを把握していきましょう。

目次

そもそもテーマとは?

テーマを紹介する前に、そもそもテーマとは何かについてさらっとおさらいしておきましょう。

テーマとは、WordPressのデザインテンプレートのことです。
有料のものから無料のものまで、個人作成から企業作成のものまで、様々なテーマが配布されています。

テーマにはすでにブログの表示機能やデザインが実装されています。
難しいコードを書かなくても素敵なサイトやブログができちゃうなんて素敵ですね!

そんなテーマの設定方法については、下記の記事をどうぞ。
https://techacademy.jp/magazine/1371

2018年のデザイントレンドは?

近年はかなりシンプルなデザインがトレンドで、2018年も例に漏れずシンプル系がトレンドの傾向があります。

wp_design1

シンプルと言っても文字と背景だけというより、がちゃがちゃとアイコンなどを配置しないという感じです。
その分、写真や文字をダイナミックに使って、インパクトを持たせていたりします。

まとめると下記のような感じです。

・シンプル
・写真を大きく使う
・動きをつける
・幾何学模様
・タイポグラフィ

詳しい解説は下記の記事がまとめてくれています。
https://ferret-plus.com/8641

WordPressのおしゃれで無料なテーマ7選

では、トレンドを踏まえて今おすすめのテーマを紹介していきましょう。

今回紹介していくテーマは、なんとすべて無料です。
無料でも素敵なものがたくさんありました!

ぜひプレビューなども見てみてくださいね。

スタンダード系:Hestia

WordPress.org
Hestia Hestia はプロフェッショナルのための現代的な WordPress テーマです。クリエイティブ業界や中小規模の企業 (レストラン、ウェディングプランナー、スポーツ、薬局)、スタ...
レスポンシブ対応:有り
SEO最適化:済み
ドキュメントhttps://docs.themeisle.com/article/753-hestia-doc

メインビジュアルにダイナミックに写真を載せられるテーマです。
最近よく見るデザインですね、かなり汎用性が高いと思います。

シンプル&ナチュラル:Cenote

WordPress.org
Cenote Cenote は美しく設計されたクリーンな WordPress ブログ用のテーマです。セットアップが簡単で、ウェブサイトを際だたせるための機能があります。このテーマは、個人サイト...
レスポンシブ対応:有り
SEO最適化:済み
ドキュメントhttps://docs.themegrill.com/cenote/

すっきりシンプル、そしてナチュラルな雰囲気のテーマです。
写真次第ではもっとキリッとさせられそうですね。
こちらも汎用性の高いデザインです。

ザ・スタイリッシュ:Oblique

Obliqueに関する補足事項
2023年5月時点、公式サイトにアクセスできないため、掲載を割愛させていただきます。

スッキリ写真映え:Hamilton

WordPress.org
Hamilton Hamilton はクリエイターのためのきれいなポートフォリオ用 WordPress テーマです。2〜3列に設定可能な美しい画像グリッド内に投稿を表示するので、ポートフォリオ用テーマ...
レスポンシブ対応:有り
SEO最適化:不明
ドキュメント:無し

シンプルなポートフォリオ向きのテーマです。
スッキリしていて写真が映えますね!

グリッドレイアウト:Orvis

WordPress.org
Orvis Orvis is a portfolio theme crafted with designers and photographers in mind. It's a minimalist, powerful, and flexible theme that puts the focus on your project...
レスポンシブ対応:有り
SEO最適化:不明
ドキュメントhttps://wordpress.com/theme/orvis

グリッドレイアウトなポートフォリオサイト向けのテーマです。
写真が並んでいるだけでも、こんなにおしゃれになるんですね。

ポップでキュート:One X

WordPress.org
One X One X is a child theme of oneline-lite, This theme is suitable for creating almost any type of website, we have added cloud effect in this theme to make unique....
レスポンシブ対応:有り
SEO最適化:済み
ドキュメントhttps://themehunk.com/docs/oneline-lite-theme/
※このテーマはOneLine Liteというテーマの子テーマなので、親テーマのドキュメントを紹介しています。

ちょっと可愛らしくポップな感じのテーマです。
おしゃれにはしたいけどカッチリし過ぎるのは…という人におすすめ!

究極のシンプル:Skil

WordPress.org
Skil Skil は、ブロガーのためのシンプルなテーマです。
レスポンシブ対応:有り
SEO最適化:不明
解説サイト:無し

シンプルデザインの究極系、文字だけで構成するブログ用テーマです。
もうここまで飾り気がないのが逆におしゃれ!

おまけ 自分でデザインしてみよう

確かに素敵なテーマがいっぱいあるけど、自分の好みじゃない…
自分のイメージ通りのサイトを作りたい!

というようなこだわりの強い方は、テーマ選びもなかなか難しそうですね。

しかしそのこだわりは大事です!
やっぱり作るなら自分好みのサイトを作りたいものです。

そこでちょっとレベルアップしちゃいましょう。
自分でテーマを作って、自分好みのサイトを作る方法をちらっと解説していきます。

自作テーマ作りに必要な知識

テーマを一から自分で作るには、デザインの知識だけではなく、HTMLCSS、そしてPHPの知識も必要になってきます。
そう考えると、なかなかハードルが高いですよね…

でも、これらのプログラミングは覚えてしまえばいろんなことができるようになっちゃいます
この機会に覚えてみるのもよいのではないでしょうか?

そんなプログラミング初心者さんにオススメの記事はこちら!
>>HTML・CSSってどう書くんだろう…という疑問に答える記事
>>PHPって何?どんなことができるの?を教えてくれる記事

自作テーマの作り方

WordPressのテーマは、最低でも下記のファイルが必要です。

・index.php
・functions.php
・style.css

この3つのファイルを作成して、ひとつのファイルにまとめましょう。
ファイル名は英数字ならなんでもOKです。

wp_design9

このファイルを、wp-contentフォルダ内にあるthemesフォルダにほいっと入れておきます。

wp_design10

この状態で管理画面のテーマ一覧を見ると…

wp_design11

先ほど作ったテーマが表示されていますね!

この状態で、ファイルの中身をどんどん書いていけばテーマが作れちゃうというわけです。

中身の書き方などについては、今回は割愛します。
詳しくは本や記事で調べてみてください。

デザインをするときのポイント

WordPressのサイトデザインは、普通のサイトデザインよりちょっとだけ注意点があります。

これは、WordPressがCMS、つまり記事を投稿できるアプリであるからこその注意点です。

・記事部分など、高さや幅が変化する可能性があることを意識する
・文字の量が一定にならない可能性を考慮する
・画像の大きさによって崩れたりしないよう注意する

この点にさえ気をつけていれば、あとはいつも通りのWEBデザインでOKです。
文字数や画像サイズが一定ではない、と覚えておきましょう!

見出しとかの細かい部分をどうするか悩んでるんだよなぁ…
という方は、下記の記事も併せて読んでみてください。

>>2018年はこれで決まり!見出しデザインパターン

まとめ

いかがでしたか?

せっかく作るサイトやブログ、超おしゃれにできたら嬉しいですよね。
この記事が、そんな制作作業の参考になれば幸いです。

ぜひ素敵なサイトやブログを作って、素敵なWordPress生活を送ってくださいね!

この記事を書いた人

侍エンジニアは「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。

目次