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

Browse By

Tag Archives: WebApplication

[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サービスなどでページパフォーマンスチューニングする際に超使えそうです。ナイスですねー。

[Web Application] gifs.com – YoutubeのURLからアニメーションGifを作る事ができるサービス

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

YourubeのURLを突っ込むだけで、動画からアニメーションGifを作る事のできるサイト。URLを突っ込むと動画のプレビューが表示され、まずはスタート位置を決めます。次にエンド位置を決めて、画面下部の「Create Gif」でGifファイルが作れます。このサイトスゴいのが簡単な動画編集機能も備えている点。例えばキャプションを入れたり、ボカしや色調整などの編集をした上でGifファイルにする事もできます。GTAの「Wasted」テンプレートなどのネタシーンが用意されているのが個人的にアツかったです。こんな事までWeb上でできちゃうってのはなんだかスゴいですな。

[Web App] BEAM – シンプルなグラフ生成サイト

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

シンプルなグラフを作成できるサイト。作り方は簡単で、まずはグラフの種類を選びます。次にグラフのプレビュー左にある引き出しからスプレッドシートを出して、そこに数値を入力するだけ。イラレやエクセルでグラフ作るのに比べると超カンタンです。作成できるのは円グラフ、折れ線グラフ、棒グラフの3つ。それぞれ複数のテーマが用意されていて、棒グラフは縦並びと横並びから選択できます。細かいカラー指定ができるともっと便利なんですけどねー。

[Web Service] Carrd – コードを書かずにポートフォリオをビルドできるサイト

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

コードを書かずにWeb上だけでポートフォリオページを作る事のできるサイト。とりあえず試してみたいだけなら、LoginせずにいきなりBuildできます。まず最初に複数のテンプレートから自分が作りたいものに近いテンプレートを選んで、その後で細かくカスタマイズしていくという流れのようです。各要素は編集だけでなく移動などもでき(完全に自由というわけではなく、入れ替え程度)、編集が完了したら右上のフロッピーアイコンからパブリッシュして完了。各種SNSへのリンクアイコンも一通り用意されているので、そうしたメディアへのハブとしても使えそうです。