2016年、いよいよ動画マーケティングが浸透しつつあります。 動画が活用され始めた頃は、誰の目にもわかりやすい、いわゆる「バイラル動画」が大きな注目を集めましたが、徐々にコンテンツマーケティングの一環として使われる事例が増えています。 とはいえ、現時点では、まだ一部のメディアや大手企業の事例しかイメージできない方が多いのではないでしょうか。 動画マーケティングは、規模に関係なく多くの企業で実施するべきものであり、需要が高まるにつれて様々な動画制作サービスがリリースされ、導入ハードルは下がり続けています。 今回は、動画制作を行う株式会社LOCUS監修のもと、動画マーケティングの潮流から一般企業が動画に取り組む際の手法を解説します。 動画メディアの台頭 動画は、Webマーケティングの主軸になりつつあります。 動画広告やyoutube広告の成長は著しく、今後も確実に伸びる分野として注目されていま

当サイトでは毎月新作フリーフォントをまとめていますが、最近は特に公開される素材の数も増えており、フォントを選ぶのにも一苦労という人も多いでしょう。 今回のフォントまとめでは、本当に使いやすくて無料ダウンロードできるアイテムを厳選してご紹介します。 豊富な太さの揃った万能フォントから、人気のブラシフォントや筆記体の他、アメリカの暴言王や超人気バンドメンバーの直筆フォントも。さらに、無料で利用できる日本語ウェブフォントの提供を、Google が実験的に開始されるなど、最新のフォントデザインを楽しんでみてはいかがでしょう。 詳細は以下から。 デザインが良くなる、すごいフリーフォント素材30個まとめ 2016年10月度 Fira Sans Mozilla OS 用に作成された書体ファミリーが、太さの異なる16ウエイトに大幅アップデート。2600以上の記号などグリフも収録されています。 ※　個人、商

生まれ変わったKeywordmap 膨大で面倒な調査・分析作業をKeywordmapが肩代わり。ユーザーは手順に従うだけで、ツールがWebサイト運用を効率的にサポート、最小限の工数で成果創出まで導きます。 Keywordmapの強み KeywordmapはSEO、リスティング広告、コンテンツマーケティングで戦略的にWebサイトの成長を図る企業に導入されています。 Keywordmap×AI（ChatGPT）で Webサイト運用の工数を 圧倒的に削減 ビッグデータに基づいた 競合サイト・検索ニーズ（結果）の 分析が可能 カスタマーサクセスがサポート SEO・Web広告における 成果創出まで伴走

2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン

約30の画像共有プラットフォームに登録されている1億2500万枚に及ぶ写真を単語や画像で串刺し検索して、欲しい写真を見つけることができるウェブサイト「Mediachain Attribution Engine」が公開されました。画像の検索結果には機械学習が利用されていて、よいものから順に表示されるようになっています。 Mediachain Attribution Engine http://images.mediachain.io/ Mediachain Attribution Engineのトップページはこんな感じ。 まずはトップページ真ん中にある検索欄に「girl」という単語を入力して検索してみます。 すると以下のように、少女や女性が写った高品質な画像がずらりと表示されました。 各写真の下には、写真の投稿者、写真の投稿先サイト、ライセンスの種類が表示されています。なお、以下の画像に写っ

CSS Loader Simple loaders for your web applications using only one div and pure CSS ♥. Why? Usually it's common to show a loader to the users when they must wait something in a web application (an ajax request or a form submit, etc). Gif images were great but using CSS we can avoid the image request, also it's easier for customize/ maintain and it's more cool. Check it out on GitHub.

Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。

CSS Animation Toolbox – Libraries, Tools, Snippets & Tutorials CSS animation can bring websites to life, making them more interactive and engaging for users. They play a crucial role in modern web design, allowing elements to move, change, and grab attention in ways that static pages simply can’t match. This collection aims to offer a comprehensive array of resources – a CSS animation toolbox for

この10月でついに、コリスは10周年を迎えました。 まさか10年も続けるとは思ってませんでしたが、あっという間ですね。 10年もの間続けられたのは、ビジターさまと広告主さまのおかげと深く感謝しております、ありがとうございます！ 感謝の気持ちをこめて、10周年を記念してのプレゼント企画 第1弾です。 応募期間は、2016年10月12日で終了しました。 10周年プレゼントの当選者数はなんと100名様分をご用意！ 応募要項をしっかり確認して、ご応募ください。 応募期間 応募要項 当選発表 プレゼント商品 応募期間 2016年10月12日まで。 応募要項 応募要項は、2点。 コリスのTwitterアカウント「@colisscom」をフォローしている。 Twitterの自アカウントで下記の項目を含めて、ツイートしてください。 ※配送が必要なプレゼントは国内のみを対象とします。 ツイートに必要な項目

「昔から」の人も「初めて」の人も確認したい、Photoshopによる画像処理のポイント〜Adobe MAX Japan 2016レポート① 諏訪光二（フォトグラファー）

HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3DライブラリA-Frame WebXRフレームワークの「A-Frame」を使えば、JavaScriptを記述することなく、HTMLにタグを追加するだけでVRコンテンツが作成できます。 次のデモはA-Frameを用いてt作成したオリジナルのVRデモです。中央の円状のカーソルを牛の3Dモデルに重ねることでアニメーションします。 ※パソコンではドラッグ、スマートフォンではジャイロセンサーが検知した傾きで視点が変わります。右下のアイコンをクリックすると、HMDで閲覧できるモードへ切り替わります。 デモを別ウィンドウで開く HTMLをマークアップするようにVRコンテンツを作成しよう VRコンテンツをHTMLのマークアップのように作成するには、JavaScriptライブラリ「A-Frameエー・フレーム」を使用します。「やっぱりJa

オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov

YouTubeやVineなどの動画サイトはとても良いコンテンツで、ブログやWebサイトに埋め込んでいる人は多いかと思います。しかし厄介な問題として、単純に埋め込むとレスポンシブなWebサイトの幅変更に追従できないという問題があります。 それを解決してくれるのがSuperEmbed.jsです。モバイルからデスクトップまで、一つの埋め込みコードで対応できるようになります。 SuperEmbed.jsの使い方 使い方はとても簡単で、ただJavaScriptを読み込むだけです。 <script src="superembed.min.js"></script> これだけでYouTube、Vimeo、Vime、VideoPress、DailyMotionなど（他にも）の動画を自動的に可変にしてくれます。 SuperEmbed.jsはIE9以上で使えます。jQueryなどの依存ライブラリはありませんの

この連載では、Google検索やGooleの各種サービスを便利に使う小技を紹介していきます。 【バックナンバー】Googleお役立ちテクニック Googleドライブでは、「Googleドキュメント」や「Googleスプレッドシート」などのアプリを使って、文書や表計算シートを作成できます。さらに、別のアプリを追加することで、さまざまな種類のファイルを作成可能です。今回は「MindMeister」をGoogleドライブに追加して、マインドマップをGoogleドライブから作成できるようにしてみます。 MindMeisterに接続する MindMesiterは、オンラインでマインドマップを作成し、ほかのユーザーと共有できるツールです。Chromeアプリとしても使えますが、Googleドライブと連携させることで、作成したマインドマップをGoogleドライブのマイドライブで管理できるようになります。無

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

Webページが世界各地のブラウザでどのように見えているか、位置情報を使ったコンテンツのローカライズ、コンテンツが国によってフィルタで妨げられていないかなどを確認できる無料オンラインツールを紹介します。 対応都市の一覧 ワールドワイド ローケーション 世界各地65ヵ所以上のデータセンターに対応。 結果はすぐに サーバーのクラスタはキューを使わずに、直ちにスクリーンショットを生成。 Webkitエンジン レンダリングには、WebFonts/CSS3をサポートしたWebkitエンジンを使用。 マルチデバイス 多数の異なる解像度のデバイスをサポート。 ローカライズ HTTPヘッダーに含まれる言語指定、多言語フォントのサポート。 API スクリーンショットを処理するバッチのAPIを提供。 単に世界各地でどのように見えるかだけでなく、Geo Location（位置情報）を使ったサイトの確認にも役立ちま

スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレームワークのブレイクポイントの設定 レスポンシブの確認が簡単にできる最強ツール 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone, iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。 Simple CSS Media Queries デバイ

VimeoのPlayer APIについて少し調べる機会がありましたので、使い方などをまとめてみます。 ■目次 基本的な埋め込み メソッド イベント オプション 複数配置した場合 1. 基本的な埋め込み まずは、HTMLにPlayer APIを読み込む記述を追加します。 今回はjQueryで記述するので、合わせてjQueryも読み込んでおきます。 ■HTML <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://player.vimeo.com/api/player.js"></script> 次にプレーヤーを操作する記述を追加していきますが、VimeoのPlayer APIを使用する方法がいくつかありますので、それぞれ紹介していきます。 1-1. HTMLにプレーヤー

読みやすい本文テキストのカラー、分かりやすいリンクのカラー、目立たせたいボタンのカラーなど、Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方を紹介します。 Webデザインでカラーパレットを作成する時、カラーの組み合わせをコントラストのためにテストしていますか？ テストをしてないのであれば、あなたのデザインはリーダビリティを考慮せず、潜在的なビジターを失っているかもしれません。 私はこれまでに数多くのプロジェクトでカラーコントラストとリーダビリティについて取り組んできました。いくつかの有用なカラーコントラストのアクセシビリティツールのおかげで、私は仕事をすることができ、それを多くの人たちと共有したい思います。 私はアクセシビリティの専門家ではありません。私の目指すところはシンプルで、最適な読みやすさを念頭においてカラーを選ぶことです。完全な説明が必要であれば、W3C