5K note

仙台在住Webデザイナーの日々の備忘録

Webデザイナーがアプリの模写をしてみたら

先日、会社で外部のアプリエンジニアの方を招いて「ひたすらアプリ画面を模写する」勉強会的なことをやったので、Webデザイナーの目線で得られた気づきをまとめてみる事にしました

ちなみに、私はアプリ開発経験ゼロのへっぽこWebデザイナーなので割と当たり前の事しか言ってないです

描いてみて気づくことはたくさんある

今回模写したのはPinterestAndroid版だったんですが、模写してみるとアプリの細かい装飾の違いに気づくというか、普段ってすごい適当にスマホの画面見てたんだなーってのがよくわかった

「ここに罫線あったんだ」っていうのに始まり、「よく見ると改行位置おかしくね?」って所や「画像が並んでる所で左上だけ画像サイズが微妙に違う」とか。一番驚きだったのは「フォロー」と「フォロワー」という文字が省略されて両方とも「フォロ..」「フォロ..」となってて、どっちがどっちだよ、てな事になっていたり。

UIデザイナーの繊細なこだわりが見えて面白い反面、自分が作ったWebデザインの細かい装飾とかも一般ユーザーは大して見てないんだろうな、と思うと少しせつない気持ちになりました。まあそんなもんだよね

iPhoneAndroidでUIが全然違った

アプリ開発者からしてみれば「何当たり前の事言ってんの」って感じだと思うし、実際社内のiOSエンジニアにも言われた事ではあるけど、Webサイトしか触ってないとiOSAndroidの画面つきあわせて比較とかしない(うちの会社は)んで、結構驚きました(実機での動作確認で比較することはあるよ!)

でもよく考えたら、戻るボタンがあるAndroidとボタンのないiPhoneでUIは変わって当然だよね、って感じがするので「モバイルファースト」とか言ってるWebでもこうしたOSごとの見せ方の違いはデザイナーとして考えるべきだと思った。

今のWebサイトでそれをやろうとすると、OS判定からの表示出し分けで読み込み時間かかりそうだけど。

みんなで模写すると気づきも多い

別にアプリの模写って家に帰って一人でもできちゃうけど、やっぱり大勢でやると気づきも人数分増えていくので良いですね。

さっき言った通りiPhoneAndroidでUIが違うこともそうだけど、同じ模写でもフォントの大きさに着目する人がいたり、アイコンの形やデザインにツッコミを入れる人がいたり。

会社入る前の学生時代はWebの勉強はずっと一人で黙々やってたので、大勢でUIについて話ができるのは勉強会のいい所だなーと思いました。

ついでに、模写のやり方でその人の性格も見えてくるからそれも楽しかったり。

まとめ

結局、2時間くらいひたすら模写して、その成果物をみんなで見るだけの勉強会だったんですが、思いの外面白くて、参加してよかったなー、と。紙とボールペンあれば手軽にできちゃう勉強会なんで、空いてる時とかに他の社員も巻き込みつつ、今度は社内onlyでやってみようかと思います