無料教材の次は小さな課題を1つ作る

教材を読んでも「自分でやってみて」で手が止まる人は、配布した小さな課題を1つ作ります。作るものを決めれば、つまずいた作業に合わせて次に読む教材を絞れるからです。PCで迷ったら答え合わせ付きの売上レポートを選び、最初の行の売上から計算します。

迷ったら売上レポート、PCがなければ集客計画

売上レポートには答えの数字が付いているので、計算の間違いを自分で見つけられます。Webページは文や色の変更が画面に現れ、集客計画はメモだけで始められる課題です。高額な講座を選ぶ前に、自分がやりたい作業を試すだけで十分です。

Progateなどで学んだ未経験者の記録にも、何を作ればよいか分からず止まり、動画をまねたコードを少し変えて画面とのつながりが分かった、という声があります。私なら、教材をもう一つ増やす前に、ひな形の一か所を変えるところから始めます。

無料の練習用ひな形をダウンロードする（ZIP）

配布ZIPは無料で登録不要。展開すると、売上のCSVと答え、Webページ、集客計画のひな形と記入例が入っています。数字も人物も架空なので、自分の練習に合わせて書き換えて構いません。

売上レポートは計算と理由の説明を分ける

この課題では、どの月の売上が最も大きいかを調べます。データは文具店の4か月分で、1行は「1か月・1商品」の記録。注文やお客さんごとの記録とは違います。

CSVは表を文字で保存したファイルです。「data」フォルダーの「sales-practice.csv」を表計算ソフトで開きます。Googleスプレッドシートではファイルのインポートで読み込めます。

数量に単価を掛けてから、月ごとに足す

1. 読み込み時に選べる場合は、文字コードを「UTF-8」、区切り文字を「カンマ」にします。A列から「月」「商品」「数量」「単価_円」が並び、月・数量・単価が数値になっていれば準備完了です。
2. E1に「売上_円」、E2に=C2*D2を入力し、E13までコピーします。最初のノートの行が5,000円になれば、数量と単価を掛けられています。
3. G1に「月」、H1に「売上_円」と書き、G2〜G5に数値の4、5、6、7を入力します。元データの月も日付ではなく数値です。
4. H2に=SUMIFS($E$2:$E$13,$A$2:$A$13,G2)を入力し、H5までコピーします。A列の月がG2と同じ行だけ、E列の売上を足す式です。
5. G1:H5を選び、挿入メニューから縦棒グラフを作ります。横軸を月、縦軸を売上金額にし、縦軸は0から、単位は円にします。

答えは4月10,000円、5月12,100円、6月8,700円、7月15,500円、合計46,300円。「sales-answer.csv」と数字が合えば、グラフにする計算は完成です。

増えた理由まで、売上だけで決めるのは早いですよね。このデータには広告を出した記録も原価もなく、広告の効果や利益は分かりません。レポートには次の内容を分けて書きます。

• 売上が最も大きいのは7月。単価は各月同じで、売上の差は販売数の差から生じている。
• 販売数が増えた理由を調べるには、営業日数、来店数、在庫切れ、広告の記録が要る。

Web制作は自分の文と色に変える

HTMLはページの文や見出しを書くための言葉、CSSは色や配置を決めるための言葉です。自分のファイルを開いて編集できる人は、手元の本やMDNの説明で進めれば十分です。

コードを書く場所で止まる人はProgateから

PCはあるがコードエディターを用意できない人には、ブラウザ内で演習するProgateが合います。自分のファイルを編集するMDNとの違いは、コードを書く場所が用意されていること。まず通常の無料プランを使い、有料プランやトライアルは選びません。

有料の続きを使う場合、Web版プラスの月額契約を続けた3か月分の総額は4,470円です。

公式料金の月額プランは毎月自動更新です。停止は次回更新日時より前に、アカウント設定の「お支払情報」から。途中解約の返金はありません。

48時間のトライアルは通常無料プランとは別です。新規登録後7日以内に専用ページで申し込む、日本国内からの利用者が対象。支払方法の登録が必要で、終了前に解約しないと有料へ移行します。

コードを書く場所で止まる人は、PCのブラウザで通常の無料会員登録をして、HTML & CSSの冒頭部分から始めましょう。アカウント名・メールアドレス・パスワードを用意し、規約に同意して登録が完了するとサービス利用契約が成立します。各コースの冒頭部分は期限なしで無料、無料部分だけの所要時間は公式に記載がなく、有料プランやトライアルへの申込みは別です。

配布HTMLを編集して、幅の狭い画面でも読む

「web」フォルダーの「index.html」をブラウザで開くと、練習用ページが表示されます。編集には、コードを書くためのアプリであるコードエディターを使います。同じファイルを開き、UTF-8のHTMLとして保存する手順です。

1. 名前と学んでいること、「作ったもの」、「次に試したいこと」を書き換えます。名前は仮名で十分です。
2. CSSの--accentの色を変え、保存してブラウザを再読み込みします。文字と背景が見分けにくくなったら、元の色に戻します。
3. ブラウザの幅を狭くし、見出しが切れず、横スクロールせず読める形に整えます。ページ内のリンクも、目的の場所へ移動すれば完成です。

この練習はPCのブラウザで行います。インターネットへの公開や、実際のスマートフォンでの表示まで進める必要はありません。

集客計画は困りごとと次の行動をつなぐ

PCがない人は、スマートフォンのメモアプリに下の記入例を写して始められます。ひな形を開ける人は「marketing」の「plan-template.md」を使うと便利です。末尾が「.md」のファイルも中身は普通の文章なので、そのままメモへコピーできます。

題材は駅の近くの架空の文具店です。仕事帰りにノートを買いたい人が、何を知らずに迷っているのかを考えます。

「売上を増やす」だけでは、何を作ればよいか決まりません。欲しい情報を伝え、その後の行動を数えるところまでつながれば、計画は完成です。広告を出したり、SNSに投稿したりする費用はかかりません。

振り返るときの見直し方も書きます。案内を見た人が少なければ、情報を届ける場所を変える。見られていても在庫確認へ進まなければ、情報やリンクが分かりやすいかを見直す、という具合です。

作ったものを説明すると次の教材が決まる

完成後は、作ったもの、変えた箇所、まだ分からないことを3文で書きます。例えば集計の式を説明できなければ、その関数を次に学ぶ。画面が崩れた原因が分からなければ、CSSの説明に戻る。全部の教材を終えるより、止まった作業に絞るほうが次の一歩を決めやすいですよね。

学習先を変えたい人には日本語で使える無料学習サイト、Excelの技能を資格で示す必要がある人には日商PC2級とMOS Excelの教材・費用の比較があります。練習を終えたことだけを理由に、資格の本を買い足す必要はありません。

まずは選んだ課題で、自分で変える箇所を一つ決めます。PCがない人は、上の集客計画の例をメモに写して始められます。