2024/1/19
［ 初回公開日：
］
STUDIOでのWebサイト制作の進め方｜自社で運用をスムーズに！
こんにちは、IT+ デザイナーの溝口です。
おかげさまで弊社が今年の1月にSTUDIOの公認パートナーに認定されて以来、STUDIOでのWebサイト制作のご依頼が増えてきました。
時代の流れもあり、自社でも運用がしやすいノーコードによる新しい形が求められていることを実感しています。
でも実際STUDIOでWebサイトを制作する時ってどんな風に進めるの？そもそもWebサイトを制作する時の流れがよく分からない。と思われる方もいらっしゃるのではないでしょうか。
今回はそんな方のために弊社がWebサイトを制作させていただく際の進め方についてご紹介させていただきます。
- 1.やりたいことがSTUDIOで実装可能か検討する
- 2.目的とターゲットについて考える
- 3.サイトの構成・CMSの運用部分を決める
- 4.訴求ポイントを決める
- 5.サイトのトンマナを決める
- 6.写真素材・撮影の検討
- 7.コミュニケーションツールの検討・ドメインの確認
- コミュニケーションツール
- ドメインの確認
- 8.トップページのデザイン構成案の作成
- 9.プレビューサイトで確認&修正
- 10.下層ページのデザイン構成案作成
- 入れる要素とテキスト内容が決まっている場合
- なんとなく入れたい要素は決まっているが、テキスト内容など決まっていない場合
- 11.テキスト・素材の用意
- テキスト
- 画像
- 12.確認・修正・調整を繰り返しFIX
- 13.メタタイトル・ディスクリピション、OGP・ファビコンの設定
- 14.GAやドメイン、DNSなどの設定
- 15.公開
- 16.自社にて運用（サポートも可）
- CMS部分の投稿・更新・編集
- ページの簡単な変更
- まとめ
1.やりたいことがSTUDIOで実装可能か検討する
最近は最初からSTUDIO指定で考えられているお客様が多いのですが、必要な機能がSTUDIOで実装が可能なのか、もしくは代替案で問題がないか、を最初に把握しておく必要があります。
WordPressで制作する場合はプラグインやカスタマイズなどによって実装が可能なことも、STUDIO単体では実装ができないこともあるからです。
例えばよくあるポイントとしては
PDFの資料をダウンロードさせたい（STUDIO単体では不可のため別のやり方や外部連携などの検討必要）ブログ内検索機能が欲しい（STUDIOでは不可、近い将来に期待！）多言語にしたい（STUDIOでできるやり方でなら可）
予約フォームを入れたい（STUDIO単体では不可のため、埋め込みや、GTM、外部サービスとの連携などを検討）
などがあります。
（2023.09.21）
PDFのアップロード機能が追加されました！
https://studio.design/ja/whats-new/pdf
（2022/11/29 追記）
ついにCMSの検索機能が追加されました！
機能によってはSTUDIO単体ではできないこともありますが、Google Tag Manager（GTM）や外部サービスとの連携で実現できるものもありますので、最初にそのすり合わせを行います。
2.目的とターゲットについて考える
何のために、誰に向けて作るのか。
何で作ろうがここが一番大事なポイントになります。
目的としては例えば、
会社として信頼感のあるサイトを作りたい
Webサイトからブランディングを行いたい
お問い合わせにつなげたい
とにかくまずはスピーディーに立ち上げたい
などなど、何を目的として作るのか。
ターゲットは法人なのか、個人なのか。男性なのか、女性なのか。どの程度の年齢層でどんな趣味・趣向を持っているのか、など。
目的は何で、それは誰（ターゲット）に向けたものなのかが決まらないとデザインのトーンやコンテンツ（サイトに入れる要素や情報など）の内容を決めることはできません。
3.サイトの構成・CMSの運用部分を決める
目的とターゲットが決まった後はサイトの構成を考えます。
どの程度のボリュームのサイトにするのか、ページ数はどのくらいを想定しているのか、などです。
例えば、
情報量が多く、しっかりしたコーポレートサイト感を出す必要があるためそれぞれのページを分けて作る（必要なページの整理）
情報量が少なく、まずはスピーディーに立ち上げたいため1Pで作る
ブログやお知らせなどはCMSを使って自社で運用がしたい
などなど、必要な情報量や目的、立ち上げのスケジュール感などを考慮し、どういった構成にするのか、CMSにて自社で運用をしていく箇所はどこなのかを決めます。
あらかじめ入れたい要素を考えておいていただくとスムーズになります。
もしくはフェーズを決めて段階的に公開をしていく形とし、最初は1Pで制作、次のフェーズで階層化をする、というのも一つの手です。
諸々の状況を鑑みながら構成を決めるのがいいでしょう。
STUDIOであればデザインとコーディングがワンセットになっている分スピーディーな立ち上げも可能です。
4.訴求ポイントを決める
決めたターゲットに対して何を訴求するのかを一緒に考えます。
ターゲットの想定できる課題は何で、何を訴求すれば興味を持ってもらえるのか。
どう伝えれば、そのままサイトを見てもらうことができるのか。
事業内容やサービスの強みを軸としながら、効果的と思える言葉と共に考えていきます。
サイトのトップページやサービス内容の紹介、想い、など随所にその情報を入れていきましょう。
5.サイトのトンマナを決める
トンマナとはいわゆるデザインのトーンやその世界観のことです。
サイトをどういうデザインのトーン（世界観）にするのか、トンマナ（トーン＆マナー）を考えます。
進め方としては大体下記の2パターンになります。
お客様から「こんなイメージのサイトにしたい」と具体的な参考サイトの情報をいただく
「信頼感があって、ただ堅くはなく親しみやすさもあって」のようなイメージでお話をいただく
そして、上記1と２を軸にしながらターゲットや強み、ビジョン・ミッションなどを考慮し、最適なトンマナを考えていきます。
※ロゴデザインから入る場合はさらに深く、ビジョン・ミッションや事業内容、どう見られたいか、などを一緒に考えていきます。
6.写真素材・撮影の検討
訴求したいポイントを伝えるためにどんな写真が必要か。内容やビジュアル、サイトのトンマナに合わせて撮影が必要なのか、有料の写真素材でも問題はないかを検討します。
大体は下記の3パターンになります。
すでにお持ちの写真素材を使う
内容に合わせて撮影を行う
有料の写真素材を使う
予算や目的、状況に合わせて決めるのがいいでしょう。
7.コミュニケーションツールの検討・ドメインの確認
コミュニケーションツール
これからコミュニケーションを取っていくにあたり、何で行うかをお互いやりやすい形で検討します。
弊社としては大体下記ツールで行うことが多いです。
内容やスケジュール管理：Googleスプレッドシート / Backlog
チャット・やり取り：Slack / Chatwork / Teams / メール
web会議：Meet / Zoom / Teams
など
ドメインの確認
すでにドメインが決まっている場合は任意のドメイン事業者にてドメインを取得していただきます。
決まっていない場合は会社名やサービス名などからドメイン名を決定します。
また、サーバーについてはSTUDIOのサービス利用料に含まれているため別途契約をする必要はありません。
・ドメインとサーバーについて
8.トップページのデザイン構成案の作成
上記内容が全て決まって、初めて具体的なトップページのデザイン構成案の制作に入ります。
ターゲットに対してどんな訴求なら響くのか（伝わるのか）、欲しい情報、知りたいであろう情報をイメージしながら、情報として優先順位の高い順番で構成をしていきます。
また、ナビゲーションの設計も大事な要素の一つです。
サイト構成に対してどのように見せれば使いやすいか、またトンマナに照らし合わせた時にどのようなデザインであればしっくりくるのか。
いくつかの観点から最適な形を探っていきます。
9.プレビューサイトで確認&修正
トップページのデザイン構成案が完成するとその確認になるのですが、STUDIOのとても便利な機能の一つがリアルタイムにプレビューできる「ライブプレビュー」です！
見た目や動き、ブラウザ幅の拡大縮小なども含め、本番のサイトとほぼ何も変わらない状態での確認が可能なので、イメージの共有がとてもスムーズになります。
この機能はSTUDIOならでは！WordPressでもWiXでもここまで完成形をイメージできる確認方法はないので感動ものです。
・ライブプレビューとは
ライブプレビューでご確認いただき、デザインのトンマナやイメージのズレの調整、内容などの確認・修正を行い、トンマナと構成を決定します。
・ライブプレビューサイトの参考URL
下記がSTUDIOのテンプレートとして用意されているデザインのプレビューサイトとなりますので、実際のプレビューイメージはこちらでチェック！
https://preview.studio.site/templates/YPqrevb8O5
トップページはサイトの顔になるページです。ここでしっかりイメージと合うかを詰めていくのがいいでしょう。
10.下層ページのデザイン構成案作成
トップページのデザイン構成案によって、トンマナやナビゲーションなどを含む構成を決めた後は下層ページのデザイン構成案の制作に入ります。
進め方としては下記の2パターンになります。
入れる要素とテキスト内容が決まっている場合
すでに入れたい要素が確定していて、そのテキスト素材もお持ちの場合はそれに合わせてデザイン構成案を作成していきます。
なんとなく入れたい要素は決まっているが、テキスト内容など決まっていない場合
最初から全てのテキスト情報や入れるべき要素を用意することは中々難しいため、このパターンの方が多いです。
この場合はまず、ワイヤーフレームと言われる、ダミーのテキスト、グレーの枠だけの画像（もしくは有料素材でイメージの近しい画像）、何の要素を入れた方がいいのかを示した枠、という全てダミーの状態の構成案でまずは進めていきます。
誰に対して何を伝えたいから、ここにはこういう情報が入って、これくらいの文字量で、こんなビジュアルが欲しくて、みたいな感じですね。
ワイヤーフレームがあることで、完成形のイメージがしやすくなるため、そこから内容の詳細を詰めていくとスムーズでしょう。
11.テキスト・素材の用意
ワイヤーフレームでデザイン構成が決まると、あとはそこに入れるテキストや画像などの素材を用意する作業に入ります。
最初の段階からある程度想定して用意を進められる方がスムーズですが、実はここが一番時間がかかったりする工程。
テキスト
ダミーで入れていた箇所のテキストを全てご用意いただきます。
事業の説明や想いの言語化、ターゲットに対して分かりやすい言葉でテキストを作ることが大事なのですが、いざやってみると慣れない作業ではあると思うので少し時間がかかるかもしれません。
ただ、今まで曖昧だった部分が言語化できたり、事業内容の整理にも繋がったりと、とても大切な部分と思っています。
ある程度の内容であれば、弊社にて多少のリライトやコピーを作ることはありますが、言葉をしっかり作り込み必要がある場合は別途コピーライター（パートナー）の参加を検討する形になります。
画像
ここは「6.写真素材・撮影の検討」で決めた方針によって変わってきます。
撮影の場合は撮影のカット決めや諸々のスケジュール調整を行い、撮影した画像を挿入。
有料素材の場合はデザイン構成の完全FIX後に本画像を購入し、ダミーで入れていた画像と差し替えていきます。
12.確認・修正・調整を繰り返しFIX
全てのページのデザイン構成案が決まり、素材も用意ができれば、あとは最終確認と微調整になります。
入れている情報に過不足はないか、全体的に違和感はないか、納得がいくまで調整を行いFIXへと進めていきます。
13.メタタイトル・ディスクリピション、OGP・ファビコンの設定
デザインが全てFIXしたあとはSEO関連を含めた設定になります。
検索結果に表示されるページのタイトルやディスクリプション（説明文）、SNSでシェアされた際に表示される画像やファビコンの設定などです。
14.GAやドメイン、DNSなどの設定
サイトの公開日を決めたあとは公開日に合わせてGoogle Analyticsやドメイン、DNSの設定を行います。
下記がSTUDIOの場合の詳細設定となっております。
・Google Analyticsの連携方法
・DNSレコード設定
・独自ドメインでサイトを公開する
また、ホームページとメールを同一のレンタルサーバーで運用していたものを、ホームページだけSTUDIOにてリニューアルを行い、メールはそのまま元のサーバーを利用するケースの場合は下記記事を参考にしてください。
https://www.itplus.co.jp/blog/lolipop-studio
15.公開
上記の設定を全て完了し、ついにサイトが公開となります。
設定完了後数時間〜24時間以内には公開されます。
16.自社にて運用（サポートも可）
公開後は自社にて運用をしていただきます。
運用・保守費用などはかかりません。
STUDIOであれば下記は簡単にできるはずです。
CMS部分の投稿・更新・編集
ブログやお知らせ、その他のCMSの部分など、管理画面のCMS部分から直感的に操作が可能です。
ページの簡単な変更
テキストの変更や画像の差し替えなど、管理画面から直感的に変更が可能です。
※一度変更すると自動保存されるため、操作に慣れていない場合はページを複製して試してみたりするなど作業には気をつけましょう。
また、自社では難しいページの追加やデザイン変更、フェーズを分けて作り込んでいく場合などはお気軽にご相談ください。
まとめ
いかがでしたでしょうか？
STUDIOだから他とはここが違う、という部分はそこまでないのですが、
初めて制作される場合はどんな風に進めるの？何を用意したらいいの？など不安に思われることも多いかと思いますので、今回は弊社での例となりますが、少しでもお役に立てれば幸いです。
それでは最後までお読みいただき、ありがとうございました。
弊社ではSTUDIOでのサイト制作・リニューアルを行なっておりますので、お気軽にご相談ください。
https://www.itplus.co.jp/service/web
お問い合わせはこちらから
この記事を書いた人
