Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
国内のiPhoneアプリでデザインが参考になったWebサイトいろいろ
以前からちょいちょいブックマーク していたんですが、いつの間にか増 えてたので一覧化してみたいと思い ます。国内のiPhoneアプリサイトで Webデザインが参考になったサイトの まとめ。あんまり無いですが・・ 個人的な備忘録とメモ書きです。探し方も悪いと思いますので数はさほど網羅していません。「あそこ凄い素敵なのに載ってない」みたいなご意見ありましたらコメント欄にてご教授頂けますと幸いです。 この記事で見たいのはアプリではありませんのでWebサイトへのリンクしかありません。順不同となっています。シェア系アプリが多いです。 MogSnap 食べたものを写真で評価、共有するiPhoneアプリ。写真系なのでこういったスライドがあるとアプリの概要をイメージしやすいですね。無料であること、キャプチャ、アプリダウンロードのボタンが分かりやすく明示されています。 MogSnap 大辞林 言わずと知れた
日本の良デザインなFacebookページを収集しているデザインギャラリーサイト・520PX facebookmark
今日は3連休最後ですね。個人的には 全然関係ないので普通に記事を書き ます。日本もかなりFacebookが浸透 したようですが、まだまだ数は少ない 印象です。企業もかなり参戦してきて いるので、Facebookページの需要も 少しあがってきている印象ですね。 そんな中で日本のFacebookページで良デザインなページのみを収集しているギャラリーサイトがありましたのでご紹介。 こんな感じで国産のFacebookページが並べられています。カテゴリは結構細かく分けられていますが、いかんせんまだ数が少ないのでまだ必要ない状態ではありますね。 VOGUEJAPANはコンテンツが充実してるので結構好きです。 520PX facebookmarkにも書いてありますが、まだ数が少ないのが日本の現状です。こちらのギャラリーも厳選しているため、まだ100に満たない状態です。もちろん審査有りですが、自信のあるF
無料・商用利用OK・バックリンク不要・著作権表示も不要で使える写真や日本語フォントなどの素材サイト集 - かちびと.net
少しリソースが溜まってきたのでリンク集に して開放します。バックリンク不要で、商用 の利用可能、著作権表示も不要のWebデザイン 向け素材サイト。商用で使ってもいいけど リンクしてね、といったようなCCのBY的な ライセンスだとどうしても個人的に使いにく いのでバックリンク不要は割りと必須です。 今までのリソースをまとめただけなのでほぼ全部既出だと思います。自分用リンク集なのでいろいろ適当です。 細かいライセンスもあるので利用規約には必ず目を通してください。 9search この記事の題名の条件の素材を紹介しているサイト。小物系探すなら最初にここ見たほうが早いです。 9search ソザィ-Sozay- こちらもこの記事の題名の条件で収集していますが、素材単位ではなく、Webサイト単位で紹介しています。国内多めですかね。 ソザィ-Sozay- 国内のWeb制作に役立ちそうな無料の写真素材や
Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合に
商用利用OK、リンクや著作権表示も不要の女性の写真素材専門サイト「モデル・フォト」 - かちびと.net
女性の写真素材専門のモデル・フォトは、 商用利用も可能で、リンクや著作権表示 も不要。完全に無料で使える人物写真 素材サイトです。簡単なアイキャッチ等に 使いやすそうな印象でした。なによりリンク 不要というのは貴重ですね。 以前ご紹介したモデルピースと同じく、人物写真素材専門のサイト。人物写真が商用利用OKでリンクも著作権表示も不要というのは、かなり貴重なので覚えておきたいですね。 商業広告・出版物・冊子のデザイン、Webサイトやホームページのデザイン制作、TV番組やCMの映像製作、店舗や看板の 装飾などに画像のトリミングや合成など、自由に加工してご利用いただけます。 とのことです。細かい規約は利用規約をご確認ください。 モデルさんはまだ3人ですが、量はなかなか揃っています。今後増えてくれると嬉しいですね。 素材の例ブログには規約上使用できないのでキャプチャ撮りました。なんか勘違いだったみ
jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ
jQuery Mobileに関して少し整理したいので まとめました。JQMを使うときに知っておくと 便利そうなTipsとか情報とか。いくつか自分 の記事も含まれているのが若干アレなんです が、ご了承ください。内容はコードのみ、では なく、参考サイトなど一貫性無い感じですが。 整理するのが下手なもので一貫性に欠ける内容で申し訳ないですけど、jQuery Mibileを使ったWebサイト構築時のちょっとしたTipsや役に立つ情報などのまとめです。 ページ移動にAjaxを使わないようにするプラグインの前に記述。リンク単位でならマークアップでrel=”external”を、フォームはdata-ajax=”false”を加える。 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/
最近よく使ってる、Web制作に役立つWebサービス的なやつ
少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を
Stagramakerの良いところは、 アルバム化する事でInstagramよりも、更に写真を共有しやすい点にある
先日リリースされた、 Instagramの 写真を自分好みにアルバム化出来る Webサービス・Stagramaker、もう 試されましたか？InstagramがAPI を公開して、今までも最も「共有性」の あるサービスではないかと思います。 Stagramakerは6月14日にリリースされたWebサービスで、Instagramで撮られた写真をタグやユーザー名を使って自分だけのアルバムを作れるdesignbitsのWebサービスです。 Instagramの写真をアルバム化出来るWebサービスです。Stagramakerは写真というよりも、アルバムそのものを共有する形式なので、Instagram以上に写真を共有しやすい、見つけやすいのが特徴ですね。 直感で作れるアルバム アルバムの作成は直感だけで作れます。URLやアルバムの名前を決めて、タグや好みのInstagramのエフェクトを選択すれば自
tumblrで画像収集するのに向いてそうな、無料のテーマ・51個まとめ（と、少しだけ特徴をメモ
tumblrで画像収集するのは割と当たり前 ですが、後で見返すときに見にくいテーマ だと見る気がしないのでいろいろ試して いましたが、せっかく試したのでついでに 画像収集に向いてそうなtumblrのフリー のテーマをご紹介します。 というか変えたい時に探してるんですけど、いちいち面倒なのでメモしたいんですが、せっかくなのでここにリンク集作ってシェアしようかなと思った次第です。 簡単ではありますが、特徴をメモ書きしています。Lightboxが付いてるとか、自動で次のページを読み込むとかリキッドレイアウトとか。 全てをちゃんと確認したわけではないので、参考程度に。順不同、全部で51個ありました。 キャプチャはテスト用で作ったものです全部無料です環境次第でカラム数が変わるものもあります長くなってしまって見る気がしないので1カラムは省いています。Themanati 3カラムのリキッドレイアウトでギ
fieldset要素単位で横スライドするバリデーション付きの入力フォーム用jQueryプラグイン・jQuery Stepy
縦長になるような入力フォームにいいかな と思ってメモ。fieldsetでグループ化された 要素単位でスライド化してくれます。下部 までスクロールする必要が無くなるのと、 どこが誤入力か分かりやすい、場所を取ら ないなどのメリットがあります。 特に、入力項目が長いフォームは離脱率を高くする可能性も否めませんので、入力プロセスを補助するのはユーザビリティに大きく貢献出来るかと思います。IE6でも7でも動作するようです。 日本語に直してみました。これは1例で、3つに分けなければならないわけではありません。 入力をミスすると、次のfieldset要素に進めない（スライドできない）という仕組み。 fieldsetごとにバリデーションチェックを行うのでユーザーもストレスが無いような有るような。 うん、ストレス無いです。（ｷﾘｯ ファイルとか<script type="text/javascript"
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
フォームのバリデーション用jQueryプラグインいろいろ+α
個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。
iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った
iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので（完全ではないけど）日本語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜
iPhone向けWebサイトの制作等に役立ちそうな情報まとめ
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプトWebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titanium
サムネイル付きのボックスをサイドからスライドさせるjQuery
ちょっと使う予定が出来るかもなので メモ。サムネイル付きのメニューが マウスオーバーでサイドからスムー ズにスライドします。css3も使用して いますが、シャドウと角丸だけみたい ですね。 マークアップも簡単っぽいので備忘録としてエントリーします。 Related Posts and CSS3 サイドにサムネイル付きのバーが隠されていて、マウスを乗せることでコンテンツがスライドします。 マークアップは以下のような感じ。 <div id="rp_list" class="rp_list"> <ul> <li> <div> <img src="images/1.jpg" alt=""/> <span class="rp_title">Post Title</span> <span class="rp_links"> <a target="_blank" href="#">Article</a>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net
「いいね！」するとコンテンツを見る事が出来るファンゲート対応のFacebookページをWordPressで作る手順
RSS全文配信してると記事を丸々転載されてしまうので、WPプラグインを使って逆に転載サイトを利用してみる
