Advertisement

neumorphism-thumbnail-1

 

2019年末ごろより見かけるようになった、「ニューモーフィズム(英: Neumorphism)」。「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザインのようなシンプルさを組み合わせた新しいスタイルです。

 

skeuomorph-mobile-banking
Neumorphism(ニューモーフィズム)は、昨年末ごろより新しいデザイントレンドになるのではと話題となっている新しいデザイン手法です。 この記事で

 

今回は、ニューモーフィズムを人気定番CSSフレームワークBootstrapで再現し、200種類のUIコンポーネントを揃えたHTMLテンプレートNeumorphism UIをご紹介します。

 

ウェブサイトやアプリ作成に必要なコンポーネントが一式揃っており、各種ページデザイン5種類も収録しています。これから、ニューモーフィズムをつかったサイト制作を考えていたひとは、活用してみてはいかがでしょう。

 

 

ニューモーフィズムをBootstrapフレームワークで再現した、無料UIコンポーネント200個セット Neumorphism UI

 

Neumorphism UIは、HTML5/CSS3で制作されたBootstrap対応のUIコンポーネント集で、ニューモーフィズムに影響された美しくクリエイティブ、モダンな雰囲気のインターフェースは、Webサイトのデザイン、プロトタイプ作成に役立ちます。

 

実用性の高いナビゲーションメニューバーや金額表テーブル、フッターデザインなど10以上のセクションが揃います。

 

neumorphism-ui-main

https://demo.themesberg.com/neumorphism-ui/

 

主要な機能としては以下の通り。

  • 人気の定番CSSフレームワークBootstrapの最新版を利用した、レスポンシブでモバイルファーストなつくり。
  • Sassによる設計。ひとつの変数を変更するだけで、テーマ全体に適用できる。色やフォント、サイズ、ボタンなど
  • 世界中の53%のウェブトラフィックがモバイルからを言うことを踏まえた、レスポンシブかつモバイルファースト設計。
  • カスタマイズされたコンポーネントはいつでもどこでも再利用でき、プロジェクトの進行度もアップ。
  • カスタムGulpコマンドとBrowserSync対応で、より素早いワークフローを実現。
  • 使い方を詳しく説明したオンラインドキュメントも公開中。
  • Google PageSpeedで80以上の高スコアで、ウェブサイトを高速で表示。
  • 収録されている写真やSVGイラストは、商用利用に関わらず自由に利用可能。
  • トレンドのニューモーフィズムを完全再現したモダンで洗練されたインターフェース・デザイン。

 

サンプルとして5ページが用意されており、実際にニューモーフィズムを使うとどのような仕上がりになるのか確認できます。Bootstrapフレームワーク対応なのでコーディングもしやすく、必要なUIコンポーネントをコピペで制作時間の時短にも。

 

neumorphism-ui-about

Aboutページ

 

neumorphism-ui-pricing

金額表ページ

 

neumorphism-ui-contact

お問い合わせページ

 

neumorphism-ui-login

サインイン・ログインページ

 

neumorphism-ui-signup

サインアップページ

 

実際にダウンロードしたファイルに収録されていた内容がこちら。ファイルごとにすっきり整理されているので、はじめて利用するときに困ることもありません。

pixel-lite-ui-kit-1

 

 

さらにUIコンポーネントを追加し、合計1000個となったプロバージョンも$69(およそ7,400円)で販売されています。デモページはこちらからどうぞ。

neumorphism-thumbnail-pro-1

 

 

他のBootstrapフレームワークを利用した無料テンプレート、UIコンポーネントも活用しよう

 

定番の人気CSSフレームワークBootstrapをつかった無料テンプレートも、これまでにいくつか紹介しているので、こちらも今後の制作の参考にしてみてはいかがでしょう。

 

titan-featured
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの
wemeet-free-template
スマートフォンからウェブサイトを閲覧するひとが増えたことで、あらゆる端末に対応するレスポンシブなWebサイトが主流となっています。 しかし、「HTML
labs-digital-agency-website-template
商用プロジェクトでも利用でき、モバイル端末でのサイト表示にも対応した高品質なHTMLテンプレート素材を200種類以上公開しているサイト Colorlib を今回はご
stories-free-template
この記事では、商用可能で無料ダウンロードできるBootstrap製の最新HTMLテンプレート素材をまとめてご紹介します。 デスクトップやモバイルなどあ

 

Bootstrapを独自にカスタマイズして、オリジナルのスタイルを作成しても良いでしょう。

bootstrap-button-customize
ボタンは、あらゆるインターフェースの土台となるベースラインコンポーネントです。Bootstrap フレームワークに関しても同様で、シンプルだからこそ細部が重要です。
bootstrap4-navbar-1
ウェブサイトにおいて優れたユーザーエクスペリエンスは、よく考えられたナビゲーションメニューから始まると言ってもいいでしょう。ナビゲーションメニューはウェブサイトの要

 

参照元リンク : Neumorphism UI – Themesberg.com