HOME 便利ツール（ウェブ） あなたの社名がドメインやSNSのユーザー名ですでに使われているかチェックしてくれる『Startup Name Check』 あなたの社名がドメインやSNSのユーザー名ですでに使われているかチェックしてくれる『Startup Name Check』 April 25th, 2018 Posted in 便利ツール（ウェブ） Write comment
作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
画像の軽量化やコード圧縮といったツールをはじめ、各種リファレンスサイト、利用している人が多いエディタやデザインツールのショートカット一覧など、web制作時に便利だと思うツール・サイト・チートシートを自分のブックマークがかなり乱雑化してきたのでその整理も兼ねて一気にまとめてみました。 もちろん他にもこういった便利なものは沢山ありますし、自分も普段からここで紹介しているもの全てを利用しているというわけではないのですが、こういったものを利用することで人によっては大幅に制作時間を減らすこともできると思います。 また、覚えておくとど忘れした時に容易に確認等もできたり、勉強時の参考にすることができるものもあります。 September 01, 2020 更新 リンク切れサイトを削除しました。（100サイト以下に縮小しました...。） January 16, 2016 追記 新たに5サイトを追加して10
2015年7月7日 便利ツール 先日超初心者さん向けにHTML・CSSを使ってWebページを作る講座を開いたのですが、予想通りやはり「これから勉強したい！」という人は、何から勉強すればいいのかがわからない事が多いです。また情報が多すぎて必要なツールもどれを選んだらいいかわからないケースもよく耳にします。そこで今回はその時教えたツールやサービスを中心に「これだけはそろえておこう！」というものを紹介します。あまりたくさん挙げても使い切れないかなーと思ったので、かなり絞っています。まずはこれらをとっかかりにし、自分好みのものを探していってくださいね！ ↑私が10年以上利用している会計ソフト！ 環境を整えよう まずはWebサイト制作をするための環境を整えましょう。 テキストエディター テキストエディターは、HTMLやCSSなどを使ってWebページを作成する際に使うツールです。Windowsに最初か
業務でウェブやメールマガジン、SNS向けの文章を作成する場合、一般的な業務で文章を書くのとはまた違った、さまざまなテクニックが要求される。今回はこうした用途に適した、文章作成時の補助ツールとして重宝するウェブサービスをまとめて紹介する。外部のサイトということで、利用にあたっては社内のセキュリティポリシーに違反しないよう、予め確認を取った上で、どしどし活用してほしい。 ◇ワンクリックでExcelをHTMLのテーブルに変換「TABLEIZER!」 「TABLEIZER!」は、Excelの表を貼り付けるだけで、ワンクリックでHTMLのテーブルに変換してくれるツール。フォントサイズ、ヘッダ部分のカラーを指定できるほか、スタイルシートを使わないよう指定することもでき、手持ちの表を手軽にウェブに貼り付けたい場合に便利。
事情があって、プロのグラフィック・デザイナーを雇えない場合はありませんか。コストが問題であったり、時間に追われていたり…といったことが原因で。あるいは、デザインの才能はあるけれど、ITに弱いという人もいるかもしれませんね。こうしたことが身に覚えがある方には、ブログ用のシンプルな画像やウェブサイト用のロゴを簡単に速く作ることができる優秀な無料ツールがある、というのは嬉しい情報ではないかと思います。 以下の6つのツールはロガスターのおすすめです。 文字通り数分で、シンプルかつ綺麗な画像やロゴが、誰でも作れます！ 1. LiveLuvCreate LiveLuvCreateはほとんどの人が使いやすいと感じる画像作成サイトです。 LiveLuvCreateを使えば、一つの背景画像から複数画像のコラージュまで、様々な種類のデザインレイアウトから選ぶことができます。三つのテキストエリアでは沢山
インフォグラフィックやプレゼンテーション用の画像、名刺、フライヤー、ブログ用の画像、バナー、FacebookやTwitter用の画像など、魅力ある画像が簡単に作成できる無料のオンラインサービスを紹介します。 作成した画像は個人でも商用でも、Webでも紙でもプロダクトでも利用できます。 Canva ※ログインした状態 画像作成用の素材は豊富に用意されていますが、自分で作成したり、自前のファイルをアップロードして利用することもできます。 ※用意されている素材の一部は有料です。 Canvaのサインアップ方法 Canvaの使い方 Canvaで作成した画像の保存方法 インフォグラフィックやプレゼンテーション用のテンプレート Canvaのサインアップ方法 Canvaへのサインアップは無料で、簡単にできます。 Facebookアカウント（またはメールアドレス）を用意して、下記ページへアクセスします。
ども、ゆうせいです。文章作成スピードは速い方だと勝手に思っていますが、実はそれには理由があるのです。面倒なHTMLなどのタグを一瞬で展開し、タグとタグの間にクリップボードの文言を挿入したり、それらを全部アプリにまかせているからなんです。 というわけで、Macの無料アプリ「Dash」を使って、文章作成スピードを爆速にしようぜって話をします。 補足と言ってはなんですが、 “文章入力スピードをｎ倍速くする「Markdown記法」について語ろう” って記事も書いていますので、お好みで選んでいただければと思います。 HTMLのタグをポチポチ打つのしんどい！ しんどいってのは正直なところ言い過ぎましたが、これを覚えてしまうともう無しではしんどいのが実状です。 たとえば、見出しを設定するときのHTMLタグは、 <h2>見出し</h2> ですよね。 これって、どうやって書いてます？ 一文字ずつポチポチと
Web制作やアプリ開発では、本格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、それらはワイヤーフレームに最適化されておらず、やや不便。 以下で紹介するようなツールを使えば、もっと便利で豊富な機能を使うことができます。Excel方眼紙から卒業したい！という方は要チェック。 無料で使えるワイヤーフレームツールまとめ JUSTINMIND こちらはワイヤーフレームからデザインまで可能なプロトタイピングツール。PCサイトはもちろん、モバイル向けのサイトやアプリのワイヤーフレームも作れます。Photoshopのような洗練されたUIで、ドラッグ＆ドロップでコンテンツを追加することができます。 Wireframe CC こちらは完全フリーで使えるワイヤーフレームツール。Webアプリなのでブラウザ上で編集す
何処かで聞いたことのあるタイトルですか? 気のせいです。Web 制作業3年目のぼくが2014年に取り入れてよかったあれこれリストアップしてみます。残念ながら2014年の最新はこれだ! という感じにはならず以前からあるものが殆どになりましたが、2014年と共に水に流して頂きますようお願いします。 BEM https://bem.info/ 最初の拒絶反応から一転、もう BEM 無しに CSS 設計はできなくなりました。BEM の思想に対して記述の方式は色々ありますが、ぼくは block__element--modifier と接続する MindBEMding の書き方をしています。 Template engine (Jade) http://jade-lang.com/ 静的サイトや CMS サイトのプロトタイプモデルとして html を 生成する際に重宝しています。ぼくは Jade を使用
こんにちは、ライターのナッツです。 突然ですが、Shareaholicのレポートによると、ソーシャルメディアからのトラフィックはPinterestがTwitterを抜いて2番目の参照元となっているようです。（1番多いのはFacebook） 参考：Shareaholicレポート https://blog.shareaholic.com/social-media-traffic-trends-10-2014/ この調査結果は、魅力的なビジュアルコンテンツはサイトへ多くのトラフィックをもたらしてくれる可能性を示しています。 しかし、私のようなノンデザイナーにとって「魅力的なビジュアルコンテンツ」をつくることはなかなかハードルが高いもの。そもそもPhotoshopとか持ってない！という方がほとんどではないでしょうか。 そこで今回は無料で使えるビジュアルコンテンツ作成ツールを紹介していきたいと思いま
Pixel Winch 現在はパブリックベータ版で、この夏アップデートを行い、年内には正式版をリリースとのことです。その後は有料アプリとして配布される予定です。 ベータ版なので、この一週間使用してみて特に問題は起きませんでしたが、利用する際はベータ版であることを了承の上、ご利用ください。 使い方は、非常に簡単です。 インストールすると、ツールバーに「Pixel Winch」のアイコンが表示され、そこから起動できます。
「Pixel Winch」はピクセル単位でサイズを測定できるツールです。スクリーンショットを撮影し、画面内の要素間のサイズなどを測定できます。 以下に使ってみた様子を載せておきます。まず、Pixel Winchへアクセスしましょう。Macにツールをインストールします。 使い方は簡単。メニューバーに「Pixel Winch」のアイコンが表示されるので、そこから「Capture Selection」を選びスクリーンショットを撮影します。その後、撮影したスクリーンショットが表示されるので、サイズを測定したい箇所に線を引いていきます。線を引くと、何ピクセルかが表示されますよ。スクリーンショットを拡大すれば、正確に測定することができます。矩形で選択すれば、縦横のサイズが表示されました。 ぜひ画面内の要素を測定したいときにご活用ください。 Pixel Winch （カメきち）
一つでも複数でも、PSDファイルをPNG画像にまとめて書き出すOS X用のフリーのアプリケーションを紹介します。 書き出し用としても便利ですが、Photoshopの無い環境でPSDファイルをチェックする時にも使えますね。 PSD to PNG - Automator Action 使い方は、非常に簡単。 ダウンロードしたファイルを解凍。 「PSD to PNG.app」にPSDファイルをドラッグ&ドロップ。 PSDファイルと同階層に「PNGフォルダ」が生成され、その中にPNG画像が書き出されます。 PSDはレイヤーで表示されているものが、PNGに書き出されます。 PSDファイルは一つでも、複数でも対応しています。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード（カーソルキー以外）だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での
「I LOVE FILE」はさまざまなファイルをお好みの拡張子に変換できるサイトです。たとえば、JPG画像をEPS形式に変換したり、MP3音源をWAV形式に変換したりできます。 以下に使ってみた様子を載せておきます。まずI LOVE FILEへアクセスしましょう。画像系、ドキュメント系、音楽系の3種類にわかれています。目的に応じて各サービスを利用しましょう。今回は画像系の変換を試してみます。 変換したい画像を選びます。複数まとめて変換することが可能ですよ。そして変換したい形式を選べば完了。あとは変換されるのを待ちます。 変換が完了すると、変換されたファイルをダウンロードすることができます。ツールを使わなくてもウェブ上で拡張子を自由に変換できるのは便利ですね。覚えておくと役立ちそうです。ぜひご活用ください。 I LOVE FILE （カメきち）
はじめまして。4月1日からLIGで働いてます、ハカセです。今後フロントエンドの開発に関する情報を発信していきますので、よろしくお願いします。 さて、フロントエンド開発でのブラウザチェックって結構大変ですよね。こういう作業は重要なのですが、飽きやすいので、効率よく進めていきたいところです。 LIGでもブラウザチェックなどのデバッグの方法については定期的に議論がなされる永遠のテーマです。 そこで今回は、チェックやデバッグを助けてくれるツールから、Win/Mac共通で使えるものを厳選してご紹介します。 1. Edge Inspect http://html.adobe.com/edge/inspect/ Adobe社が提供しているアプリケーションで、Creative Cloudに入っています。 PCのブラウザとモバイル端末で同時にリアルタイムの確認ができたり、スクリーンショットを取ったりすること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
