【デイトラ】卒業制作課題終了から実務編【WEB制作コース】

当記事はデイトラでWEB制作コースを受講して35週間、どんな状況でどんな勉強をしているのかまとめています

未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。

そんな方の判断材料になれば幸いです！

基本的に目次を見れば内容がわかるように書いてあります！

なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。

ばく

卒業制作が完了し、実際に案件を取ろうと行動しています。

この記事では以下のことが書かれています。

　学習時間は1017H、学習より営業に時間をかけていて学習時間は伸びませんでした。

＼デイトラを受けるならここから／

卒業制作終了後の動き

デイトラ上級まではひたすらサイト制作について学習、コードを書いたり知識をインプットします。

上級卒業課題まで終えると、実務編のカリキュラムがありますが営業についてのマインドセットだったり、ノーコードツールの使い方だったりと、横に幅を広げるようなカリキュラムです。(上級の途中でも実務編で学習する場合もありますが)

案件をいただくために日々活動しています。

残念だけど、一生稼げない🥲

「なぜなのか？」

目標の月収があるとします。

5万円でも30万円でも100万円でも同じ。

目標に届かない原因はほぼこれです↓

「今やるべきことをやらないから」

と思っていたら、じつは

「今やるべきことを"わかってない"から」…

— ウェブさえ (@websae2012) August 1, 2024

ばく

基本的な学習はできたと思い、営業に全力で取り組んでいます(｀･ω･´)ゞ

登録したクラウドソーシングサイト

案件を探すためにクラウドソーシングサイトに登録しました。

様々なサイトがありますがまずは以下の3つに登録し、案件の相場感、どんな内容のものがあるか、自分の今のスキルでできそうか、等を見ています。

• クラウドワークス
• ランサーズ
• リモグ

1日30分見てみるということをしています。

案件の相場感

しばらくみてると、なんとなく相場感が見えて来る気がします。

• 修正、加筆などの案件は10,000~50,000円
• LPサイトの作成、コーディングは30,000~100,000円
• wordpressサイトの作成、コーディングは50,000~100,000円〜

このくらいの相場感のように感じます。

熟練のプロ達と同じ土俵で案件に応募させてもらうので、新人としては値段を下げて対抗するのが選択肢の一つかと思います。

案件の内容

以下の順番でたくさん見ます。

1. サイトデザインからコーディングまで全部制作
2. LPサイトのデザイン
3. WEBサイトの修正
4. wordpressサイトの制作(5ページ〜

SEOの知識が必要だったり、アニメーションをつけてほしいという内容も多々見られました。

クライアント様との打ち合わせで内容を詰めていく、というものも多く見られました。

卒業制作のレビュー内容、修正内容

デイトラ卒業制作が完了したらレビューがもらえます。

卒業制作で僕が指摘してもらった箇所は8箇所になりました。

• wordpressで作ったメニューリンクが機能しない(404ページへ飛ぶ)
• 全体に太字のフォントが効いていない
• デザインとのズレがある
• ラジオボタン、チェックボックスにtabキーでフォーカスしない
• 画像が1MBを超すものがあったので1MB以下にしたい
• reCAPTCHAがサイト全体にかかっており、重くなっている
• 要素が画面端に隣接しないように余白を付けたい
• タブレット付近での改行のバランスが悪い

ばく

実際に案件で起こったらと考えるとヒヤヒヤしました((((；ﾟДﾟ))))
それぞれの解決方法を書いていきます！

wordpressで作ったメニューリンクが機能しない(404ページへ飛ぶ)

wordpressのダッシュボードより

外観→メニューから作ったメニューが機能しない、スラッグが正しいのに指定したページへ推移しない事がありました。

ローカル環境では動いたのに_(:3」∠)_

解決方法

試したこと

• 個別ページだったので、作成したページが消滅していないか？
• スラッグは正しくなっているか？
• javascriptやfunctionのコードでなにかリンクを変える動きをしていないか？
• 指定したphpファイルが消えていないか？

全体に太字のフォントが効いていない

タイトルや、テキストに使われるフォントにweightがかかっていませんでした。

ばく

なんとなく薄いなと思いつつ、スルーしてしまったので最後までfont-weightがかかりませんでした。

font-weightを読み込まないコードをfunction.phpに書いたため起こりました

だめなコード

<?php
function my_script_init()
{
    // Google Fontsの事前接続
    echo '<link rel="preconnect" href="https://fonts.googleapis.com" />';
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />';

    // Google Fontsの読み込み
wp_enqueue_style("google-fonts", "<https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap>", array(), null, "all");

解決方法

function.phpに書く内容を変更しました。

<?php
function my_script_init()
{
    // Google Fontsの事前接続
    echo '<link rel="preconnect" href="https://fonts.googleapis.com" />';
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />';

    // Google Fontsの読み込み
    wp_enqueue_style("google-fonts", "https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap", array(), null, "all");

デザインとのズレがある

完全に自分の勘違いでデザイン上タイトルに縁取りがあると思い、実装しました。

実際はなかったのですが_(:3」∠)_

ピクセルパーフェクトまでしたのになぜ…

ラジオボタン、チェックボックスにtabキーでフォーカスしない

コンタクトフォーム7で実装したラジオボタン、チェックボックスにtabキーで移動しませんでした。

名前やテキストエリアのテキストを入力する欄にしかフォーカスされず、アクセシビリティが良くないのです。

解決方法

ラジオボタン、チェックボックスに属性tabindex:0を追加しました。

コンタクトフォーム7での実装具体例です

[radio your-choice use_label_element class:custom-radio tabindex:0 default:1 "きのこの山" "たけのこの里"]

[checkbox* checkbox-999 class:checkboxes use_label_element tabindex:0 "項目1" "項目2" "項目3"]

画像が1MBを超すものがあったので1MB以下にしたい

画像の容量が大きくてサイトの表示速度が遅くなっていました。

シンプルに読込時間は直帰率につながるので、画像容量を圧縮する必要がありましたが、抜けていました。

TECH+|Webページの読み込み時間、3秒が限界か - 5秒になると直帰率激増

解決方法

ばく

TinyPNGのみで画像圧縮していたのを、３つのサイトを使用するように変更しました。

TinyPNG

ILoveIMG

サルワカ道具箱

1.8MBの画像が130KBまで圧縮されるので、サイト表示速度が上がります✨

サルワカ道具箱にて.pngや.jpgを使っていた場合、.webpに変換されるためコードの書き換えが必要になります

reCAPTCHAがサイト全体にかかっており、重くなっている

コンタクトフォームより、サイトの安全性を図るためにreCAPTCHA設定する必要があります

しかし、フォーム以外のページにもデフォルトでreCAPTCHAがかかり、サイト全体がおもくなってしまいました。

お問い合わせページのみに付ける必要がありました。

解決方法

function.phpに以下のコードを記述しました。

function load_recaptcha_js()
{
    // 現在のページのスラッグを取得
    $current_page_slug = get_post_field('post_name', get_post());

    // 'contact' または 'reservation' ページ以外の場合、reCAPTCHAスクリプトを解除
    if (!in_array($current_page_slug, array('contact', 'reservation'))) {
        wp_deregister_script('google-recaptcha');
    }
}
add_action('wp_enqueue_scripts', 'load_recaptcha_js', 100);

特定のスラッグのページにのみreCAPTCHAを設定することができるので、サイト全体が重くなることを回避できます。

スラッグを変更した際は、コードの内容も変更する必要があります。

要素が画面端に隣接しないように余白を付けたい

レスポンシブの確認ミスですね…、とはいえ隣接していると見た目は良くないです。

インナーにパディングをつけて解消しました。

デイトラレビューでここまで見てもらえるのは感謝ですね！

タブレット付近での改行のバランスが悪い

レスポンシブの確認不足によるミス２つ目、長文テキストを画面幅を狭めると見づらくなりました。

画面端から距離を取るためにパディングをつけたことが原因でした。

見た目が変わらぬよう、マージンとテキストを囲う要素にwidhtをつけて調整しました。

崩れる前にハマるようにしたいですね(´・ω・｀)

卒業制作完了から実務編へ【35週目】｜まとめ

web学習を始めて35週目になりました。デイトラのカリキュラムがメインどころが終わったのかなというところです。

9ヶ月かかって学習時間は1017Hです。一月に113H学習していることになるようですね(他人事

先週はサイト作成後に気づいたこと、困ったことがたくさんありましたが、気づかなかったところにレビューを頂いてありがたかったです。

少しでも良いサイトを作れるようにまだまだ努力をしていきたいですね！

ばく

実務を行い勉強したら稼げるところをお見せしたいですψ(｀∇´)ψ

これからも続けたらどうなるか？を更新していくので見て頂ければ幸いです。

リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。

自分も何かのスキルを得たい、変わりたいと思っている方、

一緒に頑張りませんか？

WEB制作のスクールは安い買い物ではありませんが、

頑張るだけの価値はあると感じます。

＼デイトラを受けるならここから／

ABOUT ME

ばく

30代×朝活×学びなおしをテーマに、実践していることを発信しています。 オンラインスクール「デイトラ」WEB制作コースの体験談を主に書いています。

BLOG：https://bac-asablog.com