ブラウザ上で動くイラストレーターのOSS「mondrian」:phpspot開発日誌artursapek/mondrian GitHub ブラウザ上で動くイラストレーターのOSS「mondrian」 ブラウザ上でベクターグラフィックを描けます。SVGのインポートとSVG・PNGへの書き出しに対応。 Chromeであればサクサク動いているようです。 デモページ 関連エントリ イラレの図形をObjectiveCやAS3、JSON形式に変換できるイラレ拡張「DrawScript」
HTML5でネイティブ風アプリを作るFEフレームワーク「Junior」:phpspot開発日誌
Junior - A front-end framework for building HTML5 mobile apps with a native look and feel. HTML5でネイティブ風アプリを作るFEフレームワーク「Junior」。 BootstrapライクなUIのWEBアプリが作れます。 ビューはJSONを定義して挙動を指定することが出来ます 各種UIコンポーネントはある程度揃っています。 関連エントリ これは超使いやすいページネーションの次世代UI フルスクリーンでページめくりをするUI実装デモ 数値の範囲を入力する際に便利なUI作成jQueryプラグイン「jQRangeSlider」 美麗なデザインのUIキット（PSD) ３０ iOSのアイコンフォルダ風のUIを作れるjQueryプラグイン「App Folders」 jQuery UI をタッチイベントに対応させ
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」:phpspot開発日誌
iconmonstr ６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」。 次のようなシンプルなベクターアイコンが６００種類以上公開されています。 Twitterだと公式アイコンもありますし、若干アレンジしたデザインのものもあります。 とにかく種類が豊富でベクターなのでリサイズ可能というところでのアイコンをお探しの方には調度良いかも。 全体的にクオリティは統一されていて使いやすそうです 関連エントリ RetinaディスプレイOKなアプリ用PSDアイコン350 綺麗にデザインされたピクトグラムアイコン100個セット iOSのAppアイコン作成用PSDテンプレート フリーのアイコンフォント１０まとめ
faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」:phpspot開発日誌
faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」 2012年02月29日- jquery favicon faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」。 faviconをダイレクトに書き換えることができ、既存のアイコンに文字をプラスして表示させることもできます 例えば、次のようなコードを書いたとしましょう すると次のようにアイコンが描画されます。 テキスト色で指定したカラーで XX という文字が描画されているのが分かります 更にアニメーションさせることも可能です。 細かい所ですが、より利用者の方に気づいてもらえるように、とこだわりたい場合に使えますね 関連エントリ ユーザへの通知UI全部のせなjQueryプラグイン「noty」 通知件数表示付きのメニュー実装j
５００以上のモノクロ記号アイコンセット「PICOL」:phpspot開発日誌
Icon Library | PICOL - Pictorial Communication Language - Icons & Pictorgrams ? Pixel & Vector ５００以上のモノクロ記号アイコンセット「PICOL」。 次のようなシンプルでいい感じのアイコンセットがPNG、SVG形式で入手できます。 ボタンの横などにちょこっと置けば嫌味のない良い感じのボタンができそう 関連エントリ Youtubeのカーソルを合わせるとポップアップするボタン実装CSSサンプル シンプルなタグなのに凝った綺麗なボタンを作るCSSチュートリアル CSSボタン作成チュートリアル＆テクニック集１３ オンラインでボタンを作成できるジェネレーター10
お洒落なECサイトデザイン集３８:phpspot開発日誌
38 Beautiful Ecommerce Websites - Web Design Blog ? DesignM.ag お洒落なECサイトデザイン集３８がまとまっているエントリのご紹介です。 ECサイトのデザインといえば、いわばお店のデザインのようなもので、そのデザインによってブランドの確立や売上の向上に繋がりそうですが、素敵にデザインされたECサイトが色々と紹介されています。 もちろん、デザインと同様にユーザビリティや買い物完了までのステップも重要ですが、デザインの面で色々参考にできそうです 関連エントリ 奥行きをうまく使ったサイトデザイン集３０ 次のサービスに使えるかもしれないロゴデザイン集２２ iPhoneアプリのプロモサイトを作る際に参考になる６０のサイトデザイン集 デザインがキュートなECサイト向けフリーのアイコンセット オシャレなECサイト構築用のWordPressテーマ
１枚の画像をタイル状に並べてそれぞれアニメーションさせて切り替えるクールなjQueryサンプル:phpspot開発日誌
jQuery Stylish Background Image Sliding effect | image slideshow １枚の画像をタイル状に並べてそれぞれアニメーションさせて切り替えるクールなjQueryサンプル 説明が難しいのでデモを御覧ください。写真もいいのですが、タイル毎に切り替わるエフェクトはなかなかクールですね。 ファッションやアパレル関連のサイトで使うことができそうです 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 CSS3で実装された画像スライドショーサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」
秀逸なFacebookファンページデザイン集４０:phpspot開発日誌
40 Great Examples of Facebook Fan Pages 秀逸なFacebookファンページデザイン集４０ 予めレイアウトが決まっていますが、各社違和感なくかつ美しくデザインしているところが素晴らしいです。 最近自分のまわりでも殆がFacebookをやっているような状態で、今後もユーザ数が増えていきそうなFacebook。 ファンページ作成に関するデザイン力なんかも求められる時代になってきそうな気がします。 大手企業のきれいにデザインされたページがまとまっていましたので参考にできそうです。 各社デザインがいいのも去ることながら、Facebookファンページという仕組み自体も、Facebook自体の世界観を壊すことなくサードパーティのコンテンツを載せられているという意味でうまく出来ているなぁと感心してしまいますね。 関連エントリ facebookのファンページ用ウィジェ
超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル:phpspot開発日誌
How to Create CSS3 Speech Bubbles Without Images JavaScript & CSS SitePoint Blogs 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。 吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。 次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。 影もついてますね。 角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。 border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった
使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」:phpspot開発日誌
使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 2011年11月02日- nicescroll : stylish scrollbars ios look-alike | jQuery Plugins 使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 OSによってスクロールバーデザインが違ったり、常に表示されていたりというのが当たり前でしたが、独自スクロールバーにするのが最近のトレンドっぽいですね。 今回紹介するプラグインを使えばiPhoneのあのスマートなスクロールバーをPCブラウザでも実現出来ます。 エレメントにカーソルを合わせると次のような独自実装のスクロールバーが現れます スクロールすると当然、スクロールバーの位置も変化 時間を置くと勝手にスクロールバーがフェードアウトで消えます。
ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」:phpspot開発日誌
Pictodeck Icon Set: Over 700 Free Pictograms for Keynote - Noupe ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」 次のようなシンプルだけどセンスのあるアイコンが７００個詰まったセットがダウンロード可能です。 こういうテイストのアイコンを使えばGoogle＋のようないい感じのサイトを作ることができそうですね 関連エントリ 白黒だけど汎用的にシンプルデザインのWEBアイコン５００ ソーシャル等シンプルデザインのアイコン144個セット シンプルだけど味のある１００以上のベクターアイコンセット シンプルさがいい感じのソーシャルアイコンセット「Simplito」
iPhone、Android、WindowsPhone等のPSD素材集:phpspot開発日誌
Roundup Of Fresh And High Quality Smart Phones PSD Files | Free and Useful Online Resources for Designers and Developers iPhone、Android、WindowsPhone等のPSD素材集がまとまっています。 WindowsPhoneの素材はちょっと新しいですね。どんどん機種が出てきて困る気もしますが、スマホがどんどん重要になっていくにつれこうした素材のニーズも上がってきてそうですね。 こうした素材をWEBサイトに使っておくと一目見ただけで、それぞれスマートフォンに対応しているというのが分かるのがいいです。 それにしても開発者としては速くガラケーの対応を終えたいですね。 関連エントリ iOS5とiPhone4SのPSD素材が早速公開
秀逸なiPhoneサイト38:phpspot開発日誌
38 Mobile (iPhone) Sites 秀逸なiPhoneサイト38がまとまっております。 日本でも新規リリースの携帯はほとんどスマホということになってきて、もう一年もすればシェアはかなり変わっているのだなというのは誰もが予測が付きそうですが、スマホサイトのデザイン知識は必須の物になりそうですね。 個人的にも徐々に慣れてきましたが、こうしたうまくデザインされているサイトは参考になります。 将来的にはスマホがPCを逆転するなんていう予測もあるぐらいなので、ちゃんとやっておきたいところ。 関連エントリ スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 スマフォ向けのPHP/
jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル:phpspot開発日誌
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
カウントダウンに関連したWEBサイトテンプレート集:phpspot開発日誌
40 Useful Under Construction Template Collection | Tripwire Magazine - tripwire magazine カウントダウンに関連したWEBサイトテンプレート集。 あまりこれまでこういうものを特集したものはなかったかも。あと何日でオープン！というページを作る際の参考にできそうです。 いざつくろうとなると、ちょっとトンチが効いてるなとか、センスあるなという物を作ろうとすると普段はあまり作らないものに関しては時間がかかりそうですが、こうしたものを参考に自分なりに組み立てた方がいいアイデアが出たりして捗りそうですね 関連エントリ お洒落なECサイトデザイン集３８ 次のサービスに使えるかもしれないロゴデザイン集２２ 奥行きをうまく使ったサイトデザイン集３０
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サンプルだけでも見ておくべきHTML5のチュートリアル集:phpspot開発日誌
GitHubを自前で持てるRails製オープンソースソフトウェア「GitLab」:phpspot開発日誌
PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」:phpspot開発日誌
ナビゲーションやソーシャルサイト等サイトに使える１２０個のアイコンセット:phpspot開発日誌