ゼロから始めるWordPress自作テーマ #13「ニューモフィズム風にしよう」
WordPress
「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。
WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。
第１３回は「ニューモフィズム風にしよう」です。
今回は、ニューモフィズムという少し前に話題になったデザインを参考に見た目を整えます。
もくじ
完成形
今回の完成形は以下のようになります。
完成形のコードは以下から取得可能です。
ニューモフィズムとは
スキューフォニズム、フラットデザインという流れの次に来ると（一部で）言われていたのが、ニューモフィズムでした。フラットデザインのシンプルさを保ちつつ、フラットデザインが苦手としていた「どこが触れるかが分かりにくい」問題を凹凸の表現で解決できるということで、注目されていたように思います。
一方で、表示するUIが多い場合にごちゃごちゃとした印象になる、ダークカラー時の凹凸表現が難しいなど、汎用的なデザイン手法として扱いにくい点もあります。結果的に、流行りっぽい印象のデザインになってしまったなぁという印象です。
とはいえ、白ベースでUI要素が少ないようなケースにおいては、ニューモフィズムのメリットが多いです。
今回のWordPressサイトは、シンプルかつ白ベースなので、ニューモフィズムの要素を取り入れてみます。
ニューモフィズムの取り入れかた
おしゃれな凹凸の見た目だけを取り入れても意味がありません。ルールに沿って取り入れることで、ニューモフィズムの恩恵を受けることができます。
今回のこのサイトでは「ボタンやリンクなど、操作対象のものに対して、凹凸表現する」というルールに沿って、ニューモフィズムを取り入れることにします。
ボタンをニューモフィズム化する
Webサイトをニューモフィズム化するのはとても簡単です。cssで影の表現を書くだけです。
今回は、以下のサイトを参考にcssを取り入れました。
ボタンは以下のような見た目にします。
ボタンの通常状態
ボタンの角を丸くして、影をつけるます。影でボタンを浮かせるため、ボタンと背景を同じ色にします。
.btn {
// 中略
border-style: none;
border-radius: 5px;
box-shadow: 3px 3px 5px #bebebe, -3px -3px 5px #ffffff;
color: dimgray;
background-color: whitesmoke;
}ボタンのホバー状態
カーソルがボタンに乗ったときに、少しボタンを凸を小さくします。影を少し狭くすることで凹みを表現します。
.btn:hover {
box-shadow: 1px 1px 3px #bebebe, -1px -1px 3px #ffffff;
}ボタンのアクティブ状態
ボタンを押し込んだときには、ボタンを凹ませます。inset で反対側に影を付けて、凹みを表現します。
.btn:active {
box-shadow: inset 1px 1px 3px #bebebe, inset -1px -1px 3px #ffffff;
}ヘッダーをニューモフィズム化する
ヘッダーのリンクも同様にニューモフィズム化します。
記事もニューモフィズム化する
記事部分は、画像やタイトルやカテゴリなどのリンク部分が重なっています。それぞれのリンクに対して、凹凸をつけてしまうとゴチャゴチャした印象になってしまいます。そこで、記事ごとに１つのかたまりとして凹凸させるようにしてみました。この辺りの表現は、より適したデザインがあるかもしれません。
まとめ
今回は、WordPressサイトをニューモフィズム化してみました。私はデザイナーではないので、クオリティは微妙ですが、簡単にそれっぽい見た目にすることができたように思います。そして、シンプルなサイトにニューモフィズムはとても合いますね。
次回は、検索フォームを作成します。