👤
読み込み中...2025/08/04 20:36

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件)
けんすうさんの回答 | webアプリの開発をAIエージェントにお願いしていますが、なんだか素人感の拭えないデザインになってし... | OpenPrompt | OpenPrompt