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

Browse By

Tag Archives: WebApplication

[Web Application] Jpeg.io – どんな画像フォーマットでもJpegにできるコンバーター

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

どんなフォーマットのもの画像でも、Jpegに変換できる画像コンバーター。対応しているフォーマットはJPG, PNG, GIF, SVG, BMP, EPS, PSD, TIFF, WEBP。Webpってなんじゃい?と思って調べたところ、Googleが開発した画像フォーマットだそうです。こんなんあるんスね・・・。扱える画像フォーマットにベクター画像も含まれる点がナイスです(AIが入ってれば完璧だった)。汎用性も高いので、手元にPhotoshopとかSketchとかがない時に使えそうです。

[Web App] Launchaco – 空きドメインや、SNSの空きアカウントを一括検索してくれるサイト

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

未登録の空きドメインや、SNSでの空きアカウントなどを一括で検索してくれる便利なサイト。新規サービスやWebサイト立ち上げる時にココで検索しておけば、後になって「サービス名のTwitterアカウント空いてなかったー!」的なギャース感を回避できそうです。ドメインについてはかなりマイナーなTLDまで確認してくれます(.ninjaなんてあるんだ・・・)。あとついでにロゴタイプもいくつか作ってくれます。こういうツールとってもナイスです。

[Music] iO-808 – TR-808のシミュレーター

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

リズムマシンの名機Roland TR-808のオンラインシミュレーター。機能の全てではないけど、基礎的なものについては概ね再現されています。ベーシックな使い方は簡単で、まずは画面左上にある「INSTRUMENT-SELECT」キーを使って楽器を選択します(例えばBDはBassDrum)。次に画面下部にある16個のボタンを使って音符を配置していくだけ。この16個のキーは、1つが16分音符という位置づけで、4つで1拍、16個で1小節だと考えます。楽器ごとに個別に配置できるため、これだけで複数の楽器が鳴るリズムトラックを作る事ができます。画面右上にあるツマミ類を使えば、各楽器の音質やレベルを調整できます(ここにある楽器名を見れば、セレクター記載の略称も分かるという仕組み)。これがブラウザ上で動くってのはスゴい。iPadで使えばリズムマシンとしてガチで使えるんじゃないでしょうか。あと使い方をしっかりと学びたい人は、実機のマニュアルを読むのがよろしいかと。

[Web App] emoji-gram – 絵文字を使って文字を書けるサイト

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

絵文字を使って文字が書けるサイト。入力欄に文字タイプすると、絵文字がその形になって、コピペして使う事ができます。ただし半角英数にしか対応していません。文字部分は左下から、背景部分は右下からセレクトできます。主な用途がメッセージングのためか、スマホで見るとちょうどイイ感じにレイアウトされてます。文字情報は縦書きされるので、人に送った際の改行問題についても心配する必要がなさそうです。自分はオッサンなのであまり絵文字を使う機会もあまりなく、とりあえずウンコ書いておきました。

[Color] Palettable – 好きか嫌いかで1色ずつ色を決めていくカラーパレット

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

好きか嫌いかという極めてシンプルな基準で、1色ずつ色を決めていくカラーパレット生成サイト。気に入ったらLikeの「L」を、気に入らなかったらDislikeの「D」をタイプするだけ。Likeされた色はカラーパレットに残りますが、やっぱコレいらねーやと思ったら「Backspace」キーで削除する事もできます。また作ったカラーパレットはこんな感じに固有のURLが生成されるので、他人と共有するのもラクチンです。サイトとかアプリのカラー指定する際に、「こんな感じどうかなー?」みたいにチームで議論する時なんかに使えそうです。

[Web Design] FontFit – 既存Webサイトのフォント指定をいじくれるサイト

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

既存Webサイトのフォント指定を、アレコレいじくる事のできるサイト。画面左上の入力フォームにURLを突っ込む事でサイトがロードされ、場所ごとにフォント指定を変更する事ができます。場所の指定はタグで行い(デフォルトはAタグ)、次にFont Faceやサイズ、スタイルなどを変更します。Font FaceについてはGoogle Fontsがロードされているようです。変更するフォント指定ができたら、ページ右上にある「Share / Export」ボタンからフォント指定のタグを取得する事ができます。サイトのフォント類を再考したい時なんかに、見た目を確認しながら作業できるのがイイですねこれ。

[Web App] Photopea Photo Editor – PSDファイルを開いて編集できるWebアプリ

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

PSDファイルを開いて、かつ編集までできてしまうWebアプリ。Safariではちょっと表示が崩れるので、Chromeとかの方が良さそうです。サイトを開くとサンプルファイルが開いてますが、実際のPhotoshopと同じようにOpenコマンドから既存のローカルファイルを開く事ができます。試しにファイルを開いてみましたが、ちょっとレイヤースタイルは化けはするものの、それ以外はわりとまともに開く事ができました。Photoshopがない時の代替なんかに使えそうです。

[Tool] Pingdom Website Speed Test – Webサイトのロード時間や、ボトルネックを調べてくれるサイト

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

WebサイトのURLを入力する事で、対象サイトのロードタイムを計測してくれます。結果はパフォーマンスをグレードやロードタイム、ページの総容量、リクエストの数で評価してくれます。またこのサイト便利なのが、コンテンツの種類ごとにサイズを分けて表示してくれたり、どのファイル(外部スクリプトなども含みます)がボトルネックになっているのかまで調べてくれるという点。結果画面一番下の「File requests」のエリアを「Load time」でソートすると、どのファイルがクソ重いのか1発で分かります。Webサービスなどでページパフォーマンスチューニングする際に超使えそうです。ナイスですねー。