Web上からソースコードの圧縮・整形・変換など190以上のツールを利用可能な「BeautifyConverter」を徹底解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、ブラウザ上からWeb制作などで便利に使えるミニツールを190以上も搭載した異色のWebサービスをご紹介しようと思います！ 特に、ファイル関連のジェネレーターやコンバーターが豊富に揃っているのが特徴で、コンソールからタスクランナーなどを起動する必要もなく、フロントエンド側だけでちょっとした制作を行うのに最適だと思います。 【 BeautifyConverter 】 「BeautifyConverter」は、主にファイルの「圧縮」「整形」「変換」などから「構文チェック」「画像変換」「各種ジェネレーター」…など、多種多様な便利ツールが揃っています。 登録不要で、誰でも今すぐブラウザから利用できるので、ブックマークしておいて損はないでしょう！ ■基本的な使い方！ 「BeautifyConverter」の基本的な使い方を実際に試しながら、どのよう
PhantomJsCloud API Service - It just works!
Web Browser as a Service PhantomJsCloud is a crash proof and problem free cloud of Headless Browser instances. Simple to use, no-install required. A web-browser hosted as a service, using Chrome (via Puppeteer or PhantomJs) to render your javascript heavy webpages as HTML, PDF, JPEG, PNG, or JSON. A high performance Cloud of Puppeteer and PhantomJS instances capable of processing more than 1 milli
iPhoneアプリ開発・運用でかかせない、吟味して選んだ便利サービスTOP10
iPhoneアプリを個人で作り始めてから5年ほどになるけど、アプリ開発や運用でかかせないサービスをまとめてみた。 それぞれに競合サービスがあったりするけど、いくつか使ってみて、最終的に本当に使うようになったものだけ書いてみる。プログラミングする時に使うツールというより、アプリを作った後の運用とか、分析とか、そっち系のサービスがメインのランキング。 iOSアプリにしか使ってないけど、Androidで使えるものも多い。 10位 Iconfinder（無料+有料） https://www.iconfinder.com/ アプリはWebサービスに比べて画面が小さいのでビジュアルデザインが楽。実質、フリーのアイコンとか有料のアイコンを利用するだけで事足りることが多い。僕はまず有料のアイコン集を買って、それでカバーできない時はこのサイトから検索してます。 例えば、フラットデザインのリロードアイコンを検
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
Asciinema の紹介 - Qiita
Asciinema という超便利なサービスを見つけました． 文字通り百聞は一見に如かずなのでまずは以下の動画をご覧下さい． 自分のとあるリポジトリを編集してる風景です．コンソールでの作業がまんま記録されています．エイリアス使いまくりなのでちょくちょく which で確認してる様子を挟んでいますし作業自体も大したことないのですがまぁその点はさておくとして… これさえあれば，勉強会の発表なんかのためのライブコーディングの練習をする必要もなく，記録さえしておけば「昨日はこれ動いたんだけどなぁ…」をそのまま再現出来ますね！ インストール方法と使い方 公式ドキュメントである Getting started - asciinema にめっちゃシンプルに書いてあります．一応ここでも記しておくと以下の通りです． インストール
URLを入力するだけ--ホームページを“もれなく”チェックできる診断サービス5選
通常の利用にはなんら問題がないように見えるホームページも、セキュリティの欠陥があったり、動作速度に問題を抱えていることは少なくない。このほかにも、検索エンジンに最適化されすぎていてユーザにとっては使いづらかったり、モバイルへの対応が不十分だったりすることもしばしばだ。ウェブ関連の技術やトレンドの進化によって、これまで問題がなかったサイトも、しばらく経って再度チェックしてみると問題が見つかるケースも多い。 こうした場合に便利なのが、URLを入力するだけでホームページにまつわるさまざまな診断をしてくれるサービスだ。特に最近ではスマホやタブレットといったデバイスやソーシャルメディアへの対応に加えて、セキュリティについてはHTTPSの標準化といった新しいトレンドもあり、こうした診断系サービスもそれらを反映した内容へとリニューアルしつつある。今回は新顔のサービスを中心に、自らが運営するホームページの
Pixlr.com
Photo Editor - Photoshop Online by Pixlr - Free Image Editing Tools Now, there are even more compelling reasons to choose Pixlr as your go-to solution for all your online image editing requirements, particularly when you're looking for a powerful "photo editor." Whether you're inclined towards traditional desktop-style photo editing or prefer a more contemporary approach, Pixlr has you covered. Pi
愛用せざるを得ない、オンラインホワイトボード「miro」リモート会議やプレゼンに大活躍 | SELECK [セレック]
※2020年4月1日更新（サービス名の変更などを反映） ※2022年3月8日更新（リンクの修正） アイデアのブレーンストーミング、会議での情報伝達、個人的な情報整理など、働く上でホワイトボードを使う機会は多いものです。 自宅で作業する人の中には、家にホワイトボードを購入してしまう人や、シール型のホワイトボードを壁に貼り付けてしまう人もいるかもしれません。 あらゆるものがデジタル化していく中、ホワイトボードもデジタル化されています。それが「Miro」です。 ホワイトボードの自由さはそのままにしつつも、オンラインに持ってきたことで抜群の利便性を持っています。 無限に広がるボード テンプレートや画像を貼り付けて様々な表現が可能に 場所を選ばない ホワイドボードと同じく、複数人で同時に作業しコミュニケーションを取れるのはもちろん、Slack連携まで可能です。 Miroの用途は、ブレーンストーミング
![愛用せざるを得ない、オンラインホワイトボード「miro」リモート会議やプレゼンに大活躍 | SELECK [セレック]](https://cdn-ak-scissors.b.st-hatena.com/image/square/01299e00f01313cb3e41ff176a3111ae40fe5cdf/height=288;version=1;width=512/https%3A%2F%2Fdpd29bjwmgbr8.cloudfront.net%2Fwp-content%2Fuploads%2F2016%2F09%2F13201255%2F31fe0cfb-6362-43fa-ad32-614b01cfad33.png)
デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov
テキストの読みやすいカラーを決めるにはこれが大切！Webデザインにおける良いコントラストのつくり方
読みやすい本文テキストのカラー、分かりやすいリンクのカラー、目立たせたいボタンのカラーなど、Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方を紹介します。 Webデザインでカラーパレットを作成する時、カラーの組み合わせをコントラストのためにテストしていますか？ テストをしてないのであれば、あなたのデザインはリーダビリティを考慮せず、潜在的なビジターを失っているかもしれません。 私はこれまでに数多くのプロジェクトでカラーコントラストとリーダビリティについて取り組んできました。いくつかの有用なカラーコントラストのアクセシビリティツールのおかげで、私は仕事をすることができ、それを多くの人たちと共有したい思います。 私はアクセシビリティの専門家ではありません。私の目指すところはシンプルで、最適な読みやすさを念頭においてカラーを選ぶことです。完全な説明が必要であれば、W3C
プロトタイプやワイヤーフレーム作成ツールまとめ | WordPressやWebデザインなど紹介 Ocadweb
Webサイトやアプリの制作をするときには必須となるプロトタイプやワイヤーフレーム。 WEB制作を依頼するときにワイヤープレームありますかと聞かれることがあると思います。 Web制作依頼する前に、サイトの内容やイメージするデザインサイトやこういう風サイトにしたい、そしてワイヤーフレームを作っておくと話が早いと思います。 もちろんパワポでも、Keynoteでも作ることができます。 今回はプロトタイプやワイヤーフレームを作成するときに便利なプロトタイプやワイヤーフレーム作成ツールをご紹介します。 まずは「プロトタイプ」や「ワイヤーフレーム」について。 プロトタイプやワイヤーフレームとは プロトタイプとは ページを構成する要素や機能だけでなく、ページ間の遷移やクリックしたときの動きや操作感などの確認ができるものをプロトタイプ（試作品）と言います。 本格的な制作に入る前にプロトタイプを作成することで
これ知ってる？WEBの人なら押さえておきたいツール＆サービス50選 - 死ぬまでWEB屋
公開前に知人に見せたら、読むのに20分もかかったわ！！ と、お叱りを受けましたｗ オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい！ サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得
Webデザインの配色に役立つ！色彩について学べるサービス・ツール12選まとめ｜SUKIMANO
Webデザインをしているときに、配色に詰まって作業がはかどらないということは多々あるのではないでしょうか。 そんなときは、自動で配色パターンを生成してくれるサービスやツールに頼ってみましょう。 そこで今回は、Webデザインの配色に役立つ12個のツールをピックアップして紹介します。 1. Adobe Color CC https://color.adobe.com/ja/ 「 Adobe Color CC 」はAdobeが無料で提供している配色ツールで、元々は「Kuler」という名称で提供されていました。 「類似色」「モノクロマティック」「トライアド」など6種類のカラールールが用意されており、色彩と明度を好みで調整可能となっています。 さらに、画像をアップロードすると色を抽出して配色パターンを作成するという機能も備わっています。 納得いく配色パターンができないときは、「探索」のメニューからパ
【保存版】配色アイデアに迷わない、すごい配色カラーパレットツール107個まとめ
「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ
ヒートマップ解析でブログ内のユーザーの動きを見える化した結果と、それによる広告位置などの改良 - Life is colourful.
先日下の記事で、ブログ訪問者のページ内での動きが「見える化」できる『Ptengine』というツールが紹介されていて、なにやら面白そうだった。 ▶【絶好の収益ポイント】一般の来訪者がどこをクリックするのかわかったよ - 透明の壁 当ブログでも、以前よりブログのレイアウトを最適化したいと思っていたところに、ちょうどいい記事と出会ったので、さっそくこのPtengineを導入してみた。 具体的に検討したかった項目は以下の項目。 ブログ内の広告の配置 おすすめ記事、関連記事リンクの配置 1、2を含めた記事下CTA（Call to Action）の最適化 あえてヒートマップで解析するまでもなく、一般的に広告は記事下がクリック率が高いとされている。また、クリック率だけならAdsenseの数値を見ればすぐわかるわけだが、まぁ一度ヒートマップで読者の動きを可視化して、解析結果を自分の目で確認すれば納得できる
ご訪問ありがとうございます。—前田高志
このブログは役目を終えたので閉鎖しました。 永らくご愛読いただき本当にありがとうございました。 2016年2月。任天堂を退社し、まずやったことは文字で「デザインの力」を伝えることでした。 長年ゲームの魅力を伝える仕事をしてきました。これからはデザインだ。どうせ書くなら出し惜しみなし、誰も書かないことを書こう。 次第に「デザインってすごいんですね」と言ってもらえることが増え、デザインを志す方、デザインが好きな方、お仕事をご一緒する人とたくさんつながりを持てました。 今も個人のnoteも続けていますし、株式会社NASUと前田デザイン室の仲間とともにプロダクトやプロジェクトを起点に情報発信を絶え間なく続けています。 これは、このブログを立ち上げた時の気持ちと一切変わりません。 「デザインの力を伝える」 ただ、この１点です。 引き続き、これからも応援よろしくお願い致します。 デザイナー 前田高志
SNSでどれくらい拡散（バズ）されているかが確認・検索できるツールまとめ
TwitterやInstagramでバズが起きているか調べるツール Twitterで特定の話題に対するツイート数が増えたり、Instagramで特定のワードを含んだハッシュタグの数が増えたりしていたら、それはバズの合図です。 ツールを活用し、各種SNSで起きているバズを見逃さないようにしていきましょう。 1.BuzzSUMO（バズスーモ） https://app.buzzsumo.com/discover/trending URL、キーワードをもとにSNS上で拡散しているコンテンツを分析するツールです。テーマにしたい単語を入力しフィルターを設定すれば関連コンテンツを収集し、各SNSでのシェア数を表示してくれます。どのようなコンテンツがSNSで支持されているか傾向を把握するのに役立ちます。 また、拡散するのに影響力のあるインフルエンサーを分析することも可能です。特定のコンテンツをシェアしたユ
Slackだけじゃなかった！働き方を劇的に変える海外製7つのツール
エンジニアやデザイナーの働き方を大きく変えた「Slack」。海外に目を向けるとほかにも生産性アップに役立ちそうなツールがたくさん。 リモートで働くとき、チームを機能させるのもダメにするのもツール次第です。適切なツールを選ばないとチームメンバー間に摩擦を生み、ツールを使いこなせない人が孤立を感じてしまいます。リモートチームは物理的な距離が離れているので、協力して仕事を進めようとする努力をしなければなりません。それをツールが阻害してしまうと、精神的に孤立したメンバーが生まれてしまうのです。 そこで、リモートチームをうまくワークさせるツールを7つ紹介します。 1. Agreedoでムダすぎる会議を生産的に 会議は時間を多く使うわりに結果が出ないことが多いものです。なぜなら事前に明確な議題を設定せず、決定事項の記録もしていないからです。Agreedoは両方の問題を解決します。参加者の考えていること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2015年リリースされ、海外で話題になったWebエンジニアツール24選 - エンジニアについて知るならCarearte
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
