見出し画像

Daily UI #035（Blog Post）

shimaenaga

Daily UI 35日目のお題は「Blog Post」。
ブログのモバイル画面を制作します。


制作過程

今回は4時間弱くらいでした。

制作の流れ
前回の反省点の確認：1分
リサーチ：39分
要件定義：15分
必要な項目を考える：8分
ラフ：9分
ワイヤーフレーム：1時間18分
ビジュアル：1時間17分
--------------------------------------
計　3時間47分

リサーチ

Dribbbleや既存のブログを参考にしました。

主に参考にしたもの
・Dribbble「blog」
・既存サービス（美術展ナビ, 東京ディズニーリゾート・アンバサダー ブログ, 初音ミク公式ブログ, Slack公式ブログ, BAYCREW’S STORE, goo blog, NewsPicks, note, LINE, Twitter, Amebaブログ, 日向坂46公式ブログ, Hatena Blog）

要件定義

生成AIに要件を詰めてもらいました。今回はCopilotです。

サービス名：Blogify
サービス内容：
Blogifyは、ユーザーが簡単にブログを作成、編集、公開できるプラットフォームです。モバイルデバイスからでも直感的に操作でき、写真や動画のアップロード、リアルタイムのコメント機能、SNSとの連携などが可能です。
サービスカラー：
ミントグリーン、ホワイト、ダークグレー
ペルソナ（作者）：
山田 太郎（32歳・会社員）
・趣味：映画鑑賞、料理、ジョギング
・目標：日常の出来事や趣味についてブログを通じて共有し、同じ興味を持つ人々と交流すること
・週に1〜2回、仕事や趣味に関する記事を投稿
・料理のレシピや映画のレビューを写真付きでアップロード
・読者からのコメントに返信し、交流を楽しむ
・SNSで記事をシェアしてフォロワーを増やす
ペルソナ（読者）：
鈴木 太郎（35歳・会社員）
・趣味：読書、映画鑑賞、アウトドア活動
・目標：興味のあるトピックについての情報を得ること、コメントを通じて作者と交流すること
・通勤中や休憩時間に記事を読む
・興味のある記事に「いいね」やコメントを残す
・お気に入りの作者をフォロー
・記事をSNSでシェア
既存サービスとの差別化要素：
1. クイズ
記事の内容に関連するクイズを埋め込むことで、読者が楽しみながら学べるようにします。例えば、旅行ブログであれば訪れた場所に関するクイズを作成し、読者が自分の知識を試せるようにします。
2. アンケート
読者の意見を収集するためのアンケートを記事内に設置します。例えば、料理ブログで新しいレシピを紹介する際に、読者に「このレシピを試してみたいですか？」といった質問を投げかけることができます。

合わせて、必要な項目も考えます。

項目
・ヘッダー
　　・サービスロゴ
　　・メニュー
・記事タイトル
・投稿日時
・投稿者
　　・名前
　　・アイコン
・本文
　　・クイズorアンケート
　　・説明（上のクイズorアンケートに答えると続きが読めます）
・目次
　　・前の記事
　　・次の記事
　　・一覧へ
・リアクション
　　・いいね（♡）
　　・驚
　　・泣
　　・楽、嬉
　　・コメント
　　・シェア
　　・フォロー
・タグ、カテゴリ、ハッシュタグ

ラフ

ここは割愛。

ワイヤーフレーム

制作したワイヤーフレームがこちら ↓

ビジュアル

もう少し手を加えたのがこちら ↓

軽く色をつけたり整列させたりしました。いいねとリアクションは似ていたので１つの機能にまとめました。

完成

制作した画面がこちら ↓

モックアップに入れたところ ↓

デザインのポイント

アンケート機能

このアンケートに回答するとその時点での票数が表示され、記事の続きが読める仕組みです。TwitterやZoomの投票機能を参考に作りました。より能動的に読んでもらえるかなと思ったのと、既存サービスとの差別化を図るために追加しました。

リアクション機能

記事の最後には、いろいろな絵文字でリアクションを送れる機能をつけました。☺+を押すと他の絵文字を追加できる想定です。Slackの絵文字機能みたいなイメージです。より気軽に反応を送ることができ、投稿者と読者の間で交流が増えるかなと思ってつけました。

あとは、内容的にいいねを押すのはなんか違うから他の反応方法がほしいみたいな意見をTwitterで見たことがあったので、それを具現化するとこんな感じの機能になるのかなと思います。LINEのリアクションも似てますね。

制作してみて

・「フォローする」ボタンは、線より塗りのボタンの方が良かったなと後から思いました。「フォロー中」より「フォローする（まだフォローしていない状態）」の方が目立たせたい存在なので、逆にすれば良かったです。

・背景に色を付けるとラフ感が抜ける、というのは覚えたので、他にラフ感を減らせる方法を見つけたいです。


いいなと思ったら応援しよう！