STUDIOでWebサイトを制作するときに気をつけるべきこと・必要な知識
サカタ（@sea_webm)です。
仕事上、サイトをノーコードWeb制作ツールSTUDIOで制作したのでその知見を共有します。
こんなかたにおすすめの記事です
・初めてWebサイトを作りたい
・自分のサイトを持ちたい
・業務で小規模なサイトを作りたい
最低限のHTML知識が必要
ノーコードで作ることができるのがSTUDIOのメリットですが、最低限のHTML知識が必要です。
・margin / padding
・display: flex
・見出しタグ
・入れ子構造
自由にレイアウトをしていく上でこれらの知識はマストですので、動画等で学んでおく必要があるでしょう。
本を買うという手もありますが、個人的には概念レベルで知っているだけで充分かと思います。
Webデザインの知識がない・メンバーがいないならテンプレ購入が必要
せっかくWebサイトをつくりたいなら、イケてるデザインのサイトを作りたい！という方もいると思います。
ですが、Webデザイン初心者が0からイケてるサイトを作るというのは思った以上に難しく、私も苦慮しました。
STUDIOにはテンプレートが購入できる「STUDIO STORE」があり、デザインで苦労したくない人にとてもおすすめです。
海外のノーコードツールを使用すると、日本ぽくないサイトだったり、英語フォントの置き換えで悩まされることがあります。
一方でSTUDIOでは、日本人向けのWebサイトテンプレートが多いため、スムーズに制作が可能だと思います。
余談：デザインだけがすべてじゃない
Webサイトの魅力は、デザインだけではありません。
最も重要なのは、何を伝え、読者にどのような価値をもたらすかにあります。
特にBtoC向けサイトではデザイン一辺倒で、肝心のメニューやサービスについて深く知ることができないということが多々あります。
よいデザインのWebサイトを作ることを目的とせず、よいコンテンツをデザインで華やかにする、ということを念頭に置くべきかと思います。
デスクトップ・タブ・スマホデザインが必要で工数は思ったよりかかる
STUDIOのレイアウトには、基準、タブレット、モバイルという3パターンを用意する必要があります。
PCでの解像度を基準として、タブレットでのレイアウト、モバイルのレイアウトを作成する必要があります。
PCでは横並び、スマホでは縦並び、という感じで修正していきます。
このように修正を行うため、思ったよりも時間がかかります。
自分のプロジェクトではここで工数の見積もりを見誤りました。
できないことを理解しておく
ほかのサービスと比較して、できなくて困ったことをいくつか解説します。
※2024年1月3日現在。
フォーム入力後の自動返信メールは送れない
ユーザーはフォームから情報を送信することができますが、たとえば「お問い合わせありがとうございました 送信完了のお知らせ」「カタログダウンロードありがとうございました」のような自動メールには対応していません。
現状では、オートメーションツールZapierを使うことが推奨されていますが、Hubspotのフォームを埋め込むなどでも対処が可能です。
イケてる表が作れない
STUDIOの通常ページでは表（テーブル）を作ることができません。
対策としては、embedボックスと呼ばれるHTMLを記入できるボックスを使うか、擬似的に作るしかありません。
個人的には表がうまく作れないというのは結構な問題だと思いますので、STUDIOさんには頑張ってもらいたいところです…。
上級者向け：パンくずリストが作れない
Webサイトにパンくずリストが設定できないのはかなり痛手です。初心者や小規模サイトは気にする必要はないかもしれませんが、SEOの観点ではかなりキツい。
https://biz.moneyforward.com/payroll/basic/63464/
対策として、有料プランでは自由にhead領域を記載できるため、1ページ1ページ手作業で入れていくしかありません。
工数がかかる上、メンテナンスも手間なので私はやっていません。
SEOで上げていくサイトにはオススメしづらいのが現状です。
https://studio.design/ja/seo
それでもSTUDIOを選ぶ理由
これだけの課題がありつつも、私がSTUDIOを選んだ理由は3点あります。
①成長企業であること
開発が活発に行われており、コミュニティと共に歩んでいる姿勢から、今後も使い勝手は高まっていくと予想されるため。
特にデザインツールのFigmaから高い精度でインポートできる機能がリリースされたのがとても印象的でした。
②純日本製であること
サポートがすべて日本語で行われることや、機能がすべて日本語で説明されていることで、Web制作に精通していない人でも使用できるのがメリットだと感じています。
実際、制作者以外の社員にニュース記事やブログを入稿してもらうことを想定しており、その点で英語が苦手でも活用できることは他サービスとの明確な違いです。
③圧倒的低コスト
WordPressや他のノーコードツールと比較したときに、制作時間・ランニングコスト、メンテナンスコストともに圧倒的に安く済むのがSTUDIOのメリットです。
～20ページの規模のサイトではWordPressを準備したりコーディングするよりも早く作れる上、制作会社を挟んだ場合でもメンテナンスが容易です。
また、文言や画像差し替えが必要な場合に、ビジュアルエディタで即時に対応できるので、速度感高く対応したいスタートアップや小規模事業者におすすめです。
結論：課題を知ればスムーズに制作できる
上記の通り、選ぶメリット・デメリットはありますが、基本的に小さなサイトを作る上で必要な機能はほとんど揃っています。
まずはサイトを持っておきたい、ネット上に最新情報を載せたいという人は、ぜひSTUDIOでトライしてみてください！
質問などはコメント欄、X（@sea_webm)でお受けしています。
最後までご覧いただきありがとうございました。 サポートしていただけると、今後の活動の動力源になり、タイピングが10%早くなります。