89. 話題沸騰中？のmixi2の画面を完全再現してみた！

mixi2の画面って、第一印象は「Xかインスタみたい！」って感じですよね。自分も気になって、UIを観察しながら“それっぽさ”をHTML/CSSで再現してみたんですが、コツは「情報の優先順位」と「余白・線・文字サイズ」を揃えることでした。 まずプロフィール周り。@ayamachalatte のように、表示名→ID→場所（Tokyo, Japan）→自己紹介→URL（mixi.social/〜）の順で並ぶだけで一気にSNS感が出ます。ここはテキストの行間（line-height）と最大幅（max-width）が大事で、自己紹介は2〜3行で自然に折り返すようにしておくと“実在感”が増えました。フォロワー（394フォロワー/315フォロー中みたいな表記）は数字部分だけ少し太字にして、クリックできそうな見た目に寄せるのがおすすめです。 次にアクションボタン。「フォロー」「メッセージ」は角丸・枠線・高さを統一するだけで完成度が上がります。個人的には、ボタンの高さを揃えた上で、左右の余白（padding）を少し広めに取ると“アプリっぽい密度”になりました。 タイムライン（ポスト）部分は、区切り線の色が超重要。真っ黒ではなく、薄いグレー（例：#e6e6e6）で分けると、X風の軽さが出ます。投稿ヘッダーは「名前 + @ID + 13分前」みたいに並ぶので、CSSはflexで組むと楽です。投稿本文（例：初キャンプ体験!!）はフォントサイズを本文として読みやすい大きさにしつつ、上下の余白を詰めすぎないのがポイントでした。 下部ナビ（ホーム/検索/通知/コミュニティ）を作るなら、固定（position: fixed）＋アイコンとラベルの縦並びにすると“それっぽさ”が一気に上がります。通知は未読バッジを付けるだけで再現度が跳ねるので、丸バッジ（小さめ）も用意すると良いです。 最後に注意点。mixi2を“完全再現”する目的でも、ロゴや固有のデザイン要素をそのまま使うと誤解を招くことがあるので、「これは練習用のUI模写です」「非公式です」と一言添えるのが安心でした。自分はLP制作やアニメーション練習の題材として取り組むと、学びが多くておすすめです。