このサイトの作り方 (1) 企画とUIデザイン

このコミュニティサイトは、Djangoというフレームワークを使って1から作りました。今回から10回に分けて、その開発の記録を書いていきます。 まず最初に決めたのは「どんな見た目のサイトにするか」でした。ただの掲示板ではなく、投稿・タグ・いいねがある、Twitterのタイムラインに近い見た目を目指しました。文字だけがずらっと並ぶ無機質なページではなく、誰かの日常が流れているような、温かみのある画面にしたいと考えていました。 配色は、サイト名の「Heaven Portal」に合わせて、ラベンダーがかった白背景に、空色と後光のような金色をアクセントカラーにしています。見出しには明朝体、本文にはゴシック体を使い分けて、柔らかい雰囲気を意識しました。フォントの組み合わせひとつで、サイト全体の印象がかなり変わるので、ここは何度か試行錯誤しました。 投稿一覧のカードデザインは、影を薄くつけて浮かび上がるようにし、投稿者のアイコン・本文・タグ・いいねボタンを1つのカードにまとめています。長い投稿は500文字を超えると自動で折りたたまれ、「続きを読む」で全文表示できるようにしました。 サイドバーには「新着記事」「アクセス数順」「いいね順」を表示し、どのページからでも人気の投稿にたどり着けるようにしています。こうしたデザインの細部は、一度作って終わりではなく、実際に使ってみて感じた「なんとなく使いにくいな」を、都度直していく繰り返しでした。 投稿作成画面についても、最初は文字数の上限をかなり短く設定していたのですが、実際に運用してみると窮屈に感じることが多く、後から思い切って上限を広げました。見た目の美しさと使いやすさは、頭の中で考えているだけでは分からず、実際に自分で触ってみて初めて気づくことが多いというのが、ここまでの一番の学びです。 次回は、投稿とタグの仕組みについて書きます。

いいね数：1

ログインするといいねできます。

#Python #Django #デザイン

投稿日：2026年7月11日14:52