おためし受講中

スマホ最適化のためのデザイン・コーディング実習

既存サイトをレスポンシブウェブデザインとしてスマートフォン最適化を行い、レスポンシブウェブデザインのためのデザインで注意することやコーディング方法を学びます。

「PCサイトは作れるけど、スマホサイトは作ったことがなくて必要性を感じている」
「レスポンシブWebデザインでスマホ最適化を行いたいが、どうすればいいかわからない」

これらのお悩みは授業を受けることにより改善されます。

授業ではサンプル用のPCサイトやスマートフォン用サイトで使う素材を用意しますので、完成デザインを参考にしながらコーディングしていきスマートフォンサイトに最適化していく流れをハンズオンで進めていくため、実際のノウハウが身につきます。

授業で行う内容をレスポンシブサイト制作の案件に応用し、レスポンシブウェブデザインによるスマホ最適化の流れを覚えましょう。

この授業を受けると学べること:


スマートフォンに最適化したサイトを制作するノウハウが身につく
レスポンシブウェブデザインの制作方法を知れる
レスポンシブ化する際の注意するところやつまづきやすい部分がわかる

■ 授業の流れ


1.レスポンシブ化するPCサイト確認/スマートフォンサイトの完成デザイン確認
2.完成デザインを元にスマートフォンサイトをコーディング
3.完成

参考サイト/予習教材

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    04:44  (00:12 ~ )
    完成系の確認/ファイルのダウンロード
    02:04  (04:56 ~ )
    index.htmlに追加の記述
    03:04  (07:00 ~ )
    sp.cssを作成、メディアクエリの記述
    02:29  (10:04 ~ )
    ・主要なcssから記述
    02:28  (12:33 ~ )
    ・スマホサイズで動くか確認
    05:00  (15:01 ~ )
    ・bodyの記述
    05:20  (20:01 ~ )
    ・line/bottomの設定
    02:30  (25:21 ~ )
    ・崩れた部分の微調整
    03:20  (27:51 ~ )
    ・headerの修正
    06:19  (31:11 ~ )
    ・サイドバー作成
    05:40  (37:30 ~ )
    ・copyright部分の調整
    03:43  (43:10 ~ )
    Q:HTMLのhead以外のタグを触らない制限があった場合に、sp.cssなどの外部ファイルのみで最適化することは可能ですか? 元HTMLをできるだけ改変しないという目的です。
    01:07  (46:53 ~ )
    ・Retinaディスプレイの対応方法
    06:40  (48:00 ~ )
    ・スマートフォンで確認
    00:33  (54:40 ~ )
    ・ディレクトリを作成
    03:57  (55:13 ~ )
    Q:画像サイズを二倍にするのと、解像度を二倍にするのではどちらが良いのでしょうか?
    01:00  (59:10 ~ )
    Q:本日の授業にてスマホサイトへの最適化を行う際に%(割合指定)とpx(固定指定)を場所によって使い分けておりましたが、使い分けはどの様に方針を決めていますか
    02:44  (1:00:10 ~ )
    ・2倍のpixel数の画像作成法
    05:06  (1:02:54 ~ )
    【後半】質疑応答
    Q:スマホ対応させる場合、一般的に基準サイズは
    01:13  (1:08:24 ~ )
    Q:前回の授業でiPhoneをMacに繋ぐとSafariの開発の所にiPhoneが出てくると仰ってましたが、出来ないです。
    01:13  (1:09:37 ~ )
    Q:スマホサイトからPCサイトに作成するケースもありますが、PCの方が簡単ですか?
    01:37  (1:10:50 ~ )
    Q:スマホ用にリサイズした画像は、PC用のCSSで、画像の表示サイズの指定をすれば良いんでしょうか?
    02:25  (1:12:27 ~ )
    Q:オススメのレスポンシブフレームワークなどはありますか?
    01:34  (1:14:52 ~ )
    Q:メニューとメインビジュアルは重ならない理由を教えて下さい。
    01:25  (1:16:26 ~ )
    Q:2倍の画像をindex.htmlで半分のwidth指定していましたが、cssで指定しても良いのでしょうか?
    03:12  (1:17:51 ~ )
    Q:既存のサイトをレスポンシブ対応させる場合、どの位、時間が掛かってしまうものでしょうか?
    03:03  (1:21:03 ~ )
    Q:先生がかっこいいと思うレスポンシブルデザインのサイトがあったら教えて下さい!
    03:37  (1:24:06 ~ )
    課題発表
      (1:27:43 ~ )