え、これでWebページが開いちゃうの？ホーム画面に、かわいいSafariのウィジェットを追加する方法を伝授！

isuta / 2022年6月24日 21時0分

iPhoneユーザーの方は、ホーム画面を自分らしくカスタマイズしている人も多いと思います。

今回は、ウィジェットアプリ「Widgy」を使って、自分流にアレンジしたSafariのウィジェットを作成する方法をご紹介。

設定の工程はちょっぴり多めだけれど、とってもかわいく仕上がるのでぜひチャレンジしてみてくださいね。

オリジナルのSafariウィジェットで、ホーム画面をかわいくアレンジ

ウィジェット作成アプリ「Widgy」で、オリジナルのSafariウィジェットを作成している様子

完成したオリジナルの検索ウィジェットはこんな仕上がり。検索窓をタップすると、Safariが開くようになっていますよ。

それでは早速、設定を進めていきましょう。

アプリを開く前に、アイコンが無いホーム画面をスクショする様子

まずは、ウィジェットの背景透過用に、ホーム画面を長押しして、アイコンが無い右端のページをスクショしておきます。

Widgyの管理タブにある『透明用背景を設定』で、先ほどのスクショを設定

準備が整ったら「Widgy」を開き、管理タブの『透明用背景を設定』から、先ほどのスクショ画像を設定。

Widgyのクリエイトタブ『クリエイト』ボタンをタップし、「Widgy 中」サイズから作成をスタート

次に、クリエイトタブの『クリエイト』ボタンをタップし、「Widgy 中」を選んでください。

『新しいレイヤーを追加』から、「形状」へと進みましょう

『新しいレイヤーを追加』から、「形状」を選択。ウィジェット内の、検索欄になる部分を作っていきますよ。

フレームの位置を下方向に1000、サイズを横1600×縦400で設定。

操作タブにある、『エフェクト』へと進みましょう。

Widgyのエフェクトタブで「角丸」を50％、「ドロップシャドウカラー」に黒を選び、数値を3に設定。「ぼかし」の項目も数値を３にします

ここで、フレームを丸くトリミングするため「角丸」を50％にし、「ドロップシャドウカラー」に黒を選び、数値を3に設定します。そして、「ぼかし」の項目も数値を3にしてください。

ここまで出来たら『エフェクト』タブの並びにある、左端の矢印ボタンをタップ。

新しく『シンボル』のレイヤーを作成

新しいレイヤーを追加し、次は『シンボル』をセレクトしますよ。

『シンボル』タブににある、「Apple SF シンボル」をタップ

クローバーのアイコンで『シンボル』タブに切り替え、「Apple SF シンボル」を選択。

シンボルマークの中から虫眼鏡の絵柄を選び、「フレーム」タブでウィジェットの検索部分に配置するようサイズや位置を調整

虫眼鏡の絵文字を選び、「フレーム」タブでウィジェットの検索部分に配置するよう、サイズや位置を調整しましょう。

配置場所が決まったら、「フレーム」タブ横の矢印でレイヤーページに戻ります。

新しい「タップアクション」のレイヤーを追加

プラスマークから、『タップアクション』を追加。

アクション部分を、ウィジェットの検索欄と同じ位置/サイズに調整

ここで、ウィジェットの検索欄をタップしたら、Safariが開くよう設定していきますよ。

アクション部分を検索欄と同じ位置/サイズに調整し、操作タブの『アクション』を選択。

アクションに、Appleのアプリにある「Safari」を選択

Appleのアプリにある「Safari」を選んでください。

再びレイヤーページに戻るため、タブ横の矢印をタップ。

新しい『画像』レイヤーを追加

新しいレイヤーを追加から『画像』を選びます。

『画像』にあるWidgyの「透明用背景」を選択すると、背景透過用の画像が配置されます

フレームのサイズを縦/横1600にしたら、『画像』タブを開きましょう。

ここで、Widgyの「透明用背景」を選べばOK！最初に設定したホーム画面のスクショ画像が、ウィジェットの後ろに表示されますよ。

これでウィジェットの基礎部分が完成しました。

テキストや画像を加えて、自分らしいウィジェットデザインに

Safariウィジェットをかわいくしあげるため、『テキスト』レイヤーを追加

ここからは、作成したウィジェットをかわいくアレンジしていきます。

プラスマークから『テキスト』をタップ。

『テキスト』タブのフォントで、お好みのスタイルを選んでみて

『テキスト』タブで、フォントをお好みのスタイルに変更し、

『置き換え』タブの「カスタムテキスト」で、検索欄に入れたいメッセージを入力

右端の『置き換え』タブの「カスタムテキスト」で、好きなメッセージをテキスト部分に打ち込んでください。検索を意味する、“Search for”などと入れておくとおしゃれかも!?

ウィジェットをかわいく仕上げるため、画像レイヤーを追加

このままだとウィジェット内が少し寂しいので、アイコンとなるような画像を検索欄の上に配置しますよ。

プラスボタンから『画像』を選択。

お気に入りの透過画像などを、ウィジェット内に配置

「PhotoRoom」などの加工アプリで事前に切り抜いておいた透過画像を、システムの『写真ライブラリ（透過PNG）』から貼り付けます。

画像のサイズ位置を微調整したら、ついにウィジェットの完成ですよ！

『確認』ボタンでウィジェットを保存し、『管理』タブの「Widgy スロット中」に自作ウィジェットを追加

作成したウィジェットを保存するため、画面左上の矢印をタップし、『確認』を押しましょう。

そして、『管理』タブの「Widgy スロット中」に、作成したウィジェットを設定。

ホーム画面上のウィジェット位置を指定し、「Widgy」のウィジェットを設定すればOK

ホーム画面のどの部分にウィジェットを配置するか指定したら、設定完了です。

アプリを閉じ、ホーム画面のウィジェット追加操作で「Widgy」を選択すると、作成したウィジェット画像が表示され、これを追加すればOK。

ウィジェットをタップすると、自動でSafariが開く！

完成したSafariウィジェットをタップすると、自動でSafariが立ち上がりますよ

完成したホーム画面では、自作ウィジェットの検索欄をタップすると、Safariが自動で開く仕組みがバッチリ作動しました。

“え、それどうなってるの？”って友達から質問攻めにあっちゃいそうな、おしゃれウィジェットをぜひ作ってみてくださいね。

アプリはこちらから