今回のテーマは、『WebサイトのPCデザインを見て、スマホのデザインを制作する』です！
スクールでも教えていただいたのですが、サイト制作にあたり、特にスマホはシェア率が高くデザイン対応も必須とのこと。
Webサイトを見ながらスマホのデザインをPhotoshopで作ってみました。
ちなみに題材にさせていただいた素敵なパン屋さんのサイトはこちらです。最初はスマホのデザインは見ずに予想で作りました。
▼PaPa²BAKERYさんのサイト
PCのデザインからスマホのデザインを考える
PCの表示を見ながら、スマホではどうしたらよいか考えながらデザインを組みました。
下の画像は左が見本で右が自分なりに予想して作ったデザインになります。見比べると違うところが一目瞭然ですね。笑
見本のデザインと自分のデザインを見比べて違うところ
●ヘッダー
×お問い合わせとインスタのアイコンはなし
×上下にもう少し余白をとる
●メインビジュアル
×写真は縦幅をもっと小さくする
×左右の余白を狭くする
×写真に奥行きを出す
●NEWS
×カードが小さい
×メインビジュアルに重ねない
×過去のニュースは”MORE”でリンク先にとばす
●コンセプト
×並び順はPC表示の左→右を上→下にする
×写真とテキストは重ねない
●ラインナップ
×左右切り替えのボタンはカードにくっつける
×他のメニューなどは”MORE”でリンク先にとばす
●アクセス
×地図の縦幅大きくする
●フッター
×サイトナビは均等揃えにする
こうしてみると、自分のデザインで足りないところがたくさんありました。
特に私の場合、「メインカラムの組み方」と「詳細ページへのリンクボタン」を考える必要があるなと思います。
いや～、ただ横並びを縦にするだけじゃだめですね･･･！勉強になりました。
スマホのデザインへの気付き
せっかくなので、見本のPCとスマホのデザインで気付いた点をまとめました。ただ見ているだけではスルーしてしまいそうなところも、実際に手を動かすことでより深く理解することができたと思います。
スマホのデザインを考えてみるのは初めてだったので少し苦戦しました。
Twitterでも「#1日1サイトレビュー」をしているのですが、今後はもっとスマホデザインの細部に着目したいなと思います！
コメント