はてなブログテーマNeumorphismを公開しました！

どうも！フジグチです！

当サイト製作のテーマ【Cappuccino】公開から1ヶ月が過ぎ、289インストール（※2021/1/5時点）でありがたいことに、「人気のテーマランキング」にも入るなど多くの方々に使って頂いています。

Cappuccino公開からスパンは短いですが、もう1つテーマを公開したのでお知らせいたします。

今回私がテーマを作った理由は、はてなブログのこの記事を読んだからです。

デザインテーマコンテストが開催され表彰されればギフト券が貰え、最大100名の参加者にCanva Proの無料クーポン（3ヶ月分）がもらえるという、イベントのお知らせでした。

偶然にもCappuccinoは12月3日に公開しているので、参加賞が貰える！と喜んでいたのですが、テーマの募集期間は12月25日～となっておりその前の投稿は無効になると。

マジすか。。。タイミング悪過ぎないですかね。。。

じゃあ「Cappuccinoをちょっといじって投稿しよう」とも思うのですが、

ーー既存のテーマの少しの改変は無効とします。

マジすか。。。

ありきたりなテーマを作っても面白くないけど、アイデアが浮かばない。。。

…詰んだ。。。

と思っていたのですが、２歳の娘のある一言がきっかけでアイデアが浮かんだので、思い切ったデザインのテーマを作成しました。

f:id:utoutosara:20210104002353p:plain

ニューモーフィズム
特徴
こだわったところ
テーマのインストール
あとがき

ニューモーフィズム

今回製作したテーマはニューモーフィズムのテーマ【Neumorphism】です。

「ニューモーフィズム」とはリアルな質感にこだわった「スキューモーフィズム」というデザインに、フラットデザインを合わせたような新しいデザイン。

New（新しい）＋Skeumorphism（スキューモーフィズム）からきた造語です。

その最たる特徴は「要素を浮かせる」のではなく、「凹凸を表現する」ということです。

日産のCMの最後に登場する、赤い背景に浮き出ているNISSANのロゴを見たことはないでしょうか？

あれもニューモーフィズムです。（だと自分は思っている）

デモサイトを使って凹凸を表すbefore、afterのgif画像を作ったので、見てください。

ニューモーフィズムデザインの特徴

左上に明るいシャドウを配置し、右下に暗いシャドウを落として凸型を表現します。

明暗の方向を逆にして、インセットシャドウを使うと凹型になります。

特徴

このテーマについての特徴を紹介します。

グローバルナビゲーション

グローバルナビゲーションが設置できます。

テーマにCSSが予め組み込まれているので、デモサイト内にある「グローバルナビゲーションの設置方法」の記事内にあるHTMLを入れていただくことで、すぐにお使いいただけます。

マウスオーバー時のエフェクト

凹凸を表現しているのでマウスオーバー時のエフェクトもこのようになります。

グローバルナビゲーション

グローバルナビゲーションのマウスオーバー時のエフェクト

サイドバー

サイドバーマウスオーバー時のエフェクト

ボタンフェチの方は、思わず押したくなるような感じになっています。（笑）

カラーの変更

Cappuccinoと同じようにカラーの変更が簡単に出来ます。

背景色と影のみで表現しているので、3色のカラー変更で雰囲気をガラッと変えられます。

/***デフォルト値***/
:root {
    --theme-color: #e9edf0;/***背景色***/
    --shadow-darkcolor: #c6c9cc;/***シャドウ１（暗）***/
    --shadow-brightcolor: #fff;/***シャドウ２（明）***/
}

上のコードをデザインCSSに入れて、#6桁の英数字の数値を変えることで、テーマ全体のカラーが変更出来るようになっています。

しかし、自分でニューモーフィズムの配色を考えるのは大変だと思います。

そこでこのジェネレーターを利用します。

このテーマを作る際にも、配色の参考に重宝させていただきました。

背景色ピンク

/***ピンク***/
:root {
    --theme-color: #f9c8c8;/***背景色***/
    --shadow-darkcolor: #d4aaaa;/***シャドウ１（暗）***/
    --shadow-brightcolor: #ffe6e6;/***シャドウ２（明）***/
}

テーマNeumorphism着せ替えピンク

背景色ライトグリーン

/***ライトグリーン***/
:root {
    --theme-color: #b2d7cd;/***背景色***/
    --shadow-darkcolor: #97b7ae;/***シャドウ１（暗）***/
    --shadow-brightcolor: #cdf7ec;/***シャドウ２（明）***/
}