お弁当用グリッド（アップル・ブリーズ）：弁当用グリッド
Bento Gridsスタイルは、ミニマリズム、明快さ、高度な整理整頓を特徴とするビジュアルデザインスタイルで、モダンなウェブやモバイルアプリのインターフェイスによく見られます。コンテンツをきちんとグリッド化されたモジュールに分割し、それぞれにアイコン、見出し、短い説明を配置することで、料理のセクションがある弁当箱のようなレイアウトを実現しています。このスタイルでは、ホワイトスペース、整列、一貫性が強調され、ソフトな背景色とシャープな前景要素とのコントラストが、クリーンで快適な読書体験を生み出します。例えば、個人のブログやポートフォリオのページでは、Bento Gridsはプロジェクトのプロフィールや記事の要約、スキルのラベルを異なるサイズのカードに表示し、全体的な秩序と美しさの視覚効果を生み出します。
キューの単語参照
モダンでミニマル、ハイエンドな製品／サービスのローンチページをデザイン。Bento Gridスタイルのレイアウトで、すべての重要な情報を1画面内にコンパクトに表示します。
コンテンツの要点： [コンテンツの要点をここに記入
デザインの要件
1.弁当グリッドのレイアウト：異なるサイズのカードをグリッド状に並べ、それぞれに特定のカテゴリーの情報をコンパクトに、しかし過密にはならないようにレイアウトする。
2.カードデザイン：すべてのカードは、角が丸く（ボーダー半径20px）、背景が白／ライトグレーで、微妙なシャドウ効果があり、ホバーしたときにわずかに上向きに浮き上がる効果があること。
3.配色：ミニマリスト的な配色で、背景は主に白／ライトグレー、アクセントカラーとしてグラデーションカラーを使用（例：ライトパープル#C084FCからダークパープル#7E22CEなど、特定の色を指定することも可能）。
4.タイポグラフィの階層
- 大きな太字の数字／見出し：グラデーションカラーを使用し、重要なデータポイントや大見出しを強調する。
- 中・小見出し：カード見出しの場合、コンテンツのカテゴリーを明確に示す。
- 小テキスト：説明的なテキストはグレーを使用。
5.コンテンツの構成
- 最上段：主な告知、製品の特徴、性能指標、または主なセールスポイント
- 中段：製品仕様、技術的詳細、機能的特徴
- 下段：ユーザーガイド、結論／行動喚起
6.視覚的要素
- シンプルなアイコンで特徴を表す
- 比較データを示すプログレスバーやチャート
- グリッドやカードレイアウトで視覚的なリズムを作る
- 小さなカプセルに分類された情報を表示するタブ
7.レスポンシブデザイン: ページはさまざまな画面サイズに対応し、モバイルデバイスでも読みやすさを維持できるようにする。
デザインスタイルの参考：
- 全体的なデザインスタイルは、アップルのウェブサイトの製品仕様ページに似ている。
- ホワイトスペースを多用し、シンプルなビジュアル要素を使用する。
- 図や主な特徴を強調し、長いテキストは減らす。
- 重要なデータを強調するためにグラデーションカラーを使用する
- カード間の間隔を適切に取り、視覚的に明確に分けるケーススタディ
Figmaがデザイン原案を微調整
使い方の公式チュートリアル：Figmaラーニング・パス - 基礎入門、中国語チュートリアル - Figma 中国語コミュニティ
ブラウザプラグイン 中国のプラグインのインストールとダウンロード：FigmaCN - Chrome ウェブストア
クライアント（推奨）：Figma 中国語 + インストール・チュートリアル - Flying Book Cloud ドキュメント
まず、今回使用するFigmaのコアプラグインhtml.to.designを探します。 どのFigmaファイルでも、下にあるタブバーの丸で囲ったアイコンをクリックして検索してください。
インポートしたいページのURLを入力して、インポートボタンをクリックしてください。
まず、タイトルのヘッダーもカードに追加して与えたいが、今回はヘッダーの幅を求めることにした。 ヘッダーの幅は、以下のすべてのカードの幅を足したものより広いので、まず、その幅を1472pxに統一した。
我々は彼のコンテンツなしで、次のグレーのカードのスタイルをコピーしたい後、ちょうど下のランダムなグレーのカードを選択し、右クリック - コピーして、行のプロパティをコピーして貼り付け、貼り付けは、ヘッダーカードの選択と同じですプロパティを貼り付け、あなたはヘッダーにもカードを持っていることがわかります。
モデル・スケールのカードを選択し、Optionボタンを押しながら、バイモーダル・トレーニング・カードの幅が398で、24pxの間隔が必要であることがわかる。
つまり、モデル・スケールのカードの幅は、350+398-24でなければなりません。
最後に、エクスポートする前の最後のステップを行う。いくつかの問題の余白の周りのカード全体は、左と右が非常に広く、上と下は非常に狭いですが、我々はそれらを同じにしたい、今回我々はちょうどhtml-Bodyレイヤーを選択する必要がありますし、スペーシングの赤いボックス部分は、その上に均一な32に変更されます。
上のショーケースの画像のように、画像にグラデーションの枠線をつけたい場合は、postspark (https://postspark.app/screenshot)のようなツールである。
