【アラフィフ英語+IT】32ヶ月目・Webflow独学のロードマップを探す
先月から学習内容をWebflow一本に絞ってみました。日本語教育の研修も受け始めため、少しスローペースになっています。
IT
Webflow独学の順序を探す
YouTubeで検索したところ、こちらの動画で初学者のロードマップを紹介していました。
1. Webflow 101 Crash Course（公式入門コース）
2.Webflow Flexbox Game（公式のフレックスボックス練習ゲーム）
3.Webflow Marketplace （テンプレートの構成をWebflowで確認）
4.Webflow（好きなサイトをWebflowでコピー）
結果的には、1→2→1→2→3の順番でやってみました。4は今のところまだ難しいので、もう少し学習が進んだら挑戦してみます。
とはいえ、HTMLとCSSを勉強していた時は、よくある練習方法としてサイトのコピー（トレース）が挙げられていて、そんなの絶対無理！と思っていたのですが、Webflowを使い始めるともしかしたらできるかも？と思い始めてきたのです。なんというか、Webflowはノーコードなんですが感覚的にコードを操作している、そんな感じです。
1. Webflow 101 Crash Course
公式のWebflow 101 入門コースをただリラックスして見る
8月の初めに、アドオンのLanguage reactor（英語字幕と日本語字幕を同時に出せる）が突然使えなくなり、redditなどで原因を探していました。どうもChromeがLanguage reactorをサポートしなくなったようで、焦ったのですが、一週間くらい待ったら何事もなかったかのように復活しました。
この101クラッシュコースは、初めて見た時にはついていくのに精一杯だったものの、下のFlexbox Gameを終わらせて二度目に見たら、ああそういうことかとかなり理解が進みました。全部で3時間弱くらいのコースです。終わりの方は結構難しいので、なんとなくぼんやり見るだけでもいいかもしれません。
2. Webflow Flexbox Game
ゲームによってFlexboxの考え方を掴む
まず、公式から出ているFlexboxを解説している下のムービーを見てチュートリアルをざっと読んでみました。
コンテンツをボックスとしてとらえ、それを入れ子にする時の順番だけを指示することによって、デバイスの幅が変更された時にもレイアウトは絶対崩れないという考え方、のような感じではないかと思います、今のところは…。
実際にWebflow Flexbox Gameを開いてみると、以下のような感じです。
番号のついた丸い物体（これがFlexbox）を同じ数字と色の枠に合わせていきます。
赤枠を押して、Flex Parentのツールを表示させてから操作します。
レベル1から28まであります。これはレベル9。
わからないところは、ChatGPTに聞いたり、最後の数レベルはかなり難しかったので、チート動画を使いました。
チート動画はUIが昔のものだったので、そのままの手順では完成しないのですが、WebflowのUIの変遷を見ることができて、これはこれで面白いです。
（WebflowのUIはCSSを視覚的に表現したものと思っていますが、CSSの捉え方の今昔が見えて興味深いです。例えば親flexboxにおいて子flexboxをwrapするときに、旧UIではwrapというボタンがあるのが、新UIではdirectionの一部に変わっているなど…）
3.テンプレートでサイトの構成を確認する
Webflowのテンプレートから自分の好きなものを選び、Webflowのプラットフォームではどのような構成になっているかチェックしました。
こんなインテリア系のオシャレサイトを選んでみました。CMS (Contents Management System) とのことです。ワードプレス的な、デザインを先に決めてしまってコンテンツのみ後から追加したり編集したりできるものかな、と思っています。
HTML・CSSでコーディングすると、「コーディング→Run→実物ができる」というイメージですが、Webflowでは逆のベクトルの「実物をいきなり操作する→（結果としてコードも生成される）」という感じです。
このWebflowでの「実物を操作する」のは感覚的にはできるものではなく、コーディングの知識・概念の理解が必要で、Webflowはノーコードとは言っても今までコーディングをしていた人が時間節約に使うようなものではないかと思いました。
結構、勉強時間はかかりそうです。
テンプレートを使うと簡単に美しいサイトができそうです。
4.好きなウェブサイトのトレースをWebflowで行う（予定）
これはまだ行なっていませんが、Easiest way to learn Webflowの動画で解説されていた練習方法です。
自分の好きなウェブサイトをWebflow上で自力で同じデザインにする。
その後、元ウェブサイトに行ってブラウザのInspect Element機能などでHTMLとCSSの構成を見る。div、container、classがどのように使われているか知る（積み上げられたレゴを論理的に理解するようなもの）。
英語
語彙数チェック
Preply English Vocabulary Testにて語彙数チェックをやってみました。
日常の用を足すには大丈夫ですが、情報収集には全然足りない感覚です。15,000語くらい欲しいところです。
語源
引き続きパス単準一級を使い、語源・意味・例文のディクテーション&画像検索・類似語を調べています。
ここ最近で面白いなと思った語源：
outsource ：outside + resourcing、1980年頃に登場。その頃にアウトソーシングという業務形態が始まったのでしょう。
bug ：ウェールズ語bwg（邪悪な魂）より。コンピューターのエラーをバグと名付けたのは、「虫」の背後の「邪悪な魂」と考えるとしっくりきます！
lengthy ：length + y 、1680年頃アメリカで使われ始め、19世紀にイギリスに逆輸入されてイギリスでも使われ始めた。
cowardly：ラテン語coda（尻尾）より。音楽の楽譜の最後の方にcodaありますね！
ecological：ギリシャ語okios（住宅・家族）+ logos（言葉・言語）。ギリシャ語語源の単語はたまにあり、勘でわかるようになってきました。響きがかっこいいんですよね。
bride: おそらくインドヨーロピアン祖語のbru（料理する、brothを作る）から。日本の出汁よりbrothは大変そうだな…沖縄の昔の女性の名前、「ナベ」さん「カマド」さんを思い出します。
日本語文法の本
日本語を主に英語圏の人向けに教えるグループで研修を受けることになりました。いずれ、アジア出身のエンジニア向けに教えたいという希望はあります。
以前から日本語教育の本は結構家にあるのですが、改めて読んでいます。こちらは英語圏の日本語学習者に絶大な人気を誇るTae Kimさんの日本語文法書です。日本語ネイティブでは気づかないルールを詳しく解説しています。
ちなみにこの本は昔は日本のアマゾンでは買えず、ベトナムに住んでいた時にアメリカから取り寄せました。10ドル台だったと思います。今は日本のアマゾンで買えますが、高いですね。Tae Kimさんのサイトのプリント版なので、サイトを読むだけでもいいかもしれません。
kindle読書
共和党副大統領候補、J.D.ヴァンス氏のヒルビリー・エレジーはやっと8割を超えました。J.D.がロースクールに通いはじめて、周囲の友人がほぼ全員リベラルであることに気づき、初めて自分が育ったヒルビリーのカルチャーに違和感を感じ、そしてそれが自分の中での葛藤となっていく様子が丁寧に描かれています。
英語でIT、ここ数年でやったこと
リンクがあるものはおすすめです。
HTMLとCSSを一通り（Progate英語版, W3Schools, Codecademy)
英語圏中学生のCSの参考書と、7年生のCS教科書を通読
Webflow（現在）
1と2は順番が逆の方が良かったかもしれません。あとはこの順序で良かったと思います。
挫折（フェードアウト）したもの
PHP, SQL, Python
基本情報技術者・応用情報技術者
CompTIA IT Fundamentals
CS50
Udemyのいろんなコース
Couseraのいろんなコース
ITと一言で言っても本当にジャンルは幅が広く、学び方も学校に通う・オンラインスクールに通う・本で独学するなどいろいろです。自分に合った分野と学び方を見つけて、楽しく続けていこうと思います。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？