中島健太郎／Studio Ambassador／LEARNED Inc.
@nakashima_1128 • 2,315 subscribers
Studio関連の役立つ情報を投稿（Tipsはハイライトに）￤ Studio Ambassador 大阪府 ￤ Studio Experts ￤ 株式会社LEARNED代表 ￤ スポーツ健康科学修士￤ピラティススタジオ経営（https://t.co/h1oZu57wWw）￤ 現役パーソナルトレーナー→@_knakashima_
Shorts
Videos
GPT-6 Astraを使って、Studio実装の精度を検証してみました📝 結論：実装担当者として即戦力 稼働時間：約17.5時間（HTMLでのデザイン制作、試行錯誤、確認、ツールの応答待ちも含む） モデル：GPT-6 Astraを使用（序盤は補助エージェントも併用し、中盤からは主担当のAstra単独） 進め方： まずはAstraにWebデザインを考えてもらい、HTMLで制作。そのデザインを元にStudioで再現してもらいました。 ※意図的に、Studioの複数の機能を試せるようなデザインにしました。 完全に丸投げではなく時々様子を確認し、必要に応じて方向性や修正の希望を伝え、Astraが実装方法を判断しながら編集画面を操作するという形で進めました。 なお、事前にStudio実装に関するスキルは作成していて、例えば「List: 同じ子構造が3件以上、原本がList、または明示された反復データ。2件だけを理由なくList化しない。」、「Component: Header、Footer、Mobile Menuなど複数ページで同時更新すべきUI。単発セクションを過剰にComponent化しない。」といった内容を入れています。 Studio公式ヘルプについては、事前に全部学習してから開始したわけではなく、「分からない操作や仕様を作業中に随時参照した」とAstraが報告しています。 実は3月頃から、これまでのモデルを使ってStudio実装に何度も挑戦していましたが、ここまでの精度で実装できたのはAstraが初めてで、完全に実用レベルだと感じました。 ■ 観察していて特にすごいと感じたところ - Studio標準のカルーセルを活用し、クロスフェードで切り替わるスライドショーを意図どおりに再現。 - ノイズのかかった質感を再現するために、自主的に「paper-surface.svg」を作成・アップロード。 - オープニングアニメーションは、カスタムコードで実装すると自主的に判断。 - リストのプロパティも正しく接続。 - セクションを複製し、既存の要素を再利用する判断ができていた。 - ボックスの配置やレイヤー構造への理解度がかなり高い。 - 「追従」や「スクロールアニメーション」も使えていた。 - 写真を配置したあと、実機での見え方がイマイチな場合、自己判断で素材の差し替えを実行していた . 標準機能の選択から、素材の作成、カスタムコードで補う判断など、自分で考えて進められていたことが印象的でした。 実務シーンでは、こだわりたいセクションは人間が担当し、並行して下層ページの作成をAstraに任せるという体制も有りだと思いました。 . . ■ 改善の余地 レイヤーを一階層減らせそうな箇所はありました。 （例外的に、と言える頻度。全体としては、かなり適切に組めていました） マージンとパディングの付け方に冗長な箇所がいくつかありました。ただ、余白の持たせ方をあらかじめ規定しておけば、より整理された形で実装できそうです。 . . ■ 実装記録をもとにAstra自身がまとめた振り返り 次回の時間短縮に向けて、まず改善したいのは、実装を始める前の準備です。 見出し・本文・注記のテキストスタイルを登録し、セクションの余白や要素間の間隔も決めてから組み立てます。親ボックスと子要素の両方に同じ目的の余白を持たせないことも、確認項目にします。準備の時間は増えますが、個別に設定してから揃え直す作業や、複製先への修正を減らせると考えています。 難しい演出は、ページ全体を作り込む前に小さく試します。今回は、スクロールに応じて画面全体の色調を変える演出で、途中ではカスタムコードが必要という判断になりましたが、最終的には標準機能の組み合わせで実装できました。先に使える方法を確かめておけば、別の方式を調べたり、組み直したりする時間を減らせたはずです。 その際、動くだけでなく、レイヤー構造や後からの編集のしやすさも確認します。今回うまくいった実装は、設定順序と確認方法を含めて残しておくと次回に使えます。 操作後の確認にも改善の余地がありました。数値を入力しても確定していない、単位変更で数値も変わる、追加した要素が意図した階層に入らない、といった場面です。毎回ページ全体を確認すると時間がかかるため、直後は変更した値や階層を確認し、セクションが完成した段階で全体を見る手順がよさそうです。 次回どこまで短縮できるかは、まだ測れていません。ただ、共通スタイルと余白・階層のルールを先に固め、難しい演出の実装方法を確認してから進めることで、今回発生した手戻りを減らす余地があります。 . . 写真素材はStudio.Stockを使用。 添付の動画はAstraがPythonとFFmpegを使って編集。長時間の操作録画から制作過程を抽出し、完成サイトの撮影、タイムラプス化、背景のぼかし、字幕・クレジットの合成まで行っています。
中島健太郎／Studio Ambassador／LEARNED Inc.31,570 görüntüleme • 1 ay önce
Studioの新機能「Embed Code AI」を使って、画像の無限ループを簡単に実装できました💡 カルーセルを色々触って実装する従来の方法よりも、これが一番簡単で挙動も安定しそうです🙆♂️ 【動画内で試した指示】 4枚の画像が横方向に無限ループするようにしてください。 ↓ 横幅100%にしてください。画像の高さはEmbedBoxの高さ100%になるように。画像は以下のものを使ってください。［4枚分の画像のURLを貼り付ける］ ↓ もっと動きをゆっくりにしてください。 ---- ※動画は再生速度を編集していますので、実際のコード生成は動画よりも少し時間がかかります。
中島健太郎／Studio Ambassador／LEARNED Inc.21,631 görüntüleme • 8 ay önce
【STUDIOのアニメーションに余韻をつける方法】 ✏️実装のポイント ホバーで動きが出る部分の親ボックスは「通常時:横幅をpxで指定」→「inホバー時:横幅を100%指定」 子ボックス（絶対配置）は「通常時:横幅を100％指定」→「inホバー時:横幅をpxで指定」 横幅の設定を入れ替えることで、横に伸びた親ボックスに子ボックスが追従するような動きになります💡 （子ボックスの「位置」もinホバー時に変更しています） ✏️デメリット ボックスの階層が一つ深くなってしまいます。STUDIOには階層の上限があるので、使用する場所によってはそれに引っかかって採用できないことも… 実際のレイヤー構造は添付画像をご参照ください😃 （上段が親ボックス、下段が子ボックスの設定です） #withSTUDIO
中島健太郎／Studio Ambassador／LEARNED Inc.30,291 görüntüleme • 2 yıl önce
【STUDIOのトグル機能を応用して「さらに表示する」で下に伸びるボックスを実装する方法】 長めのテキストが途中からフェードアウトしていって、ボタンをタップしたら続きが下に現れるというものです📃 やや複雑ですが、デザインエディタの設定の動画も載せていますので、参考にしてみてください💡 １．トグルボタンをクリックし、右サイドパネルにて「デフォルトで開く：OFF」「開く操作：Click」「要素外クリックで閉じる：ON」にします。 ２．トグルボックスをダブルクリックし、編集モードに入ります。 ３．ボタンボックスの中に「さらに表示するボタン」を入れます。このボタンは通常の制作時と同じように、ボックスにテキストを入れるやり方でOKです。デフォルトで入っているタイトルとアイコンは削除します。 ４．ボタンボックスの縦幅を0pxにします。 ５．コンテンツボックスの中に新たにグラデーションボックスを追加します。グラデーションボックスはコンテンツボックスと同じ背景色にし、下から上に向かって徐々に透明になるように設定します。このボックスの縦幅は好きな数値でOKです。どのくらいの感じでフェードアウトをかけたいかによって調整してください。サンプルでは120pxとしています。 ６．条件付きスタイルを「クローズ」にして、コンテンツボックスの縦幅を指定します。閉じているときに、本文をどれくらい見せておきたいかによって、好きな数値を設定します。サンプルでは260pxにしています。 ７．一旦、条件付きスタイルの「クローズ」を解除して、通常のトグル編集モードに戻ります。「さらに表示するボタン」の下側にマイナスマージンを付与して、先ほど設定したコンテンツボックスの下のほうに来るように調整します。サンプルでは-420pxに設定しています。さらに透明度を「０」にします（これで展開したときにボタンが透明になります）。 ８．グラデーションボックスを絶対配置にし、上からのマージン＋縦幅＝コンテンツボックスが閉じているときの縦幅になるようにします。サンプルでは、マージン140px＋縦幅120（手順4で設定した数値）=260（手順5で設定した数値）となっています。さらに、透明度を0にします。 ９．再び条件付きスタイルを「クローズ」にします。「さらに表示する」ボタンとグラデーションボックスの透明度を1にします。 これで完成です👏 展開時、ボタンは透明にしているだけなので、元の場所に判定が残っています。 そのため、そこをクリック／タップするとボックスが閉じられることになるので、その点だけはやや注意が必要になります🙏
中島健太郎／Studio Ambassador／LEARNED Inc.19,393 görüntüleme • 3 yıl önce
Daha fazla içerik yok.