皆さんこんにちは、小野です。
最近梅雨の影響で湿気のじめじめ具合がすごいですが、今週は特に89〜90%とかなり湿度が高いような気がします。
沖縄は梅雨明けしたみたいなので、宮崎も早く梅雨明けして外で週末思いっきり遊べると良いなと思います！
2年半ちょっと前に「19歳からみたweb業界の魅力」と題し記事を書かせていただき、そこから月日はあっという間に流れ入社して3年目になりました。
3年目に入り、私自身、UI（ユーザーインターフェース）についての知識がほとんどなかったので、デザインの引き出しを増やすため・良いデザインを観察してUIデザインを勉強するためにも普段使用しているアプリ画面の模写を最近始めたのですが、模写することで、ただ眺めるだけでは気付けなかったことに気づくことができました。
今回はアプリ画面の模写について私なりに感じたこと、気づいたことをまとめてみました。
普段何気なく見ているアプリ画面の規則性が見えてくる
実際に細部まで観察して模写して見ることでフォントや余白、色、シェイプの共通ルールや目立たせたい箇所の表現の仕方を見つけ出すことができます。
- 操作を促せたい項目とそうではない項目の配色の区別
- フォントは少ない種類で太さや大きさで視覚的に表現
- 押せる部分と押せない部分の区別
- 余白を利用した要素の区別
などなど
また、スマホサイトをデザインするときに、PC画面でデザインしていくので「サイズ感」で迷いがちでしたが、特に普段使用しているアプリの余白やボタンの大きさ、フォントのサイズ感は参考になりました。
押させたい部分は全て丸のシェイプで統一している。（よく見るとタブの赤い部分も角丸）
全体的に色味は少ないが、ユーザーに押させたいボタンやリンクを全て同じ色で統一されている。
リンク部分や選択されている部分はすべて青色で統一している。
テキストリンクは背景の白に埋もれないように少し濃いめの色で可読性を高めている。
日頃から観察することが自然と身につく
ただトレースするだけではなぞるだけの作業になってしまいますですが、「なぜこのデザインは綺麗に見えるのだろう」「このパーツはどういう意図でこの形にしているんだろう」「配色のルールはどうなっているんだろう」と観察しながら進めていくので、いつも使用するアプリなども日頃からデザインを意識してみるようになります。
私も以前までは、情報アプリなどただ「情報を収集する」という目的で見ていましたがプラスして、「操作する部分のデザインを観察する」ということが自然と身についてくるようになりました。
デザイナーのこだわりや優しさを見つけることができる
「よく見ると1pxの線が引いてある」とか「スマホを操作するときに押しやすい位置にある」など、普通に意識せずに利用するだけでは気づけなかったデザイナーの細部のこだわりや優しさが見えてきます。
当たり前に使用しているアプリでも、それぞれのデザイナーさんの思いや工夫がつまっているので、もっとそういった発見をできるようにしていきたいなと思いました。
項目が一部画面にはみ出るように並べているスクロールできるタブだと認識できるようになっている。
また、ヘッダーの背景は企業カラーのピンク＋少し彩度を低めたピンクでグラデがかかっており、検索欄がピンクでも埋もれず見やすくなっている。
商品の区切りがグレーのボーダーで区切られているが一番右側だけ2pxほど広くなっている。
→予測：出品ボタンと金額（千の位以上）がなるべくかぶらないための工夫、もしくはスクロールバーの幅を考慮した余白かも
まとめ
まだまだ期間が短いのでざっくりではありますが、私がアプリ画面の模写をしてみての気づきをご紹介しました。
ただ模写をするだけ、上からなぞってトレースするだけではなく、デザインの構成要素を掴みながら模写していくことで「なぜこのデザインは綺麗に見えるのか、読みやすいのか、操作しやすいのか」といった疑問が出てきて、じっくり考えるようになります。
「継続は力なり」という言葉があるように、続けることがとても大切になってくると思います。
時間をとれるときに少しずつ模写していろんな発見や気づきを得れるようにしていこうと思います。