【WEBクリエイター能力認定試験エキスパート】効率のいい勉強方法を解説

Webクリエイター能力認定試験エキスパート勉強方法

私は職業訓練中に【WEBクリエイター能力認定試験エキスパート】の資格を取りました。

ママ

テキストを購入したけど、分厚さにびっくり!内容も難しそう。合格できるのかな。。

合格率は高く簡単と言われていますが、内容はHTML・CSSの基礎内容で習得するには時間がかかります。

WEBクリエイター能力認定試験エキスパート】を100点で合格した経験をもとに、今だからわかる効率のよい勉強方法やポイントを解説します。パソコンが苦手でも、簡単に使えるおすすめのショートカットも紹介します。

効率のいい勉強方法で、育児の合間に勉強してサクッと合格しちゃいましょう♩

↓気になるタイトルを押すと内容に飛びます。

この記事の内容

学習環境についてのポイント

パソコンをうつ手

自分のパソコンの処理速度を理解する

これはとても重要です。

下記はエキスパート試験時間です。

知識問題

実技問題
20分

テキストエディター使用 110分
Webページ作成ソフト使用 90分
引用元 公式サーティファイより

私のパソコンが普通より遅いことはわかっていた(HDD)のですが、そんなに差はないだろうと自分のパソコンにあわせて勉強をしていました。

練習時にWebページ作成ソフト(ATOM)使用で毎回時間ギリギリ(90分)でホームページが完成。なので試験が不安でしたが、

実際の試験では30分も時間が余ったのです!

パソコンの速度ってこんなに差があるのっ!?

自分のパソコン処理速度を分かったうえで試験対策をすることをおすすめします。

速さが違うポイント
  • 画面がひらく速さ
  • コピペの反応
  • ファイル保存の速度

他にもあると思いますが、同じ操作で30分も違ってきます。まず、試験の時間を知るために確認しましょう。

早いパソコンでファイルが開く速さを見るだけでもわかります。

公式テキスト・問題集を準備する

サーティファイの公式サイトから過去問を練習することもできますが、公式テキスト・問題集を購入することをおすすめします。

Webクリエイター能力認定試験エキスパート問題集
引用元 公式サーティファイ

合格だけが目的なら、公式テキスト、問題集を買わなくてもサーティファイのホームページにある過去問を暗記・練習すると合格します。

HTMLとCSSを理解するには公式テキストが必要です。

公式テキストのおすすめポイント

HTMLとCSSが視覚的にわかりやすくまとめられているので、今後辞書として使える。

公式テキストの内容を簡単にまとめると
  • Webサイト・制作の基礎知識
  • HTML・CSSの基礎と応用
  • Webデザインの基礎知識
  • サンプル問題(知識1・実技1)

Web作成ソフトを準備する

Web作成ソフト使用をおすすめします。

ATOMは書籍でおすすめされていたので選びました。

目的はホームページを完成させること。ノーコードも主流になってきているので楽できるところは楽しましょう。

ATOMホーム画面
出典元: ATOM

ATOMの良い点

  1. 無料
  2. 頭文字を入力することで予測が出てくる
  3. コードの役割ごとに色を変えて表示してくれるのでミスを防ぐことができる

学習のすすめかた

学習のすすめかたは目的によってかわります。

✔️ とにかく合格すればいい
→問題集や公式のホームページの過去問を繰り返し、暗記。

✔️ 内容を理解したい
→①公式テキストにあるサンプル問題のサイトを説明を見ながら作成する
 ②問題集で練習する。

合格率が高いので、私は合格を目的とするのではなく理解することを目的にしました。

ママ

聞いたことのない単語がいっぱい💦できるんだろうか。。

私も不安でした!2回サイトを作成すると簡単に感じる瞬間があります。
とりあえずやってみましょう。

公式テキストの効率のいい勉強の仕方

STEP1.2.3をしっかり理解すれば、あとは操作に慣れながら重要な箇所を覚えるだけです。

ポイントをピックアップしました。

STEP
WEBページを作る手順を理解する 
P29-33

全体像をつかみましょう。

このページは重要です。
しっかり理解しましょう。

STEP
HTMLの基礎知識を理解する 
P42-45

HTMLの基礎を理解しましょう。

STEP
CSSの基礎知識を理解する 
P76-84

CSSの基礎を理解しましょう。
※セレクターは覚えなくてOK!
さらっとみるだけで大丈夫です。

STEP
実技サンプル問題をテキストや正答例をみてやってみる

サンプル問題ではテキストが用意されているので、コピペでサイトが作成できます。テキスト通り打ち込むのは時間がかかります。一から作るのではなく、サンプル問題からとりかかりましょう。

最初はさっぱりわからないと思うので、P52〜や正答例を見ながらゆっくり作成していきましょう。

ここではあまり神経質にならず、手順を知ることが大事です。
ほぼ理解していなくても大丈夫です。

STEP
実技サンプル問題をもう1度解説を見ないでやってみる

1度仕上げたサイトをもう1度何も見ずに作成してみましょう。わからない場合は正答例をみてOKです。

たくさん間違えても問題ありません。出題パターンが同じなので、自分の間違うポイントがわかれば一気に解決できます。

正確にできているかどうかは Googleのテキスト比較ツールdifff《デュフフ》 でページごとに自分の回答と正解をコピペして比較・確認します。

テキスト比較ツールdifff《デュフフ》
引用元 difff


採点基準がテキストにのっているので、どこに配点が大きいか確認しましょう。

STEP
Webデザインの基礎知識をさらっとみる

知識問題はサンプル問題・問題集で傾向を知ってから、さらっとみる感じでいいと思います。

問題集のサイトを作成する

テキストが終われば、後は問題集のサイトを作成するだけです。同じパターンなので、やればやるほど理解しないといけないポイントがわかってきます。

パソコンが苦手でも使えるショートカット7選

パソコンを打つ手

コピペをいかに早く、正確にできるかが時間の短縮になります。

ショートカットを覚えるのが苦手な私でもできたおすすめを紹介します。

①文字を選択 テキストをダブルクリック ※単語しか選択されません。
②↑単語より長い文字を選択したい場合はさらに Shift+→
③全て選択の場合 Ctrl+A

④コピー Ctrl+C
⑤ペースト Ctrl+V
⑥行をコピー貼り付け Ctrl+Shift+D ナビゲーション作成時に、一気にできて便利です。
⑦ファイル名変更 ファイル名を押してF2 複製時、いちいち消さなくていいので楽です。

サイト作成ここがポイント!

絶対に間違えてはいけないところ

ナビゲーション・base.html→複製するのでここを間違えると全てのページに影響します。

見本サイトと見比べて間違いがないかしっかり確認しましょう。ここには時間をかけましょう。

注意するところ

✔︎ 外部スタイルシートの設定
✔︎ CSS背景画像のurl指定
✔︎ スクリプト要素の設定
✔︎ レスポンシブ設定
✔︎ リンク設定

注意するところは、必ず打ち込んでからすぐにサイトに反映されているか確認しましょう。

ポイントはしっかりとおさえ、無理しない程度に勉強することがおすすめです。

まとめ

ポイントとなる箇所をまとめてみました。

最初はテキストの内容に不安を感じると思いますが、問題集を一通りするととても簡単になります。

私はこの資格で、面接時にHTMLとCSSを理解していることを伝えることができ、未経験でも前職の仕事内容+Webデザインの仕事もさせていただいています。可能性を増やすことができました。

この資格だけでは就職は難しいと思いますが、とらないよりかは可能性はひろがると思います。

忙しいママが、少しでも楽に勉強ができるヒントになれば幸いです。

  • URLをコピーしました!
  • URLをコピーしました!
この記事の内容
閉じる