METALLIC RATIO ／ 貴金属比 [黄金比・白銀比などを計算]
Webデザインのコーディングを効率的に進めるためのクライアントサイド用Javascriptライブラリ『klib』を公開。260種類を超える関数を収録。 『METALLIC RATIO』とは貴金属比という意味です。2つの数値の比において、美しいとされる比率というものが存在しており、特に有名なものが黄金比＝1:1.618というもので、数多くの美術品や建造物、デザイン等の構成の中にこの比率を見ることができます。 黄金比の他にも白銀比、白金比、青銅比と呼ばれるものもあり、それらを総称して『貴金属比』と呼ばれています。 上のツールは、基準となる数値をひとつ指定するだけで、黄金比や白銀比に代表される各貴金属比を簡単に算出できるWebアプリです。数値だけではなく視覚的にも比率を確認できるので、求めている比率を直感的に得ることができます。 デザイン作業などで美しい比率が必要な時にご利用ください。 【 数値
はてなブログのテーマを自動リロードしながら開発できるツールを作った - マルシテイア
Sass/Lessでテーマを書いて、リアルタイムで確認しながら開発できるツールです。 github.com 目次 インストール 使い方 hbt の使い方 0. 開発用ブログを作成する 1. テーマの雛形を作成する 2. 開発用ブログにCSSが読み込まれるようにする 3. テーマを開発する 4. 完成したテーマを出力 インストール 動作にはNode.jsが必要です。 未インストールの方はこの辺からインストールしてください。 https://nodejs.org/ja/ ターミナルで以下のコマンドを実行すると、 hbt コマンドがインストールされます。 npm install -g @fand/hatena-blog-theme-boilerplate 使い方 hbt の使い方 0. 開発用ブログを作成する テーマの開発には、開発用のブログを開設しておくと便利です。 既存のブログをエクスポート
ストレスフリーなGitHubのIssue生活 - クックパッド開発者ブログ
こんにちは。サービス開発部の丸山@h13i32maruです。 今日はGitHub/GHE(GitHub Enterprise)で快適なIssue生活をおくるために作ったJasperというツールと、それを実際にどうやって使っているかを紹介させていただきます。 ストレス GitHub/GHEを日々の業務の中心として使っていると、すごくたくさんのIssueやPull Request(以下PR)が流れてきます。 これらのIssueを処理する方法としては主に「メール」と「通知ページ(github.com/notifications)」の2つだと思います。 僕もこれらの方法を使っていたのですが、以下の点ですごく困っていました。 多すぎてメンションされたものやコメントしたものを見逃してしまう あとで見ようと思って、忘れる ブラウザのタブを大量に開いた状態になる 知らないところのIssueで議論が進んでい
Milanote - the tool for organizing creative projects
Milanote is an easy-to-use tool to organize your ideas and projects into visual boards.
クライアントさんとのやり取りや環境チェックに使える分析・調査ツール
作成：2017/03/6 Tool > 既存サイトの調査やクライアントさんの環境を知りたい時、分析・やり取りに使えるツールをまとめました。ヒアリングする時間を短縮したい時に。 エンジニア速報は Twitter の@commteで配信しています。 環境変数確認、メアド暗号化 OSが提供するブラウザやUA(HTTP_USER_AGENT)情報、逆引きしたホスト名などの環境変数を表示してくれます。 環境変数確認 こちらは同じサイト内にある公開用のメールアドレスを暗号化してくれるものもありました。 メールアドレス暗号化 ExcelやGoogle Spreadsheetのデータをマークダウンに変換 先方からいただいたExcelデータをhtmlなどに変換する作業って面倒ですが、一旦マークダウンに変換すると楽。エクセルやGoogleスプレッドシートの表データをマークダウンに変換したい時に便利。 選択した
Kibela キベラ｜ 人と情報に自由を｜個人の力を組織の力にする情報共有ツール
インポート～情報蓄積 ・他のツールから簡単にインポート ・みんなでリアルタイム共同編集 ・編集履歴の確認とロールバック ・下書きレビューでワークフロー化 ・Markdown、リッチテキストエディタ、PlantUML ・Excel、CSV、スプレッドシートをコピー＆ペーストで表作成 ・画像、動画をコピー＆ペーストで貼り付け ・よく使う情報をテンプレート化 構造化～活用 ・グループでアクセスコントロール、フォルダで構造化 ・複数条件に対応した高度な検索 ・プレゼンテーション機能 ・記事を外部共有 ・いいね！でレスポンス、コメントで議論 ・迅速なチャットサポート ・API、Webhook、Zapierなど外部ツール連携 高度なセキュリティ ・SAML 2.0認証 SSO（Google Workspace、OneLogin、Azure Active Directory、Okta、GMOトラスト・ロ
Android | Android スマートフォンや Android デバイスを使って Google でさらに便利に
Wear OS 用 WhatsApp スマートウォッチでも Wear OS 用 WhatsApp があればいつでもつながれます。
デザインデータのバージョン管理ができるAbstractを試してみた✌ | UXデザイン会社Standardのブログ
複数人で1つのデザインデータを編集していると、突き当たるのが「どうやってマージするか問題」です。 作業人数分のデータを複製して用意したり、「これから◯◯.sketch触ります。開かないでください????」とチャットで周知したり……そんな経験をした方も多いのではないでしょうか。 そんなデザイナーの悩みを解決してくれるのが、今回紹介するAbstractです。 Abstractとは AbstractはアメリカのElastic Projects, Inc.が提供しているサービスです。どんなサービスか一言で説明すると「デザイナー向けのGitHub」といったところでしょうか。 Gitの仕組みを利用して、デザインデータ（.sketchのみ対応。Adobe系も対応予定）に対してブランチを切ったり変更内容をコミットしたり、差分をマージする、といったことが可能です。 まだ正式リリースはされておらず、現在はPr
#Illustrator と小数と私
Illustrator は印刷物で使う「ミリ」や「インチ」を使用するイメージが強いと思いますが、ウェブデザインやアプリケーションデザインなど、ディスプレイで表示することが目的のデザインを行う場合、一般的に「ピクセル」という単位をベースに作業を行います。この「ピクセル」をベースにした作業で一番重要なポイントが「数値の小数」です。今回は、Illustrator のピクセル単位で作業するときに発生する小数について、レベルにあわせてまとめてみます。（以下、Illustrator CC 2014 で検証した結果です。） Illustrator と小数値 入門編 小数が入るとどうなるの まず、100px × 100px の矩形を描いてみます。この矩形の座標を小数にし、100%表示してみましょう。 座標に小数が入っている矩形 このように、端に意図しないアンチエイリアス（疑似的になめらかにみせるためのボケ
簡単便利！サクッとモックアップが作れる便利ツール10選
この記事は2016年11月14日に更新しました。 客先でプレゼンする際に、イメージ画像を入れるだけでは魅力が伝わりにくいと感じるときはないでしょうか？ 例えば、アプリやWeb制作の場合なら、完成形に近いビジュアルを見てもらう方が見栄えがいいですし、イメージしやすくなります。 そんな時に活用したいのが、完成形に近いイメージ像を簡単に作成してくれるモックアップ作成ツールです。 今回は、オススメしたいモックアップ作成ツール10種をご紹介します。とにかく簡単に使うことができますので、お客様や社内のメンバーに完成イメージを伝える必要がある際は、活用してみましょう。 モックアップとは モックアップとは、本物に似せた模型のことです。 例えば、携帯ショップに行くとよく製品の大きさやデザインの確認をするためのプラスチック製の実際には使えない模型を見かけます。それがモックアップです。 一般的に、工業製品のプロ
それなりに使える、Web制作者がお世話になる便利ツール
作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
SVGを使いこなすための便利ツールいろいろ
2015年1月28日 SVG, 便利ツール SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術。高解像度ディスプレイでもくっきりはっきり表示できるので、近年海外サイトを中心に見かける機会が増えてきました。SVGについてはWebクリエイターボックスでも何度か取り上げてきたので、耳にしたことのある方も多いかと思います。今回はそんなSVGを使いこなすための便利なオンラインツールやJavaScriptなどを紹介します。SVGってなんぞや？という方は、過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ ラスター画像をSVGに変換 Vector Magic Vector MagicはJPEG、GIF、PNG形式の画像をベクター画像に変換し、EPS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Remove Background from Image – remove.bg
GitExplorer
Threed.io
DeNA Engineering - DeNAエンジニアのポータルサイト
Css2Sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
Tint UI: Material Design
CSS Stats