ワイヤーフレームからデザインを起こしてみる

前の記事はこれ！
とりあえずワイヤーフレームを描いてみようで作ったワイヤーフレームをざっくりと使いやすさを意識してデザインしてみます。

前回作ったワイヤーフレーム

ボタンっぽい要素と余白の感じがバラバラだし文字も見づらいですね
色々と整えていきましょう。

余白を揃える

ダイアログの余白を同じ余白感で揃えていきます。

この時点で最初のワイヤーフレームよりまとまった感じになりました。

次はボタンのサイズを変えてみます

余白の調整は一定の数値で刻んでいくと良い感じにまとまっていきます。
この例だと8px毎のサイズ差で整えています。

装飾を整える

なんとなくまとまってきましたが硬いのでもう少し柔らかい感じにしてみます

ダイアログとボタンの角を丸めてみるだけでだいぶ柔らかくなりました。

文言を整える

今のままの文言だとカジュアルすぎるのでもう少し説明らしい文言にしていきます。

だいぶダイアログっぽくなりましたね

もっと細かく考える

なんとなく揃ってきましたがそもそもこのレイアウトで良いのか考えてみましょう。

• そもそもボタンの位置は左右に左右に設置で良いのか？
  • スマホで表示する場合は辛そう・・・
  • スマホでもPCでも縦に設置した方が都合が良いかも？
    
• 説明文ってこれで足りてるの？
  • 説明タイトルと説明詳細が必要！
    
• ボタンのサイズって本当にこれで良いの？
  • 「はい」の選択を強調してみる
    
• 他にもなぜなぜ思考で時間が許すだけ考えてみたりする

まとめ

雑にワイヤーフレームを描いてそこから細かく考えるプロセスを踏んでみましたが、完成したのは一般的なダイアログでした。
ですがここに至るまでに色々と考える要素があり、過程がありましたね。

プログラミングもデザインも迷ったらとりあえず手を動かしてみましょう。
それでは