Developing Designer's Diary

未経験からUI/UXデザイナーを目指して勉強中です。

Webグラフィック制作物②サラダ専門店のWebサイト(課題)

引き続き、学校の課題として取り組んだWebグラフィックの制作物についてまとめていきます。

 

××専門店のWebサイト(複数ページ)

お題

前回の音楽配信サービスのLPはファーストビューのみ・写真使用禁止でしたが

今回は複数ページのWebサイト、写真使用OKでした。

 

具体的な各ページの構成は以下のように指定がありました。

 

  • ページ1
    • ヘッダー
      • SNSアイコン
    • メインビジュアル
    • ロゴ
    • こだわり
      • こだわりの3つのポイント
  • ページ2
    • 商品紹介
  • ページ3
    • 食べ方(アレンジ可)
      • 3ステップに分ける
        1.〜〜〜
        2.〜〜〜
        3.〜〜〜
  • ページ4
    • 地図と店舗情報

 

制作物

 

私は、「ファッション感度の高い若年層に向けたサラダ専門店」という設定でサイトをデザインしました。

 

トップページ

メニューページ

注文方法の説明ページ

アクセス・店舗紹介ページ

ちょっとサイズが大きくて、見づらくて申し訳ないんですが。

 

若い人向け、中でもファッション感度の高い人向けということで

オシャレ系のブランドのグラフィックで最近よく使われているイメージのある、「New York」という書体をロゴに選びました。

この書体を使ってデザインするのが念願だったので、遂に叶ってよかったです…!

 

ロゴに引っ張られた感もあるんですが、ちょっとアンニュイな雰囲気があるとより今っぽいのかなと思い、全体的に静かで落ち着いたトーンにしています。

(前回の音楽配信サービスの課題で痛感しましたが、にぎやかなトーンのデザインが不得手という自覚もあり、得意分野に逃げてしまった節もあります。。)

 

飲食店のWebサイトで参考にしたのは、

おしゃれサラダ界のトップティア、CLISP SALAD WORKSさんはもちろん

こちらのフレンチレストランも、繊細だけど信頼感のある感じが素敵だと思い、見させていただきました。

 

あと、Webデザインとしては今回参考にしていませんが、アンニュイ感のイメージとしてもともと私の念頭にあったのは

若年層向けの低アルコールカクテルのブランド、koyoiさんです。

koyoiのブランドビジュアル。エモい!!

 

こういう、いまどきっぽいエモいニュアンスを出したいと思っていたのですが

サラダという商材が持つヘルシーさを損なうのもどうなんだろう?と迷い

けっきょくあまりエモいニュアンスは出しきれませんでした。

強いてあげるなら、エモさ要素といえるのは背景のグラデーション…ぐらいですかね…。

 

全体的に少し寂しい感じがするので、もう少しあしらいなどのうまい使い方を覚えたいなぁとあらためて再認識しました。

 

先生からのFB

先生と私のデザインの趣味が合うだけかもしれませんが、こちらもかなり褒めていただきました。

 

「全体的に寂しい感じがする」とプレゼン時に話したところ、「写真の色味が派手なので、装飾はシンプルなほうがバランスが取れているのでは」とおっしゃっていただきました。

アドバイスとしては、「ファーストビューの写真がすべて真俯瞰なので、斜俯瞰(あおりのことですよね)なども入れると少し動きが出て、メリハリがつくかも」と教えていただきました。

 

あと、前回の課題に引き続き、文字組み(文字サイズや余白の使い方)をとても褒めていただきました。

 

「文字だけできれいに見えるデザインができたらデザイナーとして一人前。それができている」と言っていただきました。

「文字組みがきれいだと、何もない余白が光り輝いて見える。特に今回のサイトだと、ファーストビューのこのあたりは光り輝いている」

とのことでした。

このあたりが光り輝いて見えるらしい

すごく嬉しかったです。たくさん褒めてもらえて自信になりました!

 

文字組みなどデザインの基礎はある程度できていると思っちゃっていいのかな?と思いました。

そのうえで、抜け感やこなれ感を出すためのあしらいなどの使い方をもっと勉強していきます。

 

少し短いですが、今日は以上にします!

また課題が出ているので、完成したらまとめます。

Webグラフィック制作物①音楽配信サービスLP(課題)

最近BONOの課題ばかりをブログに載せていますが

もちろん並行してデザイン学校の授業も受けています。

 

「コーディング」「Webグラフィック」「UI/UX」の3クラスを受講しているのですが

Webグラフィックの課題で制作した作品がいま2つほど溜まっているので、ここでまとめていきます!

 

先々週と先週で、それぞれ

  • 音楽配信サービスのLP(ファーストビューのみ)
  • 「××専門店」のWebサイト(複数ページ)

が課題に出ました。

どちらも期限が1週間(かつほかの授業の課題もあり。。)だったので、まったく妥協した点がなかったかといえばそういうわけでもないのですが…、

もちろんできる限り自分の理想に近づくよう頑張りましたし、

先生からもなかなか好評でしたので、紹介したいと思います。

 

1. 音楽配信サービスのLP(ファーストビューのみ)

お題

以下のように指定がありました。

 

  • illustratorのみ使用し、以下のWEBサイトのFV(ファーストビュー)を制作すること。 (PC版&SP版両方)
    • 【サービス名】
      • 音楽ライブ配信サービス 「L.CLIP」 「L.BOARD」 「L.MUSIC」 のいずれかから選択(変更可)
    • 【コンセプト】(変更可)
      • LIVE×LIFE アーティストのLIVE(生配信・音楽ライブ+一早い最新楽曲)を ユーザーのLIFE(通勤・おうち時間など日常)に届ける。
      • 非日常と日常をリアルタイムでつなぐ場を提供する。 (変更可)

加えて、授業で「このコンセプトの中でさらに、よりベーシックで万人向けなデザイン1案と、よりターゲットを絞ったデザイン1案を提出するように」と指定がありました。

 

制作物①

まず私が、ベーシックで万人向けなデザインとしてつくったものがこちらです。

PC版 ファーストビュー

スマートフォン版 ファーストビュー

ちょっと上記のデータはいま手持ちのもので、実際は細部を微修正したものを提出したのですが。。

 

コンセプトは、「”ライブミュージック”に対して、なんとなく『はっちゃけていてダサい』というイメージを持っているようなApple信者系(意識高い系)の人を『おっ』と思わせるデザイン」です。

ちょっと攻めた言葉で表現したので、プレゼンのときも笑われたんですが

要するにまぁ、落ち着いたかっこいいトーンの音楽配信サービスにしたかったんです。

参考にしたのはもちろんApple MusicのWebサイトです。

 

先生からのFB①

「すごく攻めている」「グレー背景に丸を並べただけという、大胆なまでのシンプルさ」「なかなかできない」「巨匠デザインなので何も言えない」

と高評価(?)でした。

また、「キャッチコピー(音楽でつながる。〜)」「サブ情報(新しいSNSサービス開始。)」「登録ボタン」「ログイン導線」の情報の重要度がきちんと文字組みに反映されていることについてもお褒めいただきました!

 

改善点としては、モチーフの球体にすごく目線が惹きつけられるので、コピーの位置は

もう少し上にもってきたほうがバランスがよくなるのではないかとアドバイスいただきました。

 

制作物②

続いて、「地下アイドルのライブ音源を聞くのに特化した音楽サービス」という設定で制作したのがこちらです。

PC版 ファーストビュー

スマートフォン版 ファーストビュー

(こちらも、実際に提出した完成版とは少し異なります…!)

 

上述の通り、「地下アイドル」の楽曲に特化したサービスという設定なので

とにかく「カワイイ!ラブリー!あざとい!」をイメージしてつくりました。

 

地下アイドルのわちゃわちゃした感じと、萌えアニメの文字が詰まったタイトルロゴの相性がすごくよさそうだなと思ったので

萌えアニメロゴっぽい、タイポグラフィで魅せるロゴにチャレンジしました。

萌えアニメっぽいロゴ(Pinterestより)

 

私は基本的に、制作物①のようなシンプルっぽい、幾何学的?な図形を使ったデザインが好きなので(デザインの技術がないからシンプルにせざるを得ないというのもある。。)もっと有機的な、人間味や愛嬌のあるデザインをできるようになりたいとずっと思っていまして。

成長のため苦手分野に挑戦してみたという背景もありました。

 

挑戦したはいいものの、やっぱりうまくできない。というか、どうやったらできるのか方法がよくわからない。

文字をアウトライン化して、そこから一画だけ色を変えるのとかもすごく四苦八苦しました。。。

 

ロゴに手こずって、けっきょく背景はあっさりした感じになりました。

要素が多くてごちゃっとしているほうがアイドルっぽさ、かわいさが出ると思ったので、音楽を再生中の画面をモチーフにしたカードをいっぱい並べています。

 

このカードも本当はもっといろんな色にしようか?とか思ってたのですが時間切れで、1色のままGOとなりました。

 

先生からのFB②

こちらもけっこう好評でした。

ロゴについて、「少し毒っけのある色使いなので、より『可愛さ』に深みが出ている、『可愛さ』を強調できている」と言っていただきました。

背景についても、もっとごちゃっとさせたかったとプレゼンで話したのに対し

「ロゴがにぎやかなのでこれぐらい落ち着いていたほうがいいかも」とおっしゃっていただきました。

こちらは特に改善点を言われなかったと記憶しています。

 

振り返り

今回、「写真を使わない」という縛りがある中でのデザインだったのですが

実は私は写真を使わないデザインのほうが得意です。

 

というのも、学生時代に大学でフリーマガジンのデザインをしていたのですが

写真が0枚の記事なども多かったのです。。。

(ちゃんとしたカメラを持っているメンバーが1人?ぐらいしかいなかった)

結果的に、文字だけでみやすいデザインを仕上げる訓練になりました。

あと、シンプルに私が、幾何学的・フラットなデザインが好きっていうのもあると思います。

 

逆に、写真の調整とか扱いは不慣れで苦手なので、そっちをもっと頑張っていかなきゃです。

 

そんな思いもあり、翌週の「複数ページのWebサイト」という課題では

写真を多く使ったデザインに挑戦しました。

少し長くなってしまったので次の記事にします!

 

音声SNSのDaily UI #6(BONO)

UI/UXの学習コミュニティBONOで公開されている「音声SNSのDaily UI」。

ついに本日が最終日です!!

以下に1〜6日目の内容をまとめております。

6日目のお題は「設定画面のUI」でした。

お題スライドはこちら。

 

要件は以下の通りです。

  • 使っているスマホのOSを参考にした設定画面
  • 設定の項目はFacebookアプリのもの(下記)を参考にする

 

前提

繰り返しで申し訳ないのですが

いま私が#1からつくっているのは、「リアルな今の気持ちを音声でシェアする」
というのがコンセプトのSNS(という想定)です。
 
ムカついた話とか、すごく感動した話とかを、ばーっとしゃべって録音して
「ねえねえ聞いてよ!こんなことがあったんだけど!」って感じで投稿する人が多いのかなと思って設計しております。

投稿フィード画面(#2)はこんな感じ。

音声ファイルのサムネイルが、任意の画像や今の感情を表す絵文字の画像になるという設定です。

 

制作物

つくったものがこちらです。

 

リスト形式で、シンプルな白背景の設定画面です。

 

 

制作過程

参考にしたのは以下のアプリです。

iPhoneの「設定」とInstagramは設定画面内に検索フォームがついていて、知りたい内容ですぐに検索できるのはいいなと思ったので取り入れてみました。

 

ただ、全体的なデザインスタイルとしては、アイコンなしのメルカリ形式を採用しています。

私の感じ方の問題だと思うんですが、設定の各項目ってビジュアルのイメージが湧きにくいものが多く

ぱっと見で中身が想像できない小さいアイコンがたくさん並んでいると、逆に見にくいのかなぁという感じがして…。

 

設定の項目って「言語」とか「ログインID」とか概念的なものが多いので、

日本語ネイティブの人は単語だけのほうが理解が早いのかなと思ったり。

 

でももちろん、日本語ネイティブじゃない人が使う可能性もあるわけですし、アイコンをつけたほうがアクセシビリティは高いですよね。

 

迷ったのですが…セオリーとしてはどうなんでしょうか。

実装の工数とかも考え方の背景としてあるのかな。

設定のアイコンの有無について、追って他のアプリももうちょっと調べてみたいと思います。

 

 

お手本との比較

解説動画では、iOSに準じた形式とAndroidに準じた形式の画面がそれぞれ紹介されていました。

 

今回、私が個人的にメルカリの画面が見やすいと思ったためにメルカリ形式でつくってしまいましたが

やはり基本のOSに準じたほうがつくりやすく、メンテナンス性も高いとのこと。

 

そこで、iOSっぽいバージョンもつくってみました。

 

 

こうなると今度は、アイコンあったほうが見やすい気もしますね。

 

「アカウント」とか「詳細設定」とか、内容ごとの島がはっきり分かれているので

アイコンがごちゃっと見えてしまいにくくなるのかもしれないです。

 

試しに、アイコンを配置したバージョンもつくってみました。

 

うん、たしかに見やすい気がします。やっぱiOS準拠のスタイルのほうがいいのか…。

 

今後も、ちゃんとOS準拠のデザインに立ち返って考えていこうと思いました。

 

振り返り

そんな感じで、BONOのDailyUIシリーズはいったん終了です。

www.bo-no.design

とても学びが多かったですし、要所要所だけではありますが、一応は1個のアプリの全体像が1人でつくれたということは、とても自信になりました。

 

また余裕があれば全体を通してしっかり振り返りをしたいのですが…学校の課題もやばいので、だいぶ先のことになりそうです…!

 

ひとまずは、素晴らしい学習の題材と環境を用意してくださったBONOに感謝を述べて締めくくりたいと思います。

ではまた。

音声SNSのDaily UI #5(BONO)

引き続き、UI/UXの学習コミュニティBONOで公開されている「音声SNSのDaily UI」について、まとめていきます!

今日は5日目です。

以下に1〜4日目の内容をまとめております。

#5 通知画面のUI

お題と要件

5日目のお題は「通知画面のUI」でした。

お題スライドはこちら。

 

要件は以下です。

  • 投稿に対する通知を一覧で確認できる
  • 「いいね」「コメント」「フォロー」の通知を表示する

 

前提

いま私が#1からつくっているのは、「リアルな今の気持ちを音声でシェアする」
というのがコンセプトのSNS(という想定)です。
 
ムカついた話とか、すごく感動した話とかを、ばーっとしゃべって録音して
「ねえねえ聞いてよ!こんなことがあったんだけど!」って感じで投稿する人が多いのかなと思って設計しております。

投稿フィード画面(#2)はこんな感じ。

音声ファイルのサムネイルが、任意の画像や今の感情を表す絵文字の画像になるという設定です。

制作物

完成したのがこちらです。

 

(ステータスバーの時刻のフォントが変わってしまっています。。)

 

私は今回、「通知」のアイコンをボトムナビではなく画面上部に置いているので

ヘッドナビの「<」ボタンで前の画面に戻れるようにしています。

また、お知らせの種類を「アカウント」と「その他」でタブに分け、

「アカウント」ではいいねやフォローを、「その他」ではシステム関連のお知らせや宣伝などを見られるようにしました。

 

制作過程

参考にしたのは、

です。

メルカリはSNSじゃないんですが、私が使っているアプリの中では「お知らせ」を見ることが多いので選びました。

 

参考にさせていただいたアプリたち。左からInstagram、mercari、Twitter

基本的にはすべてリスト形式になっているようです。

また、お知らせの中でもタブが切り替えられるようになっているものもありました。

個人的には、お知らせにもいろいろな種類があるので、タブで分けられているほうが見やすいと思い、そのスタイルを採用しています。

 

ただ、メルカリの「お知らせ」と「ニュース」、ツイッターの「すべて」「認証済み」「@ツイート」は分け方が一見よくわからなかったので

「アカウント」と「その他」に分けました。

(特にメルカリの、「お知らせ」タブの中でさらに「お知らせ」「ニュース」がわかれているのはちょっと違和感がありました)

 

また、どの投稿に対してリアクションがあったかわかりやすいよう、自分の投稿が「お知らせ」内でもカード形式で表示されるようにしています。

投稿をそのままカードにすると大きすぎるので、不要な情報(音声ファイルの長さや再生回数など)をなくし、音声ファイルのサムネイルもなしにしました。

自分の投稿に対する「コメント」をもらったときの例を入れ忘れてしまったのですが、そのときもカードでコメントの内容を表示できればと思います。

 

あとは、フィード画面(2日目に作成)で学んだ内容である、「アクションの主語が誰かわかりやすいよう、アイコンと本文でエリアを分ける」というのをここでも活用しました。

 

お手本との比較

お手本では、通知を見たあとすぐにリアクションできるよう、通知画面に「フォローする」ボタンがついていました。

 

たしかに、「お知らせ」画面なんだから…となんとなく他の機能をつける選択肢を除外していましたが

ユーザー間のコミュニケーションはどんどん生まれたほうがいいですよね。

私はTwitterは見る専門なのでよくわかってないのですが、たしかにInstagramの通知欄は「フォローする」って毎回ついていますし。

 

そんなわけで「フォローする」ボタンをつけてみたのがこちらです。

ひとつしかないのでなんかちょっと違和感がありますが…。ボタンの色のせいですかね。

すごく迷った結果、ボタンもプライマリーカラーだとちょっとうるさい気がして、Instagramに倣って水色にしたんですが。

 

実は解説動画のお手本では、「いいね」「フォロー」「コメント」ごとに全部色を変えて通知にアイコンをつけていたんですが

画面がちょっとカラフルすぎてごちゃごちゃしているように見えて…。

最近は「Complexion Reduction(複雑性の軽減)」がデザイントレンドだと聞いたのもあり、そこは修正せずこのままいきたいと思っています。

 

といいつつ、やっぱりボタンの色が気になったので、いま思い立ってボタンを枠線のみにしてみました。

 

 

さっきよりは馴染みましたね!

でも、今度は馴染みすぎて気づかれないですかね…?どうなんだろう。

 

疑問は残りつつ、いったんはこれで完成としたいと思います…!

音声SNSのDaily UI #4(BONO)

少し間が開きましたが、UI/UXの学習コミュニティBONOで公開されている「音声SNSのDaily UI」について、4日目の内容をまとめていきます!

 

以下に1〜3日目の内容をまとめております。

#アプリ内検索画面のUI

お題と要件

4日目のお題は「アプリ内検索画面のUI」でした。

スライドはこちらです。

 

要件は以下の通りです。

  • 他者の投稿を検索できる
  • ボトムナビでタブを切り替えてフィード画面と行き来できる
  • 検索フォームがある
  • 検索前のレコメンド等が表示される

 

前提

毎度書いてますが、「リアルな今の気持ちを音声でシェアする」
というのがコンセプトのSNS(という想定)です。
 
ムカついた話とか、すごく感動した話とかを、ばーっとしゃべって録音して
「ねえねえ聞いてよ!こんなことがあったんだけど!」って感じで投稿する人が多いのかなと思って設計しております。

投稿フィード画面(#2)はこんな感じ。

音声ファイルのサムネイルが、任意の画像や今の感情を表す絵文字の画像になるという設定です。

制作物

完成したのがこちら。

 

 

「いま話題」は#の有無にかかわらず、投稿に多く含まれているキーワードが表示されます。

 

「いまの気持ちから探す」をタップすると、同じ絵文字のマークがついている投稿を探せるようになっています。

 

「声」でよりリアルに人を感じたい、つながりたい、というニーズを想定しているので

どんな気持ちの人の話し声を聞きたいか?という、テンションごとに検索できる感じです。

 

 

制作過程

参考にしたのは、

  • spoon
  • stand.fm
  • twitter
  • AppStore
  • Voicy

です。

参考にしたアプリたち。左からstand.fm、Spoon、Voicy、Twitter、AppStore

AppStoreやTwitterよりも、音声SNSであるspoon、stand.fm、Voicyにより近い形で作っていきました。

理由は、

  • AppStoreは「アプリ」というツールを探すことが目的であり、もっと情緒的な情報を求めるユーザーの多い今回のアプリと使い方が異なる
  • Twitterはユーザーがとても多いため、検索画面が広告やニュース的な役割を果たしているが、今回のアプリはもっとニッチに繋がりたい人向けである

といった感じです。

 

音声SNSはどれも、「話題のトピック」が一番上に来ていて

その下に「カテゴリ」「シチュエーション」などの分類系、

あるいは「おすすめのコンテンツ」などのレコメンド系が来ている感じでした。

 

前も言いましたが、音声だとやっぱり「聞くまでその魅力がわからない」というのがあるので

投稿そのものをレコメンドするのは難しいんだなと。

多くの人が気になっているであろう話題のキーワードか、その人の好きな「カテゴリ」

に絞ることで興味を持ってもらっているんだなと思いました。

 

その型にのっとり、私もまずは「話題のキーワード」をサジェストし

続いてこのアプリ独自の「カテゴリ」=「絵文字の種類(感情の種類)」で絞り込んで検索してみてもらう、という形にしています。

 

「話題」のキーワードを示すコンポーネントは各音声SNS間で結構違いがあったのですが

stand.fmの形を真似させてもらいました。

枠があった方がタップしやすいのと、枠は丸みがあったほうが、優しい雰囲気でこのアプリに合っているかなと思ったためです。

 

そして検索フォームですが、先日タイムリーにApple社のFigmaキットが発表されたため

そのコンポーネントを使わせていただきました。

余談ですが、Figmaコンポーネントの仕組みがいまだによくわかっていなくて、テキストを日本語に打ち直したりする際にアレ?アレ?ってなっていました。もっとFigma勉強しなきゃ…

 

お手本との比較

完成後、BONOの解説動画で紹介されているお手本と見比べたのですが

今回は大きな修正は加えていません。

お手本はカードUIでそのまま人気の投稿が見られる形だったのですが、

「音声」という「聞くまで内容がわからない」かつ「その人のパーソナルな部分が伝わる」という性質上、

投稿がそのまま検索画面でレコメンドされるのは最善策ではないのではないか?とやや疑問に感じたためです。

(どういう人のどういう内容の音声か、が事前にわかっていないと、再生するのが怖い気がします…!)

 

また、お手本では検索キーワード入力中の画面もつくっていたので、追加で私も入力中の画面を作成しました。

 

 

シンプルですが、入力中の画面になると左側に「✖️(入力中の文字を消す)」と「キャンセル」(検索画面に戻る)が表示される、とか意外と意識していなかったなぁと思いました。

 

こちらも上記と同じアプリの検索入力画面を参考にしています。

私は個人的に「履歴をすべて削除」がすぐに選べた方が嬉しいのでつけました。

参考にさせていただいたアプリの中では、Spoonに「すべて削除」ボタンがついていました。

他の人に画面が見えそうなときに履歴が見えたら恥ずかしい…というのもありますし、そうでなくても、あとになって自分の検索履歴を自分で見て「私こんなこと検索してたのか、恥ずかしいな」って思うことがあるんですよ。ありませんか。。?笑「××(芸能人) 整形」とか。欲に負けて検索するけど、なんか検索したことが恥ずかしいと思ってしまいます。笑

 

調べてみたら、Apple社のガイドライン(HIG)の「検索」コンポーネントに関する解説でも、「履歴を表示するときは配慮が必要」と書いてありました。

 

検索ひとつとっても奥が深いですね。

 

では、この辺りで失礼します。

音声SNSのDaily UI #3(BONO)

昨日に続き、UI/UXの学習コミュニティBONOで公開されている「音声SNSのDaily UI」について、3日目の内容をまとめていきます!

1日目はこちら。

dddiary.hateblo.jp

2日目はこちら。

dddiary.hateblo.jp

#3 投稿入力画面のUI

お題と要件

3日目のお題は「投稿入力画面のUI」でした。

スライドはこちらです。

 

 

要件は以下の通りです。

・音声を添付できる
・文字も入力できる
・画像も添付できると良い
・#2 のフィード画面から遷移する
Twitterのように気軽に投稿できる

前提

再掲ですが、

「リアルな今の気持ちを音声でシェアする」
というのがコンセプトのSNS(という想定)です。
 
ムカついた話とか、すごく感動した話とかを、ばーっとしゃべって録音して
「ねえねえ聞いてよ!こんなことがあったんだけど!」って感じで投稿する人が多いのかなと思って設計しております。

投稿フィード画面(#2)はこんな感じ。

音声ファイルのサムネイルが、任意の画像や絵文字の画像になるという設定です。

 

制作物

こちらです。

 

投稿フィード画面のボトムナビ中央「投稿する」ボタンを押すと、下からにょきっとこの画面が立ち上がってくるものとしてつくりました。

 

画面上部にはテキストが最大100文字まで入力でき、

画面中央のマイクのアイコンボタンを押すと録音が開始して、2枚目の画面に遷移します。

 

1枚目の画面の下部には、「画像一覧から画像を添付」「撮影して画像を添付」「動画を撮影して添付」「絵文字を追加」の機能を示すアイコンを入れました。

 

2枚目の画面は、録音を開始すると、時間と音声の波長が表示されるとともに、マイクのアイコンボタンの周りからふわっと白い光が揺れ動くのをイメージしています。

 

制作過程

 

参考にしたのは、

です。

 

参考にさせていただいたサービスたち。左からTwitter、Spoon、stand.fm、ボイスメモ

 

要件に「Twitterのように気軽に投稿できる」とバイネームで挙がっていたので、基本はTwitterをベースにしました。

普段Twitterを投稿する側でめったに使わないので、最新の投稿画面を見たのはひさしぶりでしたが

結構潔くスペースを設けているんだなぁというのが印象的でした。明らかに140文字以上書けそうな空白

あ、でも今は、課金すれば100文字以上書けるんですよね。それも踏まえた上でのUIなのでしょうか?

 

音声と文字を同時に投稿できるという点では、Spoon(配信のタイトル?が設定できる)を参考にしました。

画面の上半分を文字入力エリア、画面の下半分を録音・その他にしています。

 

録音している最中の画面は、stand.fmiPhoneのボイスメモのように、秒数や波長を大きく表示して「今まさに録音してますよ!」というのが直感的にわかる設計になってるのを真似させてもらいました。

 

Twitter以外は、録音している最中は録音ボタンが赤くなるサービスが多かったのですが、赤って警告的な意味もあるしちょっと強すぎるかなとプライマリーカラー(ブランドカラー)のままにしてます。

 

録音ボタンを赤にしたバージョン。

でも録音=赤のイメージが慣習的にあると思うので(ラジオの「ON AIR」の看板とか)、やっぱり赤にしたほうがよかったかもしれないです。

 

ほかに工夫した点としては、以前に述べた通り、このサービスならではの特徴として

「声でリアルな感情を共有できる」→「音声ファイルのサムネイルに今の感情を表す絵文字を設定できる」というのがあるので

画像の添付やカメラの起動を行うアイコンと並べて、「絵文字を追加」というメニューを追加しました。

 

 

ほかのサービスであまり見かけない機能なので、アイコンだけでは伝わらないと思い、アイコン+「絵文字を追加」というテキストを追加したボタン形式にしています。

 

お手本との比較

 

BONOの解説動画をみたところ、「①投稿入力画面」「②録音中の画面」「③録音した音声が投稿に添付されている状態の画面」と3つ用意されていました。

 

私は③が欠けていたので、追加で作成することに。

①②についても、解説の動画を見て何点か修正を行いました。

 

修正+追加後の画面がこちらです。

 

 

一番左(①)はあまり変わっていません。

修正した点は、「00:00:00」の表示を消したこと。まだ録音開始してないからよく考えたら要らないよなと思ったためです。

あと、「0/100文字」という文字数制限を示す部分も上に持ってきました。上下にあると視線がぶれてしまうのではと思ったためです。

そして、何も投稿内容を入力していない状態では投稿ができないようにするため、右上の「投稿する」ボタンをグレーアウトしました。

 

左から二番目(②)は、画面全体に黒背景を敷く形に。そして、絵文字の追加などの項目を消し、「録音」機能に特化したページとして修正しました。それに伴い、「(録音を)完了する」ボタンを右上に追加し、「録音中」というページタイトルも入れています。

変更の理由は、「録音」というアクションは単独で切り分けたほうが行為に集中できるし、操作に迷わないと思ったからです。

それに、解説動画を見て気づいたのですが、修正前の画面だとすぐに録音をやり直すことができないですよね。

このあたり(録音後の導線)については、正直全然考えられていませんでした…。

 

左から三番目(③-1)は、②の画面で「完了」ボタンを押した直後、音声ファイルのみが添付されている状態です。音声ファイルを添付している状態で、さらに動画を添付することはできない(という設定)のため、動画撮影のアイコンはグレーアウトしています。

 

右端(③-2)は、音声ファイルの添付後に絵文字を追加した状態です。

音声ファイルを添付し、サムネイルも絵文字を設定している状態なので、もう文字以外は追加で入力できません。なので下のアイコンはすべてグレーアウトしています。

 

 

 

今回はかなり、完成後の修正でクオリティが上がった気がしています。

 

完成した瞬間は、「よし!これでOK!」と思っているはずなのに

一度目を離してあらためて考え直すっていうことはすごく大事なんだなぁと痛感しました。

 

「デザインは制作期間の7割目までに一旦完成させて、フィードバックをもらえ!」みたいなことを以前に聞いたことがあるんですが、やはりこういう理由のためですかね。

つくってると夢中になって、どんどん欠点に気付きにくくなってしまいます。

 

時間に余裕を持って丁寧につくっていくことを心がけたいと思います。

音声SNSのDaily UI #2 (BONO)

UI/UXの学習コミュニティBONOで公開されているDaily UIシリーズの2日目、3日目に取り組んだのでまとめます!

1日目はこちら。

dddiary.hateblo.jp

 

1日目は、音声SNSアプリの「ログイン画面」を作りました▼

 

 

#2 フィード画面のUI

お題と要件

2日目のお題は「フィード(タイムライン)画面」でした。

お題のスライドはこちら。

 

要件は以下の通りです。

  • 「音声」「文字」「アカウント」「投稿導線」の要素がある
  • 最低限のナビゲーションを設置する
  • Twitterっぽさを持たせる
前提

以前の#1の記事でも書いたのですが、

「人恋しいときに誰かの語りを聞いて安心する」とか、

「音声を投稿することでよりリアルな気持ちをシェアする」

というのがコンセプトのサービス(という想定)です。

 

なので、ムカついた話とか、すごく感動した話とかを、音声でばーっとしゃべって

「ねえねえ聞いてよ!こんなことがあったんだけど!」って感じで投稿する人が多いのかなと思って設計しました。

 

制作物

こんな感じになりました。

1個目につくったのがこちら。

 

ぱっと見Twitterのような感じですが、

「各投稿の左端に音声ファイルを添付でき

 音声ファイルのサムネイルに任意の画像or絵文字を設定できる」

というサービスの想定です。

 

前回適当にベタ打ちでつくったロゴが適当すぎたので、しれっと変更してます。笑

 

前提で解説した通り、「今のリアルな感情を共有する」というのがサービスのコアなので

サムネイルに絵文字をつけられるようにすることで、「どんな感情なのか」を視覚的にもわかるようにしました。

音声って聞くまでわからないので、すごいテンション高い音声なのか、低い音声なのか、視覚的に判断できた方がいいかと思ったんです。

 

(余談)IVEというK-POPアイドルグループが好きなのですが

ちょうど抽選で当たったハイタッチ会(握手会の亜種)参加を週末に控えているタイミングで作ったため、頭の中がIVEでいっぱいで笑。投稿例のサンプルがかなり偏った内容になっております。。。

肖像権の問題などあると思うので、時間できたら画像差し替えておきます。

 

制作の過程

参考にしたのは、

です。フィードという意味では特にTwitterとVoicyですかね。

 

Voicy、stand.fm、spotifyは、音声ひとつに対してサムネイルをかなり大きく表示していたのが印象的で。

参考にした音声アプリたち。左からspotify、stand.fm、Voicy

やっぱり音声って聞くまでわからないので、まず「聞くかどうか」を判断してもらうことが重要ですよね。

そのために、「面白そう」って思ってもらえるよう、サムネイル画像で目を惹きつけることが大事なのかなと思いました。

なので、TwitterのようなUIにしつつ、毎回音声ファイルが画像サムネイルとともに表示される形式にしようと思いました。

 

また、一般人が毎回凝ったサムネイル画像を作るのは面倒だし時間がかかって、

「リアルな今の感情」を吐き出しにくくなるかなと思ったので、簡単に「絵文字」で気持ちを表現できる機能をつけました。

 

ただ、サムネイルの分テキストエリアが狭くなってしまって…

文字数はTwitterより少ない(100文字ぐらい?)と仮定したものの

コンテンツ内のボタンが「再生数」「お気に入り」「シェア」しか入らなかったです。

 

お手本と比較

完成後、BONOの解説動画を見て、投稿者のアイコンを左に飛び出す形に修正したのがこちらです。

 

こちらのほうが、投稿者ごとの情報のブロックが直感的にわかるようになりましたね。

作っているときは、左だけに余白ができてしまうことに違和感というか、もったいない感があったのですが

言われてみると確かにこっちのほうがいいなぁと。

適切な情報設計のためには、余白を恐れてはいけないのですね。

グラフィックデザインなどにおける余白の重要さは理解していたつもりですが、UIデザインにおいてもあらためて痛感しました…。

 

あと、今見ると、ボトムナビの「投稿する」ボタンが目立ちすぎですかね…?

Twitterの「+」ボタンをイメージしつつ、ナビの中に入れてすっきりさせようとしたのですが

現在地(=「ホーム」)の表現とゴチャついちゃってるかな…。

 

Twitterの「+」ボタン

 

YouTubeとかInstagramとか、「投稿する」系のボタンはボトムナビの中央に「+」のアイコンだけで入ってたりすることが多いなぁと思うので

変に目立たせすぎないほうがいいかもですね。

 

もうちょっと経ってからまた見直してみます…!

 

#3の振り返りに続きます。