スライドショースライドショースライドショー

これで決まり!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

wp_design2
https://ja.wordpress.org/themes/hestia/

レスポンシブ対応:有り
SEO最適化:済み
ドキュメントhttps://docs.themeisle.com/article/753-hestia-doc

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

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

wp_design3
https://ja.wordpress.org/themes/cenote/

レスポンシブ対応:有り
SEO最適化:済み
ドキュメントhttps://docs.themegrill.com/cenote/

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

ザ・スタイリッシュ:Oblique

wp_design4
https://ja.wordpress.org/themes/oblique/

レスポンシブ対応:有り
SEO最適化:済み
ドキュメントhttps://docs.themeisle.com/article/294-oblique-documentation

斜めの要素がスタイリッシュなテーマです。
メインビジュアルだけでなく、下のコンテンツも斜めになっていてかっこいいですね。

スッキリ写真映え:Hamilton

wp_design5
https://ja.wordpress.org/themes/hamilton/

レスポンシブ対応:有り
SEO最適化:不明
ドキュメント:無し

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

グリッドレイアウト:Orvis

wp_design6
https://ja.wordpress.org/themes/orvis/

レスポンシブ対応:有り
SEO最適化:不明
ドキュメントhttps://wordpress.com/theme/orvis

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

ポップでキュート:One X

wp_design7
https://ja.wordpress.org/themes/one-x/

レスポンシブ対応:有り
SEO最適化:済み
ドキュメントhttps://themehunk.com/docs/oneline-lite-theme/
※このテーマはOneLine Liteというテーマの子テーマなので、親テーマのドキュメントを紹介しています。

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

究極のシンプル:Skil

wp_design8
https://ja.wordpress.org/themes/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のサイトデザインは、普通のサイトデザインよりちょっとだけ注意点があります。

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

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

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

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

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

まとめ

いかがでしたか?

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説