スマートフォンブラウザで広告やブラウザゲームの手段として動画演出を用いると、ユーザーの目を惹き、高い訴求効果をもたらします。たとえば、動画広告市場はスマートフォンを中心に拡大を続け、2022年には2,918億円に達する見込みとの調査結果があります（※）。このように、スマートフォンにおける動画演出は年々需要が高まっており、ハードウェアや通信環境の進化にあわせて、通常のウェブページでも動画を用いたリッチな表現が増えてくると考えられます。広告主・ウェブ開発者であれば是非押さえておきたいところです。 ※ 参考記事「サイバーエージェント、国内動画広告の市場調査を実施」 しかし、スマートフォンのブラウザによってはインライン再生ができない、透明部分のある動画（アルファ付き動画）が使えない等の制約がありました。こういった技術的問題を解決し、スマートフォンブラウザ・デスクトップブラウザにおいて効果的な演出を

360°の全方向を自由に見渡せるパノラマコンテンツは、GoogleストリートビューのようなWebサービスによって身近なものになってきています。前回の記事「お手軽360°パノラマ制作入門！ THETAで撮影しWeb公開に挑戦しよう」では、360°の静止画・動画が撮影できるカメラ「RICOH THETA S」で撮影したパノラマをYouTubeなどのWebサービスで手軽に公開する方法を紹介しました。 今回は、カスタマイズ性の高いWeb用の360°パノラマビューワーの実装方法を、初心者用と上級者用として2通り紹介します。初心者用のものはHTMLで3Dを作成できるライブラリ「A-Frame」を使い、上級者用としてはJavaScript製の3Dライブラリ「Three.js」を用います。 パノラマ静止画を表示する360°パノラマビューワー 次のデモは、本記事で解説するサンプルの完成形です。360°パノラ

360°の全方向を自由に見渡せるコンテンツと言えばGoogleストリートビューが有名ですが、近年ではFacebookのタイムラインやYouTubeでも360°のパノラマ映像を見られるようになりました。不動産ポータルサイト「SUUMO」では、スーモスコープというダンボール製のVRビューワーを情報誌に付属し、物件の中を自由な視点で見渡せるVRコンテンツを公開しています。最近話題になったWebサイトでパノラマ動画を使った事例がありました（参照）。これらを一例として、Web業界では視点を自由に動かせる360°パノラマコンテンツが増えてきています。 「パノラマを作るのは難しそう」「どうやって作るのか想像がつかない」と思われがちですが、実は数万円程度の機材を準備すれば簡単にパノラマは作れます。本記事では、オススメの360°カメラ「RICOH THETA S」の利点を紹介しつつ、パノラマ（静止画と動画の

ウェブページの読み込みを高速に！ FacebookのInstant Articlesの導入方法 Facebookアプリのニュースフィードに流れている記事を選択したものの、読み込みが遅く記事を読むのを諦めた経験はありませんか？　記事を選択すると媒体側のサイトへアクセスしコンテンツを表示しますが、読み込み時間が遅いとせっかく良い記事を作成してもユーザーが離脱してしまう可能性があります。 本記事で提案したいのは、Facebookでのページ表示を高速化させる技術「Instant Articles（インスタント記事）」です。Facebookアプリから外部ウェブページを読み込むのに平均8秒程かかると言われていますが、Instant Articlesを利用すると10倍の速度で表示できるようになります。 読み込み速度が改善すれば、快適にブラウジングできるため利用者にとっては嬉しいことでしょう。また、離脱率

ゲームやビジュアライゼーションのWebコンテンツでは、華やかな3D演出の実装をJavaScriptとWebGLで求められることがあります。この記事のシリーズでは、WebGLのJSライブラリとして有名なThree.jsを利用して、3Dエフェクトの作成手順を解説します。 今回、扱うテーマは「マグマエフェクト」。実は以前、このテーマを3Dエフェクト作成ツールであるEffekseerエフェクシアーで扱ったことがあります（記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」)。Effekseerはプログラムを使わないデザインツールなので、今回紹介するThree.jsによるプログラムの作り方とはまったく異なります。ですが、表現のエッセンスはどんな作り方でも共通。エフェクトの実装ポイントが理解できていれば、異なった方法でも同じ表現を実装できるのです。 本記事

以前、記事「[商用利用可能！高品質なオススメ日本語Webフォント8選（無料フォント多数）](https://ics.media/entry/13498/）」にて日本語のWebフォントを紹介しました。無料のWebフォントを中心に紹介しましたが、種類が少なく使いたいフォントがないといった場合も多いかと思います。 そういった場合に有償のWebフォントサービスが候補として挙がりますが、使用できる書体数やPV数の制限などサービス内容の違いがあり、どのサービスを選択するか悩ましいのではないでしょうか。今回は5つのWebフォントサービスを取り上げ、それぞれで扱っている書体数やプラン内容などを徹底比較します。 TypeSquare 「TypeSquare」はモリサワが提供しているWebフォントサービスです。800を超える書体（和文フォントは695書体）から選択可能で、主な書体として「新ゴ」「リュウミン」「

最近のWebのフロントエンド開発ではライブラリの管理を行うパッケージマネージャーの採用が主流になってきています。たとえば、タスクランナーのGulpやGruntであったり、SassやTypeScriptのコンパイルのためにNode.jsノード・ジェイエス（npm）を導入している方は多いでしょう。 JavaScriptのパッケージマネージャーとしては「npmネヌ・ピー・エヌ」が有名ですが、2016年10月にFacebookが新しいパッケージマネージャー「Yarnヤァン」を公開しました。 Yarnはnpmと互換性のあるJavaScriptのためのパッケージマネージャーで、「インストールが高速」「より厳密にバージョンを固定」「セキュリティが高い」といった魅力があります。弊社はnpmからYarnに乗り換えて早3年、快適に開発に利用しています。本記事では、npmの経験者に向けてYarnの利点と使い方を

Adobe MAX 2016 Sneaksで発表された新技術！ アドビの本気を垣間見る11の革新的なテクノロジー 米Adobeアドビ Systemsシステムズが主催の世界最大のクリエイティビティ・カンファレンス「Adobe MAX 2016」（カリフォルニア州サンディエゴ）。二日目は「スニークス」というAdobeが研究中の技術を発表する恒例の講演が行われました。ここで発表されたものは現時点では製品に搭載されていないものの将来的に製品に組み込まれるかもしれない技術。未来のCreative Cloudの新機能を一足先に知ることができます。本記事では発表された11のテクノロジーを、イベントに参加したスタッフがレポートします。 ▲11月3日（米国時間）の目玉プログラム「スニークス」。観客の注目度は高い 1. 紙に手書きして、3Dオブジェクトを着色するペイント技術 冒頭を飾ったのは未来のペイント技術

Adobeが3DデザインツールProject Felixを発表！ 機械学習の活用とCCユーザーにとっつきやすい操作感が魅力の新しいアプリ 米サンディエゴで開催中のAdobe MAX 2016で、3Dデザインツール「Project Felixプロジェクト フェリックス」が発表されました。本記事では、速報としてProject Felixの機能をレポートしつつ、クリエイターの視点から魅力を紹介します。 ▲ Project Felix発表の瞬間 Project Felixとは アメリカのデザイン界のトレンドとして、かつて写真だった素材が3Dに変わりつつあります。基調講演で登壇したアディダスのデザイナーは「グラフィックデザインの未来は3D」と紹介。3D素材を用いると、柔軟にレイアウトの変更ができるといった利点があるからです。ただ、3D素材を扱うには専門の知識が必要なため、グラフィックデザイナーの誰も

［速報］Adobe XDの大規模機能追加を発表！スタイルガイドの共有やコラボ編集をはじめ、待望のレイヤー・シンボル機能を搭載 Adobe Systemsアドビ システムズが世界最大のクリエイティブカンファレンスAdobe MAX 2016（米サンディエゴ）で、Experience Design CC（Adobe XD）の大規模な機能追加を発表しました。本記事では、速報としてAdobe XDの新機能を現地スタッフがレポートしつつ、クリエイターの視点から魅力や使い所を紹介します。 ▲Adobe MAX 2016の基調講演 XDはAdobe製のUXデザインツール XdはAdobe製のUXデザインツール。モバイルアプリやウェブサイトのプロトタイプを簡単な操作で制作できるデスクトップのソフトウェアです。昨年のAdobe MAX 2015で「Project Comet」という名前で発表され（参照「Ad

私たちが毎日目にしているウェブサイトは、ユーザーの閲覧環境や使用する技術によって日々変化しています。今回は、2016年8〜10月に国内外のブックマークサイトで取り上げられた国内のリッチなウェブサイトを5つ取り上げ、どのような技術や表現手法が用いられているのかを解説します。 IJC MATSURI | IS JAPAN COOL? 別ウィンドウで開く ANAが運営する外国人向けのメディアサイト「IS JAPAN COOL?」で日本の祭りを紹介するスペシャルコンテンツ。サイトの背景一面に映像を表示し、迫力のある音で祭りの臨場感を表現しています。映像の他にもさまざまな演出が各所に用意されており、日本に訪れたことのない外国人でも日本の祭りを感じられます。 ▲デスクトップ版では、祭り独特の所作に似せたUIで映像（数枚のコマ画像）をパラパラアニメのように操作できます ▲360度の全方向を撮影できるカメ

Web業界は何時まで働くのか？ HTMLコーダーへのアンケート結果 （業務時間やコードの書き方、Web技術について） ウェブ制作者の就業時間やコーディングスタイルなど、皆さんは気になったことはありませんか？　同業者と交流の少ない職場だと、常識だと思っていることが業界多数の傾向と異なっているかもしれません。 そこで、Twitterアカウントから実施していたWeb業界に関するアンケートをまとめました。この記事では「Web業界の働く時間」「トレンドの技術」「コーディングスタイル」「フォント」の4つのアンケート結果を紹介します。 Web業界は何時まで働くのか？ 当サイトICS MEDIAのアクセスは18時を超えると急激に下がります。このことから、Web業界で働く大半の方々は18時に仕事を上がっているのではないかと考えるようになりました。このことをツイートしたら意外性があったらしく多くの注目を集めま

Webフォントは、サーバーにあるフォントデータを読み込むことで、端末の環境に依存せず同じフォントをウェブページに表示する技術です。 2010年頃からCSS 3の登場とともに徐々に浸透し、近年ではさまざまなウェブサイトやサービスで使われるようになりました。 しかし日本語フォントは3〜10MBもの大容量になったり、導入にコストがかかったりと、採用を見送っている方もいるのではないでしょうか。今回は実用的でオススメの日本語Webフォントを、それぞれの特徴を踏まえつつ紹介します。 Noto Sans JP / 源ノ角ゴシック 世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans JP」で、Adobeのブランドは「源ノ角げんのかくゴシック（英名：Source Han Sans）」といいます。 Noto Sans JP

日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り

GoogleがAngular 2を正式リリース！ 未来のウェブ標準を意識した新しいフレームワーク グーグルが開発するJavaScriptフレームワークAngularの最新バージョン「Angular 2アンギュラー・ツー」が本日、正式リリースされました。 Angular 2はSPAエスピーエー（シングル・ページ・アプリケーション）の開発に利用するフレームワーク。AngularJSの後継にあたります（バージョン1.x系ではJSフレームワークとしてAngularJSアンギュラー・ジェイエスという名称でしたが、バージョン2からはJSに限定しないフレームワークとなったためAngularという名称になっています）。 AngularJSはMVWフレームワークとして2010年にグーグルよりリリースされ、多くのウェブサイトで採用されてきました。新バージョンではアーキテクチャーの一新により、ウェブ標準が意識さ

※AMPは画像を遅延読み込みする機能が存在するため、ファーストビューでの転送容量が少なくなる傾向があります。当サイトもHTTP/2やリバースプロキシーを利用するなどWordPressを極限まで早くするようチューニングしていますが、AMPページではそれよりも高速に表示されています。 筆者はモバイルブラウザでのページ読み込み高速化によって、アクセス数が伸びる、SEO的に有利になる、エンゲージメントが向上する、といったことに期待していました。 AMP対応の効果は今のところ局所的 結論からいうと、AMP対応して得られたメリットは局所的なものでした。一部の記事がバズったときに、アクセス数の向上を確認できたというものです。まずアクセス数の数値から、AMPの状況を見ていきましょう。次のグラフはAMP対応してから現在までのアクセス数の記録です。 ▲アクセス解析はAMPページのみに絞り込んで表示 上位1位の

ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな

Spectron（スペクトロン）はElectronの為のテストフレームワークで、ElectronのAPIを使用したテストが可能になります。テストを取り入れることで、「想定していた動作と違う」「作成していた機能がいつの間にか動作しない」といったことを未然に防げます。 Spectronからは実際にElectronアプリを起動することができ、「ウィンドウのタイトル」「デベロッパーツールの表示状態」といったことをElectronのAPIにアクセスして取得できます。また、「ページの画像キャプチャー」機能でデザイン崩れが発生していないかのチェックや「ページのテキスト保存」でテストに失敗した時のHTMLテキストの取得、「console.log()で書きだした内容の取得」も可能です。これらのテストは手元の開発機だけでなくJenkinsなどCI（継続的インテグレーション）サービス上でも使用できます。 ▲ 本

今、スマホアプリ「SNOW」で、顔写真に動物のパーツをデコったり複数人の顔を入れ替えて、おもしろい写真へ編集することが若い女性の間で流行っています。 このアプリには、画像から顔を検出できるフェイストラッキングという技術が使われています。この技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。 フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTML5でフェイストラッキングを実現する方法を紹介します。 Webテクノロジーでフェイストラッキングに挑戦しよう Webテクノロジーで簡単にフェイストラキングを実現するには、JSライブラリ「clmtrackr」がオススメです。このライブラリでは、負荷が高いフェイ

ウェブコンテンツで3Dを扱える技術としてWebGLがあります。WebGLを利用すればブラウザ上で華やかな表現を実現できます。しかし、コンテンツの内容によっては処理負荷が高くなり、カクつきが生じる場合があります。カクつきはコンテンツの見栄えを損なわせ、作り手の想定とは異なる体験を与えてしまう可能性があります。そのような場合の対策として、本記事ではWebGLのカクつき解消方法をいくつか紹介します。 解説用にカクつきの起こりやすい高負荷なデモを用意しました。本記事で紹介するカクつき解消方法はこのデモで実際に体験できるので、読み進めながら同時に触れておくとイメージがしやすいと思います。 デモを別ウインドウで再生する ソースコードを確認する ※このデモはThree.js(r141)とTypeScript 4.7とwebpack 5で作成しました。開発環境の構築は記事「最新版TypeScript+We