アットフリーク

COLUMN コラム

Webサイト制作

初めて「STUDIO」を使ってサイトを作成してみました

こんにちは。

アットフリークWebデザイナーのAです。
普段はデザイン専門でコーディングはコーダーにお任せしていますありがとうございます。

筆者のコーディングスキルは「たぶん簡単なサイトとかLPならつくれるんじゃないかな・・・たぶん(たぶん)」という最低限のHTML/CSSの知識があるくらいの赤ちゃんレベルですすみません。

そんな筆者が今回「STUDIO」を使ってサイトを作りに挑戦してみました!

そもそもSTUDIOとは?

STUDIOとはWeb上でコードを書かずにサイトが作れてしまうサイト作成ツールです!


https://studio.design/ja
 
 
 

なんと無料で使える!

無料で始められ、無料で公開もできちゃいます!

※無料プランで公開した場合左下に常にこのバナーが表示されます。

■料金プランは3つあります。

料金があがるほどできることが増えていきます。


 
 
 

テンプレだけじゃない!自由にデザインできる!

白紙の状態から自分の好きなようにデザインができます。

オシャレなテンプレートも揃っているのでデザインに自信がない方でも安心。


 
 
 

画像やアイコンが豊富!

ダウンロードなしでその場で使える画像やアイコンが豊富に揃っているので、素材を持っていなくても大丈夫です。


 
 
 

900種類以上のフォントが使える!

Google Fontsと連携しているのでオシャレなフォントも選び放題!


 
 
 

わからなくなったらチャットで相談できる!

使い方の説明は公式ガイドやYoutube動画があります。

STUDIO公式ガイド
動画講座

それでもわからない場合はチャットで相談することもできます。

とりあえず始めてみる

公式ガイドや動画を少しみたところで、

「直接いじらなければわからない。」

という結論に至りよくわからないまま始めてみることに。
 
 

ボックスレイアウトでつくっていく

大枠のボックスの中に画像やテキストを配置してどんどんボックスを下に並べていく感じ(言葉での説明が難しい)。

配置の操作も簡単。

最初のうちは「???」ってなったりもしますが
いじっていくうちにだんだん理解できてきます。
とりあえず触ってみることが大事!

白紙から作成してわからなくなったらテンプレートを見てみるのもよいです。
 
 
 

最低限HTMLタグは知っておこう

コードを書く必要がないとはいえ、タグの選択欄もあるので、
最低限のタグの意味を知っておいた方がスムーズにつくれるだろうなと思いました。

margin(ボックス外側の余白)とpadding(ボックス内側の余白)の違いは絶対理解しておきましょう。


 
 
 
ある程度いじってコツがつかめてきたので実際にサイトを作ってみることにしました。

サイトを作る

ネタが思いつかなかったのでアットフリークのサイト(https://www.at-freak.jp/)をリデザインしてみることにしました。

白紙からつくることにしたので予めデザインを決めておきました。

デザインが決まった状態から始め、数時間で見た目だけは簡単に作ることができました。
本当に簡単でびっくり。

ただこの時点ではPCサイズのみなので、タブレット・スマホに対応したサイズの物も作っていきます。
 
 
 

レスポンシブも簡単につくれる!

PC・タブレット・スマホと、スクリーンサイズごとにレイアウトを変更できるので簡単にレスポンシブサイトが作れます。

それぞれのレスポンシブモードで作成した変更したレイアウトは他のスクリーンサイズに反映されません!

デバイスごとにボックスの表示・非表示も切り替えられます。


 
 
 
そしてあれこれ調整してこんな感じにトップページのみサイトデザインができました。


 
 
 
ここまで数時間でできてしまったのでついでにCMSにも挑戦してみることに!

CMSを使ってみる

CMSとはContent Management Systemの略で、ウェブコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称です。(wikipediaより)

簡単に言うと最新情報とかコラムとか更新が必要なところにつかわれているやつです(雑)。
 
 

CMSページを作る手順

あくまで自分なりに作ってみた手順です。(他にいい方法があるかもしれません…)

①記事を作成

ダッシュボードで記事に必要なもの(タイトル・画像・見出し・タグ・カテゴリーなど)を選択して記事を作成。


 

②記事詳細ページ(動的ページ)を作成

記事のタイトルや見出しのデザインなど見た目を整えます。
 

 

③記事一覧ページを作成


 

④トップページのCMS導入部分を作成

こんな手順で作りました。
最初は本当にわからなくてCMSを使ったテンプレートの構造を見て真似しながら作っていきました。

困ったらテンプレートを見よう!
 
 
ここまできたらフォームページも作ってみたい!

ということでフォームも作ります。

フォームを作ってみる

フォーム用のパーツが用意されているので左側から使いたいものを持ってくれば簡単に作成できます。デザイン変更も可能。
セレクトボックスの中身は右側で設定。枠内に打ち込んでいくだけなのでこれも簡単です。


 
 
ここまで作って満足したので、各ボタンのリンクを設定していよいよ公開!

作ったサイトを公開してみる

では作成したサイトを公開します。

公開はボタン一つで完了!


 
 
さっそく公開したサイトを見ました!
 
 
 
 
───ここで残念なことに気づきます。

なんと無料プランは公開できる記事が5件まで!(作成時料金プランの内容を見ていませんでした!)
欲張って18件も投稿していたのに表示されていません・・・。

なぜここまで気が付かなかったのかというと、ライブプレビューでは全件表示されていたからです。

料金プランはちゃんと見ましょう・・・。
PROプランだと1000記事いけるそうです。
 
 
ということで、
表示件数が減り少々物足りなくなってしまいましたが
制作したサイトがこちらになります!

https://atfreaktest.studio.site/

※CMSを使った所(NEWS・COLUMN・PORTFOLIO)とお問い合わせ以外の下層ページは
作成していないので本物のアットフリークのサイトに飛びます。
※ブラウザチェックをしていないのでうまく表示されないデバイスがあるかもしれません。
 
 
いかがでしょう?
初めてにしてはそこそこちゃんとしたものが作れているのでは?

まとめ

・とりあえずいじってみる
・最低限のHTMLの知識は必要
・プランの条件は要確認
・テンプレートを活用しよう

こんな感じですかね。

STUDIOはバリバリコーディングができない筆者にとってはとても便利なツールでした。

STUDIOすごい!という気持ちとコーダーの皆様いつもありがとございます!という気持ちでいっぱいです。

今後さらに機能が増えるというSTUDIOの進化が楽しみです!

よく読まれる記事



CONTACT お問い合わせ