レンタルオフィス「METSオフィス」運営責任者のオバタです。
昨今では様々なウェブサイト作成ツールが出揃い、逆に何を選んだら良いのかわからないくらい豊富で迷ってしまうという方もいらっしゃるのではないでしょうか。
今回ご紹介する「STUDIO」は、ウェブ制作に必要なコードを書かずに、まるでプラモデルを組み立てるかのようにサイトを作れるタイプのツールです。
このようなタイプのツールはこれだけというわけではありませんが、「STUDIO」はカスタマイズしやすさに特化しており、簡単な操作でオシャレなサイトを作りたいという方にはうってつけです。迷ったらまず少し触ってみて使い勝手を確かめるのが一番。サイト作成ツールの選定にお悩み中の方は、ぜひ目を通してみてください。
「STUDIO」とは
URL： https://studio.design/ja
「STUDIO」は、ブラウザ上で利用することができるコーディング不要のウェブサイト作成ツールです。日本語対応、インストール不要、基本無料。
「STUDIO」の登録・ログイン方法
「STUDIO」はインストール不要で、ブラウザでログインして使えるツールです。
ログイン方法は２種類。
・名前、メールアドレス、パスワードを新規登録して専用アカウントでログイン
・Facebookのアカウントでログイン
「STUDIO」専用のアカウントを作成しなくても、Facebookアカウントをお持ちであればそれを使ってログイン可能です。
ログイン後の画面
ログイン後のトップ画面はこちら。初回はチュートリアル画面が表示されます。２～３分程度で終わるため、スムーズにサイトを作りたい方はスキップしないようにしましょう。
チュートリアルを終えるとそのまま続行するか、別の新規プロジェクトを立ち上げるかを選択できます。当デモではダッシュボードのトップに戻り、そこから新規プロジェクトを立ち上げウェブサイトを作成していきます。
※ここからの操作デモは、Windows10のPC、ブラウザはGoogleクロームで行います。
サイト作成デモ
ダッシュボードのトップページがこちら。
「新規プロジェクトを作成」をクリックします。
デザインを選択
最初に大枠となるデザインを選択します。「白紙から作成」という選択肢もありますが、難しいことを考えずに手っ取り早く作りたい時は、スマホやタブレットなどにも対応したレスポンシブデザインで既に作られている「テンプレートから作成」を選ぶと良いでしょう。
当デモでは「テンプレートから作成」を選び作業を進めていきます。
テンプレートを編集
テンプレートを選択すると編集画面へ遷移します。
テンプレートから作成する場合の主な作業は「テキスト編集」「画像の差し替え」「大枠に合う新しいセクションの追加」などが挙げられます。
テンプレートから作る際の注意点として、「STUDIO」はまずセクションごとに大枠となるボックスを配置して、その中に文字や画像などを配置していく仕様になっているため、文字の位置だけをずらそうとしても任意の位置に調整できない、画像をちょっとだけずらしたいけどうまくいかないといったことが起こります。
テンプレートデザイン内で任意の位置に移動できない場合は、そのセクション内の画像やテキスト、余白などをクリックしてどのようなボックス配置になっているか確かめてみましょう。慣れればどうということはありませんが、最初はつまづきやすいかもしれません。
ボックス、テキスト、画像などの重ね順を買えたい時は、編集画面右上「重ね順」の数値を変更すればOKです。重なっている箇所は、上に表示したいボックスの数値が高くなるよう設定します。
テキストの編集方法
テキストが表示されているボックスをマウスで選択→ダブルクリックで編集モードになります。
編集画面上部の編集メニューで「文字間」「行高」「文字サイズ」「フォント」「文字の太さ」「イタリック」「色」「配置」などをカスタマイズできます。
画像の編集方法
画像をダブルクリックすると、左側に画像選択メニューが表示されます。
画像は「STUDIO」内にある素材を自由に使えるほか、ご自身でアップロードしたものを使うこともできるので十分にオリジナリティを出すことができます。
操作画面上部で「明るさ」「コンスラスト」「ぼかし」などを設定できます。白文字のテキストに合わせるために画像を暗くしたい時は「明るさ」を0.5以下にすると良いでしょう。
画像編集時の注意点
テンプレートを編集する際の注意点として、複雑なボックス配置で画像の重ね順が下になっていると画像部分をクリックしても重ね順が上になっているボックスが選択されて編集できないということが起こります。
レイアウトの構造上、一番下になる画像は最初に配置することが多いので後から編集する際にやりづらくなってしまうのですが、そんな時は重ね順が上になっているボックスを少しずらして画像がクリックできる状態にすると編集しやすくなります。（※ずらしたボックスの位置は後で戻します）
操作に慣れた後に白紙から作るとこのような問題は起きにくいのですが、既に出来上がったデザインを編集する際にはご注意ください。
リンクの編集
ボックスをクリック→ボックス右上に出てくる青色の矢印アイコンをクリックでそのボックスにリンクを貼れる設定画面が表示されます。作成済のページまたはURL直打ちから選ぶことができます。
下層ページの編集
「テンプレートから作成」を選択した場合、トップページ以外の下層ページデザインも作成済となっています。サイトトップ部分の左上に表示されているリンクをクリックすることで別ページに切り替わります。
ライブプレビュー
編集画面右上の「ライブプレビュー」をクリックするとプレビュー専用URLが発行されます。公開前に編集しながらデバイスごとの表示をチェックできるので作業が捗ります。
サイト公開機能について
編集画面右上の「公開」をクリック→ドメインを決めればサイトの公開が可能。「STUDIO」がサイト公開に必要なサーバー環境を用意してくれているため、別途サーバーを契約する必要はありません。
基本無料のプランだと「https://（任意のサブドメイン）.studio.design」というサブドメインでのサイト公開となります。独自ドメインを使いたい場合は月額980円～の有料プランをご検討ください。
「STUDIO」の有料プランについて
基本無料のプランでは公開サイトに「STUDIO」のリンク付きバナーが強制表示されるほか、独自ドメインの使用ができません。本格的にビジネス利用するのであれば、最低でも月額980円～のBASICの利用を推奨します。
まとめ
入力、マウス操作、ドラッグアンドドロップだけでサイトを作成できるツールは様々なものがあり、どれも使い勝手がよく一強と呼べるものはないかもしれません。
そんな中で「STUDIO」の優位点を挙げるとすれば、（慣れは必要ですが）ボックスを組み合わることで最先端のオシャレなレスポンシブデザインを簡単に作れてしまうことです。このボックスは慣れるまで少し苦戦するのですが、理解度が高まるにつれて実現できる幅がかなり広いことに気づきます。
このようなツールには好みもあるかと思いますので、少しでも興味を持ってくださった方はぜひ一度触ってみてくださいね。
