Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Category Archives: WebApp

[Web App] Streamable – 動画をトリミングして、かつ共有できるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

動画をアップロードして、任意の位置でクリップ(時間軸でトリミング)できるツール。動画のタイムライン内でinとoutの位置を決めるだけで、動画のクリップができます。アップロード以外にもYoutubeなどのオンライン動画にも対応してるのが便利。クリップした動画は固有のURLが生成される形でオンラインで共有でき、またEmbedタグによるページ内埋め込みにも対応してます。切り取れる動画の長さは60秒までとやや少なめですが、動画の一部を共有したい時に便利ですねこれ。

[Web App] cntrlc.me – デバイス間でクリップボードを共有できるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

異なるデバイス間でクリップボードを共有できるサイト。Facebookアカウントでログインするだけで使えます。ログインするとユーザーごとのクリップボード空間が与えられ、そこに貼り付けたものをデバイス間で共有できるという仕組み。共有できる文字列は1つではなく何個も作る事ができ、個別に残したり削除したりできます。Webだけでできて、特別アプリなどが必要ない点が便利ですねこれ。まぁMacとiPhone使ってれば「メモ帳あるじゃん」で済んだりもしちゃいますが。

[Web App] uinames.com – ダミーネームのジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

ランダムに人の名前を生成してくれるジェネレーター。Spaceキーを押すごとに適当な人名を生成してくれます。このサイト色々と多機能で、性別、国籍などを任意で固定できるほか、生成された名前でググると実際にそういう名前の人はいるのかどうかのチェックまで行う事ができます(ググるというかDuckDuckGoで探してくれます)。またAPIが公開されており、このサイトの機能を動的なサイトにおいても使う事ができます。用途はシンプルですが地味に多機能です。モックアップ制作などにおいて使えそうです。

[Web App] ASCIIFlow – アスキーアートでフローを描画できるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Webやシステム開発などで用いられるフロー図を、アスキーで描画できるサイト。四角や矢印、フリーハンドでの描画、消しゴム、拡大縮小、テキストタイプなどが行えます。1度描いた四角を、後からサイズ変更できるのは便利ですね。作ったフローはGoogle Driveに保存できるほか、その場でテキストデータにエクスポートする事や、逆にインポートする事もできます。チャットなどのテキストベースでのコミュニケーションの場で、サクっとAA描いて相手に見せるといった使い方とかができそうです。

[Misc] Winka.link – 長ったらしいURLをシンプルな数字に置き換えてくれるリンクジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

長いURLをシンプルな3つの数字に置き換えてくれて、PCで見ているサイトをモバイル端末でもサクっと見れるようにしてくれるサイト。流れとしては簡単で、まずはPCからサイト内にある入力エリアにURLをぶち込みます。すると3つの数字を生成してくれます。次にスマホから同様にこのwinka.linkに行き、先ほど生成された3つの数字を入力するだけ。これだけでどれだけ長いURLだろうと3つの数字に短縮してくれます。ただしこれには条件があり、PCとスマホが同一ネットワークにいる必要があります。いわゆるLink Shortenerとは仕組みが若干違うので、あくまでも個人内で完結する用途にのみ使えます。これがどれだけ利便性があるのかは微妙ですが、なんか試みとしては興味深いなぁと思ったのであります。

[Bootstrap] Shoelace – Bootstrapのグリッドジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

Bootstrapを使ったグリッドレイアウトのためのソースコードを、サクっと作ってくれるHTMLコードジェネレーター。真ん中あたりのエリアをクリックすると、新規にROW(まぁ行みたいなもん)を作る事ができ、その中でドラッグする事でCOL(まぁ列というかカラムというか)を作る事ができます。ここで作ったROWやCOLにはそれぞれ名前を付ける事ができ、これはclass名となります。こうして一通り作ったレイアウトは、画面右側にあるエリアにリアルタイムでHTMLが生成されるので、あとはそれを保存するだけ。このサイト便利なのが、画面左側に出ているデバイスの一覧。これによりデバイスごとにレスポンシブレイアウトを組む事ができます。つまりxs、sm、md、lgそれぞれでのレイアウト変化を、ひとつの画面で行う事ができます。いやこれ便利ですわ。Bootstrap使ったレスポンシブレイアウト前提のサイトを作る時に、最初にココでレイアウト組んじゃうのアリですね。個人的には最近Pure.cssに若干浮気気味ではあるけど、今度使ってみようと思います。

[Generator] Dunnnk – ハメコミ画像のジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

MacやiPhone、iPadなどのデジタルデバイスの画面に、任意の画像をハメ込む事のできるジェネレーター。ハメ込みたいテンプレート画像をクリックすると、アップロードする画像を求められます。画像を選択するとデバイスのディスプレイ部分にその画像がハメ込まれるという仕組み。WebサイトやMobileAppを実際に使ってるように見せる事ができます。サクっと作れるのがナイスです。テンプレート画像はApple系デバイスのみのラインナップのようです。

[Generator] Free Icon Maker – Appアイコンをデザインできるオンラインツール

  • Pocket
  • このエントリーをはてなブックマークに追加

アイコンをデザインできるオンラインツール。iOSやAndroidのアプリ、またホーム画面に置いた際に表示されるFaviconなどに向いてます。ツールとしては結構多機能で、まずはモチーフとなるアイコンを選び、併せて枠を選びます。iOSで一般的な角丸正方形以外にも色々なシェイプがあります。そしてアイコンや枠の色やシャドウなどを調整し、気に入ったものができた時点でダウンロードできます。試しにダウンロードまでやってみましたが、128 ✕ 128の透過PNGフォーマットでした。アプリのアイコンとしてはちょっとサイズが足らないけど、Faviconとしては使えそうです。自分で作った画像のアップロード機能などはないので、自分でデザインできる系の人にはツールとして物足らないかもしれません。