インパクトのあるフローティングを求めるなら·Avgrund MOONGIFT
Avgrundはクリックすると背景をぼかして表示されるフローティングライブラリです。 リンクやボタンをクリックするとフローティングで情報を表示すると言ったイフェクトはたくさんあります。ありすぎて食傷気味なくらいです。しかしAvgrundは見た瞬間のインパクトがかなり大きい表示になっています。 クリック前です。 こんな感じになります。背景のぼやけ具合がいい感じです。 背景が黒く、または白くなるタイプはよくありますがぼかしがかかるというのはなかなか斬新ではないでしょうか。さらに元々のコンテンツが若干小さくなって表示されるのもいい感じです。アニメーション付きなので、ユーザの目を引くダイアログができること請け合いです。 AvgrundはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Colorboxに代表されるフローティ
格好いい！折り畳んだ紙を開くようなアクションを実現·Paperfold CSS MOONGIFT
Paperfold CSSは中間のメッセージを折り畳んで表示し、クリックで開く3Dアクションを施すJavaScriptライブラリです。 これはアイディアの勝利！Paperfold CSSを使うと折り畳んだメッセージを開いて表示したりする際に効果的に見せられるようになりそうです。 デフォルトの表示です。See 5 More Postsという表示があります。そこをクリックします。 徐々に開いていきます。 折り畳まれた部分が開いて表示されました。 デモ動画です。折りたたみの量などは自由に設定できます。しかも3Dであり、マウスで回転させたり見る向きを変更できたりします。 Paperfold CSSはGmailの多数のリプライが重なった時のメッセージ群を表示する際のやり方に近いです。面白い使い方が出来そうです。 Paperfold CSSはJavaScript製のオープンソース・ソフトウェア（Pub
凄いん…だよな？デザインの自由度を最大化したCMS·Berta MOONGIFT
Bertaはデザインの自由度が高いCMSです。データベースを使わないCMSになっています。 なんか凄いソフトウェア…。BertaはCMSですが、自由度が非常に高く、コンテンツの配置が自由にできてしまいます。その自由度の高さも相まって、デザインや写真家の方が数多く使っているようです。 まずログインします。 サイトをセットアップします。 セクションを作ります。これがメニューになります。チュートリアルのヘルプ付きで分かりやすいです。 セクションを作ったら、その内容を編集します。 これがページです。ほぼ何もありません。ここから自由にコンテンツを配置していきます。 配置する場所はX/Y軸ともに自由です。 ファイルを貼付けたりテキストを入れたりできます。 例えばこんな画像を。場所は自由に設定できます。 実際にBertaを使ったWebサイトです。ポートフォリオ的なサイトでしょうか。 こういった写真系のサ
Facebook風ボタンをCSS3でデザイン·CSS3 Facebook Buttons MOONGIFT
CSS3 Facebook ButtonsはCSS3で作られたFacebook風ボタンデザインです。 最近はFacebookアプリの開発も増えてきました。そんな開発の際に使えそうなのがCSS3 Facebook Buttons、Facebook風ボタンをCSS3で作成したソフトウェアです。 色は3種類から選択できるようです。 classを指定するだけ。使い方は簡単です。 サイズが少し大きいバージョンです。 classにlargeをつけるだけです。こちらも簡単です。 グループ化です。こちらも需要がありそうです。 div.uibutton-groupをつけるだけです。 こんな感じに混ぜた表示もできます。 ツールバーという指定を使います。 アイコン付き表示もあります。これは便利そう。 addやeditといったclassをつけるだけ。簡単です。 色付きボタンはもちろん、大きさやアイコンをつけたボタ
Webアプリケーションの開発に。面白いコンポーネントが多数揃ったUIライブラリ·Ninja UI MOONGIFT
Ninja UIはHTMLを使わずにJavaScriptで画面を描画していくUIコンポーネント。 Ninja UIはjQuery/JavaScript製のオープンソース・ソフトウェア。思うにWebサイトというのは表現力が高く、かつ自由度が高すぎるのだ。そのため見栄えにこりだすと収集がつかなくなる。またデザインセンスがないと格好いいサイトが作れない。 ボタンやアイコン アイディアがどれだけ良く、技術力があっても見栄えがぱっとしないサイトは受け入れられない。もうHTMLは書かず、JavaScriptで組んでしまうのはどうだろう。それを可能にするのがNinja UIだ。 Ninja UIはjQuery Webjutsu（Web術？）を掲げているライブラリで、枠組みだけHTML5で組み、コンポーネントの配置は全てJavaScriptだけで記述するライブラリだ。ボタンやドロワー、アイコン、ポップアッ
発表！ 第5回 life with i 賞（その1）
今年もやります（笑）。 life with i 賞とは、「年末は開発者さんもお休みモードで、書きたいネタがあまり出てこないんだよねぇ～」ということで2006年に安易に創設され、選考委員の Tom 個人が感動した作品に贈られる権威のかけらもない賞であります。 候補作は、その年に最初のバージョンがリリースされ、かつこのブログ（もしくは旧ブログ）で紹介したことがある作品。つまりは「来年もがんばって開発してくださいよ～」と開発者にエールを送るとともに、暗に「来年もアップデートして、うちのブログにネタを提供してね（超はぁと）」とプレッシャーをかける賞でもあります。 受賞作は選考委員の Tom の独断と偏見によって選出され、受賞したソフトの開発者には Tom の熱いまなざしが贈呈されます。 昨年までとは次の点が異なります。 名称を「PISCES 賞」から「life with i 賞」に変更（ブログを移
JavaScriptを使って文字をデフォルメ·Lettering.js MOONGIFT
Lettering.jsはJavaScript製のフリーウェア（ライセンスはWTFPL）。Web2.0という単語が出回ったことに流行ったのがFlickrのロゴ風の画像を生成するジェネレータだ。透明感があって、ポップなデザインに見え、かつクールなロゴがたくさん（この時点でクールじゃなくなった）出回った。 今時代はJavaScript全盛だ。文字を画像化しても面白くない。文字をJavaScriptを使って装飾する、そんなロゴは今後流行るかもしれない。その可能性を感じさせるのがLettering.jsだ。 Lettering.jsを適用した文字は見ればすぐに分かる。あざやかな色合いで、ポップで可愛らしい文字になる。テキストなので画像に比べると軽量なのも利点だ。画像のように作成し直す手間もなく、システムと連携させるのも容易だ。 さらにマウスオーバーによるアクション設定ができるのも大きい。各文字はマ
『indexhibit』、クリエイターのための「魅せる」web作成ツール | ライフハッカー・ジャパン
こんばんは、編集委員の早川大地です。 時々海外のブランドやデザイナー、写真家などのページで、白バックに左側がメニュー、右側にどかーんと大きな写真、みたいなシンプルでスタイリッシュなwebサイトを見かけることはありませんか？ たとえばこんなのとかこんなのとかこんなのとか。これらはみなindexhibitというツールで作られています。 日本のサイトではほとんど見かけることが無いのですが、ヨーロッパを中心に世界中で愛用されているツールです。 『indexhibit』はイギリス人のデザイナーDaniel Eatockらを中心に開発されたCMSプラットフォームです。WordpressやMobile Typeなどと基本的には同じ種類のWeb制作ツールなのですが、『indexhibit』はブログ機能が無く、pluginやwidgetなどもありません。とにかくシンプル、デザイン性に特化しています。 なので
角丸や文字装飾からアニメーションまで自動作成できるCSS3ジェネレータ「CSS3.0 Maker」 | ライフハッカー・ジャパン
最近、CSS3のチュートリアルなど、CSS3関連の記事をよく見かけます。CSSを自動的に作成してくれる「ジェネレータ」も、続々登場しています。今回は、非常に使いやすくて、多機能なCSS3ジェネレータ「CSS3.0 Maker」を紹介します。 以下に使ってみた様子を載せておきます。 まず「CSS3.0 Maker」にアクセスしましょう。 スタイルの設定プレビューCSSのコード対応ブラウザ といった具合になっています。上部にメニューがあり、そこで様々なタイプのスタイルを選べます。以下に一部を紹介しますね。 Border Radius いわゆる「角丸」というもので、角を丸くすることができます。 Gradient 図形の色をグラデーションできます。 Box Shadow 影をつけることができます。ぼかしも可能。 これらの他にも、図形を回転できる「Transform」や、テキストに影をつけられる「T
罫線を重視したCSSフレームワーク·Atatonic MOONGIFT
AtatonicはCSS製のオープンソース・ソフトウェア。HTMLのデザインにおける柔軟性は非常に高い。だが柔軟性はあっても見やすいデザインにできるかどうかと言うと話は別だ。読みやすさで言えばむしろ画一的なデザインの方が良かったりする。 罫線に沿った綺麗なデザイン 整ったデザインを各種ブラウザに合わせて作り込むというのは非常に手間のかかる作業だ。そのような時に使えるのがCSSフレームワークになる。読みやすさを重視したサイト構成を考えるならAtatonicを使ってみると良さそうだ。 Atatonicは2カラムで読みやすさを重視している。背景に罫線の入った画像を利用しており、行毎にきちんと文字が並んでいるのが分かるはずだ。英文らしく、最初の文字が大きくなる効果もある。カラムの中でさらに2カラムに分けたり、引用表示にも綺麗に対応している。 フォームにも対応 文字サイズが若干小さいように見えるが、
| test
mameshibankさん 豆柴日和 amecustomさん アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん 脚本家によろしく。 nisishowさん リフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★ cairさん 広報＆IR担当のオフィシャルブログ shikamaさん 千葉の東京寄りでホームページ制作＆企画・運用中！ saijoさん 経営に終わりはない nina-yuanbeauteさん 芳村仁奈オフィシャルブログ「Nina's Diary」Powered by Ameba frontier-ceo-bossさん フロンティア社長 オフィシャルブログ Powered by Ameba ohtias-ceoさん ソーエネ×オーチアス社長 alfortさん 念ずれば花ひらく「会社経営」
ユーザインターフェースデザインのための情報源 - ネタフル
ユーザインターフェースデザインのための情報源がまとめられているBest User Interface Design Resources: The Round-upというエントリーがありました。 ウェブデザインをカテゴリ毎にコレクションしているサイトとして紹介した「MephoBox」の他、数多くのユーザインターフェースデザインのための情報源が紹介されています。 ライブラリ、ブログ、インスピレーション、良いインターフェースのウェブアプリケーション、フォローすべきツイッターアカウントなどに分かれています。 分かりやすいところでインターフェースデザインのライブラリサイトをご紹介しておきますね。 ▼MephoBox ▼UI-patterns.com ▼Yahoo! Design Pattern Library ▼Pattern Tap ▼UI Pattern Factory （via swissmi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
｢Skrawlr｣は無料のシンプルなパーソナルランディングページ作成ウェブアプリ！ | ライフハッカー［日本版］
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
