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

Browse By

[WEB SERVICE] Screenr – スクリーンキャストを撮って、各種ウェブサービスに投稿

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

スクリーンキャスト(画面の動きを動画でキャプチャ)を撮影し、録画した動画を直接Twitterなどのウェブサービスに投稿できるというウェブサービス。マックでもウィンでもイケるそうです。Twitter以外にもYouTubeへの投稿もオッケーみたい。何かサービスを始めようという時や、友人に画面上の動きを見せたい場合、また単なるネタ動画の撮影にも便利そうです。

[JAVASCRIPT] 22 Beautiful jQuery Plugins for Web Designers – 美しい表現のjQueryプラグインまとめ

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

美しい表現のjQuery用プラグインが22例まとめられた記事。美しいって点がポイントのようです。画像やHTMLをページ内オーバーレイ表示するLightbox亜種、ボックススライド、mp3プレイヤー(Flashじゃない!)、フォーム装飾や補助、アコーディオン、CSSスイッチ、タブを使った無遷移表現、メニュー装飾、カラーピッカー、レーティング、MacOSのDock風の表現、イメージ編集ツールなどが紹介されています。JSを使って凝った表現をしたい場合に参考になりそうな記事。

[WEB DESIGN] 20 Fresh & New Design Galleries – 新参のデザインギャラリー

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

最近新しくできたデザインギャラリーサイト20選。数年前に雨後の竹の子のようにボコボコ出てきた“CSSなんちゃら”といったギャラリーサイトとはちょっと雰囲気が違いますね。どのサイトも作例の見せ方にJavascriptを使うなどして工夫されていて、とってもモダンな印象です。クールサイトを集めるサイトそのものが、デザインのネタ帳として参考になっちゃう感じ。

[ANDOROID] Android GUI PSD Vector Kit – アンドロイド携帯で使われるGUIのベクターデータ

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

GoogleのAndoroid端末で使われるGUIが、ベクターデータとして無料配布されてます。これはなかなかナイスな素材。iPhone用のこうした素材配布は過去にあったけど、Andoroid用は初めて見る気がする。Andoroid端末向けのサイト制作時に、ラフデザインや遷移図を描く際に便利ですね。

[ICON] 75 Free Useful Icon Sets for Web Designers and Developers – ウェブデザイナーのためのアイコンセット

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

ウェブデザイナーやデベロッパーのための使えるアイコンセットが75個紹介された記事。1つのアイコンセットの中に多数のアイコンが格納されているので、アイコンの数そのものはかなりの数になりそうです。サイト内でアイコンのデザインテイストを統一する際に、アイコンセットってとっても便利なんですよね。アイコン素材探しの時の基点になりそうな記事。

[SPORTS] JetLev-Flyer Water Jet Pack Facts – ウォータージェットパック

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

なにそれこわい。一瞬未来のレジャーかと勘違いしてしまいそうなすんごいスポーツ。水圧を利用して空を飛んでしまうとんでもないジェットパックの動画です。推力を得るための水はホースから供給されるようで、言ってみれば燃料は足下に無尽蔵にあるわけです。しかもガソリンとは違って安全。水の上限定ですがなかなかホットな水遊びですね。夏向けの話題ということでひとつ。

(さらに…)

[LOGO DESIGN] 27 Useful Logo Design Tutorials and Tips – ロゴデザインのチュートリアル

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

ロゴデザインのためのチュートリアルが27例紹介された記事。オリジナルのものもあれば、ソニエリやフォルクスワーゲンのような実在の会社のロゴを、いかにして作るかというものもあります。デザインそのものよりも、そこに至るプロセスにおいて色々と勉強できそうです。デザイナーとしては手数は多ければ多い方がイイですからね。

[CSS 3] Create a Letterpress Effect with CSS Text-Shadow – CSS3のtext-shadowを使ってプレス文字を再現する

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

CSS 3から使えるようになる新しいプロパティ、text-shadowを使って表現するプレス文字。text-shadowってまぁようするにテキストに対してドロップシャドウの効果を与えるプロパティなんですが、これの数値を工夫する事でプレス文字っぽく見せるというものです。作例では“text-shadow: 0px 2px 3px #555;”と指定されていて、この数値は左から順にシャドウのX軸の距離、Y軸の距離、ボカシ範囲、色を表しています。X軸の距離を0にするのがポイントみたい。Safariではかなり以前から先行実装されていたプロパティなので、CSS 3の新しい機能としては見る機会の多い表現ですね。