スマホブログ『Simplog』のUIデザイン

はじめまして。こんにちは。
Ameba事業本部デザイナーのサトウ（@sugaar）です。
今回は、9月3日にリリースしたスマホブログ、「Simplog」iOS版のUIデザインについてご紹介させていただきます。

Simplogとは

Simplogは、Twitterのように気軽に投稿し、ブログよりもシンプルに美しく記録するAmeba発のスマホブログです。

おかげさまで会員数10万人を突破(11月7日現在)し、
ユーザーの皆様に満足いただけるよう、日々改善を重ねています。

シンプルで簡単な投稿

Simplogは「シンプル × ブログ」というコンセプトのもと、「シンプルなUIで、いかにユーザー体験をリッチにするか」を追求しました。
「ブログ投稿」というユーザー体験をリッチなものにするためには、その複雑な機能を、いかに分かりやすく、使いやすいものにするかが重要です。

【見せる機能と見せない機能】

Simplogでは当初、投稿画面に以下の機能を想定していました。
・投稿ボタン
・下書き保存ボタン
・画像選択エリア
・テキスト入力エリア
・カテゴリ機能
・ロケーション情報
・他SNSへの同時投稿(Ameba、Facebook、Twitter)

ここから、「アレもこれも」で膨らんだ機能を、ユーザーアクションを想定して「必要な機能」と「あまり必要でない機能」に分けて整理し、複雑な機能をよりシンプルに見せるためにUIをブラッシュアップしていきます。

■下書きボタン

「記事を書く → 投稿」というブログ投稿本来の遷移を優先するために、投稿画面からは無駄なボタンを一切排除しています。スッキリとした簡潔な画面に見せる事で、「ブログを書く」という敷居を下げ、記事を書くユーザーへのプレッシャーを軽減できると考えたからです。
そのため、「下書きボタン」をボタンとして用意せずに、左上の「キャンセルボタン」を押した際のアクションシートを採用しました。
これにより、「キャンセルボタンを押して記事を書くのをやめる」というネガティブな行動に紐付け、より自然なアクションで下書き保存へ促す事ができます。

■ロケーション選択

「どこで」を記録するロケーション選択機能は、テキスト入力エディタの一部に含め、サブ機能として位置づけました。
思い出をより詳細に記録するために便利な機能ですが、「ブログ」というコンセプトで考えた場合、ロケーション情報のみの投稿がレアケースであると判断したためです。
そのため、「テキスト入力のサブ機能」という位置づけで、エディタ機能の一部として取り入れました。

美しいレイアウトでリッチに閲覧

投稿画面をシンプルなものにし、気軽に書いた記事をリッチに見せる方法として、Simplogでは以下にこだわりました。

■写真をキレイに見せる

Simplogでは、写真を最大3枚まで同時に投稿する事ができます。
投稿する写真に対して、複数枚をレイアウトして組み写真を作成できる他、よりリッチに見せるためのフィルター加工が可能です。
また、フィード面での見栄えを考慮し、1枚投稿の場合はあえてトリミング処理を行わずに、そのままの状態で投稿しています。
これにより、縦長の写真をよりダイナミックに見せる事ができ、意図せず写真が見切れてしまうというユーザーストレスを軽減します。

■思い出として残す

日々の思い出を振り返るための機能として、投稿した日が一目で分かるカレンダーと、どんな1日だったかをまとめるページを設けました。
何気なく投稿したものを、1ヶ月や1日として自動的にまとめる事で、ブログに「残す」という行為をリッチに演出する事ができます。
気軽に振り返れるよう、マイページから横フリックでシームレスにカレンダーへ遷移させています。

■他SNSへの投稿を最適な形に

SimplogではAmebaブログはもちろん、Facebook、Twitterなど他SNSへの同時投稿が可能です。
その際、Amebaブログのタイトル指定や、Facebookアルバムへの格納方法など、投稿先に応じて最適な形で見えるよう工夫しています。

■外部投稿時の記事ページをリッチな見た目に

Amebaブログ、Facebook、Twitterなど他SNSへの同時投稿時に、Simplogの記事ページへの導線を紐付けています。
スマートフォン向けの記事ページでは、直接コメントなどのリアクションができる他、気になるユーザーのフォローが可能です。
PC向けの記事ページでは、写真がメインの記事と、テキストがメインの記事でレイアウトを変え、それぞれ最適な形で見えるよう工夫しています。

ユーザーコミュニケーション

ブログを書くモチベーションの1つとして、投稿した記事に対する他人のリアクションも重要な要素です。
Simplogでは、ユーザー間で自然にリアクションできるよう、ナイス・コメントの「気軽さ」と「レスポンスの速さ」について工夫しています。

■ナイスをポップに演出

「ナイス」ボタンを押した際に、「ニコちゃんマーク」をアニメーションで表示させ、ついつい押したくなるような演出を入れています。
また、ダブルタップでナイスがつく裏機能を設け、より気軽なリアクションを促しています。

■「レスポンスが速い」と思わせる施策

ナイスをつけた際に、押した瞬間にフロント側で色付きの画像に切り替え、実際のデータを裏でサーバに送るようにしています。
これにより、パッとリアクション済みのボタンに切り替わったように見えるため、通信待ちのユーザーストレスを軽減することができます。

最後に

最後まで読んでいただきありがとうございます。
まだまだ発展途上のSimplogですが、今後更なる改善を予定しております。
「シンプルさ」にこだわり、よりリッチなサービスを目指して日々進化していきますので、引き続きどうぞよろしくお願い致します。

【Simplog】http://simplog.jp/