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

Browse By

Tag Archives: WebApplication

[CSS] 11 Useful Online Tools for Better CSS Development – CSS生成のための便利なオンラインツール

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

CSSによるレイアウトやテキスト指定、CSSファイルの圧縮、W3Cによるバリデーションなどの、CSS関連の便利ツールがまとめられた記事。特にレイアウト関連のツールが多く紹介されてて、YUIやBluePrintなどの、グリッドレイアウトのためのCSSフレームワークベースのジェネレーターなども入ってます。CSS関連のジェネレーターとはいえ、初級者向きというよりは中級者以上推薦といった感じです。フォント指定の便利サイト、Typetesterは自分も好んでよく使っております。

[CSS] 10 Online Tools and Apps to Help Optimize and Format CSS – CSSを最適化するオンラインツール

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

CSSを最適化してくれるオンラインツールがまとめられた記事。結構この手のサイトって数あるんスね。「CSSの最適化? なにそれおいしいの?」という方のために簡単に説明すると、重複するプロパティや必要でない指定を排除したり、改行コードを削除する事でCSSのサイズを小さくするためのものです。改行コードの削除は、CSSを他人にあまり見られたくない場合に、見づらくするための処置としても使われるような気がします。言うてもDreamweaverのコードフォーマットで1発で見やすくなっちゃうんだけど。CSSファイルをよりスマートにしたい場合に是非。

[WEB APPLICATION] Scroll Clock – スクロールバーを使ったブラウザベースの時計

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

最初サイトを開いた時、何なのかよく分かりませんでしたが、これアレですね時計ですね。タイトルバー見てようやく分かりました。スクロールバーを時・分・秒と並べる事で数字を表現してます。時間はローカル環境の時計を参照しているようなので、時差などはありません。しかしなぜ時計をスクロールバーを使って作ろうと思ったのか、そこがとっても気になるところであります。ソースを見るととってもシンプル。JSライブラリにはMooToolsを使っているみたいです。

[CSS] 13 Really Useful Online CSS Tools to Streamline Development – オンラインCSS関連ツールまとめ

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

オンラインで使えるCSS関連ツールがまとめられた記事。CSS関連とは言っても結構その内容は幅広く、チートシート、フォントタイプセット、レイアウト制作補助、グリッドデザイン補助、CSSフレームワーク関連ツール、デバッグツールなど色々揃ってます。自分の場合オンラインツールでよく使うのはフォント関連。タイプセット作ったり単位変換したり。用途が限られている分結構便利なんですよね。

[WEB APPLICATION] Mockinbird – サイトのモックアップ(ワイヤーフレーム)をオンラインで作って共有できるウェブアプリ

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

サイトのモックアップをオンラインで作って、さらにそれをクライアントなどと共有できるウェブアプリケーション。サイト内の“Try it Now”から始める事ができます。一般的なドローツールが一通り用意してあって、これ系の仕事した事のある人ならすぐに使えそうです。オムニグラフにちょっと似てるような印象。ところでこういうのってみなさん何て言います? 自分の場合は「ワイヤーフレーム」って言葉をよく使うんだけど、人によっては「モックアップ」だったり「プロトタイピング」だったり色々ありますよね。

[WEB APPLICATION] 51 Web Apps for Web Designers and Developers – ウェブ制作者のためのウェブアプリ51選

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

ウェブデザイナーやデベロッパーのための、ウェブアプリケーションまとめ記事。フォトショップ代替えの画像加工、カラーピッカー&パレット、CSSのフォント指定補助ツール、単位変換、フォント抽出、CSSレイアウト補助ツール、パターン生成、メニュー生成、Gifアニメ生成、各種ブラウザ確認、バリデーション、アクセス解析、CMSなどなど盛りだくさんです。カテゴリごとに分けて紹介されているわけではないので、そのへんちょっと不便な気もしますが、この情報量はなかなかのものです。

[WEB SERVICE] Online image editor pixlr free – 画像編集ウェブアプリ

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

ブラウザ上で画像レタッチを行う事のできるウェブアプリ。下記URLにアクセスするだけで、デザイン系の仕事してる人ならすぐにピンとくる、いわゆるフォトショップに近いパレット群が出てきます。一般的なツールは一通り揃っていて、ローカルファイルもオンライン上の画像ファイルも開く事ができます。フィルタやレイヤー、さらにはレイヤースタイル(これってフォトショップ独自の機能だよね?)まで完備。いやはやこの多機能ぶりにビックリでございます。特別な事を要求しなければ、これで十分なんじゃね?って思えるくらい。といってもフォトショップもオンライン版が出るという話なので、そっちも気になるところではありますが。ウェブアプリってほんと花盛りな業界なんだなーと、最近そんな風に思います。

[WEB APPLICATON] Sumo Paint – フォトショップそっくりのお絵かきウェブアプリ

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

いやコレなかなかスゴいっす。お絵かきウェブアプリとは書いたものの、ローカル環境のファイルをアップする事もできるので、機能的に相当コレモンのレタッチウェブアプリに仕上がってます。ウィンドウ内の各パレットはドラッグする事ができ、レイヤーの機能もあり、フィルタまであります。四角や多角形などの画像描画ツールが揃ってるのが特徴でしょうか。これ系のウェブアプリの多くの例に漏れず、フォトショップのインターフェースを模しているので、ツールの使い勝手として汎用性が高いですね。こういうの使ってると、フォトショなくてもある程度の画像加工ってできちゃうんじゃねーか、とまで思います。とりあえずいつものアレ、というかザクを書いてみたのですが、相変わらずの幼稚園児レベルで色々と残念ではあります。