【コピペOK】ニューモーフィズムを簡単にCSS実装できる便利な無料サイト！見た目で調整するだけ！

2020/02/16 2020/02/16

#FC2ブログ #ブログ #ブログカスタマイズ #ブログ運営 #ウェブデザイン #ニューモーフィズム #Neumorphism.io #ブログ日記 #マテリアルデザイン #便利ツール

こんにちは! FC2ブロガーのM（@yulari_happy ）です。

最近のウェブデザインは、Neumorphism（ニューモーフィズム）というものが流行っているそうです。

これは、New（新しい）とSkeumorphism（スキューモーフィズム）を組み合わせた造語で、「新しいスキューモーフィズム」という意味。現実のものらしく、リアルに模様したスキューモーフィズムとはまたひと味違った立体感のあるデザインを指してこう呼ぶとのこと。

スキューモーフィズムとは？

スキューモーフィズム（skeuomorphism）とは、他の物質に似せるために行うデザインや装飾のことで、（中略）
ユーザに馴染みのないものの外見を、馴染みのあるものにすることにより理解を促進するために使われる。
引用：スキューモーフィズム – Wikipedia

簡単に言うと、ニューモーフィズムとは、背景の一部が手前に突き出ているようなスタイルを2種類の影を組み合わせて表現する新しいデザイン手法です。

言葉ではチンプンカンプンという人のために、今回はコピペで簡単にニューモーフィズムが実装できる無料オンラインサービスをご紹介します。

スポンサードリンク

ニューモーフィズムなCSSスニペットがコピペで簡単に実装できる無料サイト

CSSスニペットをコピペして簡単にニューモーフィズム・エフェクトを表現できればとても便利ですよね。

実は、そんな便利なことが出来てしまう無料オンラインサービスがあるんです。

実際に僕自身も使ってみて、とても便利なサイトだと思いました。

僕みたいにほとんどWebテクのない人間でも、このオンラインツールを活用すれば簡単にニューモーフィズムをブログに導入できますよ。

以下、ざっくりではありますが、簡単にサイトや使い方を説明していきます。

ニューモーフィズムの無料オンラインサービス「Neumorphism.io」

ニューモーフィズムをウェブサイトやブログに導入したい時は、CSSコードがコピペ可能な無料オンラインサービス「Neumorphism.io」がおすすめです。

Neumorphism.ioは、影や凹凸感を画面上でスライダーを調整しながら作成できます。

見た目でニューモーフィズム・エフェクトを調整できるうえ、CSSコードをそのままコピペして使えるというのですから凄いですよね！

Neumorphism.io の使い方

調整可能な各項目を簡単に説明すると、以下の感じになります。

①Size：画面に表示されている要素のサイズを調整できます。なお、選択した幅などがCSSコードに反映される訳ではありませんが、要素の幅に対応した影の広がり具合を見ながら調整するのに役立ちます。
②Radius：角丸を調整します。
③Distance：影の長さを調整します。
④Intensity：影の強さを調整します。
⑤Blur：ぼかし具合が調整できます。
⑥Shape：⑦の形状を選択
⑦→凸凹感を「Flat（平らな）」「Concave（凹面）」「Convex（凸面）」「Pressed（押された）」の4種類から選べます。

Neumorphism.io の使い方として必要な説明箇所は以上になります。まあ、言葉で理解するよりも実際にサイトの中で弄ってみるのが分かりやすいと思いますよ。

スポンサードリンク

僕のFC2ブログ『ゆうらりHappySmile』にニューモーフィズムを実装してみた

実際に、Neumorphism.ioを使って僕のFC2ブログ『ゆうらりHappySmile』にニューモーフィズムを実装してみましたよ。

ニューモーフィズムを導入したのは、個別記事ページの記事タイトルです。実は以前、僕がお世話になっているFC2ブログテンプレート製作者のAkiraさんから「記事タイトル周辺が見づらい」とアドバイスを賜りました。

た、たしかに！記事タイトル上下にはGoogle AdSenseの広告を貼っていますからまるでインパクトに欠けていますよね（汗）

そこで、記事タイトルにニューモーフィズムなデザインを実装してみました。

やり方は簡単。Neumorphism.ioであれこれとスライダーさせながら、これ！と思ったところでCSSコードをコピー。

そして、スタイルシートにある「#entry-title」の1番後ろに貼り付けただけで完了しました。

記事タイトルをニューモーフィズムにした結果は下の画像をご覧下さい。

や、やけにインパクトのある記事タイトルへと変貌を遂げたのでした！！

まとめ／ブログのどこでも何でもニューモーフィズムに実装できる

今回は、コピペで簡単にニューモーフィズムが実装できるNeumorphism.ioの使い方をご紹介しました。

Neumorphism.ioを使えば、ウェブサイトやブログの好きな箇所にどこでも何でもニューモーフィズム・エフェクトを実装することが出来ますね！

興味がおありの方はぜひ挑戦してみて下さい。

この記事、おもしろかったわ。
さすがに他の似た記事ないわよねぇ…

あるよ。（田中要次風）
下の「検索」ボタン押してみてや。

【ブログのリライト方法】Googleで検索上位に表示させるためのやり方について説明します！

こんにちは! FC2ブロガーのM（@yulari_happy ）です。ブログを運営してますと「このキーワードで絶対1位を取ってやる！」とか「Googleで検索上位に入りたい！もっと検索順位を上げたい！」など、ブロガーなら誰でもこう思っていませんか？FC2ブログ『ゆうらりハッピースマイル』をやっている僕も、よくそんなことを考えたりします。そこで、狙ったキーワードをGoogleの検索上位に表示させるため、様々なSEO対策を行なっているわけ...

無料で使えるSEO対策ツールの便利な使い方　ブログやサイトのSEO情報を解析できる！

こんにちは! FC2ブロガーのM（@yulari_happy ）です。ウェブサイトやブログの運営をするうえで、SEOは僕たちブロガーにとって切っても切れない関係かと思います。ブログへのアクセス数アップを目指しつつ、GoogleアナリティクスやFC2アクセス解析などの解析ツールをチェックしながら、SEOにつながるさまざまな工夫や努力を重ねている方も多いはず。そんな中、ブロガーにとっては朗報ともいえる画期的なSEO対策ソフトが提供開始され...

ブログの書き方： SEO・アクセスアップの敵“重複コンテンツ”簡単な対策方法は？

こんにちは! FC2ブロガーのM（@yulari_happy ）です。僕がこのFC2ブログ『ゆうらり Happy Smile』を開設してから早いもので6年6ヶ月を迎えました。これまでコツコツとブログを書き続けてきた甲斐もあってか、ブロガー歴に比例する形で記事数についてもかなりのボリュームとなり、今回のブログ更新が10,372記事となります。ブログを始めた当初は右も左も分からずに書いていたのだけれど、今では1記事1記事がアクセスアップへと繋が...