✌

✌

✌

✌

✌

✌

✌

レスポンシブWebデザインでスマートフォンに対応！実案件から学ぶCSS3使いどころ講座

次ページから学習サンプルの一部を紹介します

環境をつくる

基本コーディング

イントロダクション

ヘッダーの最適化

グローバルナビゲーションの最適化

サイドメニューの最適化

メインコンテンツの最適化

フッターの最適化

お問い合わせフォームの最適化

商品ギャラリー等の最適化

タブ切り替えメニューのアレンジ

長いメニューに対し、アコーディオンメニューで対応

その他スマートフォンサイト制作にまつわるアドバイス

既存のPC用サイトからHTMLをそのままに、スマートフォン用のサイトをつくる基本的な方法を学びます。

シンプルで部分的につくっていくのでコードが長くならずに集中して理解しやすい状態で学べます。

単にコーディングテクニックだけでなく、「ユーザ目線」を考えたデザインも学習します。

HTML5の基本的なタグを使います。（※）

スマートフォンサイトにおけるCSS3の使いどころを学習します。（※）

つくったサンプルファイルは持って帰れます。

JavaScript は用意したものを読み込んで使っていただきます。

（※）HTML5や CSS3の予備知識は不要です

ヘッダーの最適化

デザインのポイント!ユーザに電話をかけさせることやメールを送らせることに対して、操作が簡単であることを工夫しよう。✌

PC版のデザイン

スマートフォン版のデザイン アイコン化したデザイン

グローバルナビゲーションの最適化

デザインのポイント!ボタンが画像の場合、テキストに直してボタンとして押しやすいようにCSSを調整しよう。✌

PC版のデザイン

スマートフォン版のデザイン

✘

ALERT項目の多いグローバルナビゲーションは入りきらないので、PC用のデザインを設計する際からモバイルのことを考えるのがベターでしょう。

!

サイドメニューの最適化

デザインのポイント!左右に分かれたレイアウト（2カラム・3カラム）は原則 floatを解除して効率良くコンテンツを届けよう。✌

スマートフォン版のデザイン スマートフォン版のデザイン

メインコンテンツの最適化

デザインのポイント!画面が狭いため、単にマージン（余白）を充分取っても無駄が多くなる。特に商品関連は区分けを工夫しよう。✌

ALERTこのようなコンテンツは視覚的に「どこからどこまで」を明確にデザインしておかないと、あいまいなカタチでユーザに伝わってしまいがち。

!

スマートフォン版のデザイン

スマートフォン版のデザイン

長いメニューに対し、アコーディオンメニューで対応

デザインのポイント!長めのサブメニューを折りたたみタップで展開する場合、ユーザに「展開できるヒント」を与えよう。✌

HINTせっかく実装したアコーディオンメニューも、ユーザが展開できることに気づいてくれなかったら意味がありません。ここでは、展開メニューが見え隠れしているようにユーザにヒントを与えています。そのために多少の立体感も演出します。

!

PC版のデザイン

http://m-school.biz/course/web/css3-responsive-web-design.htm

レスポンシブWebデザインでスマートフォンに対応！　　実案件から学ぶCSS3使いどころ講座