STUDIO操作方法とテンプレート模写について　その１

ムスビメメンバーの新たな挑戦として、STUDIOの公式パートナー企業meln Inc.のCEOを務められている’はるかな’さんのテンプレート模写をはじめています。

ポートフォリオの量産にNOCODEツールはもはや必須といっても過言ではありません。

記事を作成している現在で25日目。

私ケヤは他のメンバーに先駆けていち早く模写を完成したので、この記事でSTUDIOの操作方法とテンプレートの模写について解説していきます。

はるかなさんのYouTubeでも一部の模写方法について動画が公開されているのですが、ヘッダー部分以降の動画がないため、同じように模写をされている方は参考にしていただければと思います。

１回目では基本操作についてとテンプレート模写の進め方について解説します。

まずは触ってみよう

STUDIOが他のNOCODEツールと比べて優れている点として、複数のプロジェクトを同時進行で作成できるという点が挙げられます。

ムスビメでも、各メンバーが模写を同一アカウントで行うことで、他のメンバーの進捗度合の確認ができるようにしています。

それではさっそく新規プロジェクトを作成していきましょう。

右上の新しいプロジェクトをクリックすると作成したいページの選択画面に遷移します。

テンプレートをアレンジして簡単にWEBサイトの作成をすることもできますが、まずは操作方法に慣れるためBlank Siteを選択します。

はじめにデザインエディターのページに遷移します。

左側の「＞」をクリックすると、ページ、レイヤー、追加のタブが表示されます。

ここではレイヤーを選択します。

後ほど説明しますが、ここでレイヤー構造の確認ができます。

クリックするとその要素が選択され、編集することができます。

上部と右側には追加した要素の詳細が表示されます。

要素の幅やマージン、パディング、リンクなどをそれぞれ設定することができます。

それでは実際に要素を追加してみましょう。

左側の「追加」タブから追加したい要素を選んでページ内にドラッグ＆ドロップで配置します。

配置される位置がグレーの四角で表示されるので任意の位置に配置しましょう。

今回はBoxを選択し配置しました。

右側にBoxと表示されているのが分かります。

タグを切り替えることで「div」以外にも「header」「footer」「main」「section」など設定することができます。

imageを追加した場合は表示する画像のリンクなども設定できます。

要素は外から中に、上から下に積み重ねていくように配置されていきます。

重ね順なども設定でき、上記のようなデザインであれば慣れれば30分程度で作成できます。

フリー画像やGoogleフォント、モリサワフォントも追加費用なしで利用できるのが素敵です。

STUDIOの場合、実際に表示されるページのデザインと中の記事の作成を行うCMSページで構成されています。

こちらがCMSの画面です。

CMSのの編集ページに飛ぶには左上のプロジェクト名にカーソルを合わせると選択肢にCMSが表示されるのでそこをクリックしてください。

デザインエディターの画面に戻りたい場合は右上のデザインエディターというボタンをクリックします。

テンプレートを模写する場合は、先にCMSを模写しておくのをオススメします。

理由は、ページ内の画像や文章をCMSから引用することが多いためです。

テンプレート模写の手順

上記の手順で進めていくとスムーズに模写を進めることができるかと思います。

今回テンプレート模写を、はるかなちゃんねるさんの動画を参考にはじめました。

参考動画として貼らせていただきます。

ケヤ

次回は各要素の設定について解説していきます。