» スマホデザインで意識すること。≪基本編≫|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

スマホデザインで意識すること。≪基本編≫

スタッフブログ

  • 2019.06.11

    スマホデザインで意識すること。≪基本編≫

    顔アイコン

    こんにちは!デザイナーのたっきーです。

    「モバイルファースト」と言われる今の時代。

    アババイでも、webデザインは、PC版とスマホ版のレスポンシブ化を対応しています。

    そこで、まだまだwebデザインをやりだして、日の浅かった自分が、先輩方に教わった、

    スマホ版のデザインを作成する際に、必ず意識している基本をご紹介したいと思います!

    pixta_43388917_M

    ①キャッチコピー・文章の可読性の高さ

    レスポンシブ化されていないPC版サイトをスマホで見ると、拡大しないとほとんど字が読めませんよね。

    そのため、スマホ版を作成する際は、フォントサイズを大きめに作成します。

    ※個人的には、最小で22px~24px。

    ちょっと大きすぎるかな…くらいが意外とちょうどよかったりします!!

     

    また、PCに比べ、画面幅が少ない分、長文になると読みにくくなります。

    サイズ感や幅感を調整しながら、読みやすさを考える必要があります。

     

    ②タップボタンの押しやすさ・デザイン

    スマホは機種によって画面サイズが異なります。

    フォントと同じく、タップするボタンデザインも注意が必要です!

    ・押しやすい大きさになっているか

    ・ボタン同士の並びが近くて、誤って押してしまわないか

    ・タップするボタンだと分かりやすくデザインされているか

    ・一目で何のボタンか分かるデザインになっているか

    コンバージョンにもつながる大切なパーツになるので、

    重要度は高めですね!

    btn

    ③親指の可動域を意識

    片手でスマホを操作するとき、右利きの人の場合、

    右下から中央あたりが無理なく操作できる範囲といわれています。

    少しでもユーザーの手間をなくすためにも、その範囲内に

    メニューボタンやページ送りなどを設置することを意識しています。

    名称未設定 1

    まとめ

    基本的なポイントはこんな感じです!!

    といかく、ユーザビリティを重視したデザインが求められるので

    インパクトやかっこよさを考えるのではなく、

    使いやすさ・見やすさを考えたデザインを意識してみてください(*ノωノ)

     

    それではまた~(^^)/

     

     

     

     

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

資料請求 リンクボタン

カレンダー

2019年9月
« 8月    
 1
2345678
9101112131415
16171819202122
23242526272829
30  

MENU

求人情報本社・広島オフィス

お問い合わせ

資料請求

ページの先頭へ

お問い合わせ

  • メールでのお問合せ リンクボタン
  • 資料請求 リンクボタン

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス