STUDIOで作れるサイトの種類

STUDIOが得意とするのは、ページ数がそれほど多くなく、EC機能や会員機能のような複雑な仕組みを必要としないサイトです。代表的なのは次の5種類です。

この5種類に共通しているのは、ページ数が数ページから十数ページ程度に収まり、EC機能や会員機能のような複雑な仕組みを必要としないという点です。案件として依頼されるLP・コーポレートサイトの多くはこの範囲に収まるため、STUDIOだけで十分に対応できます。

STUDIOのテンプレートカテゴリ

STUDIOには、白紙から作る以外に、公式のテンプレートを土台にする方法も用意されています。テンプレートは目的別に5つのカテゴリに分かれています。

本コースでは、テンプレートを使わず白紙から組み立てる方法を選びます。テンプレートはサイズを調整するとレスポンシブの設定まで崩れることがあり、構造を理解しないまま触ると原因が分かりにくくなるためです。白紙から組む力を身につけておけば、テンプレートを使う案件が来たときにも、崩れた箇所を自分で直せるようになります。

コードを書かずに変えられるとはどういうことか

STUDIOでテキストや画像を変えるとき、HTMLファイルを開いて文字を書き換えるという工程はありません。画面上でテキストをクリックし、そのまま打ち直すだけで、公開中のサイトの見た目がその場で変わります。

この仕組みが実現できているのは、STUDIOの画面が、コードの構造をそのまま可視化したものになっているからです。ボックス1つ1つが、コードでいう1つの要素に対応しており、余白やサイズ、配置の設定は、コードで書く代わりに右パネルの数値入力やスイッチの切り替えで行います。つまりコードを書かないのではなく、コードを画面上の操作に置き換えているという理解が実態に近くなります。

この置き換えの感覚をつかんでおくと、この先のChapterで扱う余白やレイアウトの設定が、単なる操作手順の暗記ではなく、コードの仕組みを画面で扱っているという理解として身についていきます。

STUDIOで作れないもの7つ

案件を受けるうえで特に重要なのが、STUDIOでは対応できない機能を先に知っておくことです。得意な範囲だけを見て安請け合いすると、制作の途中で対応できないことに気づき、後戻りできなくなります。

この7つのうち、案件で特に確認しておきたいのは、会員登録・ログイン機能とEC・カート決済機能です。この2つが必須要件に含まれている依頼は、STUDIOの範囲では完結できません。多言語対応のように、ページ分けや外部ツールの組み合わせで代替できるものもあるため、非対応がそのまま案件を断る理由になるとは限らない点も合わせて覚えておきましょう。

「この案件はSTUDIOで作れるか」を判断する

作れるものと作れないものを覚えたら、実際の案件に当てはめて判断する練習をしておきましょう。判断の軸はシンプルで、依頼内容にEC・会員機能・多言語の公式対応・コード書き出しのいずれかが必須要件として含まれているかどうかです。

依頼内容を聞いた時点でこの判断ができれば、受注してから対応できないことに気づいて後戻りする事態を避けられます。判断に迷う要件が出てきたときは、この7つのできないことリストに立ち返って確認しましょう。

実例を見てみたいときは

STUDIOで実際にどんなサイトが作られているかは、公式のショーケースサイトでまとめて見ることができます。showcase.studio.design/jaでは、LP・コーポレート・ポートフォリオなど、ジャンルごとに実際に公開されているサイトの作例が掲載されています。

この章で確認した5種類のサイトが、実際にはどのようなデザインで作られているのかを見ておくと、次のChapterからエディタの操作を学ぶときの完成イメージが具体的になります。