【ニューモーフィズム(Neumorphism)風】WordPressのデザインテーマ/デザインレシピ本【ナチュラル】近日リリース!

WrodPressのデザインテーマ【ナチュラル 】を作成しています。ホワイトストーンとアイボリーペーパーの2種類を使えるテーマです。

このテーマの特徴は既存の無料テーマ、有料テーマ問わずデザインのみ適用するものです。CSSのデザインレシピ集だからです。

ホワイトストーンのWebデザイン(ニューモーフィズム風凹みも再現)

アイコンは自由自在に変えられるテンプレートを用意しました。数字(文字)も特徴的です(もちろん数字はカスタマイズして消してもOKです)。

(開発中です。近日更新予定)

アクションボタンもあります。

光の影の凹凸感、白い色調の静かなWebデザインです。純白に少しグレーが入った色合いが入った落ち着く色合いになっています。ポイントポイントにベタなグラデーションを入れることにより、UIはおしゃれで見やすいものにしました。

ファイル名が記入できるコードブロックもあります。

(追記)現在、β版として作成中ですがアップデートしました。

見出しです。

ナチュラルのサイドバーは木目調になっています。ホワイトストーンを組み合わせても、冷たい印象にならないように、サイドバーは木目調にしました。

ニューモーフィズム(英語でNeumorphism)のデザインが流行してため、その流れにのった感もありますが、もともと、西洋の石膏像、白いMacbook、白い家具などに囲まれた白の空間が好きなため、このデザインを一度作ってみたかった思いがあります。

昔、美術学生をやっていたとき、白のデザインはやったことあったため、その経験は多少いきましたかね。

アイボリーペーパーのWebサイト

アイボリーの優しい紙質に、ピンク、ブルー、グリーン、バイオレット、オレンジなどの色調が織りなすものになっています。ふせんやノートなど紙っぽいアイテムをそろえました。

木と紙の組み合わせもナチュラルな感じではないでしょうか。

(近日公開予定)

グローバルメニューのCSSアニメーション

CSSのみで動作するグローバルメニューアニメーションのTipsもおつけします。

完成版のデモです。

ステップ1です。パターンと倒れるグローバルメニュー になります。調整すればこの方法だけでもいいかもしれません。

ステップ2です。バラバラに回転するものに切り替えました。

ステップ3です。完成版のデモと同じものです。

CSSのデザインレシピ集は技術書として作り方を解説(コピペCSSファイルも付属)

このテーマはCSSのデザインレシピ集の技術同人誌として提供する予定です(せっかくCSSの本なので電子書籍もCSS組版で作成中です)。すでにWordPressのテーマは優秀なものがいろいろとありますからね。管理画面やPHPは他のテーマにお任せします。少し切り口を変えた新しい事例・実例になればいいなと思います。

CSSやデザインの勉強もできますし、コピー&ペースト用のCSSファイルも用意します。特定のテーマに依存せず、無料テーマなどと組み合わせて使える使い勝手がよいものにするつもりです。

色や形は個人的な好みがかなり反映されているため、好きにチョイスしなおしてもらってもかまいませんし、そのまま使ってもらってもかまいません、

対象者

- WordPressユーザーでコピー&ペーストカスタマイズができるブロガー
- 無料テーマを使っているが、少しデザインもテコ入れしたい人
- 有料テーマを使っているが、実はCocoonが使いやすい人
（注）ただし書籍のためサポートはしてないためCSSの初歩的な理解があると望ましいです。もしくは周囲に聞ける人がいる人
- 初心者デザイナー
- CSSの初中級者
- そのほか、興味を持ってくれた人

デメリットはまったくCSSがわからない人はトラブル時に誰かに教えてもらわないといけません。

もしかしたら、エンジニアさんはデザインが参考になるかもしれませんし、デザイナーさんはプログラミングを参考になるかもしれません。

中身
デザイン4割、Html/CSSのプログラミング5割（JavaScriptは利用していません）、その他プラグインの紹介、ブログ運営のTipsなど1割程度です。

ブロガー歴は10年越えです。

検証環境
CodePen、無料テーマCocoon
Twentyのテーマは誰も使っている人がいないだろうということで、無料テーマで最も利用者が多いだろうCocoonで動作確認しています。

ただし、ただのデザインのスタイルシート集です。少し指定方法は異なる可能性がありますが、ほかのWordPressのテーマでもカスタマイズすれば、もちろん利用できます。

β版とリリースして必要に応じて加筆していく形式をとる予定です。この記事もざっくりとした駄文のため、必要に応じてブラッシュアップします。では、お待ちください。