無料で使えるUIデザインの基本要素が詰まった32の素材集 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
先日、UIデザインが素晴らしい35のウェブスタートアップという記事が人気となりました。今回はあんな今風のウェブUIを気軽に簡単にデザインしてみたい！という方のためにフォトショップ用のUIエレメントのファイル集を32厳選してご紹介。どれもフォトショップ形式、かつベーシックなまさに今風にデザインされた要素ばかりなので、便利に使えそうです。 — SEO Japan Butterscotch UI Kit Lion OSX UI Kit PSD Calendar PSD Search Drop-down PSD Volume Slider Mini Web UI Set Cloudy UI kit Dark UI Kit Modern UI Kit UI Bundle Detailed UI Kit iTunes Inspired UI Kit (PSD) iPad Application Moc
Webサイトをスライド化する·SiteFlow MOONGIFT
通常、Webサイトは縦に長くなる傾向がある。そのため縦書きの文字はほとんど使われず、横書きで下へ、下へ伸びていく。そのため、あまりページが長くなるとページネーションとしてページを区切って読み進めるようになっているのが一般的だ。 Webページをスライド化して読みやすくする だがこのページネーションは果たして便利な機能だろうか。都度マウスでクリックしたりするのが面倒だし、縦長のページを移動するのも大変だ。そこでSiteFlowが登場した。 今回紹介するオープンソース・ソフトウェアはSiteFlow、Webサイトの可読性、操作性を向上するJavaScriptライブラリだ。 SiteFlowはJavaScriptで提供されるソフトウェアで、ブックマークレットとしても動作する。主な機能は二つで、一つはページ内の移動に関する機能で、もう一つはページネーションに関係する機能だ。ページ内の移動処理では、C
overflow-y:scrollな要素を一番下までスクロールする - ぼくはまちちゃん！
こんにちはこんにちは…！ 突然だけど今日はちょっぴりテンション低めに、 要素のスクロールについてのお時間なんです…！ ぺろ ぺろぺろ ぺろぺろ ぺろぺろ ぺろぺろ <div style="height:4em; overflow-y:scroll"> <ul id="peroZone"> <li>ぺろ</li> <li>ぺろぺろ</li> <li>ぺろぺろ</li> <li>ぺろぺろ</li> <li>ぺろぺろ</li> </ul> </div> <input type="button" value="ぺろライン追加" onclick="add()" /> ↑なんかこういうやつがあって…、 ボタンを押すたびに、ぺろぺろエリアの一番下に行が追加されるような仕掛けを作りたいとき…・。 <script> function add() { // 行を追加するよ var peroZone = doc
Webアプリケーション用のGUIツールキット·Socks MOONGIFT
Webアプリケーションを構築する上で最大のネックになるのがGUiインタフェースだろう。一般的なローカルOS向けのGUIツールキットとは異なり、Web向けには貧弱なコンポーネントしか用意されていない。YUIやExt JSなど多数のツールキットが登場しているのはそのせいだ。 アニメーションもこなすGUIツールキット そしてデザイン面のみならず、アクションまで踏まえてWebアプリケーションを構築できるのがSocksというGUIツールキットだ。 今回紹介するオープンソース・ソフトウェアはSocks、JavaScriptによるGUIツールキットだ。 SocksはJavaScriptで作られたGUiツールキットだ。HTMLはデザインする必要がなく、Socks上でオブジェクトを定義してテキストボックスやチェックボックスなどを配置していく。後は指定した表示形式に沿ってSocksが揃えて表示してくれる。 ハ
Webシステム開発者に送る便利なテンプレート·Web App Theme MOONGIFT
正直、Webデザインは苦手だ。システムは構築できても、その後のデザインで行き詰まって頓挫したサービスは数知れない。最近ではWebデザインテンプレートを使うようになったが、汎用性の低いものが多くカスタマイズも困難な場合が多い。 Basecampにも似たWebアプリケーションテンプレート 例えばWebシステムの管理画面を考えた場合、ユーザ向けの画面は気合いが入っているのに管理画面は酷いものが多い。そこで使ってみたいのがWeb App Themeだ。 今回紹介するオープンソース・ソフトウェアはWeb App Theme、テーマにも対応した汎用的テンプレートだ。 Web App ThemeはLighthouse、Basecamp、RadiantCMSにインスパイアされたWebアプリケーション向けテンプレートだ。右上のユーザ情報、タブを使った機能の振り分け、個別のタブの中にさらにセカンダリーのタブを
秀逸！スライダーを使ったメール送信フォーム·SlideSubmit MOONGIFT
ロボットによるユーザ登録やメール送信などを防ぐ目的で使われるCAPTCHA。ロボットははじけるかも知れないが、ユーザビリティは著しく低下する。最近ではCAPTCHAを解析するものも登場しており、さらに分かりづらく変形して人間すら惑わすものになっている。 スライドアクションでロボットと人間を区別 そこで注目したいのが新しい形の人とロボットの区分けをつける手段だ。その一つとしてSlideSubmitを紹介しよう。 今回紹介するフリーウェアはSlideSubmit、スライダーを使ったユーザビリティの高いメール送信フォームだ。ソースコードは公開されているが、ライセンスは明記されていなかったのでご注意いただきたい。 SlideSubmitはPHPやJavaScriptで作られているソフトウェアだ。サンプル的なフォームで、名前とメールアドレス、それに本文を入力して送信するというフォームになっている。
Wufoo Making forms easy fast fun.
An arrow pointing left An arrow pointing right An arrow pointing left A magnifying glass The Twitter logo The Facebook logo The LinkedIn logo The Google Plus logo The RSS feed symbol The Wufoo by SurveyMonkey Logo The Wufoo by SurveyMonkey Logo A credit card A tray with an upwards pointing arrow A diamond with two arrows leading to different boxes Two bars in a chart Two pages A painter's palette
MOONGIFT: � Growl風の通知をJavaScriptで行うjQueryプラグイン「jGrowl」
※ 画像は公式サイトデモより Ajaxを使っている場合、その結果通知をどのように行うかは困るところだ。せっかく画面遷移のない、格好いい仕組みを使っているのに、ただ「完了しました」だけではあまりにもおざなりだろう。 右上に通知が出る 各Webサービスとも、通知のウィンドウは色々な工夫が凝らされている。自分のサイトで格好いい通知をしてみたかったら、このような仕組みはいかがだろう。 今回紹介するオープンソース・ソフトウェアはjGrowl、JavaScriptで作られたGrowlだ。 GrowlはMac OSXをお使いの方であれば知っているであろう、通知を行うためのフレームワーク的アプリケーションだ。Firefox、Cyberduck、Skypeなどなど、大抵のソフトウェアで利用されている。通知メッセージは画面の右上に表示され、時間が経過すると自動で消えていく、非常に使い勝手の良いアプリケーション
文字をJavaScriptで画像のようにレンダリングする·typeface.js MOONGIFT
Webサイトを見ていると、文字を画像に置き換えたサイトを見ることがある。思い描いている見せ方をそのまま表示させたいときなど、デザインを重視するサイトでよく見られる工夫だ。しかし問題はそのメンテナンス性の悪さだろう。 奇麗に文字が表示されるようになる それに適切に説明文を入れておかないと文字読み上げブラウザなどでは何も情報が得られなくなってしまう。そうした煩雑さから解放されるライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはtypeface.js、文字をSVG画像に変換するJavaScriptライブラリだ。 typeface.jsは指定した文字をそのままcanvasタグを使ったSVG画像に変換する。CSSを使って文字装飾を行うことができ、太字/イタリック/色変更を変更できる。他にもfont-stretch（横幅）、文字間隔、行の高さなどを指定することが可能だ。 選択すると文字全
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
Site Under Maintenance
「パスワードを忘れたら？」をフォーム内に配置 | SIMPLE*SIMPLE
Site Under Maintenance
Site Under Maintenance
Site Under Maintenance
Site Under Maintenance
タイムテーブルを実装するための便利なJavaScriptライブラリ『today's timetable』 | IDEA*IDEA
マウスホイールにも対応した、コンテンツをスクロールさせるためのJavaScriptライブラリ『jquery.scrollable.js』 | IDEA*IDEA
Apple風のインターフェイスを実装するチュートリアル集
[JS]画像を溶け合うように切り替えられるスクリプト -CrossSlide