Web屋が使う３４個の「シンプル・簡単・便利」なウェブツールまとめ
低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか？そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。
※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の２つご覧ください。（※ 2015/06/25 2015/06/28追記）
特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。
もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました。このページは使い倒して厳選された便利ツールへのショートカットなんです。今回はウェブツール第１弾目。
エンジニア速報は Twitter の@commteで配信しています。
テキストを整形する
改行や空白・タブを簡単に除くツールを探し続けて最終的にたどり着いたのがこのサイト。半角全角変換も簡単。使用頻度高いですね。htmlだけでなく、文章整形・レポート作成にも使えます。
※改行を完全に除きたい時は
「高度な機能」→「¥n」を「」で変換する
で変換して下さい。
フォトショップが無い時
photoshop（フォトショップ）・・高い、重い、ライセンスが面倒、低スペックなPCに入れたくない。そんな人におすすめ。フォトショップに一番近く使いやすいベスト1ツールがこれです。
色々な画像編集ツールを試してきましたが、最後に辿り着いたのが「Pixlr」でした。オンラインに画像やファイルを保存出来るのもありがたい。
※なんと「google drive」でpsdファイルを編集する時に、自動でこのサイトが立ち上がるようになりました。
ワイヤーフレームを作成する
ワイヤーフレーム用。公式サイト。図を挿入する時に「ピタッ」と吸いつくように整形されるのが気持ちイイ。使える。わざわざイラストレーターやfireworksで作る必要はない。手書きのカンプを使っている人はcacooに変更しましょう。
マインドマップを作成する
まさかとは思いますが、有料のマインドマップ作成ソフトなんて使ってないですよね。 もしマインドマップでしっくりするものが無かったのなら、一度これを試して下さい。インターフェイスもシンプルで分かりやすい。
素晴らしいのはPDF(ベクター)、PNG、JPGとしてエクスポート可能である事。共同で作業出来るように左下にチャットが出現します。
タスク管理
会員登録が必要だが、無料で使える最強のタスク管理ツール。PC用のソフトは無いのでウェブ上で管理する形。IPhone、andoroidアプリがどちらも無料で出ていて、自動同期されるスピードも早い。
chrome拡張まで出ていてインターフェイスは綺麗でシンプル。余計な機能がついていないし、ちょっとしたメモなら絶対これが良い。僕はこれで「Remember The Milk」や「Nozbe」を止めました。
ファーストインプレッション
- インターフェイスが綺麗
- シンプルで分かりやすい
- 余計な機能無し
- iPhone / androidアプリ自動同期
- アプリ版も無料
- 同期スピード早い
- chrome拡張は使いやすい
- 音声・写真可
- evernoteの簡易版みたい
- 簡単なので誰でもすぐ使える
HTML5テンプレート
簡単にHTML5のテンプレを作成出来るツール。あらかじめ用意されたテンプレートを少しのクリックだけで作成できるのは嬉しい。１からサイトを作るのはナンセンス。時間短縮にどうぞ。使い方はこちらで説明してあります。
テーブルを簡単に作成する
エクセルで作成した表をHTMLのTableに変換してくれる。通常CSSで表を整形していきますが、ちょっとした表をhtmlに差し込みたい時、共通スタイルで表示したくない時に。３秒で変換。
カラーコードを探す
PhotoShopのようなカラーピッカーです。探したい色に近い部分をクリックすれば、カラーコードを表示してくれます。逆も出来る。
簡単なSEOチェックをする
実際にサイトの改善する時は、テキストの最適化、トレンド、CVR/CTR/CTC/LPO/ROI/ROASを改善する為の提案、視聴率、googleアルゴリズムの変動などを照らしあわせて行うのでツールだけでは不可能です。人間の目で確認しなければ分からない事が多いので。
リンク数やソースなど簡易的にSEOをチェックしたい時にはこれが使えます。
競合サイトを調べてみる
調べたいサイトの詳細をチェック出来る。URLを入れるだけ。
- IPアドレス
- ホスト名
- マルウェア
- サーバー、ドメインの住所
- ブラックリスト
htaccessを作成する
htaccessファイルを簡単に作成してくれます。以下のような状態にしたい時にこのファイルを簡単に作成できます。選んでいくだけで簡単に出力してくれるのでおすすめです。
- ディレクトリファイルの一覧を表示
- 簡単な認証に利用するベーシック認証の設定
- エラー時に表示するHTMLファイルの設定
- ファイル名を省略してアクセスした時に表示
- WWWあり・なし
- サーバー移転やメンテナンスの際に使用する、リダイレクトの設定
- 特定のホストからのアクセスを許可・拒否
js / cssフォルダ作成
javascript、cssフォルダを自動で作成。最初から自分で作る人、フォルダ作成が面倒な人向け。
Instantblueprint
ブラウザーテスト
精度の高いブラウザーテストツール。Adobe IDを作成しなければいけないけど、任意のウェブサイトのURLを入力すれば、各ブラウザ(chrome / firefox /IE / safariなど)でどのような表示になっているのか簡単に確認出来ます。
並列表示・グリッドなど付いてるのが嬉しい。ブラウザーを複数立ち上げたくないときに。
モバイルモックアップを作成
パズルをはめていくようにモバイルアプリのUIが簡単に作れるモックアップサービス。使用頻度が高い部品が揃っています。
iPhone モックアップ作成
iPhoneアプリ用モックアップ作成ツール。手描き風表示に癒されます。
オンラインでhtmlを編集する
簡単なhtmlを書いてプレビューしたい時に。ソフトや高機能エディターを開くのは重いので、ブラウザ上で確認しましょう。プレビューは下ウィンドウで確認出来ます。
速度を測定する
ページごとの表示速度を測定する。スピートチェックツールの中で、とても優秀だった。表示を遅くしているファイルを洗い出してくれます。使い方はこちらで確認してください。
CSSを綺麗にしたい
スタイルシートを綺麗に見やすく整形します。皆さん、スタイルシートを確認してみて下さい。ゴチャゴチャ、バラバラとまとまりないコードは後で修正する時も クローラーにも良くありません。
CSSをコピペしてDIRECTに貼り付け、「procss」を押すだけで出来上がり。ファイルアップロードも出来ます。
ProCSSor - Advanced CSS Prettifier
アイキャッチ画像検索
CCL(クリエイティブ・コモンズ・ライセンス)横断検索。アイキャッチ画像や挿入画像で一番面倒なのが、著作権について。これならCCL(クリエイティブ・コモンズ・ライセンス)画像をフリッカーやgoogleから横断検索してくれる。
画像自動表示
画像をアップロードしたり、フリッカーからシェアしたり画像を入れるのがいちいち面倒なんだよ！という人向け。縦横の大きさを指定すればフリッカーから自動で画像を引っ張って表示してくれるコードを吐き出してくれる。後はそれを貼り付けるだけ。
flickholdrのサーバーが落ちると貼り付けていた画像も非表示になってしまうのが難点。
Placeholder images from flickr
料理の写真を美味しく変換する
撮った食べ物の写真を、美味しそうに変換するサービス。色調補正に加えて、シャープさも自動で修正してくれる。iPhoneで写真を撮った時って「青み」がかって不味そうに見えるので、このツールを使って美味しそうに変換します。
食べ物の写真をブログにアップする前に使うべきです。とある会社のデザイナーさんもこっそり使っていました。
ブログ更新をSNSに自動投稿
ブログを書いたら、twitter / Facebookに自動で投稿するツール。ソーシャルからの流入って意外と侮れませんよ。wordpressやMTにツイッタ―同時投稿を設定するのが面倒な時は、ここで設定すればブログ投稿時に自動でツイートしてくれる。
但し30分程のタイムラグがある。ブログ設定が出来ない時に。
アイデアが出ない時
オズボーンのチェックリストを利用したアイデア抽出ツール。キーワードを入れると、アイデアの元となるヒントが表示される。
抽象的な言葉ではなく、豆腐とかいちごみたいに具体的な単語を入れると良いかもね。
ボキャブラリー不足時
ブログを書いたり文章を作成する時、いつの間にかボキャブラリー不足に陥いる事ってあるんです。ちょっとした言い回し、他の言葉に変えたい時に大活躍。
この中からネタや新しい発見があるかもしれない。SEO業者も使ってるぞ～。
タイトルのワンパターン化を防ぐ
皆さんご存知、はてブされそうなタイトルを作成してくれるジェネレーター。まだ知らない人がいるので掲載しました。ブログのエントリのタイトルを考えるのが苦手な人向けに作られたそうです。コツは短めのキーワードを入力すること。
サイトをPDFに変換
ウェブページをいとも簡単にPDFに変換してくれます。ページのURLを入れて「P」を押すだけ。これ結構楽しいですね。普段PDFを使わない人も試してみては？
面白い背景を作成する
レイヤーを重ね合わせてパララックスな背景を生成できるジェネレーター。div idと縦横幅を最初に入力する。
○○な感じの画像ないかな？を探す
左の空白ボックスに自分で記号や絵を書くと、右側のカラムに似たような画像を検索表示してくれる。
テキストを暗号化
文章を暗号化して、読めない記号に変換する。Javascriptで動いているのでネットワーク上にデータが流れる事もない。もちろん暗号化した文字も簡単に復元出来る。パスワード付きなので安心。絶対漏らしたくない（パスワード一覧や墓まで持って行かないと行けないような）内容をevernoteなどのようなストレージなどに保存する時に。
テキストを比較をする
テキスト差分なんていつ使うの？と思うかもしれませんが、大きめのファイルや過去に作成したコードを比較したい時なんか一発で差分箇所を表示してくれます。コピーされた文章を比較したい時にも。
ロゴ、名刺作成サービス
ロゴ作成に時間をかけてる場合じゃありません。どういったロゴが良いのか、名刺のデザインはどうすれば良いのか、このサイトが自動提案してくれます。ダウンロードにはメールアドレスが必要ですが、google / facebookでの認証でもオッケーです。もちろん、ブログやサイトのロゴ作成時にも活用出来ます。
作り方
- try it freeを押す
- Your company name（会社名を入れる）
- Slogan（スローガンを入れる）
- Choose business type（タイプを選択）
- 画像選択（いろいろなバージョンがある）
- 名刺、ロゴを作成出来る
Web電卓
計算機を必要とする時に、ソフトを立ち上げたりアドレスバーに入れるのが面倒なんですよ。余計な表示が無くてすぐに使える計算機はこれ。リアルで大きく押しやすい。
google の機能をまとめて使いたい
googleユーザー向け。Gmail / drive / reader / bookmark / youtube / task / news / maps /などのサービスを使う分だけ1ページに表示してくれる。綺麗なレイアウトなので使いやすい。google アカウントがあれば認証してくれる。グーグルサービスへのブックマークが増えてきた時、スタートページをGpanionにすると便利。
オンラインOCR
フリーで使えて精度が高いOCR（画像に書いてあるテキストを書き出す）ツールって中々ないんですよね。おまけにブラウザ上で動作するとなるとこのサイトでしょうね。各国の言語に対応していて使い方も簡単。ファイルアップロードかURLを指定後「Convert」を押すだけ。でも無料なので精度は今ひとつ。
駆け足でご紹介しましたが、未だにブックマークから外せない、他のブラウザにも必ず入れてしまう、他のIT関係者の人も使ってた・・・といった所から絞りに絞ってチョイスしました。
スポンサード リンク
Comments
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
Leave a Comment