ページの使い方をページ内に埋め込んでしまえる「Amberjack2」:phpspot開発日誌
Amberjack: Amazing On-Page Tutorials ページの使い方をページ内に埋め込んでしまえる「Amberjack2」。 ページの使い方のチュートリアルというと、動画とかで説明されるのが一般的ですが、Amberjackはサイト上にJavaScriptを使って説明を埋め込んでしまえるツールです。 サイトを使いながらそのままチュートリアルに移ることも可能なので、使い方次第ではユーザフレンドリーなサイトに仕上げることが可能かもしれません。 説明方法は、スポットライトを当てたい部分以外をグレーアウトして、ヒントを次のように表示させてあげることが出来ます。 ←、→キーで次の説明に移ることも出来ます。 例えば、タイトル部分にスポットライトをあてて、その説明を表示するという例 説明のポップアップには動画を埋め込んでより分かりやすくするといったことも可能です。 サイトのここは、こう
ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」:phpspot開発日誌
Lumzy ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」というのが公開されているみたい。 デザイナーさんであれば、Photoshopでまずデザインを作るより、顧客にどういうサイトを作るか、イメージしてもらうためにモックを作るわけですが、それがブラウザ上で高速にできちゃいます。 ネットブック片手にブラウザさえインストールしてネット環境さえあれば、顧客と相談しながらサイトのレイアウトを作っていっちゃえますね。 サインアップとか無しにすぐに使えるところもGoodで、Flashを使った直感的なUIでモックアップをサクサク作れちゃいます。 ツールを立ち上げると、まずプロジェクト作成画面がでるので適当にいれて「Create Project」します。 作成すると、ボタンとかメニューバー、リスト、データグリッド、コンボボックスなどのありとあらゆるUIパーツが最初からそろっていて
エクセル出力も可能な簡易予定管理·es2.Plan MOONGIFT
es2.PlanはPHP製のオープンソース・ソフトウェア。業務を行う上で日々闇雲に作業を行っている人はいないだろう。大抵何らかの予定があって行っているはずだ。Todoをまとめると膨大な数になってしまうかも知れない。 作業リスト 日々行う作業と簡易的な時間管理が合わさったソフトウェアがes2.Planだ。日本製のソフトウェアで、シンプルなシステムになっている。誰でもすぐに使い始められそうで、とりあえず作業管理をしたいという人にはちょうど良さそうだ。 es2.Planは各ユーザが1日単位で予定を登録していく。面白いのは予定が140文字までしか入れられないことだろう。足りない気もするが、あまりリストが長くても作業をこなせないはずだ。140文字くらいがちょうど良いのかも知れない。 エクセル出力 そして日々ごとに作業開始時間、終了時間、休憩時間を登録する。その結果は積み重なって工数表になって現れる。
1991年の資料から学ぶ情報デザインチェックリスト
Web デザインをきっかけに知ることになった方も多いと思いますが、IA (Information Architecture) の歴史は長く 30,40 年ほど遡ることが出来ます。IA と明確に書かれていない書籍でも IA に関わる資料が昔からたくさんあるわけですが、当時はどのようなことが書かれていたのでしょうか。今と変わらないもの、そして今とは違う事柄はあるのでしょうか。Volkside の「17 guidelines for better information architecture…from 1991」という記事で Kent L. Norman が執筆した「The Psychology of Menu Selection: Designing Cognitive Control at the Human/Computer Interface」という書籍が紹介されています。 1991
webデザイナーのためのjQueryベストプラグイン＆チュートリアル10個
かなり人気のあるjQueryですが、そんなjQueryの私個人が選ぶ素敵なプラグインとチュートリアル10選。 とりあえず定番的なものをどうぞ。 ちなみにjQueryを自作できるレベルまで手軽になりたい人は以下記事参照。 web制作の現場で使うjQueryデザイン入門が激しくお勧めな件 タグクラウドの細分化 jquery Hover Sub Tag Cloud - Noupe サンプルデモ これかなり好き。 タグクラウドをさらに細分化させて表示させてます。 こういう発想は今までなかったので最初見たときちょっと感動しましたね。 ローディングページ How to Load In and Animate Content with jQuery | Nettuts+ サンプルデモのメニュー部分をクリックしてみてください。 右上にローディングのマークが若干出て、さらにアコーディオン風に内容が変わります
味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法
2017年6月29日 Webデザイン, ユーザビリティ ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに！またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します！ ↑私が10年以上利用している会計ソフト！ 検索ボックスをもっと使いやすくする 1. 誰が見てもすぐ見つかる場所に ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。 2. テキストボックスの背景色 デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背
フォームで使えるjQuery25 – creamu
フォーム周りでjQueryを使いたい。 そんなときにおすすめなのが、『25 jQuery Tutorials for Creating and Working with Forms』。フォームで使えるjQuery集です。 かっこいいものが揃っていますね。いくつかご紹介します。 Creating a Slide-in jQuery Contact Form クリックするとスライドインして現れるコンタクトフォーム Build an Incredible Login Form with jQuery クリックすると、ぐいんと勢いよく現れるフォーム Using Form Labels as Text Field Values ラベルタグの内容をテキストフィールドの値にして透かしテキストにしたフォーム Create a Progress Bar with JavaScript フォームの進捗状況をプ
サイト公開前に役立ちそうなフリーのツールやWebサービスいろいろ
Webサービス公開前にサイトをチェック Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 そこで、公開前に色々と確認出来たり、 最適化できる様なフリーのサービスや フリーソフトをご紹介します。 ここで言う「公開前」とは「サーバーにアップする」事ではなく、公開を告知したり、プレスリリースを出す前の状態とお受け下さい。ローンチ前と書くべきだったかもしれませんね。。誤解を与えていたら申し訳ないです。 では、ブラウザチェックツール、モニタ別表示チェック、表示スピードチェックツール、cssや画像の最適化ツール、などなどご紹介していきます。 ブラウザチェック各ブラウザでどのように
シンプルで使いやすい日程調整サービス『Meetifyr』 | 100SHIKI
似たようなサービスはたくさんあるが、特にシンプルに感じたのでご紹介。 Meetifyrはブラウザだけで簡単に使える日程調整サービスだ。呑み会やパーティの日程調整をするときに便利だ。 特にユニークなのは極力入力項目を少なくしている点だ。 まず会員登録が必要ない。また調整日程も「今日から4週間！」と割り切っている。さらに時間帯の入力もない。ざっくり「この日OK？」という使い方に特化しているのだ。 ただ、機能を究極に削ぎ落としつつも、日程は「毎日」「平日のみ」「週末のみ」と設定することができて使いやすい。すべてをシンプルにして、なにかひとつ小粋な機能を追加する、というスタイルが素敵だ。 日本語も通るようなので興味がある方は使ってみてはいかがだろう。
[CSS]シンプルに実装する画像のロールオーバーエフェクト
シンプルなHTMLで、ごく簡単なCSSで、画像もシンプルに一枚だけ使用して実装するロールオーバーエフェクトをDeveloper's Paradiseから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="rollover_img"> <a title="Ace Infoway India" href="http://blog.aceinfowayindia.com"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum. In volutpat. Vestibulum elit. Aenean eget enim vitae tellus bibendum pellentesque. Sed
あのサイトを作りたい！オープンソースのクローンCMSまとめ
「自分であんなサイトを作りたい」と、思う Webサービスは結構多いかと思います。 いくつかの有名なWebサービスは クローンのCMSがオープンソースとして 提供されているものがあります。そんな クローンタイプのCMSをいくつかご紹介します。 既出のCMSばかりですが、個人的も一度まとめておきたいのでメモも兼ねて。 Diggクローン 海外でもかなりの人気ソーシャルサイト、Diggのようにユーザーが投稿、Vote（投票）を行えるCMSです。以前SEOカスタマイズ法も書いたので宜しければ合わせてご覧下さい。Pliggが相性悪いなと思うようならPHPDugもいいかも。 Pligg / デモ Deliciousクローン ソーシャルブックマークサイトとして有名なサイトがDeliciousです。タグを付けてWebサイトへのリンクを簡単に追加、共有できるオーップンソースのCMSがscuttleです。僕もこ
ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグイン３０まとめ:phpspot開発日誌
ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグイン３０まとめ 2010年01月26日- 30 Stylish jQuery Tooltip Plugins ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグインが３０種類もまとまったエントリのご紹介です。 jQueryだけでこれだけあるというのは驚きなのですが、ツールチップに迷った時とかのために参考に出来そうです。 個人的には、cssでデザインできてエレメントに属性を振っておくと自動で出てくるタイプのものがいいなぁと思います。あとはアニメーション効果などもカッコいいものがいいですね
自由な位置にalert表示できるjQueryプラグイン「Feedback UI Plugin」:phpspot開発日誌
Feedback UI Plugin 自由な位置にalert表示できるjQueryプラグイン「Feedback UI Plugin」のご紹介。 Feedback UI Plugin を使うと、$(element).feedback('メッセージ'); のようにするだけで、対象のエレメントの側に次のようなalertメッセージを表示することができます。 左、右のどちらかに表示するかという点も決めれる他、cssのクラス名を指定してカスタマイズすることもできます。 フォームのバリデーションに特化しているわけでなく、特定のエレメントに対して行えるので、ユーザビリティの向上に色々な部分に柔軟に使うことができそうです。
かっこいいCSSナビゲーション30 – creamu
クールなナビゲーションを実装したい。 そんなときにおすすめなのが、『30 Cutting Edge Examples Of CSS Navigation』。かっこいいCSSナビゲーション集です。 気になったのをいくつかご紹介しますね。 Pixlogix マウスオーバー時にツールチップが表示されるメニュー Thoughtbot 赤のグラデーションとラインの使い方がかっこいいThoughtbot Evan Eckard フォントサイズのコントラストが美しいEvan Eckard。カレント時の背景色も綺麗 Lonn Roth 上部のラインと連動した美しいメニュー Dragon Interactive アニメーションで切り替わるクールなメニュー 他にもいろいろあるので一度見てみてください。 30 Cutting Edge Examples Of CSS Navigation いろいろぱつぱつだけど
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料でユーザー登録も不要。Webサイトのモックアップを直感で作成、PDFやjpgで保存できるLumzy - かちびと.net
IDEA * IDEA
Apple風デザインが美しい、スライドショーギャラリーのスクリプト
Logo Design by LogoTournament ™
IDEA * IDEA
[JS]表データの列と行をハイライトするスクリプト -TargetTable