Smithery is now a part of Arcade.dev! Read more in our announcement here
Apple の Human Interface Guidelines に準拠したデザインを作成します。iOS、iPadOS、macOS、watchOS、tvOS のデザインシステム、コンポーネント、レイアウト、タイポグラフィ、カラー、アイコン設計を行う際に使用します。UI/UX デザイン、アプリ設計、プロトタイプ作成時に最適です。
Apple の Human Interface Guidelines (HIG) に準拠した、洗練されたユーザーインターフェースデザインを作成するためのスキルです。
以下のような場合に使用してください:
.systemBlue、.systemGreen などを優先Navigation Bar
Tab Bar
Buttons
Lists
Cards
1. 価値を明確に示す
2. 必要最小限の情報を求める
3. スキップ可能にする
4. インタラクティブなチュートリアル
1. ラベルは常に表示
2. プレースホルダーは例示に使用
3. インラインバリデーション
4. エラーは具体的に説明
1. 検索バーは目立つ位置に
2. サジェストと最近の検索を表示
3. リアルタイムフィルタリング
4. 結果のないケースを処理
このスキルが起動された場合、以下の手順に従ってください:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationStack {
List {
ForEach(items) { item in
HStack(spacing: 12) {
Image(systemName: item.icon)
.font(.title2)
.foregroundStyle(.blue)
.frame(width: 28, height: 28)
VStack(alignment: .leading, spacing: 4) {
Text(item.title)
.font(.headline)
Text(item.subtitle)
.font(.subheadline)
.foregroundStyle(.secondary)
}
}
.padding(.vertical, 8)
}
}
.navigationTitle("アイテム")
.navigationBarTitleDisplayMode(.large)
}
}
}
struct PrimaryButton: View {
let title: String
let action: () -> Void
var body: some View {
Button(action: action) {
Text(title)
.font(.headline)
.foregroundStyle(.white)
.frame(maxWidth: .infinity)
.frame(height: 50)
.background(.blue)
.clipShape(RoundedRectangle(cornerRadius: 12))
}
.padding(.horizontal, 16)
}
}
extension Color {
static let appBackground = Color(.systemBackground)
static let appSecondaryBackground = Color(.secondarySystemBackground)
static let appLabel = Color(.label)
static let appSecondaryLabel = Color(.secondaryLabel)
static let appAccent = Color(.systemBlue)
}
struct CustomControl: View {
@State private var isSelected = false
var body: some View {
Button {
isSelected.toggle()
} label: {
Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
.font(.title2)
.foregroundStyle(isSelected ? .blue : .secondary)
}
.frame(width: 44, height: 44) // 最小タップ領域確保
.accessibilityLabel("選択")
.accessibilityValue(isSelected ? "選択済み" : "未選択")
.accessibilityAddTraits(isSelected ? [.isSelected] : [])
}
}
問題: ダークモードでカラーが適切に表示されない 解決策: ハードコードされたカラー値を使用せず、システムカラーまたはアセットカタログで Light/Dark バリアントを定義
問題: Dynamic Type でレイアウトが崩れる
解決策: 固定サイズではなく、.fixedSize()、.frame(minHeight:)、.lineLimit() を適切に使用
問題: タップ領域が小さすぎる
解決策: 視覚的なサイズが小さくても、.frame(width: 44, height: 44) でタップ領域を確保
問題: VoiceOver で要素が正しく読み上げられない
解決策: .accessibilityLabel()、.accessibilityValue()、.accessibilityHint() を適切に設定
このスキルは最新の HIG (iOS 17、macOS 14 以降) に基づいています。定期的に公式ドキュメントを確認し、最新のベストプラクティスに従ってください。
