[HTML] ボタンのアイコンを追加・変更する方法
Bootstrap5のボタンをそのまま使用するのではなく、アイコンをつけたい場合もCSSコードを追加することなく実装可能です。 このページではボタンにアイコンを追加・変更する方法を紹介します。 ボタ…
2024 / 08 / 20
LP-UIKITの使い方について解説します。レイアウトを3列から2列にしたり、画像のサイズを変更したり実際にデザインテンプレートを作成する方法を紹介します。
Bootstrap5のボタンをそのまま使用するのではなく、アイコンをつけたい場合もCSSコードを追加することなく実装可能です。 このページではボタンにアイコンを追加・変更する方法を紹介します。 ボタ…
2024 / 08 / 20
![[HTML] Webサイトに塗りつぶしや画像の背景を追加する方法](https://storage.designup.jp/blog/uikit/uikit-html-background-04.png)
おしゃれなWebサイトによくある背景画像はレイアウトがずれていたり、サイズ調整されていますが、基本的なレイアウト方法がわかればやり方自体は簡単です。 このページではHTMLで作ったWebサイトに塗り…
2024 / 08 / 18
![[HTML] Bootstrap5のCSS変数でスタイルをカスタマイズする方法](https://storage.designup.jp/blog/uikit/uikit-html-css-variables-01.png)
LP-UIKITのコンポーネントやテンプレートはBootstrap5に対応したHTMLでコーディングされています。 このページではCSS変数をカスタマイズして新しいテーマを作る方法を紹介します。 C…
2024 / 08 / 16
![[HTML] 3列のコンポーネントを2列や4列に変更する方法](https://storage.designup.jp/blog/uikit/uikit-html-column-01.png)
LP-UIKITで使えるUIコンポーネントは全てHTMLコードが付属しています。コードをコピーするだけでFigmaで作成したデザインを再現することができます。 このページではUIコンポーネントをカス…
2024 / 08 / 15
![[Figma] 配色やフォントなどのスタイルを変える方法](https://storage.designup.jp/blog/uikit/uikit-figma-style-font-01.png)
LP-UIKITではフォントや配色のスタイルがあらかじめ登録されているので、何度も同じ設定をすることなく効率よく一貫性のあるスタイルをつけることができます。 このページでは配色やフォントのスタイルの…
2024 / 08 / 13
![[Figma] ブロックの上下左右の余白を変更する方法](https://storage.designup.jp/blog/uikit/uikit-figma-style-space-07.png)
Photoshopやイラレの場合、ブロックやコンテンツ間の余白を入れるには必要な分だけ下にずらすことで調整できます。 Figmaでも同じことができますがこのページではオートレイアウトを使った余白の付…
2024 / 08 / 11
![[Figma] ブロックやコンポーネントに背景を追加する方法](https://storage.designup.jp/blog/uikit/uikit-figma-image-bg-06.png)
LP-UIKITではよくあるコンポーネントを大量に登録しているのでブロックを組み立てるだけでデザインができます。 ブロックをカスタマイズして背景画像を入れる方法を紹介します。 Figmaで背景画像を…
2024 / 08 / 09
![[Figma] ブロックの見出しを横に並べる方法](https://storage.designup.jp/blog/uikit/uikit-figma-block-title-02.png)
LP-UIKITではアセットパネルから選んで配置していくだけでページを作れるブロックを使うことができます。 このページではデフォルトでは縦に並んでいるブロックの見出しを横に配置する方法を解説します。…
2024 / 08 / 07
![[Figma] ブロック内のコンポーネントを追加・変更する方法](https://storage.designup.jp/blog/uikit/uikit-figma-add-component-01.png)
LP-UIKITではコンポーネント単体だけでなく、見出しとコンポーネントを組み合わせたブロックを使うことができます。 このページではブロック内のコンポーネントを変更・追加する方法を解説します。 ブロ…
2024 / 08 / 05
![[Figma] コンポーネントをグリッドレイアウトに配置する](https://storage.designup.jp/blog/uikit/uikit-figma-grid-03.png)
LP-UIKITで使える横並びのコンポーネントをグリッドレイアウトに切り替える方法を紹介します。 Figmaのオートレイアウトを維持したまま横並びのレイアウトをグリッドレイアウトにします。 横並びの…
2024 / 08 / 03
![[Figma] 縦並びのコンポーネントを横並びにする方法](https://storage.designup.jp/blog/uikit/uikit-figma-row-component-05.png)
LP-UIKITで使えるUIコ ンポーネントを横並びにする方法を紹介します。 UIはオートレイアウトで作成されているため、基本的には縦並びを横並びに変更するだけですが、修正も必要になることがあるためそ…
2024 / 08 / 01
![[Figma] コンポーネント内の要素を横並びにする方法](https://storage.designup.jp/blog/uikit/uikit-figma-row-element-05.png)
LP-UIKITで使えるUIコンポーネント内の要素を横並びにする方法を紹介します。 コンポーネント内の全ての要素を横並びにする コンポーネントを解除する オートレイアウトで「横に並べる」に切り替える…
2024 / 07 / 30
LP-UIKITで使えるボタンコンポーネントにアイコンを追加したり、別のアイコンに変更する方法を紹介します。 Figmaのオートレイアウトを使うことで効率よくアイコンの配置ができるようになります。 …
2024 / 07 / 28
![[Figma] ボタンやテキストを追加・変更する方法](https://storage.designup.jp/blog/uikit/uikit-figma-button-02.png)
LP-UIKITで使えるUIコンポーネントにボタンやテキストを追加したい場合があります。 このページではFigmaの子コンポーネントにボタンやテキストなどのコンテンツを追加する方法を紹介します。 コ…
2024 / 07 / 26
![[Figma] コンポーネントの画像サイズを変更する方法](https://storage.designup.jp/blog/uikit/uikit-figma-image-size-01.png)
Figmaのコンポーネント機能では、親コンポーネントのレイアウト変更は自由ですが、親をコピーした 子コンポーネントのレイアウト変更は少し制限がかかります。 このページではLP-UIKITで使えるUIコ…
2024 / 07 / 25
![[Figma] 3列のコンポーネントを2列や4列に変更する方法](https://storage.designup.jp/blog/uikit/uikit-figma-column-01.png)
LP-UIKITで使えるUIコンポーネントの中でもCardタイプのコンポーネントは3列になっているものが多く、列数を変更したい場合があります。 このページではUIコンポーネントの列数を簡単に変更する…
2024 / 07 / 23

LP-UIKITのアップデート内容についてはこちらになります。 2024.4.21 v1.7 アセットパネルからUIを選べるようになりました。 HTMLテンプレートにブロックを追加しました。 HT…
2024 / 05 / 21

LP-UIKITのテーマとスタイリングについて解説します。 LP-UIKITではBootstrap5を使用してCSSスタイルを作成しています。 変数の値を変更しているカラーパレットとデフォルトにはな…
2024 / 04 / 20

LP-UIKITののコンポーネントの分類と使い方について解説します。 コンポーネントについて LP-UIKITではFigmaのコンポーネント機能を使ってコンポーネントを作成しています。 コンポーネン…
2024 / 04 / 20

LP-UIKITのFigmaテンプレートを使ったデザインの作り方を紹介します。 デザインについて LP-UIKITではコンポーネント(デザインのパーツ)を組み合わせてデザインを作ることができます。 …
2024 / 04 / 20