Web制作時に助かる、意外と役立つ便利ツール

• 作成：2016/05/9
• 更新：2016/06/29
• Tool

Web制作する時にあると役に立つオンラインサービス。もっと効率的にするために、今のところ一番使いやすいと思うツールや埋め込み型のサービスをご紹介します。

チャイムとクロック

スクールや会社でウェストミンスターの鐘を鳴らしたいならこれ。Chromeタブを開いて時間を設定しておくと、学校の「キーンコーンカーンコーン」というチャイムを鳴らせます。

Web制作教室で50分・10分ごと実際にタイマーを鳴らしてますが、学校の気分が出て気が引き締まります。この歳に聴くと切なくなりますね。

• timer tab

タブで表示できる天気予報付きクロックならこちら。アニメーションが美しい。フォントの色と種類を指定可能。

• Floaty Color Clock

WordPress ( function.php)コード自動生成

初心者に便利。WordPressのfunction.phpで使うコードを生成してくれるサービス。テキストボックスの中を埋めていき「Update Code」を押すと綺麗なコードを生成してくれるサービス。オリジナルテーマを作るときに威力発揮。

例えばショートコードを作りたい時はGenerate WordPress Shortcodesで、function.phpに記載できるコードを生成。他にWPプラグインのreadme.txtなども生成可能です。

• GenerateWP

開発者向けのドキュメント管理サービスはこちら。

• ReadMe io

ブログにサムネイル画像つきリンクを貼れる

サムネイル画像がついたリンクを貼るならこれ。あなたのサイトで「はてなブログのブログカード」風のリンクが使えるようになります。

リンクさせたいページでブックマークレットを使うと以下のように、ページのタイトル・ディスクリプション・アイキャッチ画像を整形して引っ張ってくれます。簡単。

↓表示させてみました。

• はてなブログ ブログカードをブックマークレット化してみたよ

他にサムネイル入りのリンクを貼り付け可能なサービスがこちら。

• ブックマークレットページ：Bookmarklet | Embedly

実際に貼るとこれ。横幅イッパイにアイキャッチ画像が表示されてます。

1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ

gif動画埋め込み、共有

gif動画を自分のページに貼ると重くなりがち。そんな時はクラウドに自動アップロードしてサイトに埋め込むことができるスクリーンショット共有サービス「Gyazo」。ツールはダウンロードして使います。

デスクトップからスクショを撮ると、自動でアップロードされてブラウザが開き、埋め込み可能なタグが発行されるので、それをサイトに貼り付けます。そして実際に貼り付けたものがこれ。

• Gyazo

Web上でログインすると、保存された画像一覧を見ることができます。

他に便利なキャプチャソフトは「Screenpresso」。こちらはスクリーン操作を動画で録画したり吹き出しをつけたり、DropboxやTwitterと連携可能。

• 使い方：機能はSkitch超え！画像に美しい注釈を加えられる「Screenpresso」がスゴい

ダウンロード：Screenpresso

サイト設置型チャット

多言語対応のおしゃれなFBメッセンジャー型チャットサービス「speaklyn」。サイトでアカウントを作成し、サイトに埋め込むだけの簡単仕様。最近チャットボックスを見かけるようになりましたね。

• サービス：Speaklyn
• 使い方： 問い合わせフォームはもういらない。無料の多言語チャットBOX『Speaklyn』がヤバイ - BITA デジマラボ

Webサイトギャラリーストック

気になるサイトスクリーンショットをオンライン上に蓄積させていくなら「Clipular
」が一番使いやすいかも。Chrome拡張機能で、グーグルアカウントでログイン可能。指定範囲・全画面キャプチャ可能。

• Clipular
• Webデザイン収集が捗る！Clipularの使い方 | Webデザイン | 4kaku design

社内情報共有

こちらはMarkdownを使った社内情報共有サービス。チーム内で。

• Inc — sendtoinc

アイデア共有

ちょっとしたアイデアが欲しいときはここで皆のアイデアを見て、インスピレーションを得る。

• サービスのアイデア共有コミュニティ HIRAMEKI CAFE

Gist / コード管理

これも超有名なのですが、警告のことも書きたかったのでご紹介。Gistを３カラムで見やすく管理できます。Markdown記法、シンタックスハイライトも美しく、Chrome拡張でウェブ上のコードをクリップ可能。Githubアカウントでログインできます。codepen以外のスニペット管理の中で一番使いやすかった。

連続でクリップすると最初に「One of our mostly harmless robots seems to think you are not a human.」という警告が出ますが、警告解除依頼メールを行うことによって、次回から警告されなくなります。

• 公式：GistBox
• 使い方：コードスニペット管理ツール「GistBox」が良いね！とっても良いね！ | OZPAの表4

クラウドなしのローカルのみで管理する人は「Boostnote」が軽量で使いやすいです。

• Boostnote

タスク管理

今一番勢いのあるタスク管理サービスといえば「Trello」ではないでしょうか。タスクに色がついたラベルをつけて管理。ボードのUIが美しい。

• Trello

他に、最近のタスク管理サービスでは、タスク・プロジェクト管理ツールJooto(ジョートー)など。

2012/10/29

Web屋が使う３４個の「シンプル・簡単・便利」なウェブツールまとめ

低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか？そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウ

2018/11/19

考える力がついた！超論理的になるおすすめ本11選

分からないことがあったらすぐに検索して、簡単に専門家レベルのコードや知識を入手することができるようにはなったけど、どうも「深く考える力」が無くなっているような気がします。

2012/11/26

意外と知らないかも！１６の解析ツールまとめとWEB解析用語

CPM、CTC、CPAなどアクセス解析する上でよく出てくる用語や計算方法ってすごくわかりにくいし、ど忘れしやすい。つっこまれて「えーと」は避けたいとこです。 ツールに

2012/06/7

ブログ更新アップ！ライティングが楽しくなる無料ツール２１選

evernoteで記事を作り、タグを手打ちで入れてwordpressへ貼りつけているがとても面倒。evernoteはあくまでも「メモ」であり、ブログ補助ツールではない。