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

Browse By

Tag Archives: Generator

[Generator] UnCSS Online! – HTML内で使われていないCSS記述を削除してくれるサイト

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

HTML内で使われていないCSS記述を削除して、CSSファイルのダイエットができるサイト。自分の場合、過去に作ったサイトをフレームワーク代わりにして新規にサイト作る事とかあるので、こういうとっても助かります。HTMLの削除だけ手動でやって、CSSの削除はこうしたジェネレーターに任せる事ができれば、作業時間大幅に短縮できますからね。というわけで早速コード突っ込んでみたんですが、なぜかタイムアウトしちゃいました・・・。なんか条件とかあるのかもしんないです。ぬふぅ。

[Generator] cssFilters.co – CSSフィルターの効果をリアルタイムに確認できるサイト

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

CSSフィルターの効果を、リアルタイム確認しつつ調整できるサイト。まずは画面上部にあるフィルター一覧から求める効果に近いものを選び、次に右側にあるスライダーを使って微調整します。納得のいくフィルターができたら「CSS CODE」タブ内にCSSコードが生成されているので、あとはそれをコピペして使うだけです。もちろんプリセット画像だけでなく、任意の画像をアップロードして使う事もできます。CSS直書きするよりもPhotoshopのように直感的に操作できるのが利点です。

[Generator] The App Icon – iOSとAndroid用のアイコンファイルを一括で書きだしてくれるサイト

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

1枚の画像からiOSとAndroid用のアイコンファイルを一括で書き出す事のできるサイト。1024 x 1024の画像ファイルを放り込むだけで、各プラットフォームの開発や申請に必要なアイコンファイルをまとめて生成する事ができます。またiOS用のフォルダ内にはwatchOS用の画像ファイルも自動で作られるため、Apple Watch App制作の際にも使えます。PhotoshopではPSDとアクションの組み合わせでできたりするけど、自動処理系がそれほど充実していないデザインツール使っている人にとっては、この手の一括書き出しツールは便利ですな。

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

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

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

[Misc] O RLY Cover Generator – オライリー本のカバージェネレーター

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

Web関係の仕事してる人なら誰でも知っている、オライリーメディアのアニマルシリーズ。通称オライリー本の表紙画像を作れるサイト。自分の好きなようにタイトルや著者名を入力でき、ソレっぽい表紙を作る事ができます。動物の絵は40種類、カラーパレットは16種類用意されていて、この中から好きなものをチョイス可能です。カラーパレットのチョイスが、いかにもオライリー本にありそうなちょっとくすんだ色ばかりで「あー分かってるなー」感があります。ひとつ残念なのは日本語が使えない事。ですので英語版のつもりで作りましょう。作った表紙は大きいサイズでダウンロードする事もできます。

[Generator] Unique gradient generator – 画像からぼかしグラデーションを作成でき、CSSコードを取得できるジェネレーター

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

画像を極端に拡大する事でぼかし効果のように見せ、それをCSSコードで取得できるというジェネレーター。サイトの背景などに敷くブラーバックグラウンドなんかに使う事を目的としているようです。元となる画像は用意されているものから選ぶ事ができ、また任意の画像をアップロードすることもできます。画像の位置やサンプルするエリアの大きさは右上にあるコントロールパネルから操作でき、またショートカットとして移動に十字キーが、ランダム設定にはRのキーが割り当てられています。気に入った画像ができたらサイト右下にある「Generate CSS」からCSSのグラデーション指定を取得できます。画像部分はBase64でエンコードされているので、別途ファイルが必要になる事もありません。手軽にブラー効果の画像を使いやすい形で取得できるのが便利ですね。

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

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

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

[Generator] Landscape – ソーシャルメディア用の様々なサイズの写真を生成してくれるサイト

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

各種ソーシャルメディアで使われる、様々なサイズの画像にリサイズできるサイト。例えばFacebookのカバー写真(プロフィール欄の一番デカいアレ)やプロフィール写真、Pinterestのストリーム用の画像などを、掲載するのにちょうど良いサイズにリサイズして、かつトリミングも任意で行えます。画像ファイルをサイト内に放り込めば、どのソーシャルサイト用のものを作るかを聞かれ、その後どの部位に使うのかを聞かれます。これらをまとめて行う事もでき、最終的には複数の画像ファイルがまとまったZipファイルをダウンロードできるという仕組み。対応しているソーシャルメディアはTwitter, Facebook, Instagram, LinkedIn, Google +, Pinterest, Youtubeの7つ。またCustomという項目を選ぶ事で、縦横ピクセルを個別に指定する事もできます。画像編集ソフトが手元にない場合や、「いちいちサイズ調べるのメンドくせぇ!」という横着な方にはとってもナイスなサイト。