ブックマークしておきたい！WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ
WebサイトやスマホアプリなどのUIデザインのアイデアに困った時に、参考になる、そして勉強になるサイトを紹介します。 ランディングページ・プロダクトページのレイアウト、UIのさまざまなコンポーネント、アニメーションが気持ちいいインタラクションなど、ブックマークして定期的にチェックしておきたいサイトばかりです。 Mobbin -Latest Mobile Design Patterns デザイン面に優れた最新のスマホ向けデザインのパターンがコレクションされています。100以上のiOSアプリの主要な画面遷移と5,000以上のパターンが厳選されており、自身のライブラリを作成（要登録、無料）することもできます。
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
10 Pure CSS Call-To-Action Button Collections - 1stWebDesigner
Every website and landing page should have a clear call-to-action button. This encourages the user to click and perform an action, whether to make a purchase, start a trial, or sign up for an account. There is no single best way to design a CTA and you can use many different styles, from large gradients to ghost buttons, and everything in between. But other factors like color, size, and position a
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
jQueryアニメーションにイージング（easing）処理をつけるプラグイン【イージング動作サンプル一覧】｜BLACKFLAG
jQueryで要素にアニメーション動作をつけた際、単調な動きだけでなく、加速・減速など動きに強弱のついたエフェクト、イージング（easing）処理をつけることが出来ます。 jQueryのノーマル状態では、イージング処理は「linear」と「swing」の２つが用意されていますが、プラグインを使うことによってアニメーションに多種多様なイージング処理をつけることができるようになります。 そんなイージング処理を、様々なパターンで簡単につけることが出来るプラグインを２つ、イージング動作サンプルと併せて紹介してみます。 jQuery Easing Plugin［jquery.easing.js］ jQuery Easing Plugin［jquery.easing.js］ jQuery Easing – jQuery 日本語リファレンス もはやjQueryのイージング処理では定番のプラグイン。 プラ
【jQuery】可変グリッド・レイアウトの超有名プラグイン［Masonry］を紹介します。
ウィンドウサイズに合わせてレイアウトがアニメーションしながら可変する［Masonry］は、言わずと知れた超有名 jQuery プラグインです。 「Masonry」とは直訳すると「石造建築」の意味。レンガ造りの壁をイメージすると、その特性が理解しやすいかもしれません。 ちなみに読み方は「メーソンリー」です。「フリーメーソン」の語源にもなっていますね。 百聞は一見に如かず、というワケで、まずはデモをご覧ください。 jQuery Masonry : サンプル・デモ jQuery Masonryの使い方 まずは jQuery 本体のライブラリと jQuery Masonry をダウンロードしてきます。 jQuery Masonry 当然ですが jQuery の本体ライブラリがないと動きませんので、Masonry プラグイン単体では意味がありません。 ダウンロードしてきた２つのファイルは head
vivus.jsを使ってSVG画像のアニメーションを実装してみよう｜アド･エータイプ スタッフブログ
家でゴロゴロしてたらカビゴンがゴロゴロしてきたので捕まえました。 前回ですがSVGを軽く触りましたので、今回はvivus.jsと言うものを使ってアニメーションを実装してみたいと思います。 これを使うことで線がなぞられていくようなアニメーションをSVGに施すことが出来ます。 vivus.jsのサイトはこちらから http://maxwellito.github.io/vivus/ ダウンロード https://github.com/maxwellito/vivus こちらのページからダウンロードが出来ます。 「Clone or download」→「Download ZIP」の順番にクリックするとzipがダウンロードされます。 解凍後の「dist」フォルダにある「vivus.js」または「vivus.min.js」を使用します。 SVGの用意 <svg height="300" id="te
WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」 | co-jin
流行っているのかどうか定かではありませんが、海外のサイトなどで最近よく見かける幾何学的なポリゴンアニメーションをご存知ではないでしょうか。 とてもクールで、ぜひ取り入れてみたいなあ、と思っていたところ、簡単に実装できるスクリプトがありましたのでご紹介します。 WEBサイトの背景にポリゴンアニメーションを簡単に実装できる「particles.js」 「particles.js」は、WEBサイトの背景にポリゴンアニメーションを簡単に実装できるスクリプトです。サイズはわずか25kb。 設定も簡単なのに、サイトにクールな印象をあたえる演出を施せます。 実際どんなアニメーションなのかは、こちらからご覧ください。 「particles.js」の実装方法 particles.jsでDownloadをクリックして必要ファイルを入手します。 particles.jsを読み込みます。 ここでは圧縮版を読み込み
androidアニメーションの置換メモ - exception think
自メモ） とりあえず書いた版。適宜補強していく予定 思い立ったきっかけ） 4.1以降の端末でアニメーションがおかしくなる 旧形式のAnimationを使っていた Animationクリア系の試作をしてみても改善されず //方式１ v.clearAnimation(); //方式２ v.setImageDrawable(null); //setImageBitmap した bmp.recycle() しておくようにというサイトも有る //方式３ ani.setRepeatCount(0); ということで古いアニメーションは動作不完全 ＝＞3系のアニメーション使いましょう というお話もあり バックポートライブラリ nineoldandroids を試して見ることに。。 備考） 一応 anim.cancel(); みたいな関数は用意されてるけど、Animationクラスって 普通呼び出し関数内で
『ガールフレンド（仮）におけるボーンアニメーション実装』
はじめまして。 ガールフレンド(仮)でアニメーションを担当しています。峯岸と申します。 本日はガールフレンド(仮)のぷちガールアニメーションの制作に関してご紹介したいと思います。 ぷちガールちゃんとは？ ガールフレンド(仮)ではぷちガールちゃんという機能があり、ゲーム内でバトルをしたりイベントに参加したりするときに応援してくれる小さなガールがいます。 "会いに行く"機能では、ぷちガールちゃんにアニメーションをつけて可愛く動くよう実装されています。 ボーンアニメーションとは？ 体にボーンを階層的に設置してゆき、その骨格のつなぎ目を基準にキーフレームで動きをつけてアニメーションをつけていく技法のことです。 スケルタルアニメーションや、スキンドメッシュアニメーションとも呼ばれています。 ガールフレンドでは、アニメーション制作にFlashを使用しているため、ガールの各パーツを関節ごとにムービークリ
[iOS][Swift] いつか使ってみたい トランジション系OSSまとめ | DevelopersIO
今回はアプリの画面遷移が素敵になるトランジション系のOSSのなかからSwiftで作成されているものをまとめてみました。 アニメーション系の処理は自分で実装すると大変だったりするので、気に入った演出のトランジションが見つかれば活用するのも一つの手かもしれません。 TransitionTreasury 色々なトランジションが入っているOSSです。上の画像は一例になります。 動きのサンプルはhttp://transitiontreasury.com/に一覧があります。 ※ Swift 2.2サポート済 URL
![[iOS][Swift] いつか使ってみたい トランジション系OSSまとめ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c83d413afe58d904e71a2ee3e849a272825f43c1/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F01%2Fios_ui.png)
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ
作成：2016/04/25 更新：2016/06/29 Web制作 > ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 背景色に合わせて、テキスト色をリバースさせる DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: differenceを使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。 進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。 mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこな
CoreAnimatorを使ってみました - 落ち着こう
本日から始まったtry! Swiftカンファレンスで@TimOliverAU が紹介していたCoreAnimator。気になったので早速購入して使ってみました。 https://itunes.apple.com/jp/app/core-animator/id934434650?l=en&mt=12&at=10l8JW&ct=hatenablog たっけー。ま、自分でもアプリ作るし、先行投資ってやつです。 まずは、こちらのチュートリアルを3秒くらいで適当にご覧ください。ちょー便利そうですよね。 こちらは早速自分でも使ってみた様子です。最新版はUIの使い勝手も向上しているようです。この状態で右上のExportをすると、 Untitled from Toshihiro Suzuki on Vimeo. こんなパネルが出てきました。いろいろ設定できるようです。このままExportを押すと、 こんな
try! Swift Core Animationで作る高度なグラフィックス #tryswiftconf Day1-9 - niwatakoのはてなブログ
twitter.com iOSならアニメーションがUXに対してとても大事なことです。それでUIKitのAPIのおかげで実装するのが既にとても簡単です。しかし、UIKitの下のレベル、Core Animationも利用したら、自分のアプリにもっとかっこよくて、もっときれいなアニメーションも可能性になります。このプレゼンテーションはiOSでCore Animationの実装方法やエフェクトのデモンストレーションを説明します。 かっこいいものを見せたいと思います。 UIKitのちがい、CALayerで出来ること CoreAnimationの実装 サブクラスを利用したエフェクト オヤジギャグが大好きです 20年前父の仕事で千葉県に引っ越し、僕と妹は幕張の小学校に入学しました。半年で友だちができて、帰国してから日本語を学んでいました。 それだけではなくて2007年にワーホリで新潟スキー場でバイト、3
実践 Swift UIViewアニメーション PART I | 株式会社メイプルシステムズ
こんにちは、最近ずっと Swift で iPhone のアプリを作ってる渡部です。 まだまだ分からない事が色々でてきて中々面白いです。 iPhoneのアプリを作っているとよく出てくるのが、UIViewのアニメーション。 対象Viewの移動や縮小・拡大をする際にアニメーションさせると、一気にいい感じのアプリになります。 UIViewのアニメーション関連のメッソッドは下記の７種類あります。 【アニメーション】 １. UIView.animateWithDuration 【トランジション】 ２. UIView.transitionWithView ３. UIView.transitionFromView 【キーフレームアニメーション】 ４. UIView.animateKeyframesWithDuration ５. UIView.addKeyframeWithRelativeStartTim
デザインの参考に！モバイルアプリUIのギャラリーサイト13個まとめ | 日本VTR実験室
どうもこんにちはJBです。 アプリデザインの引き出しを増やす手っ取り早い方法として、ギャラリーサイトを眺めたり…なんてことがあると思います。そんなわけで、今回はモバイルアプリのギャラリーサイトを集めてみました。 ギャラリーサイト一覧 普段から色々なタイプのUIを見ておけば、いざという時「このコンセプト・機能ならあんな感じかな？」みたいな目安が付けやすいです。パクっちゃダメですけど。 あまり日本のアプリのギャラリーがないもんで、英語のアプリばかりですが…。それでは行ってみましょう！ Inspired UI iPhone、iPad、Androidと切り替えられて便利なギャラリー。 Inspired UI Mobile Design Inspiration モバイルUIのコンセプトなどを集めたTumblrページです。GIFアニメーションなんかもあって楽しいですね。 Mobile Design I
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゴーストボタンと相性が良さそうなホバーエフェクト 10＋ - NxWorld
iQONのアニメーションの裏側ちょっと紹介します - ZOZO TECH BLOG
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
