Webメディアの代表的なマネタイズ方法として挙げられるのが「広告」です。 一方で広告をむやみやたらに掲載してしまうと、メディアに掲載されたコンテンツの見え方やメディアのブランドを損ね、場合によってはユーザーに不快な体験を提供してしまう要因にもなります。 では、メディアの事業者や担当者はどのように広告事業と向き合ったら良いのでしょうか。 媒体社が考えるべきビジネス戦略について、株式会社スケダチ代表として媒体社の広告事業などへのアドバイスを行いつつ、米国のネイティブ広告プラットフォーム企業 Sharethroughの日本市場代表を担う高広伯彦 氏にferret Founding Editor 飯髙悠太が「メディアにとっての広告ビジネス」、「広告取引の多様化」という視点から伺いました。 高広伯彦 氏プロフィール 1970年大阪府生まれ。関西学院大学社会学部卒、同志社大学大学院修士課程修了（社会学

Macは、直感的に使用できることやシンプルなデザインが人気のパソコンです。 今回は、そんなMacをより便利に使いこなし、作業効率を格段にアップさせるためのアプリ12選をご紹介します。 インストールしてしまえば、複雑な設定を行う必要もなくすぐに利用できるアプリばかりですので、Macを使い始めたばかりの方でも簡単に取り入れることが可能です。 作業効率があげるオススメアプリ12選 1.KeePassX https://www.keepassx.org/ パスワード管理ツールです。 たくさんのホームページで会員登録をしていると、IDやパスワードの管理が面倒です。 このツールは、マスターパスワードさえ覚えておけば一元管理することができます。 ちなみに、このツールは、Dropboxとの共有が可能で、DropboxとKeePassXのデータベースの共有設定を行い、以降KeePassXのデータベースを編集

ベゼルが究極的に少なくなったiPhone X が登場したことで、デザイナーは新しい局面を迎えているかもしれません。 全画面であるという前提のないモバイルナビゲーションを再構築する時期が迫ってきました。 しかし、まだ11月上旬に発売したばかりで戸惑っているデザイナーの方も多いのではないでしょうか。 そこで今回は、モックアップ投稿サイトDribbleの投稿を参考にした、iPhone X時代のモバイルナビゲーションアイデアに関する3つの考察をご紹介します。 従来のiPhoneの使い勝手とは違うからこそ考えて欲しいことをまとめてみました。 iPhone X 時代のモバイルナビゲーションアイデア 3つの考察 SamsungのGalaxy S8やAppleのiPhone Xのように、ベゼルレスでスクリーンに没入できるスマートフォンは、今後ますます増えて来るはずです。 WebデザイナーとしてWebコンテ

CSSは現代のWebページ制作になくてはならないものです。 Web制作に関わる人であれば、誰でもそのスキルを磨いていきたいと思っているのではないでしょうか。 ただ、、JavaScriptなどのフレームワークに関しての情報はエンジニアの交流会などで頻繁にシェアされるものの、CSSについては新しい技術が出てこない限りやりとりされることは少ないのが現状です。 CSSは、主にWebの見た目に関わる技術なので、レベルを上げることはWebデザインの表現力にそのまま直結します。 今回は、CSSの技をもう1レベル上げるための7つのポイントをご紹介します。 １：一番シンプルなCSSリセット marginやpaddingなど、ブラウザ間の表示誤差を修正する方法の一つに、CSSリセットと呼ばれる設定を行う方法があります。 通常、CSSリセットはnormalize.cssなど用意されているリセットライブラリを外部

HTMLやCSSでホームページのデザインを行うことを、一般的には「プログラミング」とは言わずに「コーディング」と言います。 論理的なバックエンドでの実行処理を考えるプログラミングとは違い、HTMLやCSSは「見え方」や「見た目」の部分に責任を持つことが多く、コードによって「組み立てる」イメージからそのように呼ぶのでしょう。 しかしながら、CSSは通常プロパティと値をセットで指定していきますが、*「CSS関数」*と呼ばれる便利な関数も用意されています。 これらの関数を使うことで、計算を実行したり、条件を指定したり、特定の値を別のフォーマットに変形したりすることができます。 そこで本稿では、*コーディング初心者こそ知っておきたい便利な「CSS関数」*を5つ紹介していきます。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用していただきた

2つの画像をビフォー・アフターで比較したり、2つの画像の違いを見比べて欲しいときに、どんなふうに画像を配置しますか？ 上下に2枚置いたり、あるいは左右に並べて配置させて比べてみたり、様々な方法があります。 その中で、近年様々な媒体で使われている*「画像比較スライダー」*と呼ばれる手段があります。 画像比較スライダーとは、1枚の画像の枠に2枚の画像を重ねて配置し、境界線をスライドさせることで2枚の画像を切り替えることができるウィジェットです。 実装するためのプラグインはすでに多数リリースされており、少しのコードで簡単に実装することができます。 今回は、画像比較ができるjQueryスライダープラグイン9つをご紹介します。 ユーザーのマウス操作やスマートフォンの指の操作で作動するユニークなユーザーインターフェイスなので、ホームページやブログ記事で使うと面白みが増すかもしれません。 画像比較ができ

Webデザインに関するトレンドは毎年変遷を繰り返しており、トレンドの移行スピードは早まっています。 2016年にはデュオトーンやヒーローイメージを大きく使ったサイト、2017年にはスプリットスクリーンやブルータルなデザインが台頭してきました。 2018年は、どんなWebデザイントレンドがやってくるのでしょうか。 今回は、2018年に試してみたいWebデザインのアイデアをご紹介します。 これから流行しそうなトレンドをいち早く取り入れたいと考えている方はぜひチェックしてみてください。 2018年に試してみたいWebデザインのアイデア7選 1. アシンメトリーなスプリットスクリーン Odai / スクリーンショット：2017年10月 2017年は数多くのホームページがスプリットスクリーンを採用しました。 スプリットスクリーンとは、画面を中央で2分割したように見せ、左右で別々のコンテンツを見せるレ

「この単位、なんだ？初めて見た・・・」 CSSが初めに登場してからかなりの時間が経過していますが、CSSに触れている経験が長いひとでも、一度はこのように思ったことがあるのではないでしょうか。 CSS歴10年以上の方でも*「長さの指定にはpxしか使わない」*という人も珍しくはありません。 実際、CSSは小さな仕様変更を繰り返しており、W3Cの草案作成・勧告といった正式なプロセスを経て便利な単位やプロパティは続々と追加されています。 CSSにおいて、単位を操ることができれば、デザインやレイアウトを行う上でかなり幅が広がることになります。 これから紹介するように、CSSにはすでにさまざまな単位がありますが、知らなかったがために回り道をしてしまっていた、あるいは知っていたらもっと短く書けるコードも多く存在します。 今回は、あまり知られていないけれど知ると得するCSSの単位をまとめていきます。 単位

Web業界の動向を追うため、日頃からWebメディアをチェックするのは大切です。数多のメディアが溢れる中で、どうやって情報の取捨選択をすればよいか悩んでいる方もいるでしょう。 そこでオススメしたいのが、Web業界の著名人のTwitterをフォローすることです。Webマーケターやアナリスト、経営者など各分野の著名人がシェアする記事やツイートから効率的に情報収集が行えます。また、Twitterのリアルタイム性を活かし、最新の情報を得ることもできるでしょう。 今回は、Web業界を中心に、リスティング広告、アクセス解析、SEO、エンジニア、Webメディア、スタートアップ企業と各分野ごとの著名人のTwitterアカウントをまとめました。関心のある分野のアカウントをチェックしてみてください。 Web業界の情報収集のためにフォローしておきたいアカウント9選 1.@kayumi Follow @kayumi

コーディングを一部でも仕事に取り入れているひとであれば経験があるかもしれませんが、主要ブラウザではどんどん新しいCSSプロパティが標準化されていくので、気づかないうちに次々と「新種」が増えてキャッチアップできなくなってしまうことがあります。 もちろん、こうしたプロパティはあらゆる職種のWebデベロッパーの方にとってはよいことです。 便利なプロパティが増えれば、今までJavaScriptなどで実装していたこともCSSで短く記述できるようになり、手間も省け、生産性が向上するからです。 今回は、比較的最近登場したCSSプロパティの中でも、あまり知られていないけれど便利なCSSプロパティをご紹介します。 知らないCSSプロパティを学んでいくのに、ブラウザサポートを心配されている方もいるかもしれません。 その場合は、ぜひCan I use?などのプロパティサポート一覧を一緒にご覧ください。 あまり知

読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化

ferret記事をさがすコンテンツマーケティング「質と量どちらを取るかって議論はナンセンス。何をやりたいのかという視点がない」-コンテンツマーケティングのプロが語るメディアのあり方 「質と量どちらを取るかって議論はナンセンス。何をやりたいのかという視点がない」-コンテンツマーケティングのプロが語るメディアのあり方2018年05月29日コンテンツマーケティング 成果を出すための手段としてとらわれがちな「マーケティング」という分野。しかし、その本質はユーザーとの関係づくりにあります。 近年では、そのような関係づくりの中でも、オウンドメディアやSNSマーケティングなど、コンテンツを用いたマーケティングが注目を浴びています。 今回は、国内最大級のWebマーケティングメディア「ferret」主催のferret User Meetupで行われた、コンテンツマーケティングのトップランナー3名による対談の

ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm

2016年には新タイプのホームページのデザインやテクニックが流行しました。 しかし、実際にはまだまだ駆け出しのトレンドも多く、2017年も引き続き、世界のクリエイターたちによってより面白いアイデアが生み出されるはずです。 そこで今回は、2017年に挑戦してみたいWebデザインのアイデアを集めました。 これらのアイデアは、すでに登場しているものの、まだ採用しているホームページはそれほど多くありません。 インスピレーションを生み出すために、これから紹介する10のアイデアを見てみましょう。 参考： あなたはいくつ知っていますか？2016年に最も話題になったWebデザイントレンド17選｜ferret 2017年に挑戦してみたいWebデザインアイデア10選 1. ビビッドなグラデーション 出典：Impossible Bureau ※このWebページは現在公開されていません グラデーションはCSS3登

「HTML5」と並びよく目にする*「CSS3」*では、従来のCSS(スタイルシート)にはない様々なプロパティが実装されています。 本来であればJavaScriptで実装するような*「アニメーション(animation)」をはじめ、floatを使わなくても段組ができる「フレックスボックス(flexbox)」、文字やボックスに影をつける「シャドウ(shadow)」*など、ダイナミックな動きから複雑な装飾まで、あらゆることが短いコードで実装可能になりました。 しかし、ひとくちに「CSS3」と言っても様々なプロパティがありすぎて、実際蓋を開けてみると普段から使い慣れているプロパティしか実装していない方も多いのではないでしょうか。 そこで今回は、あまり知られていない(かもしれない)けれども、案外便利なCSSプロパティをまとめて19個ご紹介します。 「なるほど！」というものがあれば、実作業でも活用して

2016年秋クールのテレビドラマ『逃げるは恥だが役に立つ』｜TBSテレビが、世間の注目を集めています。 新垣結衣さんと星野源さんのW主演で始まった本ドラマ。「逃げ恥」の愛称で親しまれており、ドラマ開始以降、回を重ねるごとに視聴率が上昇していました。 参照： 「逃げ恥」第９話１６・９％！また自己最高更新　一度も数字落とさず ― スポニチ Sponichi Annex 芸能 視聴率が右肩上がりに上昇した結果、残り2回放送は15分の時間拡大版となる運びになっています。 しかし、こうした人気を生んだキッカケが「Webマーケティングにおける細かな施策」の積み重ねだったことは、さほど知られていません。 今回は、「逃げ恥」が高視聴率を獲得するに至ったマーケティング戦略をご紹介します。 ユーザーが理解しやすいホームページの制作 火曜ドラマ『逃げるは恥だが役に立つ』｜TBSテレビ公式ホームページより 「逃げ

PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。 最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。 今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。 注目！スクロール時にユーザを引きつけるjQueryプラグイン12選 1. セクションが重なるようにレイヤー表示「StickyStack.js」 配布ページ｜デモ 一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉

「失敗すらできていないオウンドメディアが多すぎる」オウンドメディアとマーケティングの関係性（MOLTS 寺倉そめひこ氏・ferret 飯髙）更新日: 2018年02月23日オウンドメディア運営イベントレポートコンテンツマーケティング オウンドメディアを運営している方々は、「何のためにオウンドメディアを運営しているのか」という質問に対し、どのように回答されるでしょうか。 多くの方は「自社の売り上げを上げるため」「見込み顧客を獲得するため」と答えるかと思います。 では、オウンドメディアからどのように見込み顧客を獲得し、どうすれば売り上げに貢献できるのか、明確に答えられるでしょうか。 潜在層向けの施策としてオウンドメディアが注目されて以降、多数の企業が着手してきましたが、成功しているのはほんの一部なのが現状です。 今回は、D2Cソリューションズ主催のメディアイベントの一環として開かれた、MOLT

2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h