Column– category –

こんにちは！会社員クリエイターのこばたです。 近年、Webサイトが作れるノーコードツールが増えてきている中で、どのツールを使用すれば良いかわからない等の迷ってい...

STUDIOの基本、サイズ単位。各サイズ単位（px,%,auto,flex,vh）の特徴と使い分けについて網羅的に解説しました。サイズ単位を適切に設定できるとレスポンシブ設定時の負担が大幅に軽減されます。各サイズ単位について理解して、適切に設定できるように覚えておきましょう。

LottieFilesを利用してSTUDIOで作成したWebサイトにアニメーションファイルを埋め込む方法を解説します。LottieFilesの説明から、実際にSTUDIOに埋め込んで、カスタマイズ設定する方法まで解説しています。アニメーションの表現の幅を広げるためにぜひ覚えてください。

STUDIOで新しく追加されたグラデーションカラーのアニメーションの使い方を解説しています。動画や写真も使いながら解説しています。実装方法は非常にシンプルですが、ワンポイントアニメーションとしてかなり重宝する機能ですのでぜひ使いこなしてみましょう。

コンポーネント機能について、設定方法と活用シーンを画像を用いながら解説しました。サイトのページ数が増えるほど、コンポーネント機能を活用するメリットは大きくなります。本機能を使いこなすことでWebサイトの作成スピードが上がるだけでなく、デザインの一貫性も保つことができます。ぜひ本記事を読んで、使いこなしましょう。

STUDIOの重ね順の使い方を解説しました。非常に使い方はシンプルですが、重ね順を使いこなすことで、デザインに一工夫を加えることができます。重ね順を利用して、Webサイトでよく見かける「スクロールに影響されず背景画像が表示される」レイアウトも併せて解説しています。

相対、固定、絶対位置に関する概念と実際の活用例を解説しました。「固定位置と絶対位置の違いってなんだろう？」「固定位置にしたいのに、選択メニューに絶対位置しか出てこない…」などの配置によるお悩みを本記事で解決します。配置方法は基本的な概念なので、必ずマスターしておきましょう。

STUDIOの機能のひとつ「ブレンドモード」の全ての機能と効果を画像を使いながら解説しました。意外と知られていませんが、ブレンドモードを使いこなせると面白いオブジェクトや画像を作成することができます。デザインよりの機能なので使いこなせることができれば、サイトクオリティをぐんと上げることができます。

STUDIOの基本機能だけで、動きのあるメタボールオブジェクトの作り方を解説しています。ブレンドモードやフィルターを活用するため難しく感じますが構造はシンプルです。覚えておくだけでSTUDIOでの表現の幅が広がるでしょう。ぜひ遊びながら使い倒して下さい。

カスタムコードを利用して、STUDIOでアコーディオンメニューを実装する方法を解説しています。アコーディオンメニューは、クリックすると隠れた詳細画面を表示することができ、スペースの節約やユーザビリティの向上などのメリットがあります。サンプルコードを用意しているのでコピペで簡単に実装できるようにしています。