サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
enum-kabu.com
LOVE FILA | A 2016 LIMITED EDITION(WEBサイト) http://www.lovefila.com/ 2016Filaのカラフルなウェアをキュートでビビッドなモーショングラフィクスでお届け。スペースバー押しっぱなしで動画再生のきっかけにするUIは最近ちょくちょく見ますね。 Setting the Pace(WEBサイト) http://www.wsj.com/ad/pimco-rateandreaction.html 連邦準備制度理事会 (Federal Reserve Board of Governors)の100年の歩み的なWEBサイト。ユニークなレイアウトとその要素が画面遷移時にアニメーションする。タイムライン的なインタラクティブなデータビジュアライズにも注目しました。 Item Reveal Animations with SVG(ソースサンプル)
jean philippe nuel(WEBサイト) http://www.jeanphilippenuel.com/welcome ラグジュアリーなインテリアブランド「jean philippe nuel」のWEBサイト。3分割スライダーが印象的でロゴ、ナビとも統一感があります。 SULIYA(WEBサイト) http://sbottles.com/ ウォーターボトルのミニマルなLPです。パララックス、ブラー要素、SVGなどモダンな表現たっぷり。 Jean Paul Gaultier(WEBサイト) https://www.jeanpaulgaultier.com/en-us/ ジャンポール・ゴルチエのWEBサイト。極太フォントと大きな画像を配置したパララックスが印象的。 Tío Luchín(WEBサイト) http://www.tioluchin.com/ ペルーのレストランWEBサ
Resn.(WEBサイト) http://resn.co.nz/ 制作会社WEBサイト。トップの全6種類のインタラクティブなおまけコンテンツがクオリティー高すぎです。worksもすごい！ Sam Lord Flavin(WEBサイト) http://www.samlordflavin.com/ 映像、写真などなど幅広いクリエイターのポートフォリオサイト。ユニークなレイアウトとミニマルなデザイン。マウス、スクロールインタラクションもCOOLな印象を引き立てています。 push.js(プラグイン) http://nickersoft.github.io/push.js/ push通知をWEBサイトに導入出来るプラグイン。chrome、firefoxも対応してきているので今後活躍する場面が出てきそう。 KEEN WP thema(WPテーマ) http://demo.nrgthemes.com/
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 2016/4.17～4.23 2016/5/25 UI/UX, 「気になる...」シリーズ Style Novels – Silik(WEBサイト) http://www.stylenovels.com/en/ オリエンタルな要素が混ざったラグジュアリーな家具サイト。アートな空間にさりげなく難易度の高いギミックを盛り込んでますね。すばらしいです。 Bohemia Jihlava(WEBサイト) http://www.bohemiajihlava.com/ チェコのボヘミアンクリスタルを扱うWEBサイト。グラスの特徴を生かして画像をマスクしたインタラクションが幻想的な効果。 The Making of “The Aviator”(サンプルソース) http://tympanus.net/codrops/2016/04/26
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 2016/4.10～4.16 2016/5/17 UI/UX, 「気になる...」シリーズ Bolden(WEBサイト) http://bolden.nl/ これは面白い！トップのコピーとメニュー部でSVGを背景にして重なった部分をmix-blend-modeをつかって色を重ねています。オランダの制作会社WEBサイト。 Diadora(WEBサイト) http://makeitbright.diadora.com/ スニーカーブランド「Diadora」のスニーカーを履いた70ランナーで10カ国横断キャンペーン。ドラッグでリレーのタイムラインを操作するUIに注目しました。 Involve Digital(WEBサイト) http://www.involvedigital.com/ 意味深なコピーとミニマルでcoolなデザイ
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 2016/3.27～4.2 2016/4/28 2016/5/10 UI/UX, 「気になる...」シリーズ Nurture Digital(WEBサイト) http://www.nurturedigital.com/ LA、ニューヨークを拠点とする制作会社WEBサイト。背景のMOVIEをCSS3のmix-blend-modeでマスクしている様に見せています。要素は普通のDomになるのでアニメーションさせるのも簡単ですね。セクション遷移のアニメーションもモーションっぽくて好きです。 Sonic #SquareShakes(WEBサイト) http://sonicsquareshakes.com/ instagramからスイーツ注文をする事ができるキュートな配色のWEBサイト。instagramに投稿したくなるようなメイン
Snap.svgを使ったSVGモーフィングアニメーション(clippathバージョン有り) 2016/4/6 2016/6/2 Animation, JS/jQuery svgモーフィングアニメーションとは 以前SVGのアウトラインをアニメーションさせる記事を書きましたが、今回はSVGの塗りの部分が変形するアニメーションをやってみたいと思います。 前回のラインアニメーションはsvgのstroke-dashoffsetというプロパティーを操作してアニメーションさせる方法でしたが、今回は直接pathの値をいじってアニメーションさせる手法です。例えば印象的なサンプルサイトでいうと下記のようなサイトがあります。 Metamorphosis https://bonnemarque.se/ また下記のようなアイコンアニメーションのプラグインもあります http://alexk111.github.io
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 2016/2.14～2.20 2016/3/15 2016/3/24 UI/UX, 「気になる...」シリーズ Klimov Design(WEBサイト) https://sdklimov.com/ ロシアの制作会社WEBサイト。グリッドラインとミニマルなデザインと上下左右に配置した導線。トップスライダーのインタラクションなどに注目しました。 Los Angeles 2024 Olympic Bid(WEBサイト) https://la24.org/home 2024年LAオリンピック誘致キャンペーンサイト。セクション分けされたスライド切り替え時のアニメーションなど、隅々までインタラクションがあり見所満載。3DMAPのインタラクションも良いですね。 Pygmy Elephant(WEBサイト) http://www.py
jQueryでWEBサイトの共通部分をインクルードする方法(相対パスVer.もアリ) 2016/1/27 2016/2/24 JS/jQuery 数十ページ以上の中・大規模ページ制作の場合headerやfooterなどの共通部分はPHPやSSIでのインクルードで対応していると思いますが、サーバーの環境や、案件によってJSだけで対応する場合もあります。 そんな際に使うjQueryで共通部分のソースを読み込むサンプルソースを作成しました。 共通化する場合hrefはrootパス指定がメジャーですが、相対パスでも指定出来るソースも準備しています。 ディレクトリ構造は下記の様になっていてpartsディレクトリに共通化ファイルを入れています。 Rootパス バージョン まずはheader、footerを読み込んだ下記DEMOをご確認ください。 DEMO1 header.html <div class=
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 2016/1.24～1.30 2016/2/24 UI/UX, 「気になる...」シリーズ Rémy Martin(WEBサイト) http://www.remymartin.com/jp/ リキュールブランドの「remy martin」のWEBサイト。canvasで構築された複数のムービーを斜めにマスクしたメインビジュアルが印象的。 mmorph by MassiveMusic(WEBサイト) http://mmorph.massivemusic.com/ オランダの音楽制作会社。インタラクティブに楽曲を調整してDJ気分になれるWEBサイト。楽器(トラック)パート選択、エフェクター、フィルターなんかを操作出来ます。 Triple 9(WEBサイト) http://outmonsterthemonster.com/ クラ
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 2016/1.17～1.23 2016/2/16 2016/2/24 UI/UX, 「気になる...」シリーズ 1.17～1.23までの気になったWEBサイト・アプリUI/UX＆デジタル広告・サービスです。ちょいと今週は少なめ。 Coca-Cola – Partage tes souvenirs(WEBサイト) https://partagetessouvenirs.accorhotelsarena.com/ コカコーラの特設サイト。写真をアップロード→ギャラリーできます。 無数のパーティクルがドラッグで動き出す。 trava Cycle Tracks(WEBサイト) http://amplifon.co.uk/strava-cycle-tracks/ イギリスの補聴器メーカーの自転車とサウンドを組み合わせた特設サイト。
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 2016/1.10～1.16 2016/2/2 2016/2/24 UI/UX, 「気になる...」シリーズ Williams Jet Tenders(WEBサイト) http://www.williamsjettenders.com/ ボートメーカー「williams jet tenders」のWEBサイト。シンプルモダンなデザインとイカした画像が今までのボートのイメージを払拭するようなオシャレ感。 The Funderstorms(WEBサイト) http://www.thefunderstorms.com/ ロシアのクリエイターデュオ。遊び心たっぷりのクイズ形式でアピール。最後のハングマンはGeorocationで座標取得→tokyoの単語をとってきてます。 Red Collar digital agency(WE
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 11.1～11.7 2015/11/25 UI/UX, 「気になる...」シリーズ Citco(WEBサイト) http://www.citco.it/ イタリアの大理石加工会社「citco」のWEBサイト。日本でも東京オリンピックで有名になったザハ・ハディド氏の非現実的なデザインを具現化出来る技術力のある会社だそうです。イタリアらしいハイブランドの様なラグジュアリーなデザイン。 Deux Huit Huit(WEBサイト) https://deuxhuithuit.com/fr/ トップの鮮やかな背景インタラクションからマスクされた流れるキャプションで一気に引き込まれます。フランスの制作会社WEBサイト。 Rain & Water Effect Experiments(サンプルソース) http://tympanus.
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 9.27～10.3 2015/10/22 2015/10/22 UI/UX, 「気になる...」シリーズ deutser(WEBサイト) http://www.deutser.com/ 経営コンサルタント会社サイト。トップページの迫力あるパーティクルでまずは掴んできます。aboutのスタッフの見せ方が存在感、信頼感を際立たせますね。会社風景は制作会社の様ににぎやか。 codedoodl.es(WEBサイト) http://codedoodl.es/ CANVASで描かれるインタラクティブでアートスクリプティングな作品がアーカイブされています。ソースはGitHubからダウンロード可能。 Shaded Progress Bars: A CSS/Sass Exercise(ソースサンプル) http://tympanus.ne
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 8.2～8.8 2015/8/26 2015/8/26 UI/UX, 「気になる...」シリーズ New From Bose(WEBサイト) http://special.bose.eu/en/ BOSEのヘッドホンラインナップのPRページ。斜めにマスクされたフルスクリーンメニューに魅力的な配色と躍動感溢れるインタラクションで夢中にさせられます。 Chelsea Collective(WEBサイト) https://www.chelseacollective.com/home アメリカの女性向けフィットネスジムのWEBサイト。各ページ滑らか&リッチなインタラクションと都会的な画像でスタイリッシュなWEBサイト。 Nicolas Desle(WEBサイト) http://www.nicolasdesle.be/ ベルギー在
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 7.19～7.25 2015/8/5 2015/8/25 UI/UX, 「気になる...」シリーズ 今週の「気になる」シリーズはサイト：5、プラグイン：1、サンプルソース：1、デジタル広告：1でお送りいたします。 Quechua(WEBサイト) http://mountain.quechua.com/lookbook-spring-summer-15/ アウトドアブランド「quechua」のWEBサイト。2015年のコレクションを南アフリカの土地を辿りながら独特なUIでプロダクトを紹介していきます。インタラクション、アニメーションも秀逸で、10カ国対応。 Loadgo(プラグイン) http://franverona.com/loadgo/ ページのロード時にロゴ等の画像データをゲージローダに変身出来るJSプラグイン。
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 7.12～7.18 2015/8/5 2015/8/25 UI/UX, 「気になる...」シリーズ 今週の「気になる」シリーズはサイト：7、プラグイン：2でお送りいたします。 palzileri(WEBサイト) http://www.palzileri.com/ イタリアのアパレルブランド「パルジレリ(PAL ZILERI)」のWEBサイト。ページ遷移時のアニメーションがこちらで紹介したSVGアニメーションが採用されています。 Adwyse & Co. – Digital Advertising Agency(WEBサイト) http://adwyse.de/#!/ 特に見てほしいのは画面分割。ハンバーガーメニューからページを選択する際、右と左が選べます。選ぶとウインドウを2分割する事が出来き左右に要素を分けて閲覧出来る
今一度Velocity.jsを見直したら気づいた5つの採用ポイント 2015/7/21 2016/1/25 Animation, JS/jQuery, UI/UX jQueryのanimateを普段使っている人なら「TweenMax」「Velocity.js」を知っている人は多いと思います。しかし使っている方はどのくらいなのでしょう？ 機能的にはTweenMaxが一番良いとは思いますが、MITじゃないし…だったら「Velocity.js」は？という流れで僕が少し前にこのプラグインに出会った時は「IE7未対応」「easingの種類の少なさ」などから、制作に使うという所まで踏み出せませんでした。結局無難で万能なjQueryに戻ったのです。 最近ひょんな事からVelocity UI packという機能に気づき、その際にいくつかVelocity.jsが進化!?していて移行しやすくなっていたので今回
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 6.21～6.27 2015/7/7 2015/8/25 UI/UX, 「気になる...」シリーズ 今週の「気になる」シリーズはWebサイト：7つでお送りいたします。 Compass(WEBサイト) https://www.compass.com/ ニューヨーク、ワシントンを中心とした不動産仲介業者のサイト。サイト全体のミニマルなテイストがcoolでgoogle Mapと連動した検索システムがユーザビリティーに優れててストレス無く使えます。 Paye ton caps(WEBサイト) http://www.payetoncaps.beer/ オンライン対戦が出来るキャップ当てゲームのサイト。マルチプレイモードを選ぶとコードURLを割り当てられ、対戦が出来ます。もちろんシングルモードもあり。 Hi-ReS!(WEBサイト)
インタラクティブ展覧会 「チームラボ 踊る！アート展と、学ぶ！未来の遊園地」を見てきました：後編(遊園地編) 2015/6/15 2015/8/24 未分類 アート編で長文を書いたせいか、燃え尽きてしまいしばらく更新が滞っておりました。 さぁ！お待たせしました遊園地編です。前編はこちら まずはこの遊園地のテーマのご紹介ですが「共同で創造する「共創（きょうそう）」の体験を学ぶ」です。各作品に「身に付く力」という項目があります。遊園地という名前とはいえ、最終的には学習を目的としているんですね。 以下 解説抜粋 今日の僕らの仕事を、僕が小学生になったばかりの30年前に、世界中のどの大人が想像できたでしょう？ 情報社会が到来し、全てはネットワークで繋がり、社会の変化はますます加速するでしょう。今の子どもたちが、30年後に、どんな仕事をしているか、僕には、さっぱり想像ができません。 創造性こそが、歴
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 5.10〜5.16 2015/5/27 2015/6/2 UI/UX, 「気になる...」シリーズ Werkstatt – l’atelier interactif(WEBサイト) http://www.werkstatt.fr/#/home この「気になるシリーズ」でも何度か取り上げてるフランスの制作会社。インタラクションのクオリティーの高さとミニマルなデザインに注目。 Box Loader(プラグイン) http://matiasdg.github.io/boxLoader-Jquery-Plugin/ スクロールイベント時に要素をフェードインしてくれるプラグイン。option例はdirection:”x or y”,position: “100%”,effect: “fadeIn or none”,duration
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 5.3〜5.9 2015/5/26 2015/6/2 UI/UX, 「気になる...」シリーズ BLITZ(WEBサイト) http://www.blitzagency.com/ どこから説明していいか分からなくなるぐらいリッチで、細部まで作り込まれたサイト。3D表現、アニメーション、googlemapを拡大するアニメーション。アメリカロサンゼルスの制作会社。 Makeup Genius(WEBサイト) http://lorealparis.dk/makeupgenius LOrealのアプリ紹介LP。クオリティーが高い事とスライダーのアイディアに注目しました。 3D Folding Panel(サンプルソース) http://codyhouse.co/gem/3d-folding-panel/ PCの場合は折りたたまれ
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 4.26〜5.2 2015/5/19 「気になる...」シリーズ Vergani Gasco(WEBサイト) http://thankyou.verganiegasco.com/ ミラノの制作会社。イタリアらしいラグジュアリーさとでダイナミックなパララックスが印象的。 Hero Slider(ソースサンプル) http://codyhouse.co/gem/hero-slider メインビジュアル内の要素が切り分けられたスライダーのソースサンプル。SP時は一枚の画像に差し替えています。 The Twenty – Issue 5 | Lexus International(WEBサイト) http://www.lexus-int.com/magazine/issue5/twenty/ 20のアイテムを紹介する企画。スライド
インタラクティブ展覧会 「チームラボ 踊る！アート展と、学ぶ！未来の遊園地」を見てきました：前編(アート編) 2015/5/13 2015/8/24 未分類 GWに以前から気になっていた「チームラボ 踊る！アート展と、学ぶ！未来の遊園地」をお台場の日本科学未来館に見に行ってきました。後編はこちら 気になってはいたものの、大混雑という事を聞いてなかなか足が向かわず。。。しかし、5/10で終わり。それまでに！という事で重い腰を上げ行ってきました。こどもの日の次の日だったんですが、思ったよりは空いてましたね。チケット売り場も並ぶ事も無くスイスイ行けました。 チームラボとは？ チームラボという制作会社をよく知らないという方は以下抜粋をどうぞ チームラボは、プログラマ・エンジニア（UIエンジニア、DBエンジニア、ネットワークエンジニア、ハードウェアエンジニア、コンピュータビジョンエンジニア、ソフトウ
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 4.19〜4.25 2015/5/11 UI/UX, 「気になる...」シリーズ Beagle by Podio https://getbeagle.co/ セクション移動時のテキスト・要素アニメーションのクオリティーが高いです。ナビゲーションや、インジケーター以外フルcanvasなサイト cta.js http://kushagragour.in/lab/ctajs/ リスト押下で画面いっぱいに要素が広がるイマドキのモーダル。サイドバーとして表示させるオプションもあります。 SA http://www.sa-studio.fr/ 構成からインタラクションまで細部までいちいちかっこいい。aboutの写真もアーティスティック。 Inside Abbey Road https://insideabbeyroad.withgo
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 4.12〜4.18 2015/4/28 UI/UX, 「気になる...」シリーズ MASAHIROMARUYAMA(WEBサイト) http://masahiromaruyama.com/ アイブランド「MASAHIROMARUYAMA」のサイト。トップ、リスト、メニュー…どこへ行っても美しいですね。 Trading Culture — WELTRADE(WEBサイト) http://pro.weltrade.com/en 映画のティザーサイトを思わせるようなトップページですが、かなりエグゼクティブな証券会社のサイトと思われ。トレーダーにフォーカスを当てて作り込んでいるのが面白い。 WWF Tiger Challenge(WEBサイト) http://run4tiger.com/ WWFのアムールトラを救え！的なサイト。
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 4.5〜4.11 2015/4/20 UI/UX, 「気になる...」シリーズ PRobin Ait-el-alim Noguier(WEBサイト) http://robin-noguier.com/ フランス人デザイナーのポートフォリオ。オープニングやページ遷移、ローディング時のアイディアがいいですね。 PCrispin Porter + Bogusky(WEBサイト) http://www.cpbgroup.com/ 「Agency of the Year」に13度も輝いているアメリカの広告会社WEBサイト。トップページの更新ボタンUIが新しい。 PTimeshift 165 A race against Oblivion(WEBサイト) http://www.timeshift165.com/ openGLの3Dレ
IE7対応!リストのホバーアニメーションソースサンプル(オーバーレイ編) 2015/4/1 2016/1/25 Animation, JS/jQuery 「次回はリストの上に要素が乗るオーバーレイ編をお送りしたいと思います。」と言いつつ早3ヶ月。。。 大変長らくお待たせいたしました。IE7対応のホバーアニメーションシリーズの第2弾をお送りいたします。 ちなみに第1弾はこちら 1.オーバーレイアニメーション(マウス位置判別) DEMO function hoverDirection (event) { var $overlay = $(this).find('.overlayBox'), side = getMouseDirection(event), animateTo, positionIn = { top: '0%', left: '0%', opacity:0.7 }, positi
今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 3.8〜3.20 2015/3/27 UI/UX, 「気になる...」シリーズ House Of Borel http://houseofborel.com/ ムービーを中心にサイト内を回遊するのですが、チャプターが設定されており、「7つのブランドの秘密」的な形でページ構成されています。メインのムービーをドラッグした時と、Gボタンを押した際の分割インタラクションがとてもスタイリッシュ。 Creative Edge Parties http://www.creativeedgeparties.com/ イベント企画会社のサイト。カラフルな配色と、フルスクリーンcanvasのインタラクションが豊富。リッチにぎやかしてます。 Thierry Ambraisse http://www.hellothierry.com/ Art
次のページ
このページを最初にブックマークしてみませんか？
『enum-kabu.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
