フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 コンテンツを検索に適したものにすることで、最適なユーザーに確実にコンテンツが表示されるようにできます。検索エンジン最適化（SEO）は、検索エンジンでのウェブサイト ページの視認性を高めて、サイトにより価値のあるトラフィックを集めるプロセスです。サイトを Google 検索に最適なものにするために、何を行えばいいか確認しましょう。 検索エンジン最適化は、サイトを検索エンジン向けに改善するプロセスです。また、このプロセスを仕事として担当する人の肩書きとしても使われます。例文: 「当社のウェブでの認知度を高めるために新しい SEO 担当者を採用しました。」 Blogger、Wix、Squarespace などの自動化されたウェブ ホスティング プラットフォームでウェブサイトを運営している場合や

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">

こんにちは。名古屋オフィスのコクシンです。 Webサイト制作で欠かせない工程にブラウザごとの動作検証（ブラウザチェック）がありますが、なかなか実機と特定のバージョンのブラウザを揃えるのって難しいですよね。 ChromeやFirefoxならどのOSにもインストールできるので準備も検証も簡単ですが、iOS SafariやAndroid Browser、Internet Explorerなどの固有のデバイス・OSにしかインストールされないものとなると非常に厄介です。 そこで今回は、iOS Safari、Android Browser、Internet Explorerといった主要ブラウザを1台のMacの仮想デバイス上で実行し、簡単にブラウザチェックする方法をご紹介します。 iOS Safari を仮想環境で実行する まずは、iOS Safariを仮想環境で実行してみましょう。 実行するためには、

毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ

The ideal solution has 0 nodes. Think you can do better? Try again This game requires keyboard and mouse It seems you are on a touch device, but I can't tell for sure, please confirm: I'm using a keyboard and a mouse/trackpad You will continue to The Bézier Game. I'm using my fingers on a phone or tablet You will be redirected to The Boolean Game, which works on any device.

こんにちは、デザイナーの王です。 突然ですが、皆さんはどうやってWebページを組んでますか？ 僕は、HTMLの骨組みをひと通り書き終え、それからChromeで直接CSSを書いていきます。個人的には、ChromeはCSSをリアルタイムでいじれるので便利です。 しかし、この手法で組むと、CSSを追加、編集するたびに、いちいちコピペを連発しなければならない。しかもその後ちゃんとコピペしきれているか別タブで確認して・・・。 これは、NO GOODです！ 「編集したCSSをそのまま保存できたらなあ。」と誰もが思うことでしょう。ブラウザのセキュリティ上、そのような機能は永遠に提供されないと思われますが。 と、思ったのは誤算でした！ なんと、Chromeが開発者向けに「Chrome DevTools Autosave」という名の拡張を出しているんです！これを使えば、編集したCSSがそのまま保存されます！

Googleの新UX「Material Design」のアナウンス以降、波紋のエフェクトを数多く紹介してきました。例えばこれとかRiiple Click EffectとかWavesとか。 それらとは一味違い、WebGLでリアルな波紋を描くjQueryのプラグインを紹介します。 jQuery Ripples Plugin -GitHub ↑ファイルサイズを軽減してます。実際はもっと本物の水面です。 jQuery Rippleのデモ jQuery Rippleの使い方 jQuery Rippleのデモ デモはChrome, Safari, Firefox, Opera, IEは11+で、OpenGL 2.0対応のビデオカード内蔵のPCでご覧ください。 ページ上をクリックすると、そこから波紋がどんどん増えます。 jQuery Rippleの使い方 Step 1: 外部ファイル 当スクリプトとjq

透過PNGは素晴らしいフォーマットですが、そのファイルサイズもなかなかのものです。 透過PNGや透過GIF画像をSVG画像に変換し、JPEG圧縮・品質で軽量化するオンラインサービスを紹介します。

写真やイラストや文字など、JPEG, GIF, PNG画像をSVGのベクターに変換できる無料のオンラインサービスを紹介します。 写真画像でもこのクオリティは、スゴイですね！

GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.

「エンジニアにとって良い組織体制ってどんなものですか? お話を伺いたいのですが･･･」と依頼をいただくことがあるが、都合上全部を受けてはいられない。ので、そういう疑問を持たれた方は以下の本を読むと良いかと思います。 How Google Works (ハウ・グーグル・ワークス) ―私たちの働き方とマネジメントposted with amazlet at 14.10.18エリック・シュミット ジョナサン・ローゼンバーグ アラン・イーグル 日本経済新聞出版社 売り上げランキング: 19 Amazon.co.jpで詳細を見る 小さなチーム、大きな仕事〔完全版〕: 37シグナルズ成功の法則posted with amazlet at 14.10.18ジェイソン・フリード デイヴィッド・ハイネマイヤー・ハンソン 早川書房 売り上げランキング: 7,579 Amazon.co.jpで詳細を見る Tea

ウォルト・ディズニー・カンパニーでも伝説的と言われる9人のアニメーター「ナイン・オールドメン」のうち2人がフランク・トーマスとオリー・ジョンストン。キャラクターの感情表現を頂点まで極めたとされる2人が生み出した「キャラクターに命を吹き込む12の法則」が立方体などを使ったムービーとGIFアニメーションで公開されています。 THE ILLUSION OF LIFE http://the12principles.tumblr.com/ ディズニーアニメに出てくるキャラクターの動き12原則は以下のムービーからでも確認できます。 The illusion of life on Vimeo ◆01：SQUASH＆STRETCH(引き延ばしてペチャンコにする) これはキャラクターが動いている時に重さと質量を感じさせるようにする効果。 ◆02：ANTICIPATION(予備的な行為) キャラクターがメイン

マーケティングでは、顧客心理を読み解くことが戦略策定のもっとも大切なポイントの一つです。 その顧客心理を読み解く一つの方法として「心理学」が応用され、人間の「性質」や「本質」をもとにしたマーケティング戦略が考えられてきました。 ただ、この心理学がWEBマーケティングにおいて活用されることはまれでした。 そこで、今回はWEBマーケティングに役立つ行動心理学の手法を8つに厳選してピックアップ。 それらが実際に活用されている企業サイトを集めて重要エッセンスを抽出しました。 そしてさらに勉強したい方に向けて、もう20個の行動心理学の効果と実用方法をまとめました。 ウェブサイト上で行動心理学がどのように使われているのか、実例を参考にしながら、ぜひ自社サイトやブログにも導入してみて「ついクリックしてしまう」サイトを目指していきましょう！ Webサイトの改善策を”自動”で提案！売上向上に繋げるサービス『

2014年7月26日　ヒューマンインタフェース学会SIG-DE UXデザインセミナー＠IMJ ユーザー調査で得られた結果から、アイデア発想を行い、UXコンセプトツリーを作成を行うまでの一連の流れをワークショップで学びました。

Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。 動作環境の構築 Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。 Node.js (v0.10.x以上) Ruby (1.8.7以上) これに加えて、以下のツールのインストールが必要になります。 Nore.js上で動くタスクランナーのgulp (3.5.x以上) Sassのコンパイルを行うRubyのgem (3.3.x以上) それぞれのインストール方法について、簡単に紹介し