かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

フロントエンドやデザインを教えるメンター(Menta)はじめました。

2021年9月6日

2022年4月10日

Mentaを使って、Photoshop / Illustrator / Figma / HTML / CSS / Javascript / React / Vue / Nuxt / Next などのweb制作を教え始めました。
始めたばかりなので、初回限定プランや、値段はお安めに設定しています。

始めた理由

最近リモートの仕事で家での時間が増え、web学習の需要が増えてきたように感じています。

  • webで学習するにはどこから手をつければいいのか分からない。。
  • 色々な学習サイトはやってみたけど、正しくできているのかが分からない。。

など、学習を始めたてだと悩むことがあるかと思います。
そんな時に気軽に相談できる人がいると学習が早く進むことが多いです。
教えることが好きなことと、自分としてもリモートで時間が増えたこともあり、
気軽な相談や、学習のサポートなど、専門学校で教えている経験を生かしてサポートしたいと思い始めることにしました。

プロフィール

web制作会社で、デザイナー、マークアップエンジニア、フロントエンドエンジニアなどの経験を積んでフリーとして活動をしています。

週に1日7時間、専門学校の講師として、
Photoshop / Illustrator / Figma / HTML / CSS / Javascript /
React / Vue / Nuxt / Next フレームワークなどのweb制作を教えています。

教えるのはとても好きで、2021年現在講師の仕事は7年目になりました。
生徒には学校や学校外でも就職の相談にのったり
協力してサービスを作ったり様々なサポートをしています。

また、講師以外の4日は業務委託としてプロジェクトに参加して、
フロントエンドエンジニアとしてwebサービスを作っています。

  • Photoshop
  • Illustrator
  • Figma
  • HTML
  • CSS
  • Sass
  • PostCss
  • Javascript
  • Typescript
  • Babel
  • jQuery
  • AngularJS
  • React
  • Vue
  • Nuxt
  • Next
  • Node

サポート内容

HTMLで学ぶこと

文書構造を意識したシンプルなHTMLを学べるようにサポートします。
※ 近年ReactやVueなどのフレームワークが使われるようになり、企業のサイトなどでも
文書構造を意識したHTMLを書いているケースが少なくなっています。
HTMLを正しく理解することで、SEO対策にもなったり、CSSもシンプルになり理解しやすくなります。
また就職にもアピールできるポイントになるかと思います。

  • 文書構造を意識したHTML
  • 見た目と構造を分けたHTMLの考え方

CSSで学ぶこと

文書構造を理解したHTMLを書くことで、分かりやすくCSSを理解できるようにサポートします。

  • flexboxを使ったレイアウト
  • コンポーネント単位で作る考え方(React,Vueを意識した作り)
  • AltCSSについて「最近良く使われているSassやPostcssなどの使い方」

Javascript, Nodeで学ぶこと

現在Javascriptを使って様々なことができるようになりました。
Javascriptの基礎からフレームワークを使ったwebサービス、Nodeをつかったサーバーまでサポートします。

  • Javascriptの基礎
  • jQueryについて(あまり最近は使われなくなりましたがその理由についてなども合わせて)
  • フレームワーク(React, Vue, Nuxt, Next)を用いたシングルページアプリケーションの構築
  • Nodeを使ったサーバー側の実装

実際の学習、専門学校で教えていること

1. HTMLとCSSをしっかりと覚える

その知識をもとにして、いくつか実際にあるサイトを模写してHTML・CSSの基礎を覚えていきます。

2. Javascriptの知識をつける

  • Javascript講座
  • Javascript問題
  • VueやReactを使ったフレームワークなどを使ってポートフォリオの作成
  • スクロール時にcss変えることによる、パララックス効果などの動くサイトの作成
    • 自作パララックス効果を与えるプラグインの使用

3. デザインの知識をつける

Photoshop・Figmaを使ったサイトデザインのサポート。
ショートカットや使い方の支援


参考サイト

  • 生徒用の課題「花を送る」(fullgloom
  • 生徒用の課題 パララックス効果を使った「ポートフォリオ」(ポートフォリオ


プラン相談内容・例

  • webのフロントエンドについての相談
  • ポートフォリオ作成についての相談
  • 画面が崩れてしまって解決したい
  • エラーがでてしまって解決できない
  • どういう仕組みなのか理解できないから知りたい


などなど、気軽にご連絡ください。チャットやZoomでの相談を素早く返答します。

プラン

【通話相談単発「初回限定」】webサービスについて通話や画面共有での相談

項目説明
値段1,000円 単発
相談方法Slack, Skype, Zoom など
時間1時間

【通話相談単発「初回2回限定」】webサービスについて通話や画面共有での相談

項目説明
値段2,800円 単発
相談方法Slack, Skype, Zoom など
時間1時間

【通話相談単発】webサービスについて通話や画面共有での相談

項目説明
値段4,500円
相談方法Slack, Skype, メール , Zoom など
時間1時間

【チャット相談プラン】webサービスについてチャットで継続サポート!

項目説明
値段10,000円 / 月
相談方法Slack, Skype, メール など + どうしてもわからない時の数分の通話画面共有など

【通話相談プラン】webサービスについて継続したサポートを!

このプランは停止中です。チャットプランでどうしてもわからない時にzoomなどで画面共有するなどの形で対応できればと思っています。

項目説明
値段20,000円 / 月
相談方法Slack, Skype, メール , zoom など
時間目安 週に1時間 程度(1ヶ月 4回)

始めたばかりで値段はお安めに設定しています!(値段は変更する場合があります。)
下記のリンクからプラン契約していただけましたら、プランに合わせて対応します!

Menta

下記リンクよりご登録いただけると、お得なクーポンがいただけるようです。
https://menta.work/invite/exaXHsrEO1K2WS1a

おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

よくみられてる記事