見出し画像

Web制作学習008【学習をおもしろくするには工夫が必要】2021.05.26~

よしあき

今日は学習開始10週目で、
レスポンシブウェブデザインを学んでいた時期のお話です。

この時期、
工夫がなければ学びの継続が難しかったと思います。

PCでもスマホでもタブレットでも、
機器に応じたデザインを学ぶには、

やっぱりより実践的な学習材料が必要でした。


ドットインストールのレスポンシブウェブデザインの動画はわかりやすかったけど、つまらなかった。

画像1

ドットインストールでの動画学習は、
とてもわかりやすく2.5時間くらいで終わってしまいました。

「つまらなそう」と思っていて、
先のばしにしていたのですが、

こんなに簡単なら、早くやってしまえばよかったです。

とはいえ、
ここでどれだけのことが学べたかといえば、

これくらい。

スクリーンショット 2021-07-25 8.08.27

画面幅が600px以下になると、
adの領域を表示させないようにできますよ

という程度。

スクリーンショット 2021-07-25 8.08.45

これだけやってても何もおもしろくありません。


スマホで確認するなら、アップロードした方が面白い

画像4

ドットインストールで、
上記のような簡単なレスポンシブなページを作った後、

せめて実際の写真やテキストを使ってテストしてみようと思いました。

写真はその場でiPhoneで適当に撮って、
テキストも適当に。

画面幅が広いときには、
写真とテキストは左右に表示され、

スマホなど画面幅が狭くなったら、
写真の下にテキストが表示されるように作ってみました。

わざわざこんなことをしなくても、
「検証ツール」というものを使えば確認できるのですが、

この方が圧倒的にたのしく学習できます。

それに、ときどき思わぬ気づきを得られることがあります。


ポートフォリオサイトがあると、ここでも実験に使える

画像5

上に書いた簡単な実験が終わったら、
次はポートフォリオサイトのレスポンシブ化に取り組みました。

レスポンシブ化する前のポートフォリオサイトは
こんな感じでした。

画像6

メインビジュアルの写真は切れてしまっているし、
ナビメニュー見えておらず、

右側にスクロールしないと出てきません。

これをレスポンシブ化したものがこれです。

ナビメニューをコンパクトにまとめ、
ロゴの下に持ってきました。

作品紹介のセクションでは、

作品のイメージ画像の下に、
説明文を持ってきました。

画像7

ポートフォリオサイトを材料にすることで、
基礎学習では学べないところを多く学べました。

たとえばメインビジュアルで使った写真ですが、
単純に縮小表示するだけでは、

意図したデザインになりません。

PCでは画面の横幅の方が広いですが、
スマホでは縦の方が広いためです。

このときは、
PC表示のときとスマホ表示のときと、

写真を変えて表示しました。

この他、
写真は変えずに画面幅に応じてトリミングする

という方法もありました。

こういう学び方をすると、
たのしく学べ、より頭に入るかと思います。


まとめ

画像8

今日は学習開始10週目のお話でした。

この時期ドットインストールで
レスポンシブウェブデザインを学びました。

ドットインストールだでの学習では
レスポンシブウェブデザインに興味が持てず、

実機を使ったり、
ポートフォリオサイトをレスポンシブ化する

という工夫をしてたのしく学べました。

学びは基礎学習とセットで、
実践的な課題を用意するとよりよく学べます。


おまけ

画像9

最近、jQueryというのを学んでいます。

これを学ぶとたとえば
メインビジュアルの写真を何枚か用意して順番に表示したり、

ボタンをクリックすると答えが表示される
などの動的なページをつくることができます。

jQueryを使ったサンプルページはこちら

今回はドットインストールではなく、
Progateというサイトを使っています。

とてもよくできていて、
ブラウザ上でコードを入力したり表示確認したりできます。

より実践的なページのコードにふれられるようにできていて、

上記でふれたドットインストールのように、
無機的な感じではありません。

でもやっぱり「指示されたことをそのままやる」
点では受け身の学びで、

より効果を上げるには自分で課題を設定して
学ぶ方法を工夫する必要があると思います。

ぼくがこういう方法を取り入れたのは、
この本を読んだためです。

何かを学ぶには、
まず学び方を学ぶとよいかもしれません。


この記事が気に入ったらサポートをしてみませんか？