ポートフォリオサイトにいったんめどがついたので、制作プロセスをまとめておきます。

なぜポートフォリオサイトを作ったか

• これまでの成果物をまとめておきたかったため

• 自他社いずれにも提示できるサイトを持っておきたかったため

• 転職という選択肢に備えておくため

なぜあえてのSTUDIOか？

存在は知りながら本格的に使ったことがなかったSTUDIO。
利用した理由はこちらです。

STUDIOでの制作依頼に応えられるようにしておきたかった

一番の理由は、STUDIO制作代行など、お仕事としてSTUDIOでの制作も対応できるようにしておきたかったことです。
だいたいなんでも作れる状態にレベルアップできました。

静的サイトだと完成まで時間がかかりそう

こちらも大きな理由です。
「いや自分コーディングできるんやから作ろうや」と静的サイトを作り始めはしましたが、「この調子で1日平均約11時間働いて、帰ってからすぐにデザインの学習をして、船こきながらこのペースで静的サイトひとつ作り上げる…って全然完成しなくない？」と気づきました。

WordPressはメンテなど時間もお金もかかるので眼中に入れませんでした。

「だったらやっぱりブラウザで編集してそのままリリースできるSTUDIOだ！」 ということでSTUDIOにしました。
手段はなんであれ、とにかく早くリリースして結果を出す。 これを目指しました。

ただ、制作前の時点でTeleportHQの存在を知っていれば静的サイトも完成していたかもしれません…。 でもいいよねSTUDIOマスターしたもんね！できること増えたもんね！

所要時間

• Figmaでのモック制作： 1日1-3時間（まちまち）×約14日

• STUDIOでの制作＋素材制作： 1日1-3時間（まちまち）×約30日

学習方法

1と2は同時並行で行いました。

1. 公式のチュートリアル動画をさらっと観る

ごはんを食べながらさくっと全編観ました。1.25倍速・約2食分で観終わりました。めっちょ分かりやすい。

2. Figmaでモック作成

STUDIO直でモックも作ってしまえばいいか！と思いすぐにSTUDIOを触りましたが、全部作りきってしまうとあとから微調整するときに面倒そう…。ということで別途モックを作りました。
…とはいえ、ここからさまざまな変更を加えたため、現状とかなり異なっています。

3. 実際にSTUDIOを触って作ってみる

以下のような流れで作っていきました。
まずは「デザインエディタ」で全固定ページを作成
↓
「CMS」で投稿記事を作成
↓
「デザインエディタ」に戻ってCMSのテンプレートを作成
↓
レスポンシブの設定（5段階）
↓
アニメーションの設定
↓
お問い合わせフォームの送受信設定
↓
404ページの作成

4. いちど作ったサイトを修正しまくりんぐ

この修正の段階でどんどん操作が早くなりました。

勤務先が分かるため、noteではURLの公開を割愛いたします。

初めてSTUDIOで制作してみて気づいたこと

チュートリアルを丁寧に読み解けばなんとかなる

本や公式以外のサイトは利用しませんでした。
とにかく公式を読んでその通りに操作する。これが一番早くマスターする方法です。

HTML/CSSの知識がなくても作れることは作れる

ネットで「STUDIOはHTML/CSSの知識がないと厳しい」的なお話をちらっと拝見した記憶があります。
…が、一概にそうとは言えないと思いました。

都度「STUDIO 角を丸くする」「STUDIO 影をつける」などと、
「STUDIO＋したいこと」でググればなんとかなります。 操
作場所が分かればやりたいことはやれます。私も操作場所が分からずめちゃググりながら作りました。

ただマージン・パディング（いずれも余白に関するスタイルの指定）の使い分けだけマスターしておくと、特にレスポンシブ調整（デバイスの幅ごとに見た目を変えること）のときにかなり作りやすくなると思います。

「STUDIOはググり力がないと厳しい」といえるかもしれません。
（ただググり力はコーディングやプログラミングをやる中で鍛えられる面もあります）

余白感が鍛えられる

分かりやすいサイトの要はやはり余白。
日々コツコツと余白調整する中で、「これだけ余白とればいいんやなー」という感覚が徐々に鍛えられました。

他のサイトもたくさん作りたくなった

STUDIO楽しいです。 操作・機能がとてもシンプルなので、慣れればストレスがほとんどありません。ノーコード・ノーストレス。

次にやること

• 現時点ですでに直したいところが出てきているので直し続けます。

• いろいろな方からフィードバックをいただいて、サイトを育てていきます。

• TeleportHQをマスターしてFigmaモック直でサイトを作ってみます。

• STUDIOでも2サイト目を制作します。