WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

みなさま、Studioはご存知でしょうか。
HTMLなどのコードを使用せず、専門知識がなくてもWebサイト制作が可能なツールです。

WWGでも過去の記事で紹介しています。

関連記事

【2024年版】日本語対応ノーコードツール【オススメ】

専門知識がなくても作れるということは、制作スタッフではないまつやでも作れるはず！
どれくらい使えるのか、実際に作ってみて難易度を検証してみましょう。

最初はユーザー登録

Studioの料金ですが、基本的な機能は無料で利用することができます。（有料のプランもいろいろあります）新規でユーザー登録をしたところ、最初にこんな画面が出てきました。

「チュートリアル…とばしたい…」という気持ちをぐっとこらえて一通り見てみると、画像やテキストの追加・変更の仕方と、マージンの調整方法を教えてくれました。初心者には必要な情報ですが、実際に編集画面に行けばわかった気がするので、見なくてよかったかも……。

チュートリアルがすべて終わると、「新しいサイトを作成」か「テンプレートからサイトを作成」かの選択ができます。

今回は以前デザイナーのコジコジさんが「ワイヤーとデザインの違い」について書いてくれた記事内にあるワイヤーフレームを基に作成してみようと思うので、「新しいサイトを作成」で進めていきます。

関連記事

【ホームページ制作初心者向け】ワイヤーとデザインの違いについて

空白からはじめる

「新しいサイトを作成」を選択しましたが、真っ白な状態からテンプレート、Figmaからインポートまで選択できる画面になりました。

今回はワイヤーフレームがあるので、「空白からはじめる」で作成します。
適当にプロジェクト名を設定して、さっそく作成スタートです！

真っ白なキャンバスの圧がすごい

Canvaでもそうなのですが、テンプレートを使用しない場合の何もないキャンバスの圧がすごい。すでに心が折れかけています。

とりあえず、ワイヤーフレームの上から順番にやっていきましょう。
ページの一番上＝サイトに来た人が最初に見るとても重要な部分です。

Studio内に素材となる写真が豊富にあるので、ビジネスっぽい写真を入れて、テキストを入れて、マージンを調節して…ここまではチュートリアルで見たままです。やっぱり見ておいてよかったです！

保存が自動で上書き更新されるのも、うっかり人間には嬉しいポイントです。

早々に察する

…この時点ですでに察してしまいました。

HTMLやCSSなど、構築のための専門知識はなくても作れるけど、デザインの感性は必須だと。

導入部分で結論が出るというブログにあるまじき事態ですが……画像、フォント、文字サイズや色、余白など、何がいいのかがさっぱりわかりません。ワイヤーフレームがあればなんとかなると思った自分の浅はかさよ……。

しかも、複数のイメージ画像の間にテキストを入れる部分にいたっては、画像の位置の変え方がわからないという悲劇。どうやったら先ほどのキャプチャの位置から動かせるのでしょうか…。ノーコードだからといって直感的に操作できるわけではないようです。

検索やらなんやらで調べてやってみても微妙に何かが違うのかうまくいかず、悪戦苦闘すること1時間弱。やっとこさできました！

ここまでの道のり

1. 白い部分にボックスを追加して、横幅をいっぱい＋縦幅も画像4つが配置できそうな位置まで広げる
2. 画像のボックスを追加すると先ほどのボックスの下に入るので、これをボックスの上までドラッグアンドドロップする
3. 配置を絶対位置に変更すると、好きな場所に置ける！！

長かった…すでにやりきった気持ちでいっぱいです。（愚か）
これがわかれば、あとは同じ形で進めていけるはずなので、テキストを入れていきます。

いったん、ワイヤーフレームに画像を入れただけのものが完成しました。

このままではワイヤーフレームそのまますぎるので、ここからさらにカスタマイズしてデザインにしていく必要があるわけですが、さて、何をどうすればいいのでしょうか。

コジコジさんがかつて記事内で作成したものを参考にすると、制作素人でもサイトが作れるかの検証になりません。

仕方がないので、ChatGPT先生にサポートしてもらいましょう。相談して言われた通りにやります。
さあ！修正点を初心者にわかりやすく教えてくれ！

デザインらしくなるよう調整してみたものの

フォントや余白を言われた通りに触ってプレビューを見てみましたが、ご覧の通りです。さほど変わっていないですね。デザインがなんたるかをわかっていない人間のAI活用はこれが限界なのでしょうか。

あと編集画面より画像がめっちゃ外側にいる…なぜ…。

しかもスマートフォンやタブレットで見たときのことを完全に忘れていたので、モバイル表示にすると完全に終わります。

さっきあんなに苦労してやっと並べた画像が完全に悪さをしています。どうやらレスポンシブにするには相対位置でないとダメだったようです。

ここで私が出した結論がこちら。

コーディングの知識のないデザイナーさんが自分のデザインをサイトの形にまでするのにはいいかと思いますが、デザインもコーディングもできない人間には無理でした！（美術の成績2だったし…）

デザイナーってすごいんだなあと改めて実感しますね。

テンプレートで再挑戦

ワイヤーフレームでイチから作るのは無理だったので、無料テンプレートを使ってリベンジしてみます。

企業向け、個人向け、採用、LPなど、豊富な種類のデザインが提供されているので、用途に合わせて最適なものを選択するだけでOKです。

コーポレートサイトっぽいテンプレートを探し、「エディターで試す」を選択すると、編集画面が表示されます。ただし、この編集画面はサンプルなので、ここから編集することはできません。（わたしは勘違いしました）

画面の右下に「無料ではじめる」ボタンがあるので、そこをクリックするとプロジェクト名入力の画面になり、入力すると本当の編集画面に移ります。

テンプレートなので当たり前ですが、すでに完成されています。
ここから画像やテキストを変更していくのですが、今回は完成品をすでにご用意いたしました。

みなさま、このテンプレート編集にどれくらいの時間がかかったか予想してみてください。
テンプレートを編集するだけだから30分？1時間？

正解は、4時間くらいかかっています。テンプレートを使ったにしてはあまりにも効率が悪いです。

何故そんなに時間がかかったのか？
それは、テンプレートならではのデメリットが原因です。

テンプレートは、レイヤー、グループ化、アニメーション（ホバーなど動きのある表現）など、自力では到底扱えなかった機能を使用して完成状態が作られています。

つまり、「ここを変えたいのにどこを触ったら変わるのかわからない！！」が頻繁に発生します。ええ、それはもう頻繁に。なるべくシンプルそうなテンプレートを選んだつもりでもこの様です。

要素をドラッグアンドドロップしたらレイアウトが崩れてしまったり、普通のテキストだと思ったらCMSだったり、テキストボックスを消そうとしたらセクションごと消えたり、最後まで画像が変えられなかったりします。（ファーストビューの背景画像、結局どうやったら変えられるんだろう）

ちなみに、今回私が編集できたのはトップページだけです。
サブページ（「私たちのこと」などのトップ以外のページのこと）など、メイン以外のコンテンツまでたどり着かずに力尽きました。

テンプレートで、トップページだけで4時間。違うテーマの記事がもう1本書けそうなくらいの時間です。実にもったいない。

まとめ：デザインもコーディングもできない人間には難易度が高い

私の予定では、「ちゃんと作れました！」という記事になるはずだったのですが……調べながらコツコツが苦手な私とは相性が悪かったです。作成中イライラしてしまい、たびたび「おしめえだ～！！」と騒いで企画部のスタッフを驚かせてしまったことをここにお詫びします。

Studioを活用できそうな人

• わからないところを1つずつ調べながら、少しずつできていく過程を楽しめる方
• コーディングの知識のないフリーランスのデザイナーさんで、自分のポートフォリオサイトを作りたい方

ホームページ制作会社に入社して8年目。「制作は制作部のプロに」という分業制のおかげでなんとかやっていけていると改めて実感しました。（デザインのセンスが入社時からほぼ成長していないことも……）

なんだかいろいろ不安になる散々な結果でしたが、ご安心ください。
普段まつやがWeb制作を担当することはありません！（社内でデータや書類の管理をしていることが多いです）

制作会社制作部のプロフェッショナルたちはどんなサイトを作るのか？気になった方はぜひ制作実績もご覧ください。