ホーム > 技術系 > スマホサイトのデザイン、UI研究

スマホサイトのデザイン、UI研究

スマートフォンサイトのデザインやUIを、世界でもよく見られていると思われるサイトを見ていってコメントしていって、自分のサイトの鑑識眼を高めたいと思います。

Apple

Appleのサイト

https://www.apple.com/jp/

ジョブズ時代のAppleのサイトは、スマホで見てもスマートフォンに対応していないことで有名でしたが、現在はスマホに対応しています。
レスポンシブデザインで同じコードでPCとスマホの両方に対応しています。

サイトデザインの特徴としては、PCでは横長のグローバルメニューが、スマホでは同一メニューで折りたたみのハンバーガーメニューになるようになっている。

フッターメニューのデザインはこんなかんじ

フッターメニュー

ECサイトのヘッダでは、アプリへのリンクが表示され、誘導される。
ハンバーガーメニューは左上で二本線、右上は手さげカバンタイプのカートアイコン。

Appleサイト-ECヘッダ

ボタンのデザイン

Apple-ボタンデザイン

カートでのボタンはフラットデザイン。上のボタンはグラデがあるのだが、統一されていない?

Appleのボタンデザイン2

コンテンツエリアは写真が多く、見出しには見出しっぽい装飾がない。
左右にある程度マージンと行間の余白あり。

Appleコンテンツエリア

テーブルはあまり使用していない。

要素は縦に並べているのが多い。

スマホでは横に並べると要素が圧迫されるので、極力横並びの要素を使っていない。
PCでは見出しから横に要素を並べる場合でも、スマホでは縦に並べるようにしているところが多い。

コメント:0

コメントフォーム
入力した情報を記憶する

トラックバック:0

この記事のトラックバック URL
https://www.itblog.jp/wp-trackback.php?p=9821
トラックバックの送信元リスト
スマホサイトのデザイン、UI研究 - ITblog より

ホーム > 技術系 > スマホサイトのデザイン、UI研究

フィード
リンク集

ページの上部に戻る