Webサービスをローンチする前に見ておきたいチェックリスト

Webサービスをローンチする上で事前にチェックすべきこと、ローンチ後にチェックしておきたいことをまとめています。ユーザーに分かりやすいデザインできちんとアプリやWebサイトが動くように知っておきたい内容でしょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

本稿は、Studio by UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

また本記事は、Webデザイナー、バックエンドエンジニアのBen Gremillion氏によって投稿されました。

設計プロセスの目的が「UXの問題を解決すること」であるとしたら、ローンチ前のルーチンの目的は「その問題を防ぐこと」です。

率直に言うと、デジタル製品は複雑です。最も単純なアプリやシングルページのWebサイトでさえ、何千行ものコードから構成されています。「セミコロンの置き方を1つ間違えただけで、プロジェクト全体に悪影響を及ぼす。」という話をエンジニアから聞くことがあるかもしれません。

技術的なテストは、ユーザーテストと同様に重要です。この記事では、ローンチ前、ローンチ直後、ローンチ後に確認するべきチェックリストを提供します。

ローンチ1週間前

CSSと画像なしでユーザビリティテストを行う

CSSと画像を外すと、データ構造の問題が明らかになります。スクリーンリーダー、サーチエンジン、ボットからサイトがどのように見えるかが分かります。

たとえ美しくないとしても、ユーザビリティに優れているなら、良いページと評価できます。

著作権に関するテキストを、フッターまたは「概要（About Us）」のページに追加する

著作権法は「著作物の創作者である著作者に著作権や著作者人格権という権利を付与することにより、その利益を保護している。」と規定しています。

著作権に関するテキストをサイトに明記するか、クリエイティブ・コモンズ・ライセンスを利用しましょう。

すべてのコンテンツについてスペルチェックを実行する

コンテンツをコピー＆ペーストするか、URLを直接入力することでスペルチェックができるオンラインサービスもあります。

英語のテキストでない場合には、多言語に対応したスペルチェッカーを利用できます。

404ページを役立つデザインにする

404ページをユーザーに役立つものにするには、無効なページにアクセスしていることを示し、他のページへのリンクを示します。

さらに検索ツールを設置すれば、ユーザーは探しているページを検索できるようになり、サイト所有者にユーザーの問題を自動通知する機能を追加することもできます。

問い合わせページの入力フォームからメッセージ送信のテストを行う

問い合わせページの入力フォームが正しく機能し、ドメインがブラックリストと判定されないことを確認します。

トップページが、サイトの目的またはユーザーのニーズを満たす内容を示しているか確認する

サイトの目的はその開発者には明らかです。しかし、初めてサイトに訪れるユーザーにとっても明らかだと仮定すべきではありません。

商標権を侵害していないことを確認する

あなたのアイデアが他の誰かがすでに思いついたもので、それが商標権を侵害している場合には、法的責任を負うことがあります。

米国特許商標庁またはクリエイティブ・コモンズの提供する検索ツールを利用すれば、あなたのアイデア、名前、コンテンツがすでに他の誰かの権利に属していないかを確認できます。

ファビコンを設置する

ファビコンとは16×16ピクセル以上の画像で、ドメインと関連して表示されるアイコンです。

「.ico」または「.png」の拡張子で保存すると、ブラウザのアドレスバーのURLの左に表示されます。

[PR] プログラミングで挫折しない学習方法を動画で公開中

ローンチ48時間前

SEO対策として、xxx.comからwww.xxx.comへリダイレクトする（またはその逆）

たとえばxxxにサイト名が入るとして、xxx.com、www.xxx.comなど複数のURLからサイトにアクセスできる（アクティブである）とき、GoogleやBingなどの検索エンジンによって重複するコンテンツとみなされる可能性があります。

ドメインに関連付けられた電子メールアドレスにテストメッセージを送信する

電子メールは諸刃の剣です。メッセージが速やかに送信されることを確認しましょう。

テストメッセージに返信する

サイトの電子メールは、送信できるだけではなく受信できることも確認しましょう。

robots.txtファイルを作成する

サイトの所有者はrobots.txtファイルによって、サイトのCMS、cgi-bin、メンバー専用のセクションなど特定のディレクトリが検索結果に表示されないよう設定できます。

すべてのリンクをチェックする

壊れたリンク、古いリンク、スペル間違いのあるリンクは、自動でまたは手作業でチェックできます。

HTMLのコードを検証する

さまざまなブラウザ上で表示の崩れの原因になる、HTMLのコードのエラーを検証します。

意味不明なテキストとテストデータをすべて検索して削除する

5つのa（aaaaa）などのキーワードをプレースホルダーに入力して、意味不明なテキストを検索します。

サイト立ち上げの準備が整ったとき、このようなキーワードで検索しておくと削除すべきものが見つかります。

すべてのページに適切なHTMLのタイトル（title）とメタ情報を設定する

ローンチ後には、Googleウェブマスターツールが役立ちます。

alt属性をすべての画像に設定する

alt属性は、検索エンジンに画像が何を表わしているかを伝えたり、スクリーンリーダーに読み上げる代替テキストを渡したり、他のデザイナーに画像の目的を伝えることができます。

CMSのパスワードは推測されにくいものにする

句読点、数字、多くの文字の入ったパスワードは解読されにくいものになります。パスワードが簡単に解読されるものであるとしたら、使用する意味がありません。

XMLサイトマップを検証する

XMLサイトマップは正しくフォーマットする必要があります。エラーが含まれる場合、検索エンジンに全く認識されない可能性があります。

XMLサイトマップを作成する

XMLはテキストエディタで頑張って作成することもできますが、コンピュータで自動作成した方が効率的です。

ローンチ直後

ウェブマスターツールに登録する

ウェブマスターツールは、検索エンジンがどのようにインデックスを行っているかを知るのに役立ちます。また、訪問者はどのような検索キーワードによってあなたのサイトへアクセスしているのかについて情報を得られます。

アクセス解析（アナリティクス）ツールを利用する

トラッキングコードをページに設置すれば、アクセス解析ツールによって、誰がいつどのようにあなたのサイトに訪問したかを追跡できます。

これらの解析データは、誰がサイトに訪問しているのか、彼らは何を探していているのか、トラフィックの改善状況などを分析するのに役立ちます。

検索エンジンにサイトを登録する

検索エンジンにサイトのインデックスが必要であると通知するには、URLを検索エンジンに送信します。

監視（モニタリング）サービスに登録する

ホストコンピュータの問題が心配な場合には、Are My Sites Upなどのサービスに申し込み、問題が発生したときに通知を受信できるようにしておきましょう。

XMLサイトマップを検索エンジンに登録する

検索エンジンがサイトのページをインデックスするのを促進するには、XMLサイトマップによってサイトの構造を検索エンジンに伝えましょう。

ローンチ後、3～6か月

ページの連絡先情報に変更がないことをチェックする

「概要（About Us）」や「スタッフ」のページで表示している人物に変更はありませんか？電話番号、FAX番号、郵便番号などにも変更はありませんか？

CMSのパスワードを変更する

時々パスワードを変更することは、アカウントへの不正なアクセスを防ぐためには良い方法です。パスワードがすでに誰かに盗まれている場合にも、ログインを阻止できます。

すべてをバックアップする

もし今まで、サイトやサービスのバックアップを定期的なメンテナンスのルーチンとしていなかったとしても、今後はバックアップを実行しましょう。

入力フォームから送信されたスパムメールをチェックする

スパムを含むすべてのユーザーのニーズに応える必要はありません。コンテンツが適切であるかも確認しましょう。

サイトの機能の重要度をチェックする

サイトの機能の中でユーザーに最も利用されているものは何ですか？外してもいい機能があれば外しましょう。

ユーザーが利用しているブラウザをチェックする

あなたのサイトやWebアプリケーションのユーザーが、最もよく利用しているブラウザを分析しましょう。

予想に反する解析結果を得られるかもしれません。

インバウンドリンクをチェックする

インバウンドリンク（バックリンク、被リンク）は、あなたのサイトの人気度を示す指標になります。アクセス解析ツールを利用して、どのリンク（誰）がサイトに多くのトラフィックをもたらしているのかを分析しましょう。

無効なリンクをチェックする

サイトの規模が大きくなるにつれてコンテンツを移動、削除することがあります。しかし、古いコンテンツへのリンクは、こうしたステータスの変更を自動的に反映しません。

そのため、可能なときはいつでも、リンクの削除や移動を行うことがベストです。

おわりに

今回ご紹介したものは網羅的なチェックリストではありませんが、自信を持ってローンチを進めるのに役立つと思います。

ぜひあなたのチームのワークフローの基本として活用して、ローンチ成功を祝うパーティを開催してください。

また、TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。自分のアイデアを形にしたい、エンジニアを目指したい方はぜひご覧ください。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

「CodePrep（コードプレップ）」をやってみた！無料のプログラミングサービス

人材事業などを展開する株式会社ギブリーが運営する、無料のプログラミング学習サービス「CodePrep（コードプレップ）」をご存知でしょうか？アプリを作れ...

プログラミング

たった3分で誰でもポートフォリオサイトが作れる「Somebody.io」

誰でも簡単にポートフォリオサイトを公開できるサービスが出ました。「Somebody」というサービス名で、名前からも分かるように誰でも自分のサイトを持つこ...

プログラミング

【連載企画】プログラミング未経験の文系学生でもエンジニアになれる！

本記事は、キャリアに特化したQ&Aサービス「JobQ」との連載企画になります。毎週月曜日に就職や転職など、あるテーマに沿って紹介していくシリーズです。前...

プログラミング

プログラミング学習の超定番！「ドットインストール」をやってみた

TechAcademyマガジンでは、過去にプログラミングの独学に使えるオンライン学習サービスの実践レポートを公開してきました。ドットインストールはその定...

プログラミング

基礎を固める！プログラミング入門におすすめの書籍10冊【超初心者向け】

プログラミング関連の書籍は数多くありますが、初心者が勉強をはじめるときに、どこから読めばいいのかわからないということはないでしょうか。そこで今回は、プロ...

プログラミング

HTMLファイル作成にも役立つ！サクラエディタの使い方【初心者向け】現役エンジニアが解説

プログラミングに使えるテキストエディタはいくつかありますが、今回はそのうちのサクラエディタの使い方を初心者向けに解説します。サクラエディタはとても高機能...

プログラミング

あわせてよく読まれている記事

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。目次ローンチ1週間前ローンチ48時間前ローンチ直後ローンチ後、3～6か月おわりに Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！GitHubってなんですか〜？田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。大石ゆかりもう少し詳しく教えてもらえますか〜？ GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。また、GitHubを使ってソースコードの管理を行っている企業も多数あります。 GitHubが人気な理由と類似サービスとの違い GitHub は、Git を使用したソフトウェア開発とバージョン管理のための人気のあるプラットフォームおよびクラウドベースのサービスです。コードを効率的に保存、管理、共同作業するために必要なツールを開発者に提供します。ユーザーフレンドリーなインターフェースと豊富な機能を備えた GitHub は、世界中の開発者にとって不可欠なツールとなっています。 GitHub はテクノロジー業界では有名な名前かもしれませんが、ライブカジノへのユニークなアプローチを持つオンラインカジノ市場も多くの日本人プレイヤーに人気を集めています。その一例が、プレイヤーに没入型でインタラクティブなゲーム体験を提供する日本の市場志向のオンラインカジノ、ライブカジノハウスです。オンラインカジノブランドレビュー関連ページで調べる通り、ライブカジノハウスは、日本の文化と技術の要素を取り入れることで、ライブカジノの伝統的なコンセプトを次のレベルに引き上げます。伝統的な日本の衣装を着たライブディーラーから高度なバーチャルリアリティテクノロジーまで、ライブカジノハウスはプレイヤーにユニークなゲーム体験を提供します。イノベーションと顧客満足に重点を置いているライブカジノハウスは、日本市場で大きな支持を得ています。その成功は、日本のオンラインカジノ業界の可能性を浮き彫りにし、多様な興味や好みに応えるために継続的に進化している様子を示しています。より多くの日本のプレーヤーがエンターテインメントのニーズのためにオンラインカジノに目を向けるにつれて, ライブカジノハウスや他の日本の市場志向のオンラインカジノが、伝統的なカジノ体験の限界を押し広げ続ける様子を見るのはエキサイティングです。 GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。理由1：無料のプライベートリポジトリソースコードを管理する単位をリポジトリと呼びます。リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。理由2：オープンソースコミュニティに育まれたSNS機能オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度）開発メンバーの知見を共有する機能（Wiki、GitHub Pages）ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動）単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。このような環境の中から、以下のような先進的な機能が次々と誕生しています。世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。 GitHubのアカウント登録それではさっそくGitHubに登録してみましょう。まずは、GitHubのトップページにアクセスします。ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。クイズになっており渦巻状の銀河の絵を数回選択します。なお、このクイズは定期的に変わるようです。決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。ボタンを押して次に進みましょう。このような画面になります。登録したメールアドレスに認証のメールが届きます。メールの内容に従いユーザー認証を行ってください。以上でGitHubのアカウント登録は完了です。大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？田島悠介その前にいくつか知っておいたほうがいいことがあるから、教えておくね。大石ゆかりはい、お願いします♪ [PR] プログラミングで挫折しない学習方法を動画で公開中GitHubを使う上で知っておきたい事前知識早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。事前知識1：ローカルリポジトリとリモートリポジトリ事前知識2：コミットとプッシュとは事前知識3：ブランチ（branch）とは事前知識4：インデックス（index）とは事前知識1：ローカルリポジトリとリモートリポジトリリポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。事前知識2：コミットとプッシュとは最低限この2つは知っておきましょう。コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存することプッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作事前知識3：ブランチ（branch）とはソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。事前知識4：インデックス（index）とはリポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。忘れないようにしましょう。 GitHubの使い方それでは使い方を覚えていきましょう。基本的なGitの作業は下記のような流れとなるので、GitHubを使って順番に紹介します。なお、「1」の作成は初回のみ行い、「2」から「5」を繰り返します。基本的に小さい作業の単位でコミットを行い、ある程度作業がひと段落した時にプッシュをするのが一般的です。コミットの作業がわかりやすいように、コミットメッセージを残しておくと、ログを追っていく時に役立ちますので覚えておきましょう。 Githubでリポジトリを作成（git init）ファイルの作成、編集を行うファイルの作成/変更/削除をgitのインデックスに追加する（git add）変更結果をローカルリポジトリにコミットする（git commit）ローカルリポジトリをプッシュしてリモートリポジトリへ反映させる（git push） GitHubでリポジトリを作成（git init）まずはリポジトリを作成します。 GitHubにログインした状態で以下にアクセスします。 https://github.com/new 次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。また、リポジトリの種類を「Public」か「Private」を選択します。ソースコードを公開したくない場合は「Private」を選択すると良いでしょう。最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。 .gitignoreやlicenseについては後で追加や変更ができるので、Noneを選択します。必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。ファイルの作成、編集を行うはじめに、ローカルのPC上にローカルリポジトリを作成します。今回は「awesome」というディレクトリを作成することにします。以下の操作はWindowsであればPowerShell、Macであればターミナルで行います。コマンドは1行ずつ、最後にEnterキーを押して入力しましょう。 mkdir awesome cd awesome git init 「mkdir」は新しくディレクトリを作成するコマンドで、「cd」はディレクトリを移動するコマンドです。 awesomeというディレクトリを作成し、そのディレクトリに移動してから作業が始まります。そして、この「git init」コマンドはGitリポジトリを新たに作成するコマンドです。バージョン管理を行っていない既存のプロジェクトをGitリポジトリに変換する場合や、空の新規リポジトリを作成して初期化する場合に使用します。 git initコマンドを実行するとカレントディレクトリをGitリポジトリに変換します。次に、テキストエディタなどで以下のHTMLファイルを作り、先ほどのawesomeフォルダに「hello.html」という名前で保存しましょう。現在の状態を確認しましょう。 git status 結果は以下のようになります。 hello.htmlが「Untracked files」、つまりインデックスに登録されていないファイルとして表示されています。 On branch master Untracked files: (use "git add <file>..." to include in what will be committed) hello.html ファイルの作成/変更/削除をgitのインデックスに追加する（git

Git

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。目次ローンチ1週間前ローンチ48時間前ローンチ直後ローンチ後、3～6か月おわりにそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。田島悠介どうして文字を探したいのかな？何かの文字で区切っているから？それとも文字の位置を探したい？大石ゆかりええと、文字を探す方法がそんなにいろいろあるんですか？田島悠介そうなんだ。PHPではいろんな文字列の検索方法があるよ。まずは、区切り文字で検索する方法から見てみよう！区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。区切る文字列を境にして文字列を取得したいときに使えます。構文検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。第2引数は検索する文字列です。検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。 strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。ソースコードフルネーム「山田太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。表示結果解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。検索対象の文字列

PHP

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、UXデザイナーのNick Babich氏によって投稿されました。縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。ロングスクロールには次のような利点があります。ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。どのようなときにロングスクロールを利用するかロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいときどのようにロングスクロールを実装するか次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促すページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます) 2. ナビゲーションオプションを常に保持するロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。 3.「戻る」ボタンが適切に動作することを確認するロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。 4. スクロール位置に基づいてURLを変更するロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。 5. ページ内ジャンプ機能を使用するロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。 6. コンテンツを読み込むときに、視覚的なフィードバックを表示するヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。 7. スクロールハイジャックを行わないスクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。 8. ページの読み込み時間を最適化するロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。 9. リソース消費を考慮するロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。 10. ユーザーの行動を考えるロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。 [PR] プログラミングで挫折しない学習方法を動画で公開中ECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。ナビゲーションとフィルタをスティッキーにフィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。それぞれのアイテムをブックマークできるようにする後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。条件に一致したアイテムの数を表示する利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。フッターにアクセスできるようにするユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。ロングスクロールと視差効果インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。パララックススクロールをどんなときに使うか視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。パララックススクロールは、ガイド付きの物語形式で効果を発揮します。ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。パララックススクロールを使うべきではないケース多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。パララックスとページパフォーマンス視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。一度にたくさんのものをアニメートしないようにしましょう。パララックスとアクセシビリティ前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。最後にロングスクロールによって、没入感のあるブラウジングを生み出すことができます。ユーザーが直感的なUIが好きであれば、スクロールの長さは気にならないでしょう。閲覧者の目的が達成され、かつ便利だと感じさせるものにしてください。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

PR活動スケジュール設計のコツ：生成AIを活用した効果的なタイムライン作成

PR活動のタイムライン設計は、新製品のローンチを成功に導くための重要な要素です。適切なスケジュールを組むことで、限られたリソースを最大限に活用し、効果的なPR戦略を展開することができます。本記事では、環境技術を活用した新しいエネルギーソリューションを提供するスタートアップ企業のPR活動タイムライン設計について解説します。生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録 PR活動タイムライン設計の重要性 PR活動のタイムライン設計は、新製品のローンチを成功させるための重要な要素です。適切なスケジュールを組むことで、以下のようなメリットがあります。限られたリソースを最大限に活用できる効果的なPR戦略を展開できるターゲット市場での認知度を効率的に高められる競合他社に先駆けて市場に製品を導入できる生成AIを活用したPR活動タイムラインの設計生成AIを活用することで、PR活動のタイムライン設計を効率的に行うことができます。以下では、ChatGPTを使用して、環境技術を活用した新しいエネルギーソリューションを提供するスタートアップ企業のPR活動タイムラインを設計する方法を紹介します。 1. プロンプトの作成まず、PR活動のタイムライン設計に必要な情報をプロンプトとしてまとめます。以下は、その例です。 #命令以下の要件を踏まえて、広報部門のPR活動のためのタイムラインを設定してください。このタイムラインには、マイルストーンやキャンペーン期間、評価時期を明確にするものとする。 #役割あなたはPRエキスパートとして広報部門をサポートします。 #目的新製品のローンチに伴うPR活動を最大限に活かし、ターゲットとなる市場内でのブランド認知度を高める。 #背景と課題・企業は環境技術を活用した新しいエネルギーソリューションを提供するスタートアップ企業である。・初の主力製品としての新製品ローンチを6ヶ月後に控えている。・競合他社に先駆けて市場に導入することが狙いのため、PR活動を強化し、ターゲット市場の関心を最大限に引きつけたい。・しかし、予算制約のため、効果的なPR活動を限られたリソースで行う必要がある。 #新製品情報・製品名：EcoPowerX ・特徴：　　・再生可能エネルギーを活用し、エネルギーコストを大幅に削減。　　・家庭用から産業用まで幅広いラインナップ。　　・導入後のアフターサポートも充実。 #PR活動予算・総額500万円 #ターゲット・エネルギーコスト削減を求める中小企業・新しいエネルギーソリューションに興味を持つ一般消費者・再生可能エネルギーに関心を持つエコ志向の強い人々 #条件・新製品の公式ローンチは6ヶ月後。・3ヶ月後には事前告知のキャンペーンを開始したい。・PR活動は公式ローンチの1ヶ月前から強化したい。・PR活動の途中経過は毎月評価し、必要に応じて戦略を修正したい。 #タイムライン設定の要請 1. 事前告知のキャンペーン開始までの間に行うPR活動のスケジュールを設定。 2. 事前告知キャンペーン期間中のPR活動の詳細なスケジュールを設定。 3. 公式ローンチ1ヶ月前からの強化PR活動のスケジュールを設定。 4. 毎月の評価時期とその基準を設定。 2. ChatGPTによるタイムライン設計作成したプロンプトをChatGPTに入力すると、以下のようなPR活動のタイムラインが生成されます。以下は、広報部門のPR活動のタイムラインの提案です。このタイムラインは、新製品EcoPowerXのローンチに向けたPR活動を最大限に活かし、ターゲット市場内でのブランド認知度を高めることを目的としています。予算制約を考慮し、効果的なPR活動を実施するためのスケジュールを設定しています。 *タイムライン設定:* **1. 事前告知のキャンペーン開始までのPR活動スケジュール:** 1-2ヶ月目: マーケットリサーチと競合分析を実施。 2-3ヶ月目: ターゲット市場の特定とセグメンテーション。 3ヶ月目: PR戦略の策定と予算の確定。 4-5ヶ月目: プレスリリースの起稿とメディアリストの作成。 5ヶ月目: キャンペーンコンセプトとメッセージの確定。 6ヶ月目: 事前告知のキャンペーン開始。 **2. 事前告知キャンペーン期間中のPR活動スケジュール:** 6-7ヶ月目: プレスリリースの配信とメディアへのコンタクト開始。 7-8ヶ月目: ソーシャルメディアキャンペーンの立ち上げ。 8ヶ月目: インフルエンサーマーケティングの開始。 9-10ヶ月目: マーケティングコンテンツの制作とブログ投稿。 10-11ヶ月目: ウェビナーの計画と実施。 11ヶ月目: キャンペーンの評価と改善。 **3. 公式ローンチ1ヶ月前からの強化PR活動スケジュール:** 12ヶ月目: メディアリストの更新と新しいプレスリリースの起稿。 13ヶ月目: メディアへの積極的なコンタクトとインタビューのセッティング。 14-15ヶ月目: ソーシャルメディアでのティザーキャンペーンとカウントダウン。 16ヶ月目: 公式ローンチイベントのプレパレーション。 17ヶ月目: メディア向けのプレローンチイベントの開催。 **4. 毎月の評価時期とその基準:** 7ヶ月目: 事前告知キャンペーンの反応とメディア露出の評価。 11ヶ月目: 事前告知キャンペーンの成果と改善ポイントの評価。 15ヶ月目: 公式ローンチ前のプレパレーションの進捗と成功基準の評価。 17ヶ月目: メディア向けプレローンチイベントの成功評価。 18ヶ月目: 公式ローンチイベントの成功評価とリリース後のメディア報道のモニタリング。 19-20ヶ月目: ローンチ後のPRキャンペーンの効果と改善ポイントの評価。このタイムラインは、事前告知、公式ローンチ、およびその後のPR活動を効果的に管理し、リソースを最適に活用するのに役立つでしょう。各評価時期でのデータ収集と分析は、戦略の修正に役立ちます。 PR活動の成功に向けて計画を調整し、ターゲット市場でのブランド認知度を高める手助けになるでしょう。 3. タイムラインの活用生成されたタイムラインを基に、実際のPR活動を計画・実行していきます。各段階で以下のポイントに注意しましょう。事前告知キャンペーン開始までの準備期間を十分に確保する事前告知キャンペーン期間中は、多様なチャネルを活用して認知度を高める公式ローンチ前の1ヶ月間は、集中的にPR活動を展開する定期的な評価と改善を行い、効果的なPR戦略を維持する [PR] プログラミングで挫折しない学習方法を動画で公開中まとめ PR活動のタイムライン設計は、新製品のローンチを成功に導くための重要な要素です。生成AIを活用することで、効率的かつ効果的なタイムラインを作成することができます。ただし、生成AIはあくまでもツールであり、最終的な判断と調整は人間が行う必要があります。生成されたタイムラインを基に、自社の状況や市場環境に合わせて適切に調整することが重要です。なお、無料版のChatGPTでも十分なタイムライン設計が可能ですが、有料版を利用することで、より高速かつ高度な提案を得ることができます。プロジェクトの規模や重要度に応じて、適切なツールを選択しましょう。生成AIの実務活用で悩んでいる方へ ChatGPTなどの生成AIを業務に取り入れてみたものの、思うような結果が得られない。あるいは、ビジネスでの活用に限界を感じている。そんな方々にお勧めしたいのが、『テックアカデミーGAIナレッジベース』です。このコミュニティは、生成AIの実務活用に特化した知識と経験の宝庫です。以下のような特徴があります。 500件以上の実務で即活用できるプロンプト集プロのエンジニアに生成AIについて直接質問可能同じ関心を持つビジネスパーソンとの交流の場通常、このレベルの生成AIコミュニティには10万円程度の費用がかかります。しかし、『テックアカデミーGAIナレッジベース』は完全無料でご利用いただけます。生成AIの可能性を最大限に引き出し、ビジネスの競争力を高めたい方にとって、このチャンスを逃す手はありません。今すぐ登録して、生成AIの実務活用スキルを飛躍的に向上させましょう。今すぐ無料登録

生成AI・ChatGPT

【チケット売買アプリを事例に！】Googleへのアプリインデックスは努力に値するのか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Vivid Seats（チケット売買サービス）のSEOディレクターであるBryson Meunier氏によって投稿されました。 Googleの検索結果にアプリが表示されるように、App indexingを実装することにリソースを投資するのは、アプリのトラフィックの観点から効果的でしょうか。この記事では、私の会社での活用事例を通して「App indexingを実装することは努力に値するのか」についてその答えを考えます。結果は驚くべきものです。近年、App indexingはSEOにおいて最もホットな話題の1つですが、それにはいくつかの理由があります。 Googleは約2年以上も前から、アプリをインデックスするこの技術をすべての開発者のために公開しています。しかし、実際にApp indexingを実装しているアプリは全体の約30％であり、Webサイトが追加的なトラフィックをアプリにもたらすことができる潜在的な可能性は大きいとしている調査もあります。さらにGoogleは、WebサイトがApp Indexingを利用していることと、アプリがApp IndexingのAPIを実装していることついて、検索順位を上げる要因として考慮するとしています。そのため、App IndexingをWebサイトに実装することは、検索のトラフィックを増やすのに効果的だと思われます。しかし、私の会社で実践してみたところ、効果はありませんでした。 App Indexingを実装したとき、たしかにGoogle検索経由のアプリのトラフックは増加しましたが、Web検索からのトラフィックと比べると微々たるもので、ほとんど努力に値しませんでした。私の会社における活用例と、それが全体のトラフィックへもたらした影響について、詳細をまとめています。目次 App Indexingとは実装した背景実際に行った解決策結果結論 App Indexingとは App Indexingとは、関連する検索結果と一緒に、アプリがGoogle 検索に表示されるようにする仕組みのことです。あなたのアプリで（1） HTTP URL をサポートし、（2）App Indexing SDK を追加すると、GoogleがそのWebページをクロールしてインデックス登録します。その結果、ユーザーは関連するキーワードで検索したときにその検索結果から、アプリをインストール、実行できるようになります。ユーザーがアプリをインストール済みの場合、関連する検索結果の中に、「アプリを実行する」ボタンが表示されます。検索者がアプリをインストールしていない場合には、関連する検索結果の中に、「インストール」ボタンが表示されます。理論的には、この仕組みは素晴らしいものです。ユーザーはWebサイトやアプリを好むかどうかにかかわらず、ソースが明らかで信頼できるコンテンツを見つけることができます。また、アプリの開発者やマーケティング担当者にとっても、アプリストア以外で、新規ユーザーに紹介することができるため、潜在的に利用者数やダウンロード数を増やす可能性を秘めているといえるのです。しかし、「理論的に」優れていることは、必ずしもApp Indexingが実際にトラフィックを増やす効果があることを意味しません。「どのように」また「なぜ」App Indexingを実装するかについて、私は多くの情報を調べましたが、App Indexingがトラフィックの観点からメリットがあるという実例は、見つけることができませんでした（Googleは他にもいくつかのメリットを強調していますが）。そのためマーケティング担当者、開発者が、アプリをインデックスさせることによってトラフィックを実際にどれだけ増やすことができるか把握できるように、自分の会社Vivid Seatsのアプリで試してみました。 Vivid Seatsの事例を考えるにあたり考慮すべき点があります。Bloombergによると、Vivid Seatsは、StubHubとTicketmasterに次いで世界第3位の、最大級のチケット市場です。そのため、元々トラフィックが多いのです。私たちのケースほど多くのトラフィックがないWebサイトや、同等の規模のWebサイトを持っていないアプリの場合は、私たちの結果とは異なるものになる可能性もあります。また、今回のVivid Seatsの事例は、Androidのみを対象としたものです。ベータ版のApp IndexingのiOSについては、まだGoogleのSearch Consoleを利用していないため、iOSアプリの場合にもインデックスや検索順位について同様の結果となるかは不明です。 [PR] プログラミングで挫折しない学習方法を動画で公開中実装した背景 Vivid Seatsは2015年9月から、Androidアプリがインデックスされています。当初、Webページと関連付けたアプリのURIをGoogleの検索結果に見つけるのは困難でした。 2016年2月に入っても、インデックスされたアプリのURIは約18で、そして「URI フォーマットはサポートされていません。」というエラー表示つきの35,000以上のページが見つかります。このエラー表示の原因は、当初のWebサイトのものとは異なるURIをアプリケーションに関連付けたため、Googleは関連付けたページを見つけることが難しかったということもあるかもしれません。実際に行った解決策最初に、この問題に関するGoogleのヘルプセクションの指示通り、関連付けるアプリのURIを示す「rel=”alternate”」を含むlink要素をWebページに追加しました。例えば、Vivid Seatsのアデル（Adele）のチケットページ――「http://www.vividseats.com/concerts/adele-tickets.html」――の場合には、次の「rel=”alternate”」を含むlink要素を追加することになりますが、これは関連付けるアプリのURIを示すものであり、モバイル端末のユーザーエージェントに動的に配信されるのです。 <link rel="alternate" href="android-app://com.vividseats.android/vividseats/performer/15313"> アデル（Adele）のチケットページのモバイルビュー（画像：Fawaad Ahmad）この問題の解決策としてGoogleはヘルプセクションでこのソリューションを推奨していたため、最初はこれで解決するだろうと思っていました。しかし、残念ながら実装して数週間が経過しても、GoogleによってインデックスされたアプリのURIの数は増えませんでした。また、Googleのクローラは私たちのWebサイトの多くのページは関連付けされたアプリビューをすでに持っていると判断したためか（その時点では実際にはそうではなかったのですが）、クロールエラーも続きました。そこで私たちは4月に、iOSアプリにおいてユニバーサルリンク、AndroidアプリにおいてHTTP URLをサポートしました。これによりエラーの数を、最多時の約40,000から、現在の約85まで減らすことができました。その結果、インデックスされたアプリのURIの数は、2月の時点における18から、現在の約35,000にまで増えました。これを実現するために、Firebase App Indexingのドキュメントで説明されている手順を実行しました。まずWebサイトの各タイプのリンクが、Androidアプリと対応する、ビューとURIを持っていることを確かめました。これを行うため、以前はアプリには含まれていなかったページタイプ用のテンプレートを設計し、Androidアプリでそれらを構築しました。各ページの固有の情報は、RESTful APIのエンドポイントから動的に提供されるため、テンプレートを設計してコード化するだけで済み、個々のページをコード化する必要はありません。私たちのWebサイトはSSLを実装していなかったため、GoogleのDigital Asset Linksによる要求に従い、Search ConsoleでWebサイトの所有権を確認しました。インテントフィルタをAndroidのマニフェストファイルに追加しました。 getIntent( )を呼び出し、onCreate( )のコードを実行して、アプリをPlayストアにデプロイしました。結果予想通り、インデックスされたアプリURIの数は、12月の18から、9月には約40,000まで指数関数的に増加しました。全体的に見ると、クリック数は919％増加しました。ブランド名を含まないクエリ（例：”Packersのチケット”など、Vivid Seatsというブランド名を含まないその他情報へのクエリ）からのクリック数は、5,500％増加しました。またこれも予想通りですが、インプレッション数の増加（具体的には、ブランド名を含まないクエリによる増加）の結果として、クリック率（CTR）は低下しました。アプリのトラフィック（Search Consoleで「クリック」と定義されています）の数は、インデックスされたアプリのURIが増加した結果、Webサイトのトラフィックに比例して指数関数的に増加しましたが、アプリのトラフィックには現在のところ効果は見られません。約40,000のアプリのURIが追加的にインデックスされても、現在、検索からのトラフィックの99.82％がWebページに送られており、アプリのURIに送られるのはわずか0.23％です。数があまりにも小さい理由はいくつか考えられます。今回の調査では実証はしていませんが、AndroidのモバイルトラフィックはiOSのモバイルトラフィックよりも、割合が低いという可能性もあります。また私たちの場合、インデックスされたアプリのページは、インデックスされたWebページよりも数が少ないです――実際に3倍以上の差があります。今回アプリのURIが多くインデックスされたことによって、トラフィックは指数関数的に増加したため、今後、最終的にGoogleがアプリのURIをすべてインデックスしたときには、トラフィックがもっと増える可能性もあるかもしれません。しかし最大の理由は、アプリのリスティング広告とWebのリスティング広告では、クリック率（CTR）が大幅に異なることだと思われます。ブランド名（Vivid Seats）は、Webにおけるクリック率では全体の約40％を占めていて、通常は平均掲載順位も1位なのですが、アプリにおけるクリック率では1％にも満たないのです。このことは、アプリのボタンはGoogle検索結果の中でナビゲーションとしては目立つものの、ほとんどの人はまだWebサイト上からクリックすることをより好むという傾向を示しています。最後の理由については、App Indexingはまだ新しいテクノロジーであり、検索者がまだレイアウトに慣れていないことが原因かもしれません。将来的にはこの傾向は逆転することも予想できます。しかし現状としては、アプリのページをインデックスさせようと考えているすべての人はこの点を理解しておくことが重要です。検索結果に表示される大きくてカラフルなボタンが、クリック率とトラフィックを増加させる効果があると考えるのは魅力的なことですが、私たちの調査からはこれを実証する結果は得られませんでした。実際の結果はその逆でした。次の表に示すように、アプリのコンテンツにおけるクリック率は、Webにおける場合の半分以下です。 Androidアプリのページは、クリック率は1.55％で平均掲載順位は5.1です。一方、Webコンテンツは、クリック率は4.67％で平均掲載順位は7.6です。アプリの一般的なクリック率（1.75%）は、Webのクリック率（4.69 ％）よりも低くなっていますが、その内訳としてナビゲーションの（ブランド名の）検索語句によるもの（1.13％）は、その他情報のコンテンツによるもの（6.16％）よりクリック率が低いことが判明しました。この内訳の関係はWebコンテンツのクリック率では、逆転しています。ブランド名によるクエリからのトラフィックは、アプリのトラフィックの約56％を占めていて、Webのトラフィックでは約40％を占めています。クエリの種類をさらに詳しく調べるために、2つのタイプに分類しました。第1に、ブランド名のクエリ（vivid seats）またはブランド名を含まないその他の情報のクエリ（Packerのチケット）を含むナビゲーションクエリ、第2に、検索者がWebサイト（www.vividseats.com）またはアプリ（vivid seatsのアプリをダウンロード）を探していることを示すクエリです。検索者がWebサイトまたはアプリを探していることを示すクエリでない場合には、そのクエリにブランド名が含まれているかどうかを確認し、Webサイトやアプリの嗜好について「特定されていません」と記録しました。アプリ名を特定した検索トラフィックは、アプリのトラフィックでは約4％であるのに対して、Webのトラフィックでは1％未満です。クエリの大多数は、検索者がアプリやWebサイトを特定しないで行った検索によるものであり、Webにおいて約99%、アプリにおいて約96%を占めています。検索からアプリへのトラフィックにおいては、今のところ効果が見られません。しかし、ほとんどの開発者がアプリのコンテンツをインデックスさせる本当の理由は、ダウンロードを促進することにあります。幸いなことに、Search Consoleを使用すると、検索からインストールされている状況を確認できます。これはSearch

Webマーケティング

PHPのpreg_matchで正規表現によるマッチングする方法

今回は、preg_matchについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 preg_matchを利用することで、文字列の検索や置換を行うことができます。実務でも、preg_matchを利用した文字列の検索や置き換えを行う処理を実装するので、ぜひ学習してみてください。目次ローンチ1週間前ローンチ48時間前ローンチ直後ローンチ後、3～6か月おわりにそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。 preg_matchとは preg_matchでは、ある文字列から正規表現で指定したパターンにマッチした文字列を検索できます。パターンにマッチした場合は1を返し、マッチしなかったら0を返します。例えば、検索対象の「これからphpを勉強します。」という文字列から、パターン「php」を検索すると1を返します。一方、「ruby」を検索すると0を返します。「php」の場合は文字列内にありますが、rubyはないのでこういった結果になります。他にも大文字・小文字を区別せずにパターンにマッチさせることや、指定文字列が先頭にあるだけマッチさせることもできます。正規表現とは正規表現とは、文章中の特定文字を検索、置き換え、削除することができる文法です。正規表現を利用する例として、文章中にある「,」という英文字のカンマを、「、」という日本語の読点に一括変換する場合などです。その他にも、次のような使い方が可能です。〇〇〇から始まる文字列を検索したい ×××で終わる文字列を▼▼▼に置き換えたい大文字で始まる英単語を検索したい HTML内のcol-から始まり、そのあとは1～2桁の数字となっているコードを別のコードに置き換えたい全角と半角、両方のスペースを削除したい正規表現には非常に多くの指定方法があり、正規表現だけで1冊の本を書くことができるほど非常に深い内容です。まずは、基本的な使い方を、サンプルコードを利用して使っていきましょう。大石ゆかり正規表現で指定したパターンにマッチするかどうかって少し難しいですね。田島悠介そうだね。簡単に言うと、ある形式にマッチしているかどうかってことなんだ。大石ゆかりある形式とは何ですか？田島悠介例えばメールアドレスの形式になっているかどうかだったり、電話とか日付でもいいね。そういう単純には表せないものに使うんだよ。書き方を見てみよう！ [PR] プログラミングで挫折しない学習方法を動画で公開中preg_matchの書き方 preg_matchの書式は以下の通りです。 [ ]はオプションで省略できます。 preg_match(/正規表現パターン/,検索対象の文字列,[配列],[動作フラグ],[検索開始位置]) 返り値 preg_match関数の返り値は、パターンにマッチすれば1、マッチしなければ0です。返り値の部分に変数を指定することで、パターンマッチの結果である1か0が代入されます。正規表現パターン「正規表現パターン」でマッチさせたいパターンを指定します。正規表現は/で囲んで記述します。検索対象の文字列「検索対象の文字列」では、正規表現でマッチさせる対象文字列です。配列「配列」を指定した場合は、検索結果が配列として代入されます。動作フラグ「動作フラグ」で「PREG_OFFSET_CAPTURE」を指定すると、マッチした文字列の登場した位置（オフセット）をバイト数で取得できます。検索開始位置「検索開始位置」では、先頭ではなく検索を始めたい位置を指定できます。ただし、指定はバイト数なので注意が必要です。実際に書いてみようそれでは実際に、preg_match関数を使用してPHPのプログラムを書いてみましょう。文字列「PHP」を検索する以下は、文字列「PHP」にマッチするか確認しています。サンプルコード <?php if (preg_match("/PHP/", "今PHPを勉強しています。")) { echo "マッチしました。"; } else { echo "マッチしませんでした。"; } 出力結果解説 <?phpでは、PHPプログラムを開始することを意味します。 if (preg_match(“/PHP/”, “今PHPを勉強しています。”)) {では、preg_matchを利用して、今PHPを勉強しています。という文字列からPHPという文字列がパターンマッチするかどうかを調査しています。 if文で、もし適合していたらという条件分岐を行っています。 echo “マッチしました。”;では、if文の条件に合致したら、マッチしました。と表示しています。 } else {では、if文の条件に合致しない場合の条件を指定しています。 echo “マッチしませんでした。”;では、if文の条件に合致しない場合、マッチしませんでした。と表示しています。 }ではif文の処理を終了します。文字列「PHP」を大文字、小文字を区別せずに検索する以下では、大文字・小文字の区別をせずにマッチするか確認しています。これは、preg_matchの/正規表現パターン/の最後にアルファベットのiを記載することで、大文字、小文字を区別せずに検索します。サンプルコード <?php if (preg_match("/PHP/i", "今phpを勉強しています。")) { echo "マッチしました。"; } else { echo "マッチしませんでした。"; } 出力結果解説 <?phpでは、PHPプログラムを開始することを意味します。 if (preg_match(“/PHP/”, “今phpを勉強しています。”)) {では、preg_matchを利用して、今phpを勉強しています。という文字列からPHPという文字列がパターンマッチするかどうかを調査しています。 if文で、もし適合していたらという条件分岐を行っています。 echo

PHP

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

目次

ローンチ1週間前

CSSと画像なしでユーザビリティテストを行う

著作権に関するテキストを、フッターまたは「概要（About Us）」のページに追加する

すべてのコンテンツについてスペルチェックを実行する

404ページを役立つデザインにする

問い合わせページの入力フォームからメッセージ送信のテストを行う

トップページが、サイトの目的またはユーザーのニーズを満たす内容を示しているか確認する

商標権を侵害していないことを確認する

ファビコンを設置する

ローンチ48時間前

SEO対策として、xxx.comからwww.xxx.comへリダイレクトする（またはその逆）

ドメインに関連付けられた電子メールアドレスにテストメッセージを送信する

テストメッセージに返信する

robots.txtファイルを作成する

すべてのリンクをチェックする

HTMLのコードを検証する

意味不明なテキストとテストデータをすべて検索して削除する

すべてのページに適切なHTMLのタイトル（title）とメタ情報を設定する

alt属性をすべての画像に設定する

CMSのパスワードは推測されにくいものにする

XMLサイトマップを検証する

XMLサイトマップを作成する

ローンチ直後

ウェブマスターツールに登録する

アクセス解析（アナリティクス）ツールを利用する

検索エンジンにサイトを登録する

監視（モニタリング）サービスに登録する

XMLサイトマップを検索エンジンに登録する

ローンチ後、3～6か月

ページの連絡先情報に変更がないことをチェックする

CMSのパスワードを変更する

すべてをバックアップする

入力フォームから送信されたスパムメールをチェックする

サイトの機能の重要度をチェックする

ユーザーが利用しているブラウザをチェックする

インバウンドリンクをチェックする

無効なリンクをチェックする

おわりに

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ