WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： とみー
カテゴリー： マークアップ >CSS

今回は背景などに使えるシェイプを制作することが出来る、とても便利なツールを紹介したいと思います。
簡単操作で「ウェーブ」や「曲線」を作ることが出来るツール「Shape Divider App」の紹介です。

Shape Divider Appの使い方

「Shape Divider App」にアクセス

「Shape Divider App」にアクセスします。

Shape Divider Appにアクセスするとこのような画面になっています。

Shape Divider Appの機能紹介

「Shape」の機能

プルダウンメニューでどのようなシェイプを作りたいかを選択することが出来ます。

「Colour」の機能

カラーピッカーやカラーコードでシェイプの色を選択することが出来ます。

「Flip」の機能

左右反転の有無を選択することが出来ます。

「Invert」の機能

上下反転の有無を選択することが出来ます。

「Top/bottom」の機能

上向きに使用するのか下向きに使用するのかを選択することが出来ます。

「Height/Width」の機能

シェイプの横幅と縦幅を選択することが出来ます。

スマホ・タブレットでの見た目の確認

ボタンをクリックするだけでスマホ・タブレットでの見た目の確認ができます。

書き出し形式の選択

全て選択し終わったら、書き出しボタンをクリックするだけで、「HTML」「CSS」「SVG」で書き出すことが出来るのでコーディングなら「HTML」「CSS」をコピーし、デザインなら「SVG」で書き出します。

まとめ

いかがでしたでしょうか。
紹介した機能は選択するとリアルタイムで結果に反映されるので、直感的に操作出来てとても便利です。
「Shape Divider App」を使用することで、効率良く背景パーツを制作することが出来ます。
複数パターン書き出すことで短時間かつ簡単に複数のデザインを制作することが出来るので、ぜひデザイナーの方やコーダーの方は使ってみてください。