Muzliはデザイナーのインスピレーション向上を目的としたChromeエクステンションです。基本的にはAwwwardsやCSS WinnerなどのデザインギャラリーサイトやDribbble、Behance等のデザイナーのコミュニティサイトなどの投稿をざっと確認出来るだけというシンプルな拡張機能になります。上記Webサイトをよく見る方にとっては手軽に確認出来て良いのでは。 Muzli
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
スプレッドシートアドオン「SimilarWeb for Sheets」で、競合比較の資料づくりの時間を激短する! 2014/11/27 API・他ツール連携, 機能 ビジネスをする際に、多くのマーケットには競合となる他社の存在があるでしょう。 その競合を調査する場合、競合比較表を作成し、それを利用して自社の施策を考える材料や営業資料などに使うのが一般的です。しかし、いちいちデータをExcelに記入する工程はかなりの時間がかかります。 今回、そんな面倒な時間を短縮する競合分析ツールSimilarWebのスプレッドシートアドオン「SimilarWeb for Sheets」をご紹介します! 「SimiarWeb for Sheets」とは? 「SimilarWeb for Sheets」とは、URLを入れただけでそのサイトのアクセス解析ができる競合分析ツールであるSimilarWebのアドオン
スマートフォン開発事情 スマートフォン向けウェブサイトの開発というと、どのような現場を想像するでしょうか。PCでコーディングして、ファイルを更新するごとにスマートデバイス端末(以下、端末)を操作してウェブページにアクセス、表示確認をして、またPCにもどってコーディング、端末でリロード、といったフローではないかと思います。あるいは、問題を報告するために端末ごとに画面キャプチャを撮ってメール送信…という場面もあるかもしれません。いずれにせよ、ずらりと並んだマルチデバイス環境と格闘しているのではないでしょうか。 Adobe Edge Inspect(以下、Edge Inspect)は、この煩雑なフローを効率化する支援ツールでもあり、同時に強力な開発ツールでもあります。 検査対象のページを端末に表示し、リロードからキャッシュ破棄までの操作に加えて、撮影したスクリーンショットをPCに転送するといった
Search for APIs using the Internet's first API search engine API. Getting Started Learn what you need to get started using the APIs.io API, integrating the API search engine into your applications. Go Documentation Visit the documentation for the APIs.ioi API to learn about how you can search for APIs, properties, and maintainers. Go
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
サムネイル真ん中の風景写真は縦長 Intense Imagesの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ※jQueryなど他のスクリプトは必要ありません。 <head> ... <script src='../intense.js'></script> </head> Step 2: HTML 画像は2種類の配置方法があります。 img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。 <img src="./img/awesome-source.jpg" /> <!-- OR --> <div class="anything" data-image="./img/awesome-source.jpg" /> data-imageを使用する時は、サムネイルはCSSで背景画像として指定
こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。 前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。 従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。 今回は実際にWebGLを使った3D表現にチャレンジしてみます。 JavaScriptで記述しますが、初心者向けにまとめたのでノンプログラマやデザイナーの方にもチャレンジしてほしいです!実際にコード書くところは5分(早い人なら1分)でできると思います。 そもそもWebGLとは PC上で3Dを描画するための技術にOpenGLというものがあります。OpenGLは3DグラフィックスAPIとも呼ばれていて、様々なプラットフォームに対応しており、広く普及しています。 このOpenGLをWe
こんにちは。デザイナーのハルエです。 普段Webデザインを制作する上でPhotoshopを使用している方は多いかと思いますが、いかに自分に合った環境にカスタマイズするかで作業効率は大きく変わってきます。 今回はいつものPhotoshopがさらに快適になる無料プラグインをご紹介させていただきます。 【こちらもおすすめ】 おすすめPhotoshopプラグイン WebINK http://www.webink.com/webfontplugin/ ※現在このサービスはご利用いただけません。 Google Web FontなどのWebフォントをPhotoshop上で表示、利用することができます。 最初の同期に少し時間がかかりますが、あとはデザインしながら手の届くところでWebフォントがさくさく選べてしまうので、非常に捗ります。 Photoshop CS5から対応しています。 flaticon ht
「Boomerang」は、魔法のようなGmailプラグイン。メールの予約送信、一時的に隠す(スヌーズボタンのようなもの)など、メールにまつわる悩みごとを解決してくれる便利機能が満載です。著名人の仕事術を紹介する「How I Work」シリーズでも、数々のCEO、編集者、起業家らが、欠かせないツールとしてBoomerangを挙げています。 有名アプリの誕生にまつわる逸話を紹介する「Behind the App」シリーズ、今回はBaydinのCEOであるアレキサンダー・ムーア(Alexander Moore)氏に、アプリの開発秘話と今後の展望を聴きました。 ── Boomerangのアイデアは何がきっかけで生まれたのでしょうか。あなた自身が直面していた問題の解決策としてなのか、それとも別のきっかけがあったのですか? ムーア:ほとんどのアプリがそうであるように、Boomerangのアイデアは、個
WordPressで作成したサイトのサイトマップを自動生成できるプラグイン、「PS Auto Sitemap」の使い方を紹介します。初期設定やデザインの変更も簡単、便利なプラグインです。 2022年11月2日 追記 「PS Auto Sitemap」プラグインは一時的に公開停止となっており、利用することができない状態です。再公開されましたら、またお知らせします PS Auto Sitemap プラグインでサイトマップを自動生成 サイトマップとは PS Auto Sitemapで自動生成できる「サイトマップ」とは、サイト内の投稿や固定ページ等を一覧表示させる、「もくじ」の役割を果たすもの(HTMLサイトマップ)です。下記ページで紹介したような、検索エンジン向け(XMLサイトマップ)ではありません。 Google (XML) Sitemaps Generator の導入方法 ブログの投稿は、通
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く