kn

多分デザイナー。ただいまノーコード研修中。 気づいたこと所感などを備忘録も兼ねてのんび…

kn

多分デザイナー。ただいまノーコード研修中。 気づいたこと所感などを備忘録も兼ねてのんびりまとめています。

【STUDIO】順番に幕が上がるアニメーションの実装

はじめにノーコードツール「STUDIO」を使ったうえで得た知見ををメモも兼ねてご紹介していきます。 アニメーション紹介第二弾！ 今回は以下のような順番に幕が上がるオープニングアニメーションの制作手順をまとめていこうと思います！ 前回はこちら 制作手順1.セクションの準備 始めにセクションを作っていきます。 画面目一杯に表示、動かしたいので前回同様それぞれ縦幅は100vhに設定しておきましょう。 この時に2つを一緒のグループにしておくと後々幕の部分を絶対配置しやすいです

kn

    • 【CSSアニメーション】プロパティについて

      STUDIOでCSSを埋め込んだループアニメーションを使おうとしたけどプロパティの知識が飛びすぎていたのでメモがてら書いていきます。 animationプロパティとは基本的に@keyframesとセットで使用。流れとしては 1：@keyframesで最初から最後（0％から100％）の挙動を設定 2：animationプロパティを呼び出し動きの詳細を適用させる 基本の書き方 .アニメーションを付けたいクラスやID名 { animation-name: sample; a

      kn

      • 【STUDIO】幕が上がるようなアニメーションの実装

        はじめにノーコードツール「STUDIO」を使ったうえで得た知見ををメモも兼ねてご紹介していきます。 突然ですがWebサイトを訪問時、劇場の幕があがるようなフワッとしたアニメーションを見たことありますか？ 実はあれ、STUDIOでもできちゃいます。という訳で今回は以下のようなオープニングアニメーションの制作手順をまとめていこうと思います！ 制作手順1.セクションの準備 始めにエディタ上に該当するセクションを作っていきます。 メインビジュアルは画面目一杯に表示、動かしたいの

        kn

        • 【STUDIO】要素編

          業務や研修を通じてわかったことをメモに残していきます こんかいは要素メインに。基本編は以下。 <section>、<div>の違いsection 背景の横幅と中身の要素が配置される横幅が違う 💡ページの一部だけ背景を変える時などはこっちを使うといいかも div 背景の横幅と中身の要素が配置される横幅が同じ 💡右のプロパティパネルから<section>にタグ変更できるので用途によって使い分ける ヘッダーヘッダーを固定したい（モバイル版とか） 「相対位置」などを選

          kn

        【STUDIO】順番に幕が上がるアニメーションの実装

        kn

          【STUDIO】CMSでテーブル（表）をつくる

          CMS上で表を作るまず新しいモデルを記事タイプで制作。 新規作成で記事内に表をつくっていく コンテンツ内の＋ボタンからテーブルを選択。 行見出しテーブル選択時にでる左のマークを押し見出しの有無を選択 （右端ので中央揃え等の調整も可能！） 行部分の色が濃くなったらOK。データを入力していきます。 列見出し行と選択箇所が違うだけ。 STUDIO上に配置してみるページ追加をクリックした後、動的ページ（CMS）を選択。 モデルを選択する画面が出たらテーブルが書いてある

          kn

          【STUDIO】CMSでテーブル（表）をつくる

          kn

          【STUDIO】CMS備忘録

          CMSって？「Contents Management System：コンテンツ・マネジメント・システム」 専門的な知識がなくても、コーディングが出来なくてもサイトの制作・運用ができてしまう！ また、コンテンツをデータベースとして管理ができ、リストやカードレイアウト、テーブル等希望のレイアウトにコンテンツを呼び出し、紐づけて表示する事が可能！ STUDIO CMSとは コンテンツの管理：CMSダッシュボード サイトでの見え方調整：デザインエディタ これらを用いて更新が起こ

          kn

          【STUDIO】CMS備忘録

          kn

          【Adobe】備忘録

          Photoshopスマートオブジェクトとは 「縮小と拡大を繰り返しても、劣化をしない画像データ」 フォルダからドラッグアンドドロップすると勝手になるけどしっかり確認する オブジェクトを中央ぞろえする 1　揃えたいオブジェクトのレイヤーを選択 2　ctl+Aで全選択、ウィンドウズ上部のメニューからそろえる オブジェクト（グループ）を移動させたい 選択モードで該当部分をクリック 上の方にタブメニューがある（基本はレイヤー） タブをグループに変更したら移動できる！ il

          kn

          【Adobe】備忘録

          kn

          デザイン業務で学んだことメモ

          デザイン・理論だっていれば要望と少し異なっているデザインだとしても提案してみる ・人物写真2人は大きすぎると対談の雰囲気になってしまうため用途によって大きさを考える。 ・「〇日開催オンラインセミナーレポート①」→「（アイコン等設置）レポート①　〇日開催オンラインセミナー」など読みやすい区切りを模索する ・トンマナ意識！！色合いとかマスクかけすぎとか ・写真はそのまま使わない！明るさやレベル補正必須。生成拡張も。 バナー ・配置したコンテンツの上下左右の余白は均等を

          kn

          デザイン業務で学んだことメモ

          kn

          【STUDIO】基本編

          業務や研修を通じてわかったことをメモに残していきます 今回は前提知識というか全体的に知っといたほうがいいことというか。 要素系は下記です。 基本構造div選択後もsectionやmainに変更できるから階層さえしっかりしてればOK FigmaからSTUDIOに移行するときFigmaから一気に持っていこうとすると｢ボックスの親子関係が保存できる最大の深さを超えたためデータを保存できません。｣とエラーが出る可能性。 →セクションごと、部品ごとにやる方が吉（リストにしたりするし

          kn

          【STUDIO】基本編

          kn