知っておくと仕事が捗る便利ツール17選 - Qiita
はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s
共同編集可能で全ブラウザで動くWYSIWYGのリッチテキストエディタを作成できて商用OKなオープンソースの「ProseMirror」を使ってみた
ウェブ上でリッチテキストエディタを構築するためのオープンソースのツールキットが「ProseMirror」です。商用利用可能なライセンスになっており、もともと2015年にクラウドファンディングで約790万円を超える金額を集めて開発が始まったもの。ニューヨークタイムズ・Atlassian・asana・Box・Evernoteなども継続的な開発をサポートしています。共同編集が可能な構造で、プラグイン形式によって独自の拡張を盛り込むこともできる高機能なツールキットになっており、マークダウン形式とWYSIWYMの切替、ツールチップの実装、画像のアップロード、独自メニューの構築、linterによるスキャンでエラー検出してユーザーが修正できるようにする、コンテンツ内に脚注を追加、変更履歴を保持して各ユーザーがここの変更を調べて元に戻せるようにする、などなどウェブアプリ開発で求められる機能が柔軟に追加でき
びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
Illstrator シェイプ形成ツールを使って簡単に効率よくアイコンやイラスト作成をしよう | サイブリッジラボブログ
Illstrator シェイプ形成ツールを使って簡単に効率よくアイコンやイラスト作成をしよう by ナツコ · 2014-10-03 こんにちは、デザイナーのナツコです。 フラットデザイン、SVG、CSS3、など…最近のwebデザインのトレンドで デザイナーのみなさんは以前よりもIllustratorを使う機会が増えたのではないでしょうか？ 最近は、様々なサイトで素敵なアイコンやイラストが配布されていますが、 デザイナーであれば出来ればオリジナルで作成したいものですよね。 そこで、今回はオリジナルのアイコンやイラストを作成する際にとっても便利な「シャイプ形成ツール」の基本的な機能、使い方をまとめたいと思います。 シェイプ形成ツールとは シェイプ形成ツールは、重なった複数のシェイプを結合、削除できるツールです。 同じような機能でパスファインダーがありますが、 結合させたい部分や消去したい部分
テキスト比較ツール「difff（デュフフ）」、web上で簡単に差分がわかる。 | WordPressやWebデザインなど紹介 Ocadweb
CSS、HTMLなどの修正をした場合に、前回との比較をして何が修正されたのか確認するケースがあります。 Subversionなどでバージョン管理をしている場合はSubversionの機能で差分を確認することができますが、使い勝手や見やすさという点では物足りない機能です。 そこで今回はWeb上で簡単にテキストの差分比較ができるdifffの使い方をご紹介します。 difff difffの使い方 左と右の欄に比較したいテキストの文章を入力、またはコピー＆ペーストします。 「比較する」ボタンをクリックすると差分がマーカーのような色付きで表示されます。色を変えたい場合は、「カラー１」「カラー２」「モノクロ」を選択して変更することができます。文字数、空白行、改行数、単語数もわかります。 印刷用のページとして、不要な画面の表示部分を表示せずに比較した差分の結果のみ表示したい場合は「結果のみ表示（印刷用）
以前の Google サイトにガジェットやスクリプトなどを追加する - サイト ヘルプ
重要: 以前の Google サイトの編集と作成のサポートは終了しました。 詳しくは、従来の Google サイトを新しい Google サイトに変換する方法をご覧ください。 リンク、スクリプト、ガジェット、アプリのコンテンツなど、さまざまな要素を追加してサイトをカスタマイズできます。 サイトをカスタマイズする サイト内のファイルやさまざまな部分へのリンクを設定すると、閲覧者は簡単に情報を見つけることができます。 サイト内のファイルへのリンクを張る パソコンから、以前の Google サイトでサイトを開きます。 右上のその他の操作アイコン をクリックします。 [サイトを管理] [添付ファイル] をクリックします。 ファイルの横にある [表示] または [ダウンロード] を右クリックします。 [ショートカットをコピー] または [リンクのアドレスをコピー] を選択します。 表示: 閲覧者に対
ど素人でも、アプリ「Git-it」を通じてGit/GitHubが使えるようになった話 - LOGzeudon
このページは別のブログに移転しました。
LP特化のWebページ作成ツール「Pingendo」がとにかく凄い。｜世永玲生（よながれお）
LP制作に特化したツールやサービスで自由度が高く、かつサクサクで、ソースの吐き出しまでできる（ここ重要）ってのないんですよね。 ここに来て凄いのが出てきたので紹介します。 ”Pingendo”(http://pingendo.com/)というサービスです。 Win/OSX/UNIX対応。しかも”いまなら”「無料」です。 おっと、挨拶が遅れました。こんにちわ。世永玲生（よながれお）ともうします。Webマーケティングやコンサルティングを生業としてます。GMOインターネットで社長室付きの特命担当を務めさせて頂いてます。 歴史好き、肉好き、ラーメン好きの博物館学芸員資格持ちです。 では早速。 ▪︎何ができるの？ シンプルなタイトル画面をクリックすると・・・ こんな画面になります。とりあえずLP用のテンプレ入りをクリックしてみます。 こんな感じの作成画面になります。 ▪︎基本的な操作は簡単文字列を変
Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。 そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5 blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OS
web開発・構築時に参考にしたい最新ツールまとめ「Fresh Toolbox for Web Developers – August 2015」
TOP > Design > web開発・構築時に参考にしたい最新ツールまとめ「Fresh Toolbox for Web Developers – August 2015」 webサイトを構築するのにはさまざまな機能を盛り込むこともあり、一から開発を行っているとどうしても時間やコストがかかってしまうもの。今回はそんな時参考にしたい、最新ツールまとめ「Fresh Toolbox for Web Developers – August 2015」を紹介したいと思います。 gridstack.js jqueryプラグインや、その他便利なリソースが紹介されています。気になったものをピックアップしましたので、以下よりご覧ください。 詳しくは以下 Crayon.css さまざまな色合いのカラーをCSSで表現できます。塗りを重視したデザインをCSSで構築したい時に。カラーが豊富なのも魅力的です
HTML/CSSでワイヤーフレームもUIデザインも作成する人がけっこう多い -最近のWeb制作で使われているツールのまとめ | コリス
Web制作の実際の現場で、ブレーンストーミング、ワイヤーフレーム、UIデザイン、プロトタイプ、プロジェクト管理、ファイル管理・バージョン管理に使われている人気のツールを紹介します。 Design Tools Survey 「Design Tools Survey」は、世界各国の制作会社・フリーランス・スタートアップ企業など、さまざまな形態でWeb制作を行っている人にアンケートをとり、それぞれ使用しているツールをまとめたものです。 日本人100%とは当然異なると思いますが、興味深いデータとなっています。 ブレーンストーミング ワイヤーフレーム UIデザイン プロトタイプ プロジェクト管理 ファイル管理・バージョン管理 ブレーンストーミング ブレーンストーミング時に使うツール 64%: 鉛筆と紙 10%: Sketch 7%: Illustrator 7%: Photoshop 6%: その他
これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
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
コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
最近流行りのウェブ開発系ツールまとめ（主にデザイン） | keisuke.tsukayoshi
最近、ウェブデザイン周りの優良ツールがたくさん出てきていて、しかもちゃっかりみんな買っちゃうしアドオン系のソフトウェア界隈にも良い流れを感じるこのごろ。今回は、ぼくが買ったツールのうちこれは手放せないなとおもったものをピックアップしてアフィリンク付きでゲス顔で紹介したいと思います。主にMacです。 マークアップ系 Slicy PSDファイルから画像素材が出力できるアプリ。PSDファイルを読み込ませるだけでほとんど自由自在に画像素材を書き出せます。使い方はPhotoshopのレイヤーやフォルダに.pngなどの拡張子をつけておくだけ。 マークアップするときの画像書き出し作業が全然億劫じゃなくなったのが一番嬉しい。一度読み込ませると、あとはPSDが更新されたら自動で書きだす機能なんかもあります。スマホのRetina用に半分の画像も一緒に書き出せたり、MacのRetina用に二倍の画像も一緒に書き
コピペブログがムカつくので、はてブを快適にするユーザーCSS作った
はてブは便利だ。かれこれ使い続けて8年目になる。 しかし、はてブを使っているとしばしばムカつくことがある。 それは2chをコピペしただけのデマまとめサイトがホットエントリとして頻繁に表示されてしまうことだ。 リンクをクリックしなければいいのだが、最近はタイトルだけで不快になるレベルのものも多い。 例えばここのところ、冷凍庫に入ったバイトをアップして炎上させる遊びがリア充の間で流行しているが、 「ハム速」というサイトはこういったものを毎回取り上げて、嫌でも目に付くタイトルで他人の個人情報を晒している。 なにがホットだよ。見たくねえよ死ね。 しかし、はてなの運営はいつまで経っても非表示サイト機能を用意してくれないし、 こういったクソサイトを未だにブクマしてホッテントリ入りに貢献するはてなユーザーはあとを絶たない。 これらを弾くユーザースクリプトやユーザーCSSを書いてくれた人もいない。 仕方な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール
Obsidianは最高のマークダウン『メモ』アプリである
自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）
