企業が自社で保有するオウンドメディアは、潜在顧客の創出と顧客育成には欠かせない企業の核となる重要なメディアです。WEB広告やSNSと掛け合わせることで、より高い成果が見込めます。 また、コロナの影響により対面営業が難しくなった近年ではオウンドメディアの重要性が一層高まっています。 しかし、「PVが伸びない」「質の高い記事が作れない」「継続しても売上に繋がらない」など、全てのオウンドメディアが上手くいくとは限らず、閉鎖する企業も少なくありません。 そこで今回はオウンドメディア担当者や企業のマーケティング担当者に向けてオウンドメディアの成果が上がらない理由とその対策を紹介します。 オウンドメディア運営で成果が上がらない理由 オウンドメディアで着実に成果を伸ばしていくためにはSEO対策によって安定した流入数を確保する必要があります。しかし、SEO対策の成果を感じられるのは、一般的に半年から1年か

2018年4月上旬、待望の国産プロトタイピングツールが公式に公開されました。その名もSTUDIOです。 STUDIOはiPhoneアプリのモックアップを作成するだけでなく、Webデザインのモックアップを作成し、そのまま公開までできてしまいます。 そこで今回は、*デザインしたサイトがそのままローンチできる新しい国産Webデザインプラットフォーム「STUDIO」*の概要や簡単な使い方を紹介します。小型サイトならたった数時間でWebサイトの公開まで行き着けるでしょう。使い方は簡単なので、早速触ってみてはいかがでしょうか。 参考： STUDIO 「STUDIO」とは？ STUDIOは、デザインから公開、運用までを丸々行うことができる、無料から始められるWebデザインプラットフォームです。もともとはモバイルデザインも含めたプロトタイピングツールとして注目を集めていましたが、ドラッグ＆ドロップで簡単に

Webデザインを行う際に、複数の閲覧デバイスを想定してデザインを行うのは今では当たり前になっています。オンラインでのWebページの閲覧の4分の3はモバイルなので、モバイルでも快適に閲覧できるように、デザインを考えていかなければなりません。 Webデザインで段組を行う手法はさまざまありますが、現時点で最も手っ取り早いのはCSSグリッドを利用する方法です。CSSグリッドは見た目の段組を想定してコーディングできるので、より直感的な段組を行うことができます。 そこで今回は、CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介していきます。何かと概念的なCSSグリッドですが、ここでレスポンシブ対応するにはどうすればよいか、まとめておきましょう。 CSSグリッドでレスポンシブデザインを実装しよう イメージ画像 floatやflexboxのような「1次元」レイアウトに対して、「2次元レイア

Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実

Web担当者であれば、一定の文章作成スキルを身につける必要があります。 ホームページの商品・サービス紹介やブログなど、様々な場面で文章を書く機会があるからです。 ただ、自分ではうまく書けていたと思っても「文章が読みにくい」「意味が伝わらない」と指摘されたことはありませんか？ わかりにくい文章の多くに共通している事象があります。 それが*「文章のねじれ」*です。 「文章のねじれ」は「主語」と「述語」、「論点」と「結論」が噛み合わないことで生じます。 今回は、「文章のねじれ」を解説します。 文章のねじれを防ぐための解決方法も合わせてご紹介するので、文章作成のスキルアップに役立ててみてください。 「文章のねじれ」とは？ 「文章のねじれ」とは、伝えたい事柄に対して異なる結論を述べることを指します。 まずは下記の文章をご覧ください。 例： 私の目標は、コストの削減をしたいです。 主語が「目標は」と宣

Microsoftが提供しているデジタルノート「OneNote（ワンノート）」。図形や表なども自由に保存できるだけでなく描画ツールも搭載されているため、ノートアプリとしてはもちろん、アイデアや企画などをまとめるためのフリーノートとしても使用できる便利なツールです。 今回は、共有したりPDF化したりする方法など、知っておくと役立つ便利なOneNote活用術10選を紹介します。 OneNote（ワンノート）とは OneNote OneNoteとは、Microsoftの提供しているデジタルノートブックです。情報を整理したり、アイデアをメモしておいたり、音声やビデオを挿入しいつでも確認できるようにしたりと、様々な情報を保存しておける便利なツールになっています。 OneNoteには共有機能もあり、保存したデータを周囲の人と共有して確認したり、アイデアをみんなで出し合って書き込んだりすることも可能です

「なかなか仕事が終わらなくて残業ばかりしている」 「やるべき仕事があるのに、後回しにしてしまう」 「予定していた時間通りに仕事が回らない」 普段から忙しい営業マンやWeb担当者にとって、こういったタイムマネジメントの悩みは尽きないことでしょう。 そんな方は業務と時間を管理するタイムマネジメントの手法を学んでみてはいかがでしょうか。 今回は、タイムマネジメントに役立つ書籍をタイムマネジメントにありがちな悩み別に紹介します。 効率的な仕事術から、仕事を後回しにしないモチベーションの保ち方まで、プロのノウハウを学んで周囲からも一目置かれるビジネスパーソンになりましょう。 スケジュール通りに仕事を進められない 1.なぜ、あなたの仕事は終わらないのか スピードは最強の武器である [なぜ、あなたの仕事は終わらないのか スピードは最強の武器である | 中島聡 | Amazon] (https://www

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

Web業界の統計情報を集める "Internet Live Stats" の調査によると、2014年9月に全世界のWebサイトの数は10億サイトを突破し、2017年6月時点では約12億900万件超となっています。 ※ここでいうWebサイトとは、識別可能なホスト名やIPアドレスを持っているという意味 1991年7月6日に、スイスで世界初のWebサイトが登場。それから、かなりの月日が経過しますが、2017年6月時点では1分間におよそ120ものサイトが生まれている計算になり、Webサイトを立ち上げることは"より一般的"なものになりつつあります。 昔に比べると、ドメイン取得の費用も安く、手続きも非常に簡単になり、サーバーの維持管理も牛丼1杯分ほどの月額費用で運用できるようになりました。 これは、情報の発信のしやすさという意味では非常に良いことですが、一方で世界中の人々がたくさんの情報を発信している

SassのようなCSSプリプロセッサーが登場してもう5年以上が経過しました。 SassやLESSは関数や変数などを使うことができるので非常に便利です。 関数や変数を使えるようになるだけで、大量のコードをコピーアンドペーストするという作業を省くことができ、サクサクと開発を進めることができるようになります。 ところが、コンパイルを行わなければならないという一手間が億劫で業務ではまだ使っていないという現場も多いのではないでしょうか。 さらに、プリプロセッサーの変数にはいくつかの制限もあります。 変数はDOM構造と結びつくことはなく、JavaScriptから読み込んだり変更したりすることができないという点です。 そうした問題に対処するために新しくCSSに導入されたのが、*「CSSカスタムプロパティ」(CSS Variables)*です。 基本的に、CSSカスタムプロパティは、プリプロセッサーの変数

オープンソースのjQueryライブラリはWeb開発の現場において何年もの間不動の地位についていました。 JavaScriptのことを深く理解していなくとも、オブジェクト指向で分かりやすい構文、豊富な外部プラグイン、加えてAjaxなどの非同期通信も簡単に扱うことができたのが、その人気の理由です。 JavaScriptを用いた開発現場ではいまもなお人気のjQueryですが、ここに来て新たなJavaScriptライブラリが注目を集めています。 それが、Umbrellaです。 UmbrellaはjQueryと同様に完全オープンソースで、jQueryと同じく要素セレクタを扱うことができたり、DOM操作ができたり、Ajaxリクエストを行うことができます。 また、UmbrellaはjQueryと若干異なる文法や関数の呼び出し方を採用していますが、基本的に残りの部分はほとんどjQueryと一緒です。 それ

Webサービスの公式ロゴDLページまとめ【Facebook・LINE・インスタグラム・Twitter・Google・Microsoft】更新日: 2020年12月16日SNSマーケティング TwitterやFacebook、GoogleのようなWebサービスを自社コンテンツ内で取り上げる時、ブランドのロゴを使いたいと思うことはありませんか？営業資料に用いたり、ホームページで発信する記事の画像として含んだり、サービスのプロダクトに盛り込んだりとブランドロゴを使用する機会は多いでしょう。 今回は、主要Webサービスの公式ロゴの使い方と参照ページを紹介します。 商品やサービス名、ロゴは著作権及び商標にて保護されており、使用にはガイドラインが設定されています。ブランドのロゴに似せたデザインを勝手に作成したり、ガイドラインとは異なる加工をしたりした際には法律に違反する場合があるので注意しましょう。

ブログを始めたりホームページを自作したりするために勉強しはじめると、さらにデザインを凝ったものにしたくなります。 また、ある程度カスタマイズが進めば、表示速度をもっと早くしたり、より短いコードでコーディングしたりしたくなります。 そこで必ず話題に上るのが、CSSです。 もちろん、LessやSassのようなCSSプリプロセッサー(関数を使ったりしてプログラミングコードのように書くことができるCSS)が誕生したことで、より複雑なデザインをできるだけ少ないコードで書くことができるようになりました。 しかし、フロントエンドエンジニアとしてレベルアップするためには、どのように書けばレイアウトが改善されたり表示速度が速くなるのかをしっかりと理解しておいたほうがよいでしょう。 今回は、Webデザイン初心者がランクアップするためのCSSのコツをご紹介します。 これから紹介する、多くの初心者を泣かせたCSS

Webデザイナーやフロントエンドエンジニアにとって、日々登場するフレームワークやライブラリをキャッチアップすることはとても大切です。 なぜなら、そうしたフレームワークやライブラリによって業務が効率化すれば、他の作業に時間を割くことができるからです。 しかし、フレームワークやライブラリが続々と登場するあまり、キャッチアップに追いついていないひともいるのではないでしょうか。 今回は、最近登場した注目のJavaScriptとCSSのライブラリを紹介していきます。 中には簡単なコードを挿入するだけで驚くほどの機能を実装できるものもあるので、ぜひ確認してみてください。 最近登場した注目のJavaScript＆CSSフレームワーク 1. AOS https://michalsnik.github.io/aos/ AOS(Animate on Scroll)は、スクロールしながら要素をアニメーションでふ

ちゃんと丁寧に確認したつもりなのに、いざ公開してみると、リンクが切れていたり、誤字脱字が見つかったり……と後から問題に気付いた経験、皆さんはいかがでしょうか。 思わず"ウンウン"と頷いてしまった方も少なくないのではないでしょうか。 構想段階から時間をかけて、膨大なコスト・リソースを投入して制作したホームページ。 それだけにできれば完成したとならば早く公開したいですが、ここは改めて今一度、公開前の最終チェックを行わなければなりません。 焦って公開してしまい、思わぬミス・トラブルを引き起こさないためにも、必ず実施することをオススメします。 そこで今回は、立ち上げ時にスムーズかつしっかりとチェックをするためにも最低限確認しておくべき項目をリストアップしてご紹介します。 ホームページ立ち上げ時に確認すべき基本チェック項目 1. 誤字脱字などの細部をチェックする どんなに気をつけて書いていても後から

スマートフォンアプリではおなじみのプッシュ通知。 実は、Webブラウザからもできることをご存知でしょうか。 JavaScriptの*「Web Notification API」*というプッシュ通知を制御するAPIを使うことで、モバイルだけでなくデスクトップにもWebサイト経由でプッシュ通知ができるようになります。 しかし、モダンブラウザの多くがサポートを始めている一方で、まだ利用したことがないひとも多いのではないでしょうか。 今回は、Web Notification APIを簡単に扱うことができるPush.jsを使って、簡単にブラウザ通知を実装する方法をご紹介します。 プッシュ通知とは？ これまでは、ホームページの更新を通知する方法としてはRSSやメールなどを利用している人が多かったのではないでしょうか。 しかし、RSSはRSSリーダーに登録する手間が必要で、メールでもメールアドレスをユー

いまやJavaScriptを語る上で、ライブラリやフレームワーク抜きで全てを語ることはできません。 JavaScriptをそのまま使うことも時としてありますが、多くの制作現場では開発スピードを上げたり、便利な機能をより短いコードで実装することのできるライブラリやフレームワークを活用しています。 しかし、一口にJavaScriptライブラリ・フレームワークといっても、その特徴や強み・弱み、活用方法が大きくことなります。 そこで今回は、様々なJavaScriptのライブラリやフレームワークの中から今だからこそ勉強しなおしたいJavaScriptライブラリ・フレームワークを7つ、概要や特徴を中心にご紹介します。 今人気のライブラリやフレームワークを知ることで、学習やWebアプリケーション開発の際の参考にしてみてください。 参考： 全くの初心者でも大丈夫！JavaScriptをゼロから学ぼう｜fe

今の作業フローをもう少し良くしたい、と考えているデザイナーの方は多いのではないでしょうか。 日々のデザイン作業を"より快適に" "効率良く"するためには、デザインリソースを確認しておくことが重要です。 しかし、たくさんのツールやサービスがあり、実際問題どれを選んだらいいかわからなかったり……そもそも調べるのが面倒という方も決して少なくないはずです。 そこで今回は、数ある中からオススメしたいデザインリソースをピックアップしてご紹介します。 気になるものがあれば、今すぐ活用してみてはいかがでしょうか。 ※素材数などは2016年12月21日時点での情報です。今後変更となる可能性がありますのでご了承ください。 画像・動画素材関連 1. freepik http://www.freepik.com/ ベクター、PSD、アイコンと、様々な形式でデータが用意されている、便利な素材がたっぷり揃った素材サイ

グラフを使うと、あらゆる要素が客観的に比較できるので、問題分析が容易になったり、根拠を示しやすくなります。最近では情報やデータを可視化したインフォグラフィックを見かける場面が多いですが、それもグラフのメリットを活かしたものです。 しかし、グラフをホームページに掲載する時に、いちいち画像を作成するのは面倒……だと感じたことありませんか。 そこで今回は、グラフやチャートをJavaScriptで動的に生成することができるChat.jsを紹介します。 Chart.jsを使えば、数行のコードを書くだけで、鮮やかなグラフを簡単に描画することができます。少しのステップで実装することができるので、実際に特徴や手順から確認してみましょう。 Chart.jsとは？ http://www.chartjs.org Chart.jsは、数行のコードで折れ線グラフや棒グラフ、円グラフやレーダーチャートなどをダイナミッ

インターネット広告費は年々高騰傾向にあり、いかに多くのユーザーを集客するか、日々頭を悩ませる方も多いのではないでしょうか。 一方で、集客したユーザーにコンバージョン（CV、購買やお問い合わせ、資料ダウンロードなど）してもらうための施策、つまりサイトの分析と改善にお金と労力をかけられている会社はどのくらいいるでしょうか。 今回は国内13,000サイト以上の導入実績があるサイト分析＆改善ツール「Juicer」をご紹介しつつ、Webサイトの分析、改善を行うために知っておくべきポイントを紹介します。 サイト分析＆改善活動の重要性とは Webサイトで成果をあげるためには、集客を増やすこと、集客したユーザーのCV率を向上させること、主にこの2つに注力する必要があります。 しかし、広告には多くの予算が投じられる一方、その受け皿となるサイトには特に施策が行なわれていない、というケースが多く見られます。集客