furuya学校Tweetみなさんこんにちは。ほんきでUIデザインのレポートをお送りします。前回の続きでwebデザインについて学んでいきました。言語化したことないな〜。決断させたい時に使用といったのが先生の回答!日頃何気なく使っているアクションにもちゃんと意味があることを理解できました。(デザインやアクションなど)言語化することで意味のあるデザインを作ることができますね。その後はXDを触りながら授業を行っていきました。やった内容をピックアップして紹介します。ボタンPCの場合のボタンは、今押している状態なのか、押してないのかわかりやすくするためにインタラクションをつけます。なにもしてない状態、ホバーの状態、クリックした状態、この3つの状態を受講生のみなさんに制作してもらいました。スマホの場合は、指でボタンを押す際に必要な高さが必要ですし、ボタンとボタンの間にも適切なタップ領域が必要です。ナビゲーションwebで大切な2つの情報を繋げる役目となるナビゲーション、またいろいろなwebの部位となるナビゲーション。設計の仕方や、部位の解説をしていきました。赤色の警告がすごく多い名前やメールなど同じことを何度も入力しないどこが間違っているのかわからない警告...離脱しちゃうこのような感じでユーザーを困らせてしまう要素がたくさんあるのです。入力フォームはwebの中でユーザーの情報を入手する手段として使用される、とても大切のところです。ユーザーに離脱されないよう丁寧に気をつけて設計しないといけない場所なのです。良い例、悪い例を比べながら、最適な入力フォームについて解説していきました。スマホの場合、ここでもボタンと一緒で指で押しやすく、入力しやすい適切な幅と高さが必要です。入力フォームを制作していただきました。受講生募集中!『ほんきでUIデザイン』2月スタート。!『ほんきでJavaScript』開講決定!受講生募集中です。for:クスールはWebの技術を中心に「ものづくり」を学ぶ、小さな学校です。メモ6月5日スタート「ほんきでHTML」受講生募集中です。