chevron_left

スマホサイトを作って学ぶ、サイト制作入門

PREMIUM

スライド資料

会員登録して、全てのスライドを見よう

1 / 9

授業の概要

一言で言うと「スマホサイトを0から作って、FTPソフトでレンタルサーバーでアップして公開しよう」という内容です。
サンプルとしてカフェのスマホサイトですが、応用して美容院や歯科医院などにも。制作会社に依頼するまでもない規模のサイトを作れるレベルを想定しています。
ご自身のサイトや知り合いのサイトをまずは作れるように制作の基本から抑えつつ、つまづきやすいポイントや知っておくと良いコラムなど交えながら楽しく制作できるよう進めていきます。


「一度やってみたけど難しくてできなかった…」

「サイト制作って英語ばっかだし難しい…」

と思っている方、是非一度チャレンジしてみませんか?
慣れないことはたくさん出てきますが、一つ一つ解決していけばすぐにわかるようになります。
制作の楽しみを発見しましょう!

対象者:


HTMLとCSSは経験があって初心者ではないがスマホサイトを作った経験がない
FTPソフトやレンタルサーバーを借りるなど自分でやってみたいが自信がない
開発者ツールを使ったことがない

どんなことを学べるか:
・カフェのスマホサイトを0から作れる
・dreamweaverの使い方をサイト制作を通して学べる
・FTPソフトのインストールと使い方を学べる
・レンタルサーバーの選び方と申し込み方法から設定までひと通り行う
・制作したHTMLファイルをFTPソフトを使ってアップロードするサイト制作の一連の流れを知れる
・デバイスに左右されにくいサイト構築のノウハウを知れる
・Chromeブラウザの開発者ツールの使い方を学び効率のよいCSSの構築方法を学べる

チャプター

play_arrow
前回までのおさらい
02:10
play_arrow
・ディベロッパーツールの使い方
01:50
play_arrow
・高解像度対応のためのCSS設定
02:35
play_arrow
・Frickのための実装(javascript)
02:25
play_arrow
・viewportの設定
02:20
play_arrow
・format-detectionの設定
01:40
play_arrow
・webkit-background-sizeの設定
01:00
play_arrow
レンタルサーバーを借りる
01:00
play_arrow
・レンタルサーバーのちがい
01:04
play_arrow
・ウェブサイトに合わせたレンタルサーバー
02:41
play_arrow
・初めてレンタルサーバーを借りる人がチェックすべきポイント①(ディスク容量)
04:00
play_arrow
・初めてレンタルサーバーを借りる人がチェックすべきポイント②(データベース)
01:55
play_arrow
・初めてレンタルサーバーを借りる人がチェックすべきポイント③(ファイルマネージャー)
03:20
play_arrow
・ロリポップの申し込みステップ①メールアドレスの登録
04:35
play_arrow
・ロリポップの申し込みステップ②プラン選択
05:50
play_arrow
・ロリポップの申し込みステップ③申し込み完了/確認
04:42
play_arrow
FTPソフトのインストール
03:43
play_arrow
・Win&Macどちらでも使えるFilizillaをインストール
05:35
play_arrow
・FTPソフトの設定
05:57
play_arrow
1回目の授業で作ったデータをサーバーにアップし公開
05:33
play_arrow
・実際に自分のドメインにアクセスしてみる
01:10
play_arrow
・スマホからアクセスしてみる
04:18
play_arrow
【後半】質疑応答
07:49
play_arrow
Q:リダイレクトループがあるようなので、ソースのチェックをしています
01:33
play_arrow
Q:サーバー選定についてですが、ロリポップを今回利用したのは
01:43
play_arrow
Q:AWSはどうなんでしょうか?
01:32
play_arrow
Q:同じURLで、PCから見るのと、スマホから見るのとで、表示が違うサイトがありますが、どのような技術になっているのでしょうか?
01:23
play_arrow
Q:先生はスクーに応募してご登壇したそうですが、なぜご登壇しようと思ったのでしょうか?
02:57
play_arrow
Q:普段先生は、サイト作成時、手打ちで作りますか?
03:43
play_arrow
Q:先生はBootstrapとWordPressを使ってスマホサイトを作成したことはありますか?これを使うときに大変だった事があれば教えて下さい。
01:38
play_arrow
Q:今のテキストエディタみたいな物の名前は何ですか??
01:18
play_arrow
Q:独学でWEBページの制作を学ばれたとのことですが、どのような方法で習得されましたか?
02:44
play_arrow
Q:ほかのサイトを見る時に意識しているポイントはありますか?
03:15
play_arrow
Q:先生はアイデアが枯渇したときに何かサイトを見たりしてネタを集めたりはしますか?
02:50
play_arrow
Q:ライブハウスのサイト更新はCMSではなく、普通にHTMLとCSSでコーディングやっていたんですか?大変ですね。今だったら、googleカレンダーとかでスケジュールの調整ができますもんね。
01:46
play_arrow
Q:スマホから見ると、よく「PC・スマホの表示切替」がありますが、どのようになっているのでしょうか
04:09
play_arrow
Q:パソコンとスマホのサイトをデザインされるときどちらからデザインされますか?
01:20
play_arrow
Q:既にアップしたファイルを編集した際の更新方法を教えてください。Filezillaでそのファイルを消してアップしなおせばいいですか?
01:01
play_arrow
Q:今はすべてCMSで作成するのでしょうか?それはクライアントのためにですか?それとも自分で楽に更新するためですか?
01:03
play_arrow
Q:よく使うフォントタイプはありますか?特にスマホ向けのサイトではどれを
00:51
play_arrow
Q:先生はphpなどでのWeb開発も行いますか?Webデザインと開発の両方できる方はWebデザイナーのなかでも何割ぐらいなのでしょうか?
01:42
play_arrow
Q:今更ですが・・・先生はなぜwebデザイナーを目指されたのでしょうか?
01:40
play_arrow
課題発表