Google検索風プロフィールビデオの作り方~Step1:基本設定と文字の編集

Google検索風プロフィールビデオの作り方~Step1

結婚式のプロフィールビデオやオープニングムービーでも使いやすい 「Google検索風」動画素材の作り方をまとめ。
ロゴ画像をオリジナルの英単語にして、ボタンのテキストを編集するだけ のシンプル作業で、意外に簡単に自作できるのでおすすめ。 使用するツールも、基本は無料ソフト(ムービーメーカーと動画キャプチャソフトの体験版) ですので予算的にもハードルは低めです。 スライドショーだけの手作りプロフィールビデオに少しアクセントを付けられます。 作り方は↓↓↓より、少し解説が細かくなっていますので3ステップに分けてます。
スポンサーリンク

ブラウザでGoogleのトップページにアクセスする

まずはブラウザで https://www.google.co.jp/ にアクセスします。

Googleトップページ

ブラウザはIE(Internet Explorer)なら9以上を利用してください。
IE8以前をお使いの場合はできれば「GoogleChrome」などをインストールされることをおすすめします。
※本素材の制作にはIE11を使用しています。

Googleインスタント検索(文字を打つと入力フォームが上に移動する)をOFFにする

Googleインスタント検索

Googleの検索画面で文字を1文字でも打つと、入力フォームが勝手に画面の上に移動してしまいます。 これでは思い通りのムービーにできないのでこの機能を一時的にOFFにしておきます。

Googleインスタント検索の設定方法

  1. 入力フォームに文字を打ち「検索(虫メガネ)ボタン」か「Enter」をクリックします。

    検索ワード入力フォーム

  2. 検索結果画面右上の「オプション(ギアアイコン)」→「検索設定」をクリックします。

    検索設定メニュー

  3. 「Google インスタント検索の予測」の項目で「インスタント検索の結果は表示しない」を選び、ページ下の「保存」ボタンをクリックします。
    終了したら↓ロゴマークをクリックしてトップページに戻ります。

    Google インスタント検索の予測

開発者ツールを表示する

最新ブラウザの多くは「開発者ツール」を利用できます。
IEの場合は右上の「ギア」アイコンをクリックし、「F12 開発者ツール」を選びます。

「F12 開発者ツール」メニュー

これを使うことでホームページの見た目(HTMLやCSS)をカスタマイズできます。
※もちろん自分が見ているブラウザ上だけです。

ボタンのテキストを変更する

まずは「Google 検索」ボタンの文字を変更します。
開発者ツールの「DOM Explorer」タブを開き

①一番左の▲アイコン(要素の選択)をクリックします。

開発者ツール→DOM Explorer→要素の選択

すると、マウスをページ上で動かすとマウスが重なった要素がハイライトされるので

②変更したい箇所をハイライトさせクリックします。

要素の選択でハイライト

「Google 検索」ボタンをハイライトさせてクリックすると、
下の開発者ツールにソース(HTML)が表示されるので、

③該当するテキストをダブルクリックして編集します。

開発者ツール|HTMLテキスト変更

ボタンのテキストは value=”Google 検索” となるのでココを編集します。
※aria-label=”Google 検索”もありますがこちらは変更の必要はありません。

④編集が終わったら「Enter」キーを押して確定。

Google検索テキスト編集完了後画面

すると、ブラウザ上でリアルタイムにテキストが書き換えられます。
同じ方法で『I’m Feeling Lucky』ボタンも①~④の工程でテキストを書き換えられます。

ボタン編集完了後画面

こだわる人はマウスカーソルも変更

検索ボタンのうえにカーソルをのせてもリンクのように「指」カーソルにはなりません。 カーソルの形状もこだわりたい方は以下の内容で編集します。

ボタンのインラインスタイル変更

テキスト編集と同じように「要素の選択」「検索ボタン」とクリックし、開発者ツール画面の右側「スタイル」の「インラインスタイル {」のすぐ横あたりをクリックします。 入力ボックスが現われるので「cursor」と入力しEnterキー、さらに入力ボックスが現われるので「pointer」と入力しEnterキーを押します。 これでボタンにカーソルをあわせると「指」の形に変わります。

ボタンのインラインスタイル変更後

同じように「Everyone~」ボタンも変更します。
ここまでで説明した内容はIE11での操作方法ですが、
GoogleChrome・Firefox等のモダンブラウザでもほぼ同じ手順で作業を行えます。 続いて、Googleロゴ画像の設定については、
『Step2:ロゴ画像の作成・変更』で解説していきます。

Step2:ロゴ画像の作成・変更

スポンサーリンク
スポンサーリンク
PAGE
TOP