ブログで書いてほしい内容受付中!! 詳しくはこちら

dailyUI 3週間目の成果まとめ #011~#015

今週もdailyUIを頑張ったので報告します。

 

これまでのdailyUI↓

dailyUIをはじめたよ(#001〜#005) dailyUIの進捗報告。プロトタイプ作るのはとっても大事。(#005〜#010)

 

 

dailyUI 011 Flash Message(Error/Success)

架空の大学生向けレジュメ管理アプリ「Rakutan」の決済機能部分のフラッシュメッセージを作成しました。Protopieというツールを使用してインタラクティブなアニメーションを作成しました。

 

Protopieの作業風景はこんな感じです。UIが直感的で、少なくとも今は機能的にも満足しています。

 

良かった点
  • ローディングも考慮してアニメーションの作成ができたこと。
  • イーズイン/イーズアウトの使い分けが結構できるようになってきたこと。

 

反省点
  • ボタン押した時のリップルエフェクトとかあるといいなぁ。
  • ちょっとシンプルすぎて寂しくなっちゃってる感

 

参考→波紋が広がるリップルエフェクトボタンの作り方(CSS・Javascript)

 

dailyUI 012 E-Commerce Shop (Single Item)

架空のECサイトの画面を作成しました。シンプルにしつつも、伝えたい情報がしっかり伝わるようなデザインを意識しています。ギターの名前はテキトーです。アニメーションを写真スライドとお気に入り部分に入れました。今回もProtopieというツールを使用して、インタラクティブなアニメーションを作成しました。

基本はモノクロにしつつ、画像に青っぽい差し色を入れて、その色を展開しました。ハートの色を青くするのだけは微妙だったのでハートだけピンクで。

良かった点
  • 画像を生かしつつ、シンプル目に、雰囲気を壊さないような配色、レイアウトを意識した。

 

反省点
  • Protopieの横スクロールの使い方が分からなかった(今は解決済み)→そのため動画では1pxのスライドに反応しています
  • ハートのエフェクトとか、twitterの「いいね」みたいな楽しげな感じが欲しい

 

dailyUI 013 Direct Messaging

架空のメッセージアプリの画面を作成しました。マテリアルデザインっぽい雰囲気を取り入れつつも、シンプルにメッセージアプリとして使いやすいUIを心がけました。今回もProtopieというツールを使用して、メッセージを送信する時のインタラクティブなアニメーションを作成しました。

チャット画面自体は仕事でも作ったことがあり、その際にインスタ、Twitter、Facebook、LINEと言った主要アプリのUIはトレースして調べた気がします。

配色はmaterial design paletteというサイトで決めました。Material Designっぽい配色が生成できるツールです。

ということで、今回はアイコンもスペースのルールもMaterial Designに則りながらやっています。(影とかはあからさまなMaterial Design感が嫌なのでやめました)

作業風景。

 

良かった点
  • リサーチ済みだったので、要素がある程度頭の中に入っており非常にスムーズに画面作成ができた。やっぱりUIデザインは経験値。
  • 簡単なカラーパレットとテキストスタイルを先に定義してしまったので、統一感のあるUIが作成できた
  • メッセージ内容を西野カナにした(西野カナ怖い)

 

反省点
  • やっぱりリップルエフェクトが欲しかった
  • 実際に入力したテキストを送信してみたかった

 

dailyUI 014 Countdown Timer

架空の大学生向け試験対策アプリ「Rakutan」の試験情報画面を作成しました。これまで作ってきたUIシステムを崩さないように気をつけつつ、新機能となる試験日までのカウントダウン機能を作りました。今回もProtopieというツールを使用して、インタラクティブなアニメーションを作成しました。

シンプルなタイマーを作るのもアリだけど、せっかくなら何か特徴を、強い個性を持ったものを作りたい。ということで、試験対策のアプリを作っていたので試験までのタイマーとして作成してみることにします。

タイマーと言いつつも、試験対策となるとTODO機能も軽くあったほうがいいと思ったので、こちらも画面に起こしてみました。

 

良かった点
  • しっかりユーザー像を考えながら、必要な機能を吟味して作成ができたと思う。
  • だんだんProtopie使い慣れてきた。
  • 既存のトンマナを崩さないように展開することができた。

 

反省点
  • やっぱりリップルエフェクトが欲しかった。(3回目)
  • タスクを入力→追加できるところまで画面遷移作ってみたかった。

 

dailyUI 015 On/Off Switch

On/Offの切り替えスイッチを作成しました。ボタンを押してスイッチの切り替えが行えるようなアニメーションを作成しました。今回もProtopieというツールを使用して、インタラクティブなアニメーションを作成しました。

画面自体は非常にシンプルですが、エフェクトに力入れて頑張りました。ボタンを押すとそこから波紋のように新しい画面が展開されてゆく。リップルエフェクトもどきのような画面を作りました。

もはや何に使うのかよく分からない画面なのですが、なんかスマイル可愛く見えてきたし、これはこれでいいか。アニメーション作るのは時間がかかります。

作業風景。アニメーションのためにどでかい楕円を用意しています。

サトゥー

Protopieのトライアル期間がもうすぐ終わってしまう…

 

良かった点
  • それっぽいアニメーションが作れた。
  • インタラクティブなアニメーションが作れた。

 

反省点
  • 何のためのアプリなのか。
  • エフェクトのアニメーションももう少しかっこよくできそう。

 

 

というわけで、来週は#16~#20の更新になります。お楽しみに〜〜

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)