フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

\おすすめのカスタマイズ/

はてなブログの新しいテーマNeumorphismを公開しました!

どうも!フジグチです!

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

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

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

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

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

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

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

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

マジすか。。。

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

…詰んだ。。。

 

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

f:id:utoutosara:20210104002353p:plain

ニューモーフィズム

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

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

New(新しい)+Skeumorphism(スキューモーフィズム)からきた造語です。

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

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

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

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

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

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

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

特徴

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

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

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

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

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

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

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

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

 

サイドバー

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

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

カラーの変更

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

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

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

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

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

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

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

背景色ピンク

/***ピンク***/
:root {
    --theme-color: #f9c8c8;/***背景色***/
    --shadow-darkcolor: #d4aaaa;/***シャドウ1(暗)***/
    --shadow-brightcolor: #ffe6e6;/***シャドウ2(明)***/
}

テーマNeumorphism着せ替えピンク

 

背景色ライトグリーン

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

テーマNeumorphism着せ替えライトグリーン

 

ジェネレーターを使うと、こういったカラーへの変更が簡単に出来ます。

注意暗い色はテキストが見えなくなるので注意してください。

使い方は説明不要なほど簡単で、カラーパレットを開いてスライダーでお好きな背景色を選ぶと、その背景色に合ったシャドウの色を自動で生成してくれるので、それをコピーしてデフォルト値のコードに入れるだけです。

Neumorphismジェネレーター使用方法

迷わないように、ジェネレーターとデフォルト値のコードは同じ並びにしてあります。

大幅に変えなくても、デフォルトカラーよりもう少し明るい(暗い)背景色にしたい場合も、微調整がしやすいので好みで調整することも出来ます。

Cappuccinoとコードの共有が出来る

テーマCappuccinoでは「グローバルナビゲーション」「シェアボタンの設置」「おすすめ記事の設置」のためのCSSが予めテーマに組み込んであります。

テーマCappuccinoを使用されている方には「ヘッダ」や「記事下」「サイドバー」にHTMLを入れて、カスタマイズしている方もいらっしゃいます。

テーマの変更時にはデザインCSSは破棄されますが、HTMLは残ります。

同じHTMLでニューモーフィズムに対応したデザインに変わるCSSをこちらのテーマにも入れてあるので、Cappuccinoからテーマ変更される際はテーマのインストールのみで、デザインが崩れることはありません。

注意デザインCSSにコードを追加している場合は、破棄されますので注意してください。バックアップを取りましょう。

正直CappuccinoからNeumorphismに乗り換える方は少ないと思いますが、携帯のMNP特典ならぬNMP(NeuMorPhism)特典として、製作者が同じテーマを選ぶメリットとしています。

一番はコードを書く量が減るというこちらのメリットですが。(小声)

ミニマルな雰囲気になる

他にも特徴を挙げると、背景色と影のみで作るので色数が少なくて済み、洗練されたデザインでミニマルな雰囲気になります。

ミニマルを好む方にも合うかもしれません。

こだわったところ

ニューモーフィズムが少し前からトレンドになると言われていても、なかなかトレンドになれない一番の理由としては、ユーザビリティが良いとは言えないからです。

影のみで凹凸を表現するため、全ての方に意図したデザインとして伝わるかどうかが問題点として挙げられます。

そこで凹凸の表現以外に、重要度の高いリンクはデザインの印象を崩さない色で枠線を付け、マウスオーバー時にテキスト色を変える。

異なるボタン同士が近くに配置される場合は、形を変え凹凸の高さを変える。

というようにして、少しでもユーザビリティが損なわれないようにしています。

テーマのインストール

少しでも気になった方は、テーマストアにてインストールしてくださいね。

マウスオーバーエフェクトでボタンをポチポチするために、インストールしてみるのも良いかもしれません(笑)

デモサイトはこちらです。

インストールはこちらから▽

あわせてCappuccinoもどうぞ▽

あとがき

このテーマを思いついたのは、娘が食卓でポン酢を見ながら「リボン可愛いね」とニコニコしていたので、何のこと?

とポン酢を見回してみるも意味が分からず、もう一度聞いて見ると教えてくれたのがこの部分。

テーマを作るきっかけのポン酢

確かにリボンに見えるーーーー!!!www

と同時に【ニューモーフィズム】だっ!とビビビッときたのがきっかけです。(笑)

いやー、2歳にしてニューモーフィズムを教えてくれるとかウチの娘天才だな。(親バカ)

トップへ戻る