https://buildstd.com/web-service/
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。
MonoStack
- Fancy Border Radius Generator：CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。
- Clippy – CSS clip-path maker：CSSのclip-path を使って写真やボックスの形状をさまざまなかたちに変化できるClippy。
- CSS Animo：さまざまなCSSアニメーションを実装できるCSS Animo。hoverアニメーションやローディングアニメーションに必要なCSSコードをクリックだけで取得できる。ただ、取得してきたコードを見るとoutline: 0やfont-size: inherit;などそのまま使えないものもあるので修正は必要。
- Css Effects：CSS Animo と同じさまざまなCSSアニメーションを実装できるCss Effects。コードの修正は必要になるが、このアニメーションを1からコーディングするよりは遥かに楽なので、使えそうなアニメーションのコードを取得し修正した上でストックしておくと便利に利用できる。(※サイトが404)
- vivus instant：SVGをドラッグ＆ドロップするだけでSVGアニメーションを作成してくれるWebサービス。
- hero-generator：メインビジュアルの写真上にかけるフィルターやボタンのCSSコードを取得できるhero-generator。写真のフィルターは円形グラデーションのradial-gradientや線形グラデーションのlinear-gradientなど5パターンから選ぶことができる。ボタンは背景色やhoverカラー、border-radiusのサイズ変更などができる。
- ラッコキーワード：気になるキーワードを入力すると関連したキーワードを提案してくれるラッコキーワード。Googleサジェストの他にもBingサジェスト、Youtubeサジェスト、Google動画サジェスト、Amazonサジェスト、楽天サジェスト、Googleショッピングサジェスト、Google画像サジェストなど、サービスに合わせて提案してくれる。
- OGP確認：調べたいURLを入力するだけで、FacebookやTwitter、はてなブックマーク、LINEでどのように表示されるか確認できる。
- colorbase：デザインワークの中で日常的に使えるカラーツール。色の基本情報、カラースキーム、色に対してのおすすめの文字色と背景色、他の色とのコントラスト比、類似色、補色など、色にまつわるさまざまな情報を取得できる。
- gradpad：色を指定するだけでCSSグラデーションのコードを取得できる。デフォルトでは2色だが下にあるバーをクリックすると色を追加することができる。
- remove bg：写真の背景を削除してくれる。パッと見では全然許容範囲内。大きいサイズで利用しなければこれ一択でもいい。
- Font-familyメーカー：WindowsやMac、iPhone/iPadのデフォルトフォントからチョイスしてfont-familyのコードを取得できる。実際の表示を画像で確認しながら選ぶ。必要なフォントはドラッグ&ドロップで設定できて、並び替えもドラッグ&ドロップ。簡単に作成できる。
- HTML5 入れ子チートシート：親要素や子要素の関係性を視覚的に確認できる。