Personal Factory

【朝活】iOS UIトレース会が終わりました。

佐藤 剛士 -


iOS_UIトレース会 #8にて記念撮影

去年の9月から運営していました朝活「iOS UIトレース会」が2017年1月26日で終了しました。
隔週木曜日の7:30から9:00で行っていたこの朝活ですが、無事に8回開催することができ、一旦終了いたしました。

せっかくなのでこのトレース会を振り返りたいと思います。

開催きっかけ

nakailandさんのこのつぶやきがきっかけ。
けっきょくnakailandさん参加できなかったけど。。

今あるアプリのUIを真似するもくもく会があったら楽しいなと思いそれを株式会社オハコの李さんに話したら会社の会議室をお借りいただけることになり開催できました。

李さん、オハコさんありがとうございます。
感謝しています。

イベントページ

イベントの告知はConnpassで募集しました。
いつも10人程度が応募して実際に7,8人が参加しました。
朝の時間を考えるとなかなかの参加率です！

UIトレース会の目的

いいアプリのUIを真似て開発に活かすのがこの朝活の目的です。

内容

一ヶ月に1つのテーマUIを決めて、朝活中に参加者がもくもくトレースします。

実際にXcodeを使って開発します。
最初はそれぞれ1人づつ作っていくスタイルだったのですが、途中からグループに分けてすすめるようにしました。

グループでやったほうが「どうやったらこのUIを実現できるか」の設計から議論ができて盛り上がるので。

会の終わりにそれぞれ作ったもの、どうつくったのかの知見を共有していました。

UIトレース会の各テーマ

合計4テーマをすることができました。
テーマは2回目以降はFacebookページでアンケートを取って決めていました。

LINEのチャットキーボード

LINEアプリのキャットキーボードUIをトレースしました。
スタンプとシステムキーボードの切り替え。スタンプも下部タブバーでスワイプで切り替えができる。

トレース結果

Takuya OhsawaさんがGithubにトレース結果をあげて頂きました！
https://github.com/takuchantuyoshi/LINE_UI

スタンプの切り替えが再現できています！　　
すごい！

Facebookのナビゲーションバー

Facebookのナビゲーションバーをトレースしました。
スクロールするとナビゲーションバーとそれに付随するボタンが表示非表示になるUIです。

トレース結果

Takuya Ohsawaさんの結果です！
https://github.com/takuchantuyoshi/FacebookUI

酒井 文也さんも上げていただきました。
https://github.com/fumiyasac/FacebookLikeUI

Gohobeeのご褒美画面

GohobeeはOLさんが筋力トレーニングをしてその結果、壁紙や、タニタさんからの割引きクーポンが貰えるアプリです。
そのご褒美画面がすごく凝っていて、毎回レイアウトの変わるコレクションビューや、詳細画面へのシームレスな画面遷移、くるくるっと回るアニメーションなど、つかってて気持ちのいいUIでした。

トレース結果

クラスメソッドのダンボー田中さんがブログに記事を投稿して頂きました。

[イベントレポート] 【朝活】iOS_UIトレース会 #6に参加してきました！

1日でパララックスとコレクションビューのレイアウトを作るのは流石です！

Facebookのあけおめアニメーション

もう一つFacebookのUIをお題にしました。 2017年の元旦にFacebookがイースターエッグを出しました。「あけおめ」「Happy New Year」とポストするとその文字がボタンになります。タップすると花火のアニメーションが画面いっぱいに出てくるものです。
非常にインパクトがあって盛り上がりました。

トレース結果

私の記事ですが、ボタンを押して花火を散らすサンプル紹介記事を書きました！
【iOS】新年明けたので、画面に花火を散らしたよ

最後に


2016/11/10撮影 朝活の様子

あっとゆう間の5ヶ月間でした。ずっと繰り返し参加いただいた方や、毎回新規での参加もあり、わいわい開催できました。
主催者として、嬉しく思います。
それだけUIの研究が心に刺さったのですかね？
ご参加ありがとうございました!

また何か開催しようと思います！

参考

Swiftプログラミング勉強会