[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
[CSS]特定のエリアだけをアニメーションで一瞬目立たせるテクニック
編集可能なページなどで変更した箇所を分かりやすくするために、ターゲットされるとそのエリアだけをフェードのアニメーションで一瞬目立たせるスタイルシートのテクニックを紹介します。 Yellow Fade Technique with CSS Animations [ad#ad-2] このテクニックが広まったのは「Basecamp」のイエローフェードが有名で、JavaScriptを使用して特定のエリアをイエローにハイライトして目立たせます。 Basecampの紹介記事： Web Interface Design Tip: The Yellow Fade Technique 同様のテクニックをCSS3で実装する方法を紹介します。 ターゲットされるとそのエリアの背景色が黒から、透明に変更します。 /** * Quick fade on target to attract user attention
[CSS]カードをぺろっと裏返すエフェクトを実装するスタイルシート
CSS3のアニメーションや回転機能を使用して、カードをぺろっと裏返すエフェクトを実装するスタイルシートを紹介します。
小さな変更で大きくUXを改善するマイクロデザインってなに？ | WebNAUT by Beeworks
※この記事は2015年2月4日に執筆された記事です。 1月も過ぎ2015年のトレンド予想も出そろった頃でしょうか？ 王道な話題が語られるなか、数名の海外デザイナーからマイクロデザイン、マイクロコピー、マイクロインタラクション、マイクロUXといった言葉があがっていたのが気になったデザイナーTXです。 このマイクロデザインという言葉、概念としては新しくないのですが、 日本ではまだまだ認知度が低いようなので今回はその”マイクロ”な部分をクローズアップしていきたいと思います。 目次 マクロデザインとマイクロデザイン マイクロコピーとは？ マイクロインタラクションとは？ マイクロデザインとブランディング まとめ マクロデザインとマイクロデザイン マクロ/マイクロデザインを家で例えるなら、マクロデザインはその家の外観でマイクロデザインはドアの種類や階段の形などの細部のこと。 WEBデザインでいうと、マ
第5回 カラースキームを決めるために必要なツールと注意点 | gihyo.jp
前回は自己紹介をの制作を題材にして、参考資料を活用することにフォーカスしてお送りしました。今回はさらに細かいところにフォーカスしていきます。 カラースキームを固める 前回考えたプロセスの中で、自己紹介に関連するキーワードを書き出してみました。 それらのキーワードをもとに、今度はページのカラースキームを考えてみましょう。 基本のベースカラーが決まれば、そのカラーを基準にパレットのバリエーションも増やすことができます。 配色については、色彩理論[1]を身につけておくとカラースキームを考えるときに役立ちます。 また、色彩に関するセンスは経験によってより洗練されていくものだと考えています。いろいろなパターンを作りながら、試行錯誤していくことが大切です。 Web 上だけを見ても自動的にカラースキームを生成してくれる、便利なカラースキームジェネレータなどが多くあります。ゼロからつくれなくても、こういっ
角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法
角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。
第5回 横並びメニューの区切り線をCSSで表現しよう：実践Web Standards Designのススメ｜gihyo.jp … 技術評論社
はじめまして、福島英児と申します。『実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載ということで、この第5回を担当させていただくことになりました。 『実践Web Standards Design』の刊行にあたり、可能であれば追加したかったTipsがあったのですが、結局そのまま載せなかったネタを今回ご紹介したいと思います。 良く見かける横並びメニュー ウェブサイトのヘッダ部分やフッタ部分で、横並びになっている縦線で区切られたナビゲーションメニューを見かけることがあるかと思います。 今ご覧頂いているこのgihyo.jpのヘッダ部分にも、画像を使った横並びのナビゲーションが配置されているのが分かります。 図1 画像を使った横並びのナビゲーション（gihyo.jp） gihyo.jpでは画像を使っていますが、画像を使わずにテキストのみでマークアップした
ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 - Design Color
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
[JS]二つのパネルをダイナミックにずらして表示するコンテンツスライダー -dualSlider
左右に配置された二つのパネルをスライドのタイミングをずらして表示するコンテンツスライダーを紹介します。 dualSlider ※注意 IEでアクセスすると「Virus.DOS.Albania.429」が検出されます。当方はFirefoxでアクセスしていため気がつきませんでした。 しかしながら、スクリプト自体はかっこいいので、いつか解消されることを期待しつつURLを記載しておきます。 http://www.hugoandcat.com/DualSlider/index.html コンテンツスライダーの操作は自動と手動があり、自動と手動の切り替えは右上のボタン、手動の操作は右下で行います。 手動操作のインターフェイス dualSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。 スクリプトのオプションでは自動・手動の切り替え、アニメーションのタイミングなどを設定
あのサイトとはひと味違う！こだわりマウスオーバー20連発 (1/2)
サイトを彩る多彩なアニメーション フラットデザインをベースに、随所に気持ちいいアニメーションを取り入れている「Omnisense」。コンテンツごとに用意されているさまざまなアニメーションは、どれも洗練された動きで、サイトの魅力をぐっと高めている。 ページトップにあるシンプルなボタンにマウスオーバーすると、上から矢印のアイコンがスライドして下りてくる。注目したいのは、マウスがボタンから離れたとき（マウスアウト時）の動きだ。 よくある:hoverで実装したマウスオーバーのアニメーションは、マウスオーバー時とアウト時の動きを別々に設定できないため、必ず逆の動きになる。マウスオーバー時に上からスライドしてきたら、マウスアウト時には上へ戻る、といった具合だ。 ところが、Omisenseのボタンは、マウスアウト時にそのまま下にスライドを続ける。細かな違いだが、最近ではこういったマウスオーバーのアニメー
Janko Jovanovic – Design Management and Strategic Design
A seasoned design and product lead with nearly 30 years of experience across various fields. I bring together design management, product management, strategy, futures thinking, and systems thinking to help teams and organizations navigate an increasing uncertainty and design for the preferable future. More than 25 years of experience 8 years in building, managing, and scaling cross-functional team
Xcode 6 時代のマルチデバイス対応 〜Size Classとベクター画像〜 - その後のその後
とあるお仕事で、iPad をサポート（＝ Universal 化）してほしいという要望があり、せっかくなので iPhone 6 / 6 Plus （4.7 / 5.5 inch スクリーン）もサポートしようってことで、新しい Xcode 6 の新しい仕組みである Size Class を使って複数画面対応を行ないました。あと、同じく Xcode 6 から Asset Catalog でベクター形式がサポートされるようになったので、こちらもトライしてみました。 で、そのときに学んだ諸々の断片的なメモです。勘違いもあるかもしれないのでその際は優しくご指摘いただけますと幸いです。 ※ちなみに Size Class やベクター形式画像の使用は iOS 8 以上縛りではありません。単に Xcode 6 の新機能というだけなので。 Size Class の前提知識をつける 「Size Classsとは
niw.at — iOS で文字数制限つきのテキストフィールドをちゃんと作るのは難しいという話
「そんなん簡単やろ」と思いますよね。 たとえば、「UITextField 文字数制限」でググれば山のようにブログ記事やらコードが出てくるし、Stack Overflow に載ってるコードのコピペ一発で解決しそうに思えませんか? 実は文字数制限をつけたテキストフィールドはそんなに簡単な話ではないのです。 shouldChangeCharactersInRange:replacementString: は使えない子 今回はこれに尽きます。 UITextField や UITextView のデリゲートで呼ばれる textField:shouldChangeCharactersInRange:replacementString: やtextView:shouldChangeCharactersInRange:replacementString: は使ってはいけません。 より正確に言うと、使うとき
開発合宿をする際の知見 - 昼メシ物語
数年前から身内で時々集まって開発合宿をしていて、成功失敗あわせて知見が貯まってきたので備忘録として記事にしておきます。 なお、ここで開発合宿と言っているのは1,2部屋に1泊して済ませるような規模のもので、ホワイトボードでブレストしまくりといったものではなくて淡々とみんなでパソコンするみたいなものを想定しています。 宿選び あえてオススメの宿リストみたいなのは書きません。なぜなら開発合宿向けの宿まとめみたいな記事を真に受けて失敗したことがあるので、そのようなリソースをインターネットに増やしたくない。 開発合宿で有名な某旅館は、割安ではあるが無線LANが弱すぎ、温泉はぬるすぎ、メシもいまいちという品質なのに、開発合宿に選ばれがちである。○○旅館に行ってきましたという開発合宿レポートをみんながブログに書くから検索にヒットしてみんなそこに行くみたいになってて、負の連鎖が起こってる。 無線LANより
iOSエンジニアといいかんじなテストの話 - laiso
Consumer Service Engineer MeetUp Vol.1 ~iOS編~ - dots. に行った。 最近あんまりザ・iOSアプリ開発らしいことしていなかったので情熱的な各社の話を聞けておもしろかったし、意識の高まりを取り戻せてよかった。 時間なかったので感想書く余裕ないかと思っていたんだけど、http://ainame.hateblo.jp/entry/2014/04/25/014605 の感想なんかを読んでたら触発された。 人力テスト 自動テスト vs 人力テストの構図というよりは、デベロッパーテスト、品質管理とユーザーテストやユーザビリティテストの違いで理解していた。 テストの目的と観点、誰が何をテストするのかという部分に注目するとスッキリすると思う。 講演した各企業の担当の人はユーザビリティテストに積極的だが、デベロッパーテストはうまくいってないという話を確かにし
[CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック
画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。 ピュアCSSなので、リストのアイテムは増やしても減らしても、ツリー状のスタイルを適用できます。 Parent child vertical list menu コードはこんな感じです。 HTML リストは階層ごとに入れ子を使用します。 コードは、CodeのjQueryまで。 <nav class="nav"> <ul class=list> <li> <a href="#">Home</a> <ul> <li> <a href="#">Lab</a> <ul> <li> <a href="#">Code</a> <ul> <li> <a href="#">Html</a> </li> <li> <a href="#">Css</a> </li> <li> <a href="#">Jquery<
第6回はUIEvolution開催！ #potatotips で発表されたiOSのtipsまとめ - Think Big Act Local
第6回となるクックパッドさんの #potatotips に参加させて頂きました。 今回はUIEvolution株式会社＠恵比寿での開催でした。 https://github.com/potatotips/potatotips/wiki/Potatotips-6 potatotipsは発表者だけが参加できる、持ち時間1人5分のtips共有会です。 6回目となる今回は勢い余って3時間のボリュームたっぷりな会となりました。 そんな第6回で発表された15個のiOSのtipsをまとめます！ iOS tips Xcode5.1 and Clang 3.5 Tips + CarPlay @SEENEEさん Xcode5.1 での変更点（QuickLook, CodeSnippet） Clang3.5 での変更点（Box C String, DEPRECATED ATTRIBUTE） CarPlayをSi
キーボードで遠すぎる「半角/全角」を手元の「変換」「無変換」キーに割り当てるには？ | 教えて君.net
キーボードで無駄のない高速なタッチタイプを目指す上で、最初の障害となるのが「半角/全角」キー。左上のそれは小指を動かすにはあまりに遠い。そこで、普段使っていない「無変換」「変換」キーに半角/全角の切り替え機能を割り当てよう。 タッチタイプ中に、「半角/全角」キーをホームポジションのままで押すのは至難の技。通常は、左手をホームポジションから外して押すことになるが、これは頻度が多いと非常に大きな作業ロスとなる。 この使いにくい半角/全角キーを、ホームポジションのまま押せるキーに入れ替えれば、作業効率は大幅にアップする。変更先としてベストなのが、スペースバーの両脇にある「無変換」「変換」キー。普段は使わないのに、無駄に押しやすい場所に配置されているため、ミスタッチの原因になるというキーボードの困ったちゃんだが、ここに半角/全角の切り替え機能を割り当てれば、効率よくIMEの切り替えが行えるぞ。 今
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
