レスポンシブなペラページを直感で作成、CC0ライセンスでダウンロード出来る・「Launchaco Website Builder」
Launchaco Website BuilderはRWD対応のペラページを直感的に作成、ダウンロード出来るWebサイトビルダーサービスです。作成されたファイルはCC0ライセンスで配布されますので自由に利用する事が出来ます。ある程度の型は決まったものを選択、利用するので凝った事をするには作成したあとに自分で調整する必要がありますが、非常に手軽に作成出来ていいですね。ペラページ作成が理由なのかは分かりませんが、型はLP系になっています。ライセンスの配慮も素敵ですね。本サービスはドメイン名を決めるサービスも展開していますので親和性があるサービスなのだと思います。 Launchaco Website Builder
いろいろな切り抜き画像のみを配布する素材配布サイト・「StickPNG」
StickPNGはいろいろな切り抜き画像を配布するWebサイトです。動画作成者に提供する目的で作成したそう。内容なフルーツとか服飾、飲食物やデバイス、家具、スポーツなど様々ある他、ちょっとグレーと言うかブラックなもの（セレブの画像等）も含まれています。この辺りは著作権を保有している方が連絡してくれたら削除するそうです。それが良いかどうかは米国の著作権法を細かく知らないので判断しかねますが、一応危なそうなモノは使わないほうが無難そうですね。それはさておき、他のオブジェクトの切り抜き画像は便利と感じる方もいるんじゃないかなぁと思います。 StickPNG
可愛らしいスタイルの日付ピッカーを実装するスクリプト・「DATEDROPPER」
DATEDROPPERは可愛らしいスタイルの日付ピッカーを実装するためのスクリプトです。jQueryに依存しています。よく見かける日付ピッカーはその月のカレンダーから選択するスタイルがほぼ定番ですが、こちらはスライダーで選ぶ形になります。素敵なデザインなんですが、コンテンツによっては利便性が落ちる可能性もありそうです。入力項目数が多い送信フォーム内では避けたほうがいいかもしれませんね。主観ではありますが。関係ない話ですけど、このWebサイト自体が個人的に好みでした。ライセンスはGithubではMITとありましたが本サイトではCC BYの両方から選択出来るデュアルライセンスっぽいです。 DATEDROPPER
手軽に画像を白抜き加工できるWebサービス・「ClippingMagic」
ClippingMagicは画像を白抜き加工できるWebサービスです。切り抜く部分、残す部分を指定すれば自動で切り抜いてくれます。手軽な割になかなか精度が高いのが凄いですね。まだベータ版のようなので今後の開発に注目したい所です。 ClippingMagic
Androidアプリ専門のUIギャラリー・Android App Patterns
Androidアプリ専門のUIギャラリー サイト・Android App Patternsの ご紹介。iPhoneのは多いですけど、 Android専門は初見でした。インス ピレーション向上に覚えておいて 損は無いかもですね。 AndroidアプリのUIギャラリーです、パーツごとにカテゴリ分けされています。 Androidアプリのパーツ別ギャラリー。メニューとかリスト、ログインページ、プロフィールページなど様々なカテゴリに分けられています。 サインアップページのインターフェースなどなど。 タッチデバイスを取り入れたスマートフォンアプリにとってUX向上はユーザー獲得のための重要なファクターとなり得ますのでこうしたギャラリーからインスピレーションを高めたり、実際に触れるのは必要不可欠ですね。 今後も数が増えてくれると素敵な感じになりそうです。以下よりどうぞ。 Android App Patte
iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design
いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patternspttrns
直感でモバイルサイトのモックアップを作成出来るオンラインツール・Fluid UI
結構良かったのでご紹介。スマフォ やタブレットなどのモックアップを 直感で作成出来るWebサービスです。 かなり簡単に作れるので選択肢の 一つとして覚えておくといいかもし れません。 有料ですが、結構良さそうなモックアップツールです。動作も軽くてサクサク作れます。 有料のモックアップツール。最安で月/29USDとなかなかの値段ですが、それに見合う機能だなぁとは思います。 パッと見、地味ですけど・・機能は結構凄い。触って頂くと直感で作成出来るのが実感できると思います。操作はドラッグでパーツを持っていって配置するだけ。Cacooを使う感覚に近いかも。※個人の感想です ↑ パーツは各種デバイスのものが用意されていますが、アップロードも可能です。アップロードはユーザー登録が必要です。 ↑ 何個も同時に作れます。ダブルクリックで新規モックアップ作成です。 ↑ 作ってて楽しい。 他、アニメーション遷移
リラックスできる映像や波の音、雨の音などを流し続けるリラクゼーションサイト・calm.com - かちびと.net
波打ち際や川のせせらぎの映像や音響を流すだけのシンプルなリラクゼーションサイト・calm.comのご紹介です。PC作業で疲れた心や身体の緊張が解れるかも知れません。 以前ご紹介した30分間ひたすら雨の音を流し続けるWebサービス・RainyMood.comのようなサービスです。 映像は動画をループさせてるみたいです。右下の矢印ボタンで別の風景に変更、音響もその映像にあったものに変わります。 雨の音とか 波打ち際とか 夕焼けと湖と虫の声とか 音が出ない映像や、映像が乱れるものもありますが、いろいろ選べるのは素敵ですね。iPhoneのアプリもあるみたい。今はこのサイトを利用しながら仕事してます。宜しければぜひご覧下さい。 calm.com
CSSファイルやJavaScriptファイルを閲覧した際に自動整形して表示するChromeエクステンション・PrettyPrint - かちびと.net
ブラウザでCSSやJavaScriptのファイルを見たときにソースを自動整形して表示するChromeエクステンション・PrettyPrintのご紹介。地味に便利・・かも。 ブラウザでCSSやJSファイルを見たときにソースをインデントするエクステンションです。便利っちゃ便利かも。
実践しながらjQueryを学べるオンライン学習サイト・Try jQuery - かちびと.net
実際にコードを書いて学べる学習コンテンツ・Try jQueryのご紹介です。jQuery公式のオンライン学習サイトっぽいですね。英語ですけどこれから学ぼうという方にはうってつけかもしれません。 実践でjQueryを学べるサイトです。スライドも完備されています。英語が苦手な方にはちょっと難しいかもですけど・・ ドメインから察するに公式のものでいいと思います・・確認はしていませんけど。内容は基本的なものからスタートします。 スライドからスタートです。 他の学習サイト同様、指示通りに進めていきます。 正解ならSuccess!の文字が出て次に進みます。 これから始めたい、という方は如何でしょうか。 Try jQuery
商用利用も可能の、フラットなデザインのアイコンを大量に配布するWebサイト・Icons DB
フラットでシンプルなデザインのアイコンを大量に配布しているIcons DBのご紹介。全て商用利用が可能で、帰属表示も不要との事です。サイズもかなりの種類で用意してくれているので、テイストが合うならいいかもですね。 フラットなデザインのアイコンを大量に配布してくれているサイト。著作権は以下のような感じらしいです。 All icons can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 全てのアイコンは商用利用も可能で帰属表示も要らないそうですが、著作権を放棄したわけではないとの事なのでその辺だけご注意です。 使いやすそうなアイコンが沢山あります。カテゴリもかなり多い。 サイズも8種、フォーマットも4種揃っていて、色違い
緩いライセンスで提供された、モバイルファーストなWebサイト制作用フレームワーク・Kraken
モバイルファーストなWebサイトの制作向けに作られたフレームワークです。ライセンスはあまり聞きなれないWTFPLというもの。かなり緩いので使いやすいのでは無いかと思います。 モバイルファーストとは、モバイルサイトから先に作ろう、というコンセプトの元、Webサイトを構築していくという考え方（参照：アップルとマイクロソフトが採用をはじめた“モバイルファースト”とは？）で、Krakenもその目的に沿って作られたフレームワークとなります。 グリッドもモバイル向けの為か、6列を用意してあります。CSSはOrigamiを参考にしているとの事。ライセンスもWTFPLと、かなり緩め。 ボタンやフォームも用意。 他にもWPテーマやモバイル向けのメニュー、ドロップダウンなども取り揃えてあるみたい。使い慣れたらなかなか良さそうです。 Kraken
Lettering.jsを併用して、任意のテキストにCSS3のアニメーションエフェクトを実装するスクリプト・textillate.js
ちょっと面白かったのでメモ的に。タイポグラフィ用のライブラリ、Lettering.jsを併用して、テキストにCSS3によるアニメーション効果を容易に与える事が出来る、というスクリプトのご紹介。 使いどころは限定されますが、動きが面白かったのでメモ的に。以前ご紹介したLettering Animateを少し進化させたような感じ。 エフェクトの種類もかなり用意されているのでデモを見てるだけでも楽しかったです。lettering.jsはjQueryのプラグインなので必然的にtextillate.jsもjQuery依存となります。 lettering.jsで1文字1文字のエフェクトにタイムラグを発生させる事が出来ます。 $('.foo') .fitText(0.5) .textillate({ in: { effect: 'flipInY' }});オプションでエフェクト等をセッティングします。
select要素のoption項目の内容を画像で表現する為のスクリプト・Image Picker
select要素のoptionを分かりやすく 表現する、というライブラリです。 選んだ項目にあわせて設定した画像 が表示、選んだoptionに連動しま す。これは結構いいアイデアじゃ 無いかなと。 select要素のユーザビリティ向上、みたいなスクリプトです。jQueryに依存します。 こんなやつです。選ぶと画像にも青い枠が付く、みたいなの。画像はマークアップせず、option要素にカスタムデータ属性を与える事で実装します。 Sample 選択すると画像の選択箇所も連動します。 コード<script src="jquery.min.js" type="text/javascript"></script> <script src="image-picker.min.js" type="text/javascript"></script>本体とプラグインを読み込んで $(".foo").ima
横長になったtable要素を2列にしてスマフォ等の小さい画面でも閲覧出来るようにするjQueryプラグイン・stacktable.js - かちびと.net
横長になったtable要素を2列にして スマフォ等でも閲覧しやすくできる、 というスクリプトです。単純な作り のtableならこれで対応できますね。 複雑なものはちょっと難しそうでは ありますが・・ table要素をスマフォのような幅の狭いデバイスでも閲覧出来る様にする、というライブラリ。 tableのレスポンシブ対応方法はよく見かけますが、最適とはいえません。なかなか難しいですね。こちらもシンプルな作りのtableに限ります。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="stacktable.js" type="text/javascript"></script> 本体とスクリプトを読み込んで $('#foo').stacktable();
タブやアコーディオン、パララックスなどを実装出来るjQueryベースのUIツールキット・jKit - かちびと.net
jQueryベースのUIツールキット・jKit のご紹介です。タブやアコーディオン などの良く使われるものから、簡易的 なパララックスやバリデーション、ズ ーマーなどなど多機能なUIキットとな っています。 2013年になりました。喪中により新年の御挨拶を控えさせて戴きます。皆様に取って本年が充実した年でありますようお祈りいたします。 さて、今日はUIキットのご紹介。jQueryベースとなっています。 jQuery UIでいいじゃんと思う方も多そうですけど、選択肢があるに越した事はありません。 ずらっと並んでいます。機能は42種とかなりの数です。 使い方は基本的には他のプラグインと変わりありません。コアとjKitを読み込んでセッティングします。 DOM要素にrel属性を与える形で実装します。 <div id="foo" rel="jKit[accordion]"> 例えばアコーディオンなら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSを書いてリアルタイムでプレビューできる・「CSSDesk」
CSS3のコードスニペットと動作デモを紹介する・「CSSFlow」
CSS3を使ったエレメントを簡単に作成出来るChrome拡張・「CSS-SHACK」 - かちびと.net
jQueryスニペット | かちびと.net
