「会社の公式サイトにあるFAQページを改善するよう指示されたが、どうすればいい？」 「FAQの内容を充実させれば問い合わせの件数を減らせると聞いたけれど、何を改善すべき？」 コンタクトセンター（コールセンター）に勤務していて、そんな疑問を持っている方も多いのではないでしょうか。 FAQサイトの改善には、いくつかの方法と改善ポイントがあります。例えば以下のような方法です。 ◼️FAQの項目を充実させる ◼️検索性をアップする ◼️検索エンジンで上位表示されるようSEO対策をする ◼️FAQの項目をカテゴリー分けする ◼️問い合わせが多い順に並べる ◼️回答をわかりやすく記載する ◼️定期的に内容を更新する

約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム

ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適

ご無沙汰しております。11月6日に、CNAMEレコードを使って付与された1st-party cookieの規制機能を搭載したiOS14.2がリリースされましたので、その内容をまとめます。いつものことですがマーケティングよりブラウザの細かい話です。正式発表前なので誤りの可能性がありますがご了承またはご指摘ください。 規制の仕組みまず規制されるのは、AppleのWebKitエンジニアJohn Wilanderさん（ITPの発明家）が「Third-party CNAME cloaking」として定義するものです。 Third-party CNAME cloaking means a first-party subdomain resolves to a third-party domain which does not match the resolution for the top frame

※ この記事は 2021/03 時点での情報になり、今後大きく変動する可能性があります。 User-Agent が Google Chrome で凍結・非推奨になる という話題が年明け以降一部の界隈で盛り上がっています。 また、Chrome に限らず、 Firefox, Safari など Chromium 以外のベンダでも User-Agent（以下 UA） の凍結・非推奨が予想されており、近い将来 UA を使わずにデバイスの判定をする世界線は避けて通れなくなりそうです。 UA の代替となる指標 Google は UA を凍結・非推奨とする代わりに User-Agent Client Hints (以下 UA-CH) を新たなデバイス等の判定の指標として提案しています。 ※ UA-CH は W3C の Draft Community なので、今後仕様が変わる可能性があります。 例えば C

こんにちは、Webディレクターのともぞうです。 今回はWebサイトのリリース前後に最低限おこなっている確認作業を一部ご紹介します。 LIGでは、リリース後でないと確認できないことや、案外忘れがちなものを「最低限おこなうものリスト」として管理しています。あくまで忘れがちなものたちの確認のため、クロスブラウザテストや機能テストといったスケジュール内に組み込まれるものは対象外になっています。 リリース前の確認作業 リリース前には、以下のことを実施しています。 最低限おこなうものリスト（リリース前） faviconは正しく表示されているか metaタグは記述されているか（title,description） ogpタグは記述されているか（type,title,description,url,site_name,image） headタグ内に不要なタグが出力されていないか canonicalの設定は

はじめに こんにちは、SRE部MLOpsチームの児玉（@dama_yu）です。この記事では、ZOZOTOWNのおすすめ順を支える検索パーソナライズ基盤について紹介します。 ZOZOTOWNのおすすめ順について ZOZOTOWNにおいて検索機能は非常に重要な機能の1つで、売上のうち多くの割合が検索経由です。ZOZOTOWNでは、検索結果の並び順として、おすすめ順、人気順、新着順など複数あり、現在おすすめ順がデフォルトになっています。 元々は人気順がデフォルトだったのですが、ユーザの嗜好に合わない商品まで検索結果に並んでしまうという課題がありました。そこで、この課題へのアプローチとしてユーザの行動履歴や属性を元にパーソナライズされた順番で検索結果を並べた、おすすめ順を新規追加することになりました。 この施策の結果、検索結果経由の商品CTRが向上しました。ユーザが求めている商品が並ぶようになった

WebP（ウェッピー）という画像形式をご存知でしょうか？　長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2022年11月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG

皆さんこんにちは。 ギャプライズ鎌田(@kamatec)と申します。 先日以下のようなツイートをした所ちょっとだけ盛り上がりました。 CV率の話しをするとき、この図を使うことがある CVする人の中にも2種類いて、サイト内の施策で動かせるのは②だということ。 CV率をあげるときには「動く人」を増やすよりも「動きたくても動けなかった人」を動けるようにするほうが早いよ って話しをしたりします pic.twitter.com/XaoebSFA39 — 鎌田@コンバージョンの魔術師 (@kamatec) June 2, 2020 そこで今日はこの「コンバージョン率(以下CV率)」というものについて深く掘り下げてみようと思います。 ではまず最初に一つ質問です。 皆さんのWebサイトにおけるCV率は何％でしょうか？ おそらくですがメディアなど閲覧自体が目的のサイトを除き、何かしらCVポイントがあるサイト

オウンドメディアの運用では、目的設定と同時にそれが達成できたかを評価することが重要です。評価するための重要なツールの一つがアクセス解析です。ここでは、Google が無料で提供するアクセス解析ツールである、Google アナリティクス（Google Analytics、GA）を中心に、アクセス解析のやり方を説明します。 オウンドメディアの数字を計測する意味 オウンドメディアの運用は、ユーザーに価値のある情報を提供して、ユーザーの関心を高め、自社やブランドを認知してもらう、あるいは正しい知識の普及を行う施策です。施策を評価するためには、発信した情報が届けたい相手にどれくらい届いているのかをアクセス解析ツールを使って検証します。 さらに検証結果を元に次の施策を検討します。このままのやり方で進めるべきなのか、それとも切り口を変えていくべきなのか、必ずしもアクセス解析ツールだけでは決められない場合

[レベル: 中級] iOS 版 Safari が WebP をサポートしました。 しかしながら、MacOS 版 Safari は未サポートのままです。 iOS 版 Safari が WebP を表示 こちらは、JPEG 画像です。 みんな見えているはずです。 こちらは、WebP 画像です。 ブラウザによっては見えていないかもしれません。 iOS 版 Safari 14 が WebP をサポートしたので、どちらの画像も表示できます。 Safari が WebP に対応したのはとても嬉しいニュースです。 WebP 利用の最も大きな懸念がなくなりました。 ところが…… MacOS 版 Safari はサポートせず MacOS 版（デスクトップ版）の Safari は バージョン 14 でも WebP に対応していないままです。 表示できていません。 インスペクタを見ると WebP には読み込みエ

2020 年に入り、メルカリ US ではプロジェクトの担当 PDM を検討する際に「UIUX に大きな変更が入るならこの人」「関係者マネジメントが重要ならあの人」「テクニカルな知識が要求されるならこの人」といった具合に、プロダクトマネージャーそれぞれの特性・得意分野を考慮したうえで決定する傾向が以前にも増して強くなりました。 その結果、自分（フリッツ と申します、こんにちは）の場合は UIUX 改善を中心としたプロジェクトが相当に増え、並行して 3-4 名の UIUX デザイナーとそれぞれのプロジェクトについて議論することが毎日の風景となりました（めっちゃくちゃ楽しい）。 こうした状況下にあって、あらためて デザイナーと UIUX について議論・もしくはフィードバックをする際に気をつけている・気をつけたいことについて前後編にわけて振り返りをしたので共有してみたいと思います： ・前編（この記

この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら

無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする　＞＞ 変化し続けるユーザーニーズに対し最大限対応していくことは、あらゆるWebサイトにとっての命題と言えます。SEOに直接関係があるにせよ、ないにせよ、ユーザーを満足させることができなければ上位表示も難しいでしょう。 ユーザーニーズの把握は非常に難しいトピックですが、ユーザー行動を把握することでそのヒントを得られるかもしれません。 今回は、Backlinkoによる、ユーザーの検索行動を調査した記事を紹介いたします。 最新のGoogleの検索結果に対し、人々がどのように関わっているかをより良く理解するため、我々は1,801のユーザー行動のセッションを分析した。 特に我々が調査した項目は以下のとおりだ。

画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで

社内に古いInternet Explorer（IE）専用Webページ／アプリが残っていたり、自治体などのIEしか対応していないWebサイトへアクセスが必要であったりするせいで、いまだにIEの利用が強いられている。しかも、IEでは利用できないネットサービスが増えていて、他のWebブラウザと併用せざるを得ず、面倒だ……。 さらに、2022年6月にはブラウザとしてのIEのサポートが終了し、IEが起動できなくなるとのこと。このままでは、IE専用のWebページ／アプリを使い続けられなくなる。かといって、IE以外のブラウザでも利用できるようにサーバ側のシステムを改修するのは到底間に合わない……。 このような場合、Chromiumベースの「Microsoft Edge（以下、Edge）」への移行を検討してみるとよい。「IEモード」という、EdgeのタブでIE専用のWebページ／アプリをシームレスに表示で

マイクロコピーをご存知だろうか？ Webサイトの中でも細かい部分のコピーライティングのことだが、Webマーケティングの経験の浅い人は特に軽視しがちだ。 ユーザー体験をより素晴らしいものにするためにマイクロコピーは重要な役割を持つ。このマイクロコピーを重視することで、サイトのCVを向上させることもできる。さらに、大切なのはブランドやサイト全体に与える印象を左右するということだ。細部にまでこだわりが見えるからこそブランドを色濃く感じ取ることができる。「神は細部に宿る」というが、細かい部分もとても大切なのだ。 そこで今回は、特に効果的なマイクロコピーの変更方法についてお話ししよう。サイト制作やライティングに関わる方はぜひ参考にしてほしい。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア8ヶ月で月間140万PVを実現し

ブログ HubSpot日本語ブログでは、世界中のHubSpotの知見を活かし、日本のビジネスパーソンの課題解決に繋がるような情報を提供しています。

今すぐランディングページを作りたいと思っても、実際に作った経験がないと作り方から学ぶ必要があります。 かといって一から学び始めるには時間がかかりすぎる……とお悩みの方もいるのではないでしょうか。 今日から使えるランディングページ構成の王道パターン3選 入門編として、効率的にLPを制作できるツールの紹介とともに、LPの作り方を解説していきます。 特に注目度の高いLP制作ツール15選については、表形式で料金や機能の違いが比較できる一覧表をご用意していますので、以下よりぜひダウンロードしてご活用ください。 LP制作ツールおすすめ15選比較表 この記事に書いてあることを実践するだけでランディングページが作れるので、ランディングページの作成経験がない初心者の方は必見です！（参考：ランディングページ（LP）とは？10分でわかるLPの目的・メリット・作り方） なお、ツールの重要度を客観化するために「LP

どうも、まさとらん（@0310lan）です！ 今回は、Webサイトの構造を可視化して直感的に理解しやすい「ビジュアルサイトマップ」を作成できるWebサービスをご紹介します。 ブラウザからGUIベースのエディタにアクセスするだけで誰でも利用可能で、すべてマウス操作でできるので初心者でも簡単に使いこなせます。ブロックを追加していくだけでサイトマップに簡易的なワイヤーフレームが挿入できる点がとても便利です。 また、既存のWebサイトから素早くサイトマップに変換する方法も合わせて解説しているので、ご興味のある方はぜひ参考にしてみてください！ 【 Octopus.do 】 ■「Octopus.do」の使い方 それでは、「Octopus.do」をどのように使うのか詳しく見ていきましょう！ トップページにアクセスしたら【Create sitemap】ボタンをクリックします。 すると「サイトマップエディタ