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

Browse By

Tag Archives: WebApplication

[Web Font] IcoMoon App – Webフォントのセットを作り、TTFやSVGでセット一式をダウンロードできるサイト

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

サイトに用意されているアイコン群から自分なりにWebフォントのセットを組んで、それら一式をダウンロードする事のできるサイト。プリセットされているアイコンの数もかなりあり、基本的にあるものを使うだけでもイケますが、自分で作成したイメージをアップロードする事もできます。ダウンロードされる書類一式はEOT, SVG, TTF, WOFFの4つ。Webフォントの形式以外にもSVGなども含まれている点がナイス。単純にベクターアイコンのネタ帳としても使えます。

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

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

CSS3の各種フィルターを適用し、その効果をリアルタイムに確認する事ができるサイト。フィルターの効き具合はスライダーを使って個別に調整する事ができ、また複数重ね掛けする事もできます。意図する効果ができあがったら、右下の「CSS Syntax」からコードをコピーできます。結果とソースが常に表示されてる点が使い勝手イイですねこれ。

[Web Design] 22 Websites that are Beautiful and Useful – 美しく、かつ使えるウェブサイト

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

美しくデザインされただけでなく、いろんな意味で使えるウェブサイト。どんな意味で使えるのかというと、例えばアイコンの配布サイトだったり、コードを学べるサイトだったり、レスポンシブレイアウトのフレームワークだったり、アクセス解析ツールだったり色々です。優れたツールは必然的に優れたデザインがされてる事の証左、というとちょっと言い過ぎでしょうかね。

[Web Application] Discuss.io – グループでのWeb制作に便利なディスカッションWebアプリ

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

グループでのWeb制作に便利な、ディスカッション用Webアプリ。デザインラフをアップして注釈を付け、それを知り合いに共有する事ができます。サポートされているフォーマットはPNG、JPG、PSD。PSDがサポートされてる点がイイですね(重いだろうけど)。画像のアップができたら固有のURLが発行されるので、あとは注釈を付けて友人にURLを知らせるだけで共有できます。デザインレビューの際に便利ですねこれ。サイト内には動作デモ(example design review)とチュートリアル動画も用意されてます。デザインレビュー以前のプロトタイピングにも使えそうです。

[Web Design] 20+ Important Web Design Tools – Webデザインに役立つ20のオンラインツール

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

Webデザインに役立つ20オーバーのオンラインツールまとめ。定番とも言えるBlueprint CSSやTypetester、Firebugなども含め、役立つツールやジェネレーター、フレームワーク類が一通りまとめられてます。Web制作歴の長い人にとってはお馴染み過ぎるラインナップかもしれませんが、この時期新人教育とかありますしね、「このまとめ記事読んどけ」っていうのもちょっと乱暴かもしんないですが、なかなかナイスなまとめだと思います。

[PSD] 45 Free Calendar PSD Files – フリーで配布されているカレンダーのPSD

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

フリーで配布されているカレンダーのPSD。WebにしろMobileAppにしろ、カレンダーというパーツはわりと出現頻度が高く(デザインする頻度が高いかっていうとそうでもないけど・・・使い回したりするし)、そうしたパーツの様々なデザイン手法をまとめて見れるってのはなかなかイイですね。PSDもらってデザインベースとして利用するのにも良さそうです。

[CSS3] GradientFinder – グラデーション画像からCSSを生成するジェネレーター

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

グラデーション画像ファイルをサイト内に放り込むだけで、CSSソースを生成してくれるジェネレーター。うーんこれスゴく便利。試しに放り込んでみたら、ウマい具合にコード生成してくれました。デザイナーにとったらCSS3書くよりもフォトショで描いちゃった方が全然楽ですからね。いやこれ素晴らしいです。ただしSafariでは動きませんでした。Firefoxなら動きます。

[CSS] SpritePad – 画像を放り込むだけでCSS Spriteのコードを生成してくれるウェブサービス

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

コーディング手法のひとつ、CSSスプライトってわりとコード書くのメンドいっすよね。このサイトでは画像を放り込むだけでCSSコードを生成してくれます。SafariではできなかったのでFirefoxで試してみました。そしたらこれがなかなかの便利っぷりで、そっこーでブックマーク放り込みました。いやこれナイスですよ。スタートするとキャンバスが出てくるので、そこに必要な画像ファイルをポイポイ放り込んで行けばオッケー。最初からCSSスプライト用にまとめた画像1つでも、複数でも大丈夫です。放り込む課程でリアルタイムにCSSコードが生成されます。一通り画像の配置が終わったら、必要に応じて「Fit document」をしましょう。画像サイズが最適化されます。あとは「Download」ボタンでファイル一式をZipファイルで落とせます。またプレミアムユーザーになれば、複数画像のオートアラインなんかもできるみたいですが、無料でも全然使えるっていうか超便利です。コーダーの方にオススメ。