※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術

写真やイラスト、図、テキストなどデザインする要素をどのようにレイアウト（配置）するかがデザインの仕上がりの肝になる。 同じような情報を連続して並べる場合、リズムをつけると心地よくみせることができる。リズムが崩れると不安定に見え、安心感がなくなってしまうため、同じような情報は制限を作り、リズムよく見せることを意識するのが大切だ。 一方で、リズムを作ることができれば、そのリズムを崩すことで目立たせることができる。同じような情報でも強調したいものとそうでないものの差をつけることで、ユーザーへのメッセージが明確になる。また、その差がないと何を伝えたいのかが、分からなくなりやすい。 ユーザーがどのように目線を動かすか配慮してレイアウトすると、読みやすくなる。一般的には、横書きの場合はZ型、F型と呼ばれ、左上から右下に向かって目を動かすと言われている。 デザイン要素の中に人の目線を使うと、見ているユー

WordPressの「これが困った！」 WordPressで困っていることはありませんか？ サーバー移転／エラー解消／カスタマイズなど、WordPressの「これが困った」を解決します。 WordPressの便利屋 最近、レスポンシブデザインの案件が7割を超えてきている中で、ウェブサイトを訪問する側への、PCから、タブレットから、スマホから、環境差を埋める優しい工夫が増々重要になってきているなあと実感してます。 そんな工夫のうちの一つ、今回はレスポンシブイメージの基本をまとめてみました。 記述方法や対応ブラウザについて、かじる程度に軽く説明しています。サクッと把握するのにちょうどいい分量だと思いますので、「レスポンシブイメージって？」という初心者さんはぜひどうぞ。 レスポンシブイメージとは？ レスポンシブイメージは、閲覧側の画面サイズに対して最適な画像のサイズと見せ方を選べる方法です。 大

はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず

JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、JavaScriptの難易度は12ぐらいあると思います。このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。初級者1のための物ですので、わかってやっている人に好きにやってください。 このコーディングガイドは絶対に従わなければならないものではありません。私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。 禁止編 JavaScriptには安易に使用してはいけない機能があります。下記の機能は、それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、使用してはいけません。 ==、!= ==と!=を使用してはいけません。代わり

jQueryっていろんなセレクターがあって便利ですよね。でもいつも同じセレクターばかり使っていて、実は無駄なコードを書いていません？ 主要なセレクターを一挙解説。ふだんjQueryを使っている人も、おさらいにどうぞ。 本記事はMatt Smith、Tim Severienが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 jQueryのセレクターは、Webページ上の要素の内容を操作したいのか、要素にイベントを追加したいのか、あるいはほかのなにかをしたいのか、の選択に関与します。セレクターはライブラリーの重要な部分を形成します。 記事では、セレクターのすべてをカバーし、使用の際に心に留めておくべき大切なことを紹介します。 jQueryのセレクター セレクターの主な目的は、一定の基準を満たすWebページ上の要素の選択です

アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします。 色々な使い方があると思うけど、ここではwidthの値をリアルタイムに更新し、スクロール量に応じて幅を広げたり狭めたりする方法をのせています。 デモとHTMLとCSS 言葉だけだと説明が難しいので、デモを見てもらうと何をやりたいのか分かるかと思います。とてもシンプルです。※古いIEでは見れません。 DEMO デモでは５種類ありますが、基本的にはスタート位置(CSS)が違うだけで、内容はほとんど同じ。 HTML HTMLは何でも良くて、便宜上、空divの要素を更新するような形にしています。 <div class="contents"> <div class="line"><

Illustrator（イラストレーター）などを始めとするデザインツールには、様々なショートカットキーが存在します。通常の操作では時間がかかる作業も、ショートカットキーを駆使することで作業効率を飛躍的にアップさせることが可能です。 今回は、覚えておきたいショートカットキーを目的別に150個まとめました。 なお、当記事ではWindowsを基準にしております。 WinのCtrlキーはMacのコマンドに相当します。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

メソッドは他にもたくさんあるのですが、とりあえず最初はこの位覚えておけば良いと思います。 jQueryの実行タイミング jQueryを動作させたいのはどういうときでしょうか。例えば、ページを読み込んだとき？それともある要素をクリックまたはタップしたとき...？ などなど、だいたいこのどちらかで使うことがほとんどではないでしょうか。それらjQueryが実行されるタイミングをイベントといいます。 そこでまずはHTMLを読み込んだときに発生するイベントについてです。 $(document).ready(function(){ //HTMLを読み込んだらここに書いたことを実行します。 }); 上記はJavaScriptでいうところのwindow.onload()のような物です。のような物、というのはJavaScriptのwindow.onload()はwindowがロード(HTMLや画像などページ

フロントエンド開発において、もはや必須となってしまった開発環境Gulp。 今更ながらGulpの魅力について書き留めておきます。 Gulpでできること プラグインを追加し、タスクを登録していくことで、様々な処理を同時並行で自動化することができます。 僕がコーディングの際によく使うのは主に4つ 1. Sassのコンパイル 2. CSS3ベンダープレフィックスの自動挿入 3. 画像の圧縮 4. BrowserSyncによるライブリロード 中でも4のライブリロードは重宝してます。 その他、HTML、CSS、JSの圧縮など何でもできちゃいます。 ではまずGulpを動かすための環境構築から解説していきます。 Gulp環境構築 GulpはNode.jsのインストールが前提となるので、公式サイトからインストールしましょう。 インストールが完了したらターミナル（コマンドプロンプト）でバージョン確認。 nod

jQuery でのテキストボックスに対する操作をまとめました。 テキストボックスの value 値に対する操作は、jQuery の中でも基本的な処理になります。ベースとなるテキストボックスの操作を覚えれば、各種フォームオブジェクトに対する操作も難なく覚えることができます。 以下、サンプルプログラムでは id 属性「sampletext」のテキストボックスを用いて解説していきます。

Illstrator シェイプ形成ツールを使って簡単に効率よくアイコンやイラスト作成をしよう by ナツコ · 2014-10-03 こんにちは、デザイナーのナツコです。 フラットデザイン、SVG、CSS3、など…最近のwebデザインのトレンドで デザイナーのみなさんは以前よりもIllustratorを使う機会が増えたのではないでしょうか？ 最近は、様々なサイトで素敵なアイコンやイラストが配布されていますが、 デザイナーであれば出来ればオリジナルで作成したいものですよね。 そこで、今回はオリジナルのアイコンやイラストを作成する際にとっても便利な「シャイプ形成ツール」の基本的な機能、使い方をまとめたいと思います。 シェイプ形成ツールとは シェイプ形成ツールは、重なった複数のシェイプを結合、削除できるツールです。 同じような機能でパスファインダーがありますが、 結合させたい部分や消去したい部分

クリエイティブなプロデザイナーが実践する、デザインテクニックを身につけるチュートリアルやつくり方をまとめています。 豊富すぎるツールは Illustrator ビギナーにとって、戸惑うことも多いでしょう。そんなときは順番ごとにデザインを進める、実践的なチュートリアルを参考に、基本的なツールを学んでみましょう。テクニックが増えていくことで、Illustrator をより自在に操作することができるでしょう。 詳細は以下から。 Illustrator をしっかり学びたいひとへ。参考にしたい入門チュートリアル、つくり方まとめ 夏をテーマにしたカラフルなアイコンを作成する方法 ペンツールを使ってデザインする、シンプルでかわいいアイコンパックのつくり方。 惑星アイコンのつくり方 銀河系の惑星をひとつずつ、色鮮やかな配色のフラットスタイルで描いたアイコン素材セット。 ゲームに出てくるファンタジーな武器を

フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には

人は誰でも欲求を持っています。 この欲求を中心にアイデアを考えると、とっても簡単にアイデアが出てきます。 今回は、人間の欲求からアイデアを考えるマーケティング手法を紹介したいと思います。 人間にはどんな欲求があるのか？ 人間には多くの欲求があります。 まずはその欲求一覧をご覧ください。 ●共存・共有 欲求 例

最近流行のグロースハック。 効果改善を繰り返し、サービスを成長させる手法ですが、なかでもメジャーな改善施策と言えばABテスト。 以前本ブログではABテストの最大手Optimizelyの解説記事を掲載いたしましたが、今回はGoogleアナリティクスでできるABテスト「ウェブテスト」について紹介いたします。 導入したらどんなことが起こるのか。 そもそもどうやって導入するのか。 そしてOptimizelyとの違い。あたりを説明していきたいと思います。 そもそも、ウェブテストってなに？Googleアナリティクス版ABテストと思っていただいて大丈夫です。 ウェブテストを設定すると、設定したURLへのアクセスが、一定の割合で本来のものと異なるページ（URL）に振り分けられます。 本来のページと異なるページを表示し、どちらのページがより良い成果を出せるか、という比較・テストを実施することができるようにな

エントリーフォームの改善でお悩みではないでしょうか？ランディングページを色々と作り替えてみてもコンバージョンが増えない時に、エントリーフォームの最適化（EFO）を検討されている方も多いかと思います。 確かにエントリーフォームの改善で離脱率の改善はされる可能性は高いです。しかし、フォームのどこに課題があるのかは導入前に把握しておくべきでしょう。 そこで今回は過去に実施したサイト上のユーザビリティテストの結果から、エントリーフォームに関する実際のユーザーの声をご紹介したいと思います。 ぜひ自社サイトのエントリーフォームと比較して課題を見つけてみてください。 不必要な情報を入力したくないユーザーの声：『必須項目が最低限の内容でいいから‥あんまり情報も出したくないから…』 背景・理由：ユーザーは当然不必要に感じるような項目には情報を入力したいとは思いません。そのためアンケートや決まりきっていない内

Webサイトを運用・改善するためにサイトの分析をしようと、Googleアナリティクスと毎日にらめっこをしている方も多いのではないでしょうか。 しかし、アクセス解析ツールを導入してただ漫然と眺めているだけでは、Webサイトの成果を上げるための分析はできません。しっかりと成果につながるサイト分析を行うためには、分析するための「視点」が必要です。 本記事では、Webコンサルティングを行っていた私のサイト分析方法をご紹介しようと思います。私の会社では、徹底的に成果にこだわるコンサルティングを行い、100社程のお手伝いをしてきました。その100社全てで確実に成果を出してきた分析手法を説明します。 筆者の分析方法による実績（一例） •中古本販売ECサイト　CVR120% •コンタクトレンズECサイト　売り上げ130% •看護師専用転職サイト　CVR4.4倍 •大手プロバイダサイト　CVR2倍 本記事で