Webでの表現は基本的に四角が重なった形で表現されます。そのため、デザインする際の効率は良いのですが、そこから逸脱したデザインをしようと思うと途端に大変になります。例えば円形や菱形などです。 今回紹介するjquery.diamonds.jsはそんなデザインが難しい菱形が連なったデザインを実現できるソフトウェアです。

jquery.diamonds.jsの使い方

例です。こんな格好良い表示ができます。

大きさも自由に変えられ、レスポンシブWebデザインに対応しています。

サイズや各ブロック間の隙間は自由に変えられます。

D3.jsのWebサイトでは六角形のデザインが使われています。単純に四角を並べるのに比べると圧倒的にインパクトが強くなります。サイトを選びますが、知っておくと使いどころがありそうです。

jquery.diamonds.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

jquery.diamonds.js demo mqchen/jquery.diamonds.js: Diamond layout.