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

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

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"><

メソッドは他にもたくさんあるのですが、とりあえず最初はこの位覚えておけば良いと思います。 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倍 本記事で

完了日: 2024年7月 決済サービス提供会社のコーポレートサイト（200ページ）のリニューアル。テンプレート・パーツのコーディングとPowerCMSの設計・実装を担当。週1回の定例Mtgを開催しながら、長期間のプロジェクトを完遂。 完了日: 2024年7月 大手電機メーカーのコーポレートサイト。様々なWeb制作会社がページ更新時に利用するコーディングテンプレートの全面改修を担当。あわせて、コーディングガイドラインの改定を行ない、サイト運用の基盤整備を行なった。 完了日: 2024年6月 クライアントとサイトの表現方法のイメージ合わせをするために、アニメーションのサンプルをまとめた打ち合わせ用のモックアップを作成。

Browse: Home » 【IllustratorでのWEBデザイン編】WEBのコーディングでググって調べた基礎の基礎のまとめ 1週間ほど前まで、毎日作業していたWEBのコーディング案件で、ググって調べた基礎の基礎をまとめておきます。 前回のコーディングの案件の時にも、作業が終わってから「久々のWEBのコーディングでググって調べた基礎の基礎のまとめ」、「【第2段】久々のWEBのコーディングでググって調べた基礎の基礎のまとめ」とググったことをまとめておきました。人間、どうしても同じようなところでつまずいたり、ミスをしてしまうところがあるものなので、このようにまとめておくとこはとても有益で、今回のコーディングもこれらのまとめ記事からリンクを見て確認することが何度かありました。 コーディングに関することはググれば出てくるのだから、別にまとめておかなくてもいいじゃん！と思う人もいるかもしれませ

CSSの登場から20年。この間、CSSはものすごく進化していました。「それって昔のやり方ですね」なんて言われないように、今後のサイト制作でチェックしておきたい最新のプロパティ（と関数）が学べる記事を9つ、厳選して紹介します。まだまだドラフト段階の仕様もありますので、各自記事の解説をチェックしてください。 1.グリッドレイアウトが捗るGrid Layout Module 『CSSレイアウトの常識が変わる！Grid Layout Moduleが胸アツ』（WPJ） CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxをよく使いますよね。仕様策定中の「Grid Layout Module」なら、もっと効率が上がりそうです。 2.テキストの回り込みが簡単に！ CSS Shapesプロパティ 『CSS Shapesでテキストを回り込ませるレイアウトを表現』（Webクリエイ

【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。 CSS3から新たに使えるようになった「object-fit」プロパティについて解説します。 聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。 ……文章の説明だけでは理解しにくいと思うので、実際に「object-fit」を使ったサンプルをご覧ください。 object-fit：サンプル・デモ ※サンプルは、Safari、Google Chrome、Firefox等のモダンブラウザでご確認ください。 親要素のボックスの表示領域に依存して、画像の大きさが変更されているのをご確認できると思います。 このプロパティ［object-fit］で指定できる値は５つ。 object-fit: fill; object-fi