UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio

2023/06/13 154 users フォントサイズ マージン コンポーネント パディング 白銀比

UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということがで... 続きを読む

QRコードをデザインする新しい方法で、かなり自由にデザインしてQRコードを作成できるオンラインツール -QR code designer

2023/06/05 189 users QRコード 図形 かなり エラー訂正 新しい方法

QRコードをかなり自由にデザインして作成できるオンラインツールを紹介します。他の今までのツールはエラー訂正レベルを使用していましたが、本ツールは違います。 先日リリースされたばかりの最新ツールです！ カラーを変更したり、文字や図形を加えたり、画像やパターンなどを加えてデザインすることもできます。日本... 続きを読む

超高速！ デザインやイラストに最適な色を組み合わたカラーパレット🎨を生成する無料ツール -Colour Palette Generator

2023/01/12 273 users 快適 操作 カラー テーマ カラーパレット

選択したカラー・テーマに基づいて、デザインやイラストに最適な色を組み合わたカラーパレットを生成する無料のオンラインツールを紹介します。 操作は快適👍で、超高速🔥！ 気になったカラーパレット...記事の続きを読む 続きを読む

JSONデータをキレイに可視化してくれるオンラインツール「JSON Crack」は手軽でお勧め／画像化してクリップボード・ローカルファイルへエクスポートすることも【やじうまの杜】

2022/09/08 133 users やじうま JSONデータ クリップボード ローカルファイル

続きを読む

ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ

2022/08/10 412 users テクスチャ シェイプ グラデーション アイソメトリック 背景

WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等... 続きを読む

グラデーション付き影をコピペ作成 CSS Shadow Gradients とおすすめツール - PhotoshopVIP

2022/06/13 11 users PhotoshopVIP 配色 グラデーション 見せ方 方法

グラデーションは鮮やかな配色や動く流体Blobシェイプなど、さまざまな方法や見せ方で見かけるようになっています。 2色の配色によるグラデーションをつかった影、シャドウグラデーション（英: Shadow Gradients）を手軽に作成できるオンラインツール「CSS Shadow Gradients」が公開されています。 CSS Shadow Gradients... 続きを読む

便利なツールが登場！ 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images

2022/05/16 204 users WebP AVIF SVG jpg PNG

次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, ... 続きを読む

GIFアニメーションの再生速度変更・モザイク処理・透過処理など多数の編集が可能な「Online GIF Tools」

2022/01/03 90 users GIFアニメーション 透過処理 モザイク処理 再生速度変更

連続した画像ファイルで一連の動きが付けられたアニメーションGIFを切り取ったり、明るさを変えたりといった編集が可能なオンラインツールが「Online GIF Tools」です。ブラウザで動作するこのGIF編集ツールを実際に使ってみました。 Online GIF Tools - Simple, free and easy to use GIF utilities https://onlinegift... 続きを読む

コーディング用のフォントから、自分に適した一番のフォントを見つけることができるオンラインツール -Coding Font

2021/11/01 212 users フォント デベロッパー 読み書き コーディング 修正

コーディングに使用するフォントを何にするかは、非常に重要です。コードを記述、読み取る、修正・変更するなど、デベロッパーは多くの時間を費やします。 コーディング用のたくさんのフォントから、自分にとって読み書きに適した一番の...記事の続きを読む 続きを読む

CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper | コリス

2021/09/06 18 users ボーダー UI要素 Shaper コリス 角丸

WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い... 続きを読む

ロゴのデザインに独創性があるか、パクリじゃないか、Webサイトやスマホでどう見えるか検証できるオンラインツール -TWM Logotester | コリス

2021/06/24 183 users 見栄え コリス スマホアプリ パクリ ロゴ

せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノ...記事の続きを読む 続きを読む

コピペで簡単！CSSで実装されたジグザグ、波状、罫線、アイソメトリックスなど背景パターンのスタイルシート | コリス

2020/11/09 16 users コリス ジグザク 罫線 CSS コピペ

ジグザグ、波状、罫線、アイソメトリックスなど、CSSで実装されたさまざまな背景用パターンをコピペで簡単に利用できるオンラインツールを紹介します。 カスタマイズにも対応しており、前景と背景のカラー、不透明度、サイズを簡単に...記事の続きを読む 続きを読む

metaタグに記述するソーシャルメディアや検索用のコードをまとめて簡単に生成できるオンラインツール -Meta Tags | コリス

2020/10/12 13 users コリス Twitter Facebook Pinterest

Twitter, Facebook, Pinterestなどソーシャルメディア、Googleの検索用のmetaタグのコードを1クリックで簡単に生成できるオンラインツールを紹介します。 日本語のコンテンツにも対応しており、...記事の続きを読む 続きを読む

プレゼンで使ってみたい！横棒グラフのデータ変化をアニメーションで表示するオンラインツール -Bar chart race | コリス

2020/07/27 13 users CSV コリス プレゼン アニメーション 横棒グラフ

SNSやテレビなどで見かける、横棒グラフの変化をアニメーションで表示するオープンソースのオンラインツールを紹介します。 データは.csvにも対応しており、誰でも簡単に利用できます。 値の変化が非常に分かりやすく、プレゼンなどにもいいですね。 Bar chart race -GitHub Bar chart raceの特徴 Bar chart raceの使い... 続きを読む

レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize | コリス

2020/04/27 25 users コリス ブラウザベース レスポンシブ デバイス 同時

Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツー... 続きを読む

Web制作にすごい役立つ！無料で使える便利なオンラインツールのまとめ -Tiny Helpers | コリス

2020/02/03 30 users アクセシビリティ CSS フォント コリス 非常

CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つオンラインツールをまとめたTiny Helpersを紹介します。 無料で利用できるツールがまとめてあるので、非常...記事の続きを読む 続きを読む

CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック | コリス

2020/01/17 32 users コリス 美しいグラデーション UIデザイン スマホアプリ

WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。 このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。 Using easing for mor... 続きを読む

簡単で便利！Sketch, Figma, AdobeXDなどにコピペで利用できるUIデザイン用のカラーパレットを生成 -CopyPalette | コリス

2019/09/24 20 users figma AdobeXd コリス Sketch 濃淡

最近のUIデザインでよく使用されている、一貫性のある単色のカラーパレットを簡単に生成でき、そのカラーパレットをSketch, Figma, AdobeXDなどにコピペで利用できるオンラインツールを紹介します。 CopyPalette CopyPaletteは1つのカラーをベースに、濃淡のバリエーションでカラーパレットを簡単に生成できるオンライン... 続きを読む

E2153 - 大学図書館の成果を測る：Project Outcome大学図書館版 | カレントアウェアネス・ポータル

2019/07/11 12 users カレントアウェアネス・ポータル 成果 大学図書館 ACRL

カレントアウェアネス・ポータルは、図書館界、図書館情報学に関する最新の情報をお知らせする、国立国会図書館のサイトです。 大学図書館の成果を測る：Project Outcome大学図書館版 2019年4月，米国の大学・研究図書館協会（ACRL）が，大学図書館向けの利用者調査のためのオンラインツール“Project Outcome for Academ... 続きを読む

これは珍しい！医療や科学など、サイエンスのイラストやダイヤグラムを作成できるオンラインツール -Bio Render | コリス

2019/05/31 34 users 臓器 ナノ粒子 人体 骨格 微生物

医療や科学、細胞、ナノ粒子、微生物、人体、骨格、筋肉、臓器、実験室、実験器具、医療機器など、サイエンス系のイラストやダイヤグラムを作成できるオンラインツールを紹介します。 イラストとは言え、けっこう生々しいのもあるので、...記事の続きを読む 続きを読む

日本の生産性が低いのは中小企業が原因？いやいや、便利なオンラインツールを使い倒そうよ - 助っ人 - 起業、独立、開業を応援するポータルサイト

2019/05/29 616 users 助っ人 勝算 エビデンス 名著 ポータルサイト

日本の生産性が低いのは中小企業が原因？いやいや、便利なオンラインツールを使い倒そうよ 2019.05.24 日本の現状を様々なエビデンスをもとに分析したデビット・アトキンソンの名著、『日本人の勝算』はもう読みましたでしょうか？ 素晴らしい本なので、ぜひ一読をおすすめします。その中に下記のような一文がありました... 続きを読む

デザイン的に合う色の組み合わせを指定されたカラーをベースに生成する無料ツール -Color Designer | コリス

2019/05/27 400 users コリス 補色 Color Designer 組み合わせ ベース

色の組み合わせに悩んだ時、指定されたカラーをベースにその色の明るい色合いと暗い色合いをはじめ、補色、類似色、分裂補色、3色配色、4色配色など、色の組み合わせを簡単に自動で生成できるオンラインツールを紹介します。 カラーの...記事の続きを読む 続きを読む

色の組み合わせ方の参考にいい！Webサイトやスマホアプリに適したカラーパレットを生成する無料ツール -Color | コリス

2019/02/04 62 users 適用 要素 ベース 組み合わせ カラー

指定したカラー、画像、Webページなどをベースに、カラーパレットを生成し、カスタマイズできる無料のオンラインツールを紹介します。 カラーパレットは、Webサイトやスマホアプリに特化されており、コンテンツに使用されるさまざまな要素への適用、アクセシブルなカラーの組み合わせなどが生成されます。 Color Color -... 続きを読む

head内に記述するソーシャルメディア・検索エンジン用のmetaタグを簡単に生成できる無料ツール -Meta Tags | コリス

2018/11/12 42 users コリス デバッガー Facebook OGP Meta

head内のmetaに記述するTwitterカードやFacebookのOGPなどのソーシャルメディア用のコード、Googleなどの検索エンジン用のコードを簡単に作成できる無料のオンラインツールを紹介します。 公式のデバッガーですぐに確認もできるので、非常に便利です。 Meta Tags Meta Tagsでは、下記のソーシャルメディア・検索エンジン... 続きを読む

デザインの勉強にもなる！ロゴのデザインをさまざまな面から検証し、改善点が分かるオンラインツール -Logo Lab | コリス

2018/10/19 54 users バランス カラー 小さいサイズ デザイン面 あなた

あなたのロゴをさまざまなデザイン面から検証し、デザインの改善点が分かる無料オンラインツールを紹介します。 ロゴの視覚的なバランスはどうか、カラーに依存されていないか、大きい小さいサイズでどうかなど、ロゴが使用されるあらゆ...記事の続きを読む 続きを読む