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

Browse By

Category Archives: Webservice

[Web Application] It’s Almost – 簡単にカウントダウンページを作れるサイト

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

イベント名と日時を入力するだけで、その日までのカウントダウンページを作ってくれるウェブサイト。入力後は固有のURLを割り当てられ、そこにアクセスした人にイベントまでのカウントダウンを見せる事ができます。簡単に作れるし、なかなかオモろい試みだなーとは思ったものの、よく考えたらカウントダウン終了後のフォロー(どっかのページに遷移する or URLを表示するなど)が何もないっすね・・・。ま、まぁそこは簡単なアレということでw

[Twitter] twtrland – Twitterユーザーのつぶやきの詳細を調べる事のできるウェブサービス

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

Twitterのユーザー名を入力する事で、その人のつぶやき詳細を調べる事のできるウェブサービス。ページ下部には有名人のサムネールが並んでるので、試しにどれかクリックしてみると、サービスの概要がなんとなく分かるかと思います。試しに自分のTwitterユーザー名を叩いてみると、色々興味深かったりします。フォロー・フォロワー数を調べるのはもちろん、Repryや写真などTweetの種類の割合、つぶやきの頻度、過去に多くRTされたTweet、ピクチャ一覧など、そのユーザーのTwitter上での活動をかなり細かく知ることができます。ただし初回は1分ほど待たされますので、気長に待ちましょう。

[UI Design] 50+ PSD UI Web design elements – WebのUIデザインに役立つPSDまとめ

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

WebのUIデザインを考える際に役立つPSDがまとめられた記事。フォトショップを使ってウェブデザインをするデザイナー(これが多数派だと思うんだけど、実際どうなんでしょ?)にとってはなかなかありがたい素材ですな。iPhoneのUIを模したものがあるあたり、最近のUIですなーという印象。フォームパーツばかりでなく、ボタンやプログレスバー、ナビゲーションメニュー、カレンダーなど色々あります。デザインのネタ帳に是非これひとつ。

[Web Service] Under the Site – サイトのバックグラウンドで何が動いているのかをチェックできるサイト

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

このサイトすごくイイ。URLを叩く事で、対象のサイトのバックグラウンドで何が動いているのかを一気にチェックできるウェブサービス。試しにApple JapanのURLを叩いてみると、Prototype.jsやAdobe SiteCatalystなどが動いている事が分かり、またHTML5でコーディングされ、文字コードはUTF-8である事が分かります。ブログの場合だとこれにWordpressが出たりします。使っているJSフレームワークやアクセス解析サービス、HTMLのバージョンなどのサイトの仕様一覧が一気に調べられるので、ウェブ制作をする人にとっては役に立つウェブサービスかと。手本とするサイトの調査などに使えますね。

[Typography] 20 Useful Typography Tools – タイポグラフィーに関するウェブアプリ

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

タイポグラフィーに関するWebアプリのまとめ記事。20のオンラインツールが紹介されてます。CSSのフォント指定ジェネレーター、独自フォントエディタ、サイズやLine-Heightなどの単位換算一覧、フォントテスター、フォントファインダーなどがその内容。サイト内でテキストを使ってタイポを組む時に役に立ちそうなツールが多い印象。

[Webservice] 10 Popular And Best Gmail Gadgets – iGoogleで使えるガジェット

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

iGoogleで使えるアンオフィシャルガジェット。iGoogleをホームページにしてる人多いと思うけど、機能的な10のガジェットが紹介されてます。Wikipedia検索、計算機、ノート、Remember the Milk(ToDo)、世界時計、為替情報、URL短縮、チャック・ノリス、Googleカレンダー、Google Docsなどがその内容。特に興味深いのはやはりチャック・ノリスジェネレーターでしょう。アメリカでの死亡原因の2位である彼を知る事は、人生を知る事に等しいと思うのです。というわけでチャック・ノリスだけ真っ先に入れました。ちなみにiGoogleに任意のガジェットを追加する流れは以下の通り。

  1. iGoogleヘッダ内にある「ガジェットを追加」をクリック。
  2. 左カラム内にある「フィードやガジェットを追加」をクリック。
  3. 入力欄に追加したいガジェットのXMLのURLをペースト。

さぁみんなこれを使って良いチャックノリスライフを!(趣旨が違う)

[Web Application] One Page Apps I Actually Use – 使える単機能サイト

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

使える単機能サイトを集めた記事。CSS3ジェネレーター(包括的なものから限定的なものまで)、JSライブラリへのリンク行コピペ、特殊文字一覧とコピペ、ボタンメーカーなどが紹介されてます。量こそ多くない上に、どれも限定的な機能のシングルページサイトばかりなんだけど、使えるものが多いです。なかなか便利なまとめ記事なので、いくつかブックマークしときました。特殊文字一覧とかナイスです。

[Generator] gradient-scanner – 画像からCSSのグラデーション指定を生成できるサイト

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

画像をアップする事で、画像内で使われているグラデーションをCSSコードに吐き出す事ができるジェネレーター。これなかなか便利です。サイトには最初から例となる画像がアップされているので、まずはグラデーションを抽出したい範囲をドラッグして囲います。するとページ下部に範囲選択された箇所が大きく表示されるので、「Next」をクリックして次のステップへ。次のステップではグラデーションの色数を調節します。スライダーを左にすると色数が多く(より滑らかに)、右にすると少なく(粗く)なります。決まったら再度「Next」をクリックして終了です。ソースコードは画面下部に吐き出されます。また最後の画面では個別に色の微調整もできます。CSS3でグラデーション描画をする際に、まずはフォトショで画像として作って、その後コード化するっていうワークフローだったりすると便利ですねこれ。