Webサイトを「アプリ」に変える魔法のひとこと。『meta application-name』の秘密

こんにちは！Web制作の世界へようこそ。
HTMLを学び始めると、``タグの中に並ぶ不思議な呪文のようなコードたちに、「これって何のためにあるんだろう？」と戸惑うことはありませんか？

今回は、その中でも特に「Webサイトをスマホのホーム画面に住まわせる」という、ちょっと素敵な役割を持つ `` についてお話しします。

難しい技術用語は置いておいて、まずは身近な例えから入っていきましょう。

—

あなたのWebサイトは「お店」？ それとも「名刺」？

想像してみてください。あなたは今、こだわりのカフェをオープンしようとしています。

Webサイトを公開することは、街中に看板を立てるようなもの。でも、もしそのカフェがとても居心地が良くて、お客さんが「また明日も来たいな」と思ってくれたらどうでしょう？

そんな時、お客さんは「スマホのホーム画面にこのカフェのアイコンを置いて、いつでもワンタップで飛べるようにしたい！」と思うはずです。これがいわゆる「Webアプリ化（PWAなど）」という体験です。

このとき、スマホのホーム画面に表示される「名前」を自分で決めてあげないと、ブラウザが勝手にページのタイトルを短く切り取ったりして、なんだかカッコ悪い名前になってしまうことがあるんです。

そこで登場するのが、このタグです。

`` の役割

このタグは、一言で言えば「スマホやPCにインストールされた時の『正式名称』を教えてあげるためのもの」です。

名刺に書かれた名前と、友達に呼ばれたいニックネームが違うように、検索結果に出る長いタイトルと、ホーム画面でアイコンの下に表示させる短い名前を使い分けることができるんですね。

—

早速書いてみましょう！

書き方はとってもシンプルです。HTMLの `` タグの中に、たった一行加えるだけ。

いらっしゃいませ！

ここでちょっとしたコツ

• content=”ここ” の部分に、アイコンの下に表示させたい名前を入れます。
• あまり長すぎると、スマホ画面で名前が省略されて「…」になってしまいます。なるべく短く、パッと見てわかる名前（例：「〇〇カフェ」など）にするのが、親切な設計のコツですよ。

—

なぜわざわざ指定する必要があるの？

「別に `