こんにちは、アルパカ(@engineeraru)です。
デイトラのWeb制作コース初級編『実践編(LP作成編)』『終わりに』を学習するときに役立つ情報をまとめました。
目次
デイトラ Web制作コース初級編『実践編(LP作成編)』の学習記録
【DAY18~24】モデルを決めて実在するお店のLPを作る
POINT
formを理解する
課題で書かれていることをやればOKですが、formの使い方だけちょっとむずかしいので解説してみました。
フォームを作るためにHTMLのformタグを使う
お問い合わせフォームは、HTMLの<form>タグで作ることが出来ます。
WEBページの中にお問い合わせフォームを作ることで、何が出来るのかというと、
「問い合わせたい内容」を「どこか指定の場所」に送ることが出来ますよね。
そして、その指定の場所で、内容を色々と処理します。
※今回の場合だと、問い合わせ内容を受け取って、保管する処理です
つまり
- データを渡したい場所を決める
- 問い合わせたい内容を受け取って渡す
- 送りたい場所の中で、処理をする
という3つのやることがありますね。
このうち、formタグで出来るのは1つ目と2つ目です。
formタグの属性は「action」と「method」
formタグの属性で使うのは主に2つです。
「action属性」と「method属性」です。
先程のやりたいことは、この2つの属性を指定することで実現ができます
- データを渡したい場所を決める → action属性
- 問い合わせたい内容を受け取って渡す(その時の渡し方) → method属性
action属性で指定できるのは、データを渡す先(のURL)です。
一方で、method属性で指定できるのは、データの「渡し方」です。
「渡し方」は、主に2種類あります。
「get」と「post」というのですが、getよりもpostの方がたくさんの情報を送れるというイメージです。
※お問い合わせでは、名前・アドレス・本文と色々な情報を送るので、基本的に「post」を使いますね
formタグとinputタグで問い合わせフォームを作る
ということで、formタグではaction属性でデータを渡す場所を指定し、method属性でデータの渡し方を決めます。
あと2つやることがあります。
データを受け取る場所づくり(入力箇所)と、データを送る処理のトリガーづくり(送信箇所)です。
それぞれ、inputタグを使うことで実現できます。
ってことで全部で4つの処理を書けば、問い合わせフォームは作れます
- formタグのaction属性 → データを渡す場所を指定する
- formタグのmethod属性 → データの渡し方を決める
- inputタグのtypeを”text”にする → データを受け取る場所づくり(入力箇所)
- inputタグのtypeを”submit”にする → データを送る処理のトリガーづくり(送信箇所)
って感じの4つの要素を組み合わせれば「データを受け取って、ある特定の渡し方で、ある場所に渡す」ことができます。
これで、以下の処理の上2つを実現できます。
- データを渡したい場所を決める
- 問い合わせたい内容を受け取って渡す
- 送りたい場所の中で、処理をする
で、3つ目の「送りたい場所の中で、処理をする」という所の「送り先」として、
- 「Google Forms」
- 「form run」
のどちらかを使う感じです。
実装自体は参考URLを真似すれば出来るはずです。
※form runの方が「わからない人向け」にかかれているのでやりやすいと思います。
…ということで、
- お問い合わせフォームをHTMLの書き方に沿って作る
- お問い合わせ内容を送る先はWEBサービスが用意した場所にする(Google Forms / form run)
の2つのことをやりましょう、というお話でした。
デイトラ Web制作コース初級編『終わりに』の学習記録
【DAY25~29】Facebookを使ってアプローチ
POINT
怖さを乗り越えて営業する!
営業の教科書を読む
ちょっと先の内容になるかもしれませんが、ショーヘーさんの営業の教科書で書かれているオススメの営業先や提案文も「なるほど!」という感じでした。
ある程度実力ついて、このやり方をすれば、確かに仕事は取れるなと思います。
Web制作の仕事のとり方が分からない人に捧ぐ
『直営業』の教科書
依頼相手を探してみた
依頼相手の探し方ですが、友人でホームページほしそうな人がいないかな?と考えました。
- フリーランス(個人事業主)になった人
- 小さな会社に勤める人
という観点で、声をかけてみた結果、「田舎の地場企業」に勤める友人に依頼してみました。
私が依頼時に伝えたことは以下の通り
- すでにあるホームページを、今風に変えたい
- レスポンシブデザインに対応する
- 素材などは新たに用意不要(現在あるもので対応する)
- SEO対策はほぼしない(企業名、地域で調べた時に上位に上がるようにできたらするかも=ちょっとしたメリット)
- テンプレート(参考URL)を添付した
- “もしも”気に入ったら使ってほしい
という感じ。
で、気をつけた点としては、
- 「先方の手間・作業が無いこと」
- 「相手にリスクが一切ないこと」
をしっかり伝えることかな、と思います。
相手も面倒くさいのは嫌だろうし、押し売り的に「作ったから絶対買ってね!」という感じは困るはずなので。
【追記】
友人に打診した結果、OKもらえました。
友人の身内(クリエイター)でWEBサイト作りたい人もいるようでして、うまくサイトを作れれば次の仕事にも繋がりそうです。
最初の一歩を踏み出すことが、一番大変なのかもしれませんね。
復習時に読むべき記事
デイトラ Web制作コース初級編のまとめ
デイトラ Web制作コース初級編お疲れさまでした!
デイトラは他の教材以上に「実践」に重きが置かれた良いカリキュラムだと思います。
とはいえ「なんとなく、理解できているか不安…」という人もいるはず。
そんな方は、書籍で体系的に学び直すのがオススメです。
デイトラを30日分やった今なら、かなり効率よく頭に入るはずですよ!
【Web制作初心者必見📖】#デイトラ Web制作コースの制作やメンターを担当してる5人で、それぞれオススメの技術書を紹介しました❗
️
全てホントに良書なんですが、一気に買うと3万越えるし高確率で挫折するので、学びたいと思ったタイミングで1冊ずつ勉強してみてください👍https://t.co/JgcDwaxUwT— ショーヘー@東フリCMO (@showheyohtaki) 2020年4月21日
一応、個人的おすすめも紹介しておきます👍
HTML&CSSを体系的に学ぶなら
数冊読んでみましたが、下記の2冊が個人的には読みやすい & 理論もありで、気に入りました😊
(2024/12/21 12:04:12時点 Amazon調べ-詳細)
(2024/12/21 12:04:13時点 Amazon調べ-詳細)
Amazonページを開くと試し読みできるので、中身を見て「個人的に読みやすいと思う方」を買うと良いですよ!
デザインに興味を持ったら
デザインに興味を持ったら、この本がおすすめ。
HTML&CSSは学べませんが「良いデザインとはなにか」がしっかり解説されている良本です。
(2024/12/21 23:55:35時点 Amazon調べ-詳細)
その他にも、「(コーディングに限らず)Webを学ぶ」のに役立つ書籍は記事でまとめてあります👇
また中級編の解説もやりますね〜😃
以上、アルパカ(@engineeraru)でした。
デイトラ進める上で、タキさんのブログも参考にさせていただいてます。
問合せフォームの説明非常に分かりやすくて助かりました。
1冊ですべて身につく・・・の本を購入したので、引き続き学習します。
ありがとうございます!
中級編も色々と書いているので、勉強の補助にぜひどうぞ(*^_^*)