こんにちは、STUDIOのRyoです!この記事では、STUDIOでWebサイトを公開する前に忘れがちな設定を、デザインエディタ ・ダッシュボード別で解説します。直観的にデザインし、ワンクリックでWebサイトが公開できることはSTUDIOの大きな強みといえます。しかし、サイト公開前に必要な設定やチェックを忘れてしまうと、表示や動作が意図しない状態でサイトを公開してしまう可能性があります。そうならないために、サイト公開前に一通り項目を見直す必要があります。今回は、STUDIOで初めてWebサイトを公開する人向けに、見落としがちな設定項目とその役割をいくつか絞ってご紹介します。約5分程度で読了できる内容となっておりますので、ぜひ最後までご覧ください。エディタの設定1. サイト・ページ設定サイトを公開する前に欠かせない項目の一つとして、サイト・ページ設定があります。ここでは、検索結果や、Webサイトをシェアした際に表示されるタイトルや説明文・アイコン画像などを設定します。サイト設定サイト設定は、プロジェクトに含まれるすべてのページに反映されます。ページごとに設定を上書きしない限り、この設定が自動的に適用されます。ページ設定ページごとに固有のタイトルや説明文を指定することができます。サイト設定に上書きする形で反映されます。サイト設定・ページ設定でそれぞれ指定できる項目が異なります。以下のリストを参考に、各項目の役割と必要性を確認しましょう。各項目のより詳しい情報は、記載のヘルプ記事よりご確認いただけます。サイト・ページ設定共通の項目項目名称概要タイトル検索エンジンにWebサイトやページのタイトルを伝達します。検索結果に最も大きく表示されるので、適切な内容を記述することが重要です。文字数が30文字を超えると省略が入るため、重要な情報は冒頭に記載しましょう。 ページのメタ情報:STUDIO U説明文検索エンジンにより詳細なページの情報を伝達します。検索結果上では、タイトルの補足情報として表示されます。Googleの場合、表示される文字数はPCで120文字前後、モバイル端末で50文字前後とされています。重要な情報は文字数内で記載しましょう。ファビコンファビコンは、ブラウザのタブやブックマーク等に表示されるアイコン画像です。主に、サイトのロゴやシンボルが使用されます。32×32px 前後のPNG形式の画像が推奨されています。 ファビコン:STUDIO Uカバー画像X(旧Twitter)やFacebookなどのSNSでサイトをシェアした際に表示される画像です。縦1200×横630px , 5MB未満の画像が推奨されています。 サムネイル設定:STUDIO U言語設定ページで使われている言語を設定します。検索エンジンがページ言語を認識して検索結果に反映したり、翻訳ツールや読み上げツールに使用言語を伝達することにつながります 公開サイトの言語設定:STUDIO Uカスタムコードサイトやそれぞれのページの<head>,<body>の末尾に独自のコードを設定できます。設定する場合、正しいコードが入力されているか確認しましょう。 サイト / ページにカスタムコードを追加する:STUDIO Uページ設定でのみ指定可能な項目項目名称概要noindex検索結果に表示させたくないページを指定できます。内容が重複しているページや、404ページなど、あえて検索結果に反映させたくないページに設定することで、ユーザーの閲覧する情報の質を担保することができます。 noindex:STUDIO U構造化データ検索エンジンに対して、ページ内コンテンツの構造や役割をより詳細に伝えることができます。もし使用する場合はマークアップコードが正しいかや、構造化データのテストを事前に行いましょう。 構造化データでページ内コンテンツを定義する:STUDIO U以上がサイト・ページそれぞれの設定となります。これらの項目は検索エンジンの評価やアクセシビリティにも影響するので、必ず設定・見直しを行いましょう。2. フォームの設定フォームを設置している場合は、公開前に各項目や通知先の設定を確認します。特に規模の大きいコーポレートサイトや採用サイトなど、公開直後に多くのフォーム利用が想定される場合は、入念にチェックしましょう。デザインエディタでの確認フォーム名ページに設置しているフォームの役割が、ダッシュボードからわかるようになっているかを確認しましょう。フォーム名は、デザインエディタから、フォームボックスを選択し、右パネルから書き換えることができます。フォームの編集:STUDIO U項目名フォーム名同様、フォームに内包される各項目の名称がダッシュボードから理解しやすい名称になっているかを確認します。自分以外のメンバーが見てもわかるように意識して名称を設定しましょう。必須項目項目ごとに表示される「必須入力」のオプションと、デザイン(見た目)が合致しているか確認します。STUDIOのフォームでは、デフォルトで必須入力を示すアイコンが各項目ごとに設定されていますが、これらは項目自体の設定とは連動しないので注意が必要です。送信後のページフォーム送信後に表示するページやモーダルの設定・内容を確認します。リンク先はもちろん、レスポンシブやアニメーションの設定も見直すようにしましょう。サンキューページ:STUDIO Uフォームダッシュボードの確認通知先メールアドレスの確認フォームへ問い合わせ等があった際に通知メールが送信されます。通知先は、プロジェクト内のすべてのフォーム、もしくはフォームごとに設定が可能です。通知先と同時に、通知メッセージのタイトルもあわせて確認しましょう。フォーム通知メール:STUDIO Uスプレッドシートの連携確認フォームに送信されたデータを、スプレッドシートへ記録することができます。スプレッドシート連携が有効になっているか、正しいGoogleアカウントに紐づいているかを確認しましょう。フォーム結果の外部連携:STUDIO U公開前にフォームの項目チェックを行うことで、サイトを安心して運用することができます。それぞれ確認を終えたら、最後にライブプレビューからテスト送信を行いましょう。3. 404ページの設定削除したページや、存在しないURLへのアクセスがあった際に表示させるページを設定します。404ページにTOPページなどへのリンクを記載することで、サイト離脱を防止する効果が見込めます。追加したページのタイプが、「404」になっているか、リンク先に間違いがないかなどを確認しましょう。404ページを設置する方法:STUDIO Uダッシュボードの設定1. 契約プランの確認プロジェクトが利用したいプランで契約されているか、お支払いオーナーやお支払い情報に間違いがないかを確認します。CMSやApps連携など、プランの内容が必要な要件を満たしているか、料金プラン表を参考に見直しを行いましょう。料金プラン2. ドメインの設定サブドメインでの公開STUDIOでは、Freeプランであっても「.studio.site」のサブドメインを利用し、無料でサイトを公開することができます。プロジェクト作成時には、あらかじめランダムな文字列が設定されています。必要に応じて任意のドメイン名を入力し、公開しましょう。サイト公開:STUDIO U独自ドメインでの公開Starter以上のプランを利用することで、独自のドメインを接続することができます。ドメインプロバイダー側でのDNS設定が、正しくSTUDIOと紐づいているかを確認します。また、DNS設定後の反映や、TLS証明書までには時間を要する場合がありますので、余裕を持って設定しましょう。独自ドメインでサイトを公開する:STUDIO U3. STUDIOバナーの表示設定STUDIOで制作されたWebサイトでは、公開サイト左下にデフォルトでSTUDIOのバナーが表示されます。Starter以上のプランを利用することで、STUDIOバナーの表示・非表示の設定が可能になります。公開設定パネルから、オン・オフ設定を行いましょう。STUDIOバナー:STUDIO U4. サイトマップの設定ダッシュボードから、.xml形式のサイトマップを発行できます。発行したURLをGoogleサーチコンソール経由で送信することで、検索エンジンにサイトの構造を知らせることができます。ダッシュボードの全体設定から、ONになっているかを確認しましょう。サイトマップ:STUDIO U5. CMSアイテムのステータス確認CMS機能を利用している場合は、ダッシュボードのCMSタブから、各アイテムのステータスを確認します。それぞれのモデルに紐づくアイテムには、「下書き」「公開中」「変更あり」「公開予約中」の4つのステータスが存在します。「公開」ステータス以外のアイテムは公開サイトでは表示されません。ステータス・公開日時:STUDIO U最後に今回は、STUDIOでのサイト公開前に忘れがちな設定をいくつかご紹介しました。公開前の最終確認の一助となれば幸いです。とりわけ受託制作ともなると、より入念なチェックが不可欠です。ご紹介した内容を参考に、あなただけの公開前チェックリストを作成してみてください!