👤
webアプリの開発をAIエージェントにお願いしていますが、なんだか素人感の拭えないデザインになってしまいます。どうしたらいいでしょうか。
たぶん、デザインルールを日本ぽくするだけでだいぶ改善されると思っていて、、
以下みたいなデザインをしてするだけで、ちょっと変わると思います!試してみてください!
--
1. 🎨 カラーパレット(色合い)
背景色と雰囲気
- 背景色は #e7eff5 を使ってください
- セクションごとに白背景のカードを配置し、影や角丸をつけてスタイリッシュに
- テキストやアイコンが埋もれないよう、コントラストには注意してください
- 余白多め、モダンでミニマルな印象にしてください。
🔤 テキストカラー
- メインテキスト:#2c3e50(濃紺グレー)を使用し、白背景でも背景色でも見やすく
- サブテキストや補足:#5d6d7e(グレーブルー)を使用
- 全体的に色のコントラストを意識し、読みやすさを最優先にしてください
アクセントカラー
- 情報ブロック(ヒーロー、特徴、料金表など)は白背景(#ffffff)のカード型で表現し、影(rgba(0,0,0,0.08))をつけて浮かせてください
余白について
- モバイルでの視認性にも配慮し、余白と行間は広めに設定してください
🔗 アクセントカラーとボタン
- 強調したい箇所(CTAボタン、リンクなど):#007accを使用
- ボタンホバー時:#005f99に変更(視覚的反応をつける)
- ボタンには丸み(6px〜8px)と影をつけ、スタイリッシュに仕上げてください
2. 🔤 フォントとタイポグラフィ
フォントファミリー
- Google Fontsの「Rounded M+」を使用してください(URL)](https://fonts.google.com/specimen/M+PLUS+Rounded+1c)))
- 角が丸いフォントで、やわらかく親しみやすい印象にします
- フォントサイズはモバイルで16px以上、見出しは24px〜32pxを目安に
🧑💻 装飾とアイコン
- Font AwesomeのCDNを読み込み、特徴セクションや料金表などでアイコンを活用してください
- 必要に応じて絵文字も使用可能ですが、使いすぎずシンプルに
サイズ感
ヒーローテキスト:32px〜40px、太め
見出し:24px前後
本文:16px〜18px
キャプションや補足:12px〜14px
タイトル:Bold〜SemiBold
本文:Regular
コメントするにはログインが必要です。
他の回答も見る(1件)