モックアップをあらゆるブラウザで表示しているかのような画像を生成する「Browser Frame」

2016-11-20 | 0 | Posted in WEBツール・サービス

Browser Frame

作ったモックアップやワイヤーフレームの画像をブラウザにはめ込んだ状態にして共有したいこともあると思うのですが、それがあらゆるブラウザにはめ込んでということになると、該当の端末やブラウザがなかったりと、手間がかかってしまうものですよね。

今回ご紹介するのは、非常にシンプルではあるものの、地味に便利なスクリーンショットを生成してくれるサービスです。

続きを読む »

サイトのプロトタイプに対するフィードバックをサイト上でおこなえる「Cycles」

2016-11-13 | 0 | Posted in WEBツール・サービス

cycles

サイトのプロトタイプを作成し、ユーザーテストをおこなってフィードバックをもらい、修正後に今度は承認をもらうという一連の作業を、まだまだメールやチャットでおこなっていて非効率だと感じることも多いのではないでしょうか。

今回ご紹介するのは、そのプロトタイプがウェブ上にあるとき、スクリプトを埋め込むだけでウェブ上で直接コメントし、やり取りできるようになるサービスです。

続きを読む »

Chromeのアドレスバーからツイートできる「Chromnitweet」

2016-11-06 | 0 | Posted in Google Chrome

chromnitweet

Vineを閉じることを発表するなど、収益性の問題から先行きに不安を感じるTwitterですが、日本国内ではまだまだアクティブユーザー数を伸ばしており、不動の人気を誇るひとつのソーシャルメディア。

そんなTwitterを手軽に使えるツールはたくさんありますが、今回はそのなかでもChromeブラウザのアドレスバー(ロケーションバー)から直接ツイートできる拡張機能をご紹介します。

ブラウザのアドレスバーからツイートできるChrome拡張「Chromnitweet」

Chromnitweet」は、Google ChromeのアドレスバーからTwitterへ投稿できるChrome拡張機能。

思い立ったときにすぐにツイートできるのが特徴です。

1.Ctrl + L を押してアドレスバーへ移動

Chromeのショートカットキーでアドレスバーを選択。

Chromeのショートカットキーでアドレスバーを選択。

ショートカットキー「Ctrl + L」を押すことで、アドレスバーを選択します。

2.「tw」と入力

アドレスバーで「tw」と入力。

アドレスバーで「tw」と入力。

次にアドレスバーで「tw」と入力します。全角入力になっていたら「F10」を押して半角に変換します。

3.「Tab」キーを押す

「Tab」キーを押下。

「Tab」キーを押下。

そして「Tab」キーを押します。

4.投稿する内容を入力して「Enter」キーを押す

投稿する内容を入力。

投稿する内容を入力。

最後に投稿する文章を入力して「Enter」キーを押せば投稿完了です。ここでサジェスト欄に残りの文字数が「109 Characters remaining.」といったように表示されるのも便利ですね。

Chromnitweetで投稿したツイート

投稿された内容がこちら。改行は任意におこなえないようですが、URLを含めることは可能です。

URLを含めて投稿したもの

さらに投稿が完了すると下記の画像のように通知が出るようなのですが、環境によっては出ないようです。(ただし空で投稿したときのエラー通知は私もでました。)

投稿完了の通知。

投稿完了の通知。

興味がある方はChromnitweetのページで拡張機能をインストールしてください。初回のみ、Twitterとの連携設定が必要になります。

続きを読む »

二択のリアルタイムなアンケートを作れる「One Click Battle」
二択のリアルタイムなアンケートを作れる「One Click Battle」
選挙結果をほぼリアルタイムにオンラインで見られるようになっている昨今、アンケートをとるならば、やはりリアルタイムに結果を共有したいというものです。 今回ご紹介するのは、二択ではあるものの、そのアンケート結果をビジュアルでリアルタイムに見せることができるサービスです。 アンケート結» 詳細を見る
動画キャプチャして、音声とWebカメラの映像とともに簡単にシェアできるChrome拡張「ViewedIt」
動画キャプチャして、音声とWebカメラの映像とともに簡単にシェアできるChrome拡張「ViewedIt」
ブラウザのタブやスクリーンでの操作を動画にして共有したいときに使えるツールは多々あると思います。 今回は、そのなかでもかなりシンプルな操作で、手軽に画面の動画キャプチャを共有できるうえに、ウェブカメラの映像とマイクの音声も同時に共有することができるChrome拡張機能をご紹介します。 » 詳細を見る
SVG画像を背景画像として呼び出すCSSを生成する「Hero Patterns」
SVG画像を背景画像として呼び出すCSSを生成する「Hero Patterns」
CSSの背景として呼び出せるSVG画像のパターン集はいくつもあると思いますが、今回ご紹介するのは、配布されているパターンを元に、色や背景色を指定してCSSで書き出すことができるパターンの配布サイトです。 SVG形式の背景画像を呼び出すCSSをパターンから手軽に生成できる「Hero Pa» 詳細を見る
お手頃価格で自宅のテレビが80インチに!?BenQのプロジェクター「HT3050」を使ってみた
お手頃価格で自宅のテレビが80インチに!?BenQのプロジェクター「HT3050」を使ってみた
大画面のテレビで、自宅でも迫力のある映像を見ることは、男のロマンであるとも言えると思います。 しかし、コストコなどで大きなテレビの価格を見てもけっこうなお値段になるので、家族の了承をなかなか得られないのが現実です。 今回は、このような問題を解消できそうな、BenQのホームシアター プロジェク» 詳細を見る
詳細なデータまで視覚化する天気予報サイト「Dark Sky for Web」
詳細なデータまで視覚化する天気予報サイト「Dark Sky for Web」
天気予報サイトにはさまざまなものがすでにあり、Googleも検索結果にピンポイントかつ詳細な天気情報を出していますよね。 ただ、場合によっては風の強さや風向き、あるいはUVインデックス(紫外線の強さの指数)などもっと詳細な情報をわかりやすく知りたいということもあるはず。 今回は、そんなピンポ» 詳細を見る
4億ドル以上を調達したサービスのピッチ資料をまとめている「Startup Pitch Decks」
4億ドル以上を調達したサービスのピッチ資料をまとめている「Startup Pitch Decks」
YoutubeやAirbnb、BuzzfeedにLinkedinなど、なかには最近ぱっとしないものもあるものの、いずれも4億ドル以上を調達しているサービスであることは間違いありません。 これらのスタートアップは、当然のことながらピッチ資料を作成しているわけで、それらの資料を見るだけでも勉強にな» 詳細を見る
CSVのデータをさまざまなグラフで瞬時に視覚化してくれる「PREVIEW」
CSVのデータをさまざまなグラフで瞬時に視覚化してくれる「PREVIEW」
データをグラフ化するのは、エクセルを使うなどすれば特に困ることもないかと思います。しかし、ちょっとデータが複雑になると、わかりやすいグラフで視覚化するのが少し難しくなるのではないでしょうか。 今回ご紹介するのは、3列以上のデータでも瞬時にさまざまな種類のグラフで視覚化してくれるサービスです。 » 詳細を見る
スタートアップのピッチ資料(pitch deck)のテンプレートが毎週追加される「Pitchdeckers」
スタートアップのピッチ資料(pitch deck)のテンプレートが毎週追加される「Pitchdeckers」
スタートアップやベンチャーが新しいサービスやビジネスモデルを売り込むときに使うピッチスライド(pitch deck)。世の中的にはこういった資料を定型化して、本当に重要な事に時間を使うようにシフトしていますよね。 今回ご紹介するのは、そのピッチスライドのテンプレートを配布しているサイトです。 » 詳細を見る
デスクトップやGoogleドライブ、Evernoteなどから横断検索できる「Meta Search」
デスクトップやGoogleドライブ、Evernoteなどから横断検索できる「Meta Search」
ふとひらめいたアイデアのメモや議事録にアウトプットした文章などなど、とにかく記録を残しておくことが大切なわけですが、その記録を保存する場所にこだわりすぎると、せっかくひらめいたものが薄れてしまったり、忘れてしまうこともありますよね。 かといって、どこに保存したかを忘れてしまうと、あとから探すの» 詳細を見る
サイトマップやライトな画面遷移図を簡単に作れる「MockFlow SiteMap」
サイトマップやライトな画面遷移図を簡単に作れる「MockFlow SiteMap」
サイトを制作する際に作るサイトマップや画面遷移図。これらを既存のツールで実際のサイトをイメージしやすいように作るのは至難の業ですよね。 凝ったものを作ろうとしても無駄な時間を浪費するだけですし、かといって簡易すぎても伝えるべきことを伝えられなくなるなんてことにもつながりかねません。 そこで今» 詳細を見る
ワンクリックでインターネットの回線速度を調査できるChrome拡張機能「Speedtest by Ookla」
ワンクリックでインターネットの回線速度を調査できるChrome拡張機能「Speedtest by Ookla」
利用しているインターネット回線の接続速度を調べる機会は、デスクトップ、ノートといったデバイスごと、あるいは接続する場所ごとにあると思います。そのようなときに、わざわざサイトを探して調査するのも面倒ですよね。 そんなときに役立つのが、今回ご紹介するChrome拡張機能。Googleアカウントでイ» 詳細を見る
GoogleとFacebookのページを目に優しい暗い背景にするChrome拡張「Darkness」
GoogleとFacebookのページを目に優しい暗い背景にするChrome拡張「Darkness」
日頃からよく使うツールの大半が明るい色のUIであるために、ブルーライトから目を守るメガネを使っているような方も多いのではないでしょうか。 しかし、そのようなメガネをかけていたとしても、長時間画面を見ていると、目が疲れることにあまり変わりがないようにも感じるところがあります。 今回ご紹介するの» 詳細を見る