【HTML5プロフェッショナル認定試験 レベル1】受験記 - 合格しました！
背景
コロナ禍で自粛を極める中、Web制作関連で新たに資格を取得しようと思い、主にjavascriptに関わるもので調べ、受験しました。
受験の準備
勉強期間
2ヶ月ほど
教材
大きく2つ使用しました。
まず、書籍から。
こちらを第二章まで読みました。
途中で下記のものに切り替えたので、前半のみ使用です。
なぜ前半のみとなったかと言いますと、どちらかというと出るポイントを端的にまとめたというより、頻出でないものも範囲だから書いておくという姿勢の本な気がしたためです。(あくまで個人の印象です。)
途中から、わからないものを辞書的に引く方法に変えました。
次に、Ping-tです。
こちらのプレミアム登録(有料)で本資格のWeb問題集をとくことができます。
より実際の問題を解く感覚に近く、頻出問題がまとまっていて学習しやすかったです。
また、問題毎の解説が特に端的かつ丁寧だったので非常にありがたかったです。
さらに、バウチャーをPing-tから買うことで受験料が1000円OFFになりました。
受験申込
ピアソンVUEにてオンライン試験を選択して申込みました！
オンライン受験
オンライン受験用のアプリケーションが必要でした。
起動中はWebカメラとマイクが起動し、他のアプリケーションの起動はブロックされます。(不正等防止のため)
要件を満たすか確認するため、試験前にダウンロードして試すよう指示がありました。
受験当日
いざ、初・在宅受験
試験開始前、チャットにて色々な指示を受けました。
画面上の小窓にテキストが打たれる感じでした。
- 机の筆記用具をしまってね
- 部屋の全体を360°まわってみせてね
- 後ろの扉を締めてね
- ネット回線が無線だけど、有線にしないの？←(フラグ)
など。(要約してます)
また、本人確認書類と写真の登録。
受験前の数分でスマートフォンを介して行うことになります。
登録するタイミングでショートメールがきて、リンクをクリックすると登録画面が開き、スマホ側で写真を撮る流れでした。
(自分の時は1回でメールが来ず、待った後に2通きていた)
｢まーなんとかなるっしょ｣とあまりにラフな心構えでいると結構慌てるかもしれません。
受験中
フラグ、と書きましたが、有線にするべきでした。
回線のダウンロード/アップロードの速度の違いのせいと推測しますが、受験者側からの文字入力と画面への反映がかなり遅くなったのです。
たとえば"apple"と打ったら、10秒くらい待ったあとに"a""pp""le"と出てくるような。
解答欄の入力だけならまだなんとかなりましたが、実質試験開始後のチャットは使用不能でした。
え、どうしようどうしよう... という焦りで疲れたので、最後まで解答入力したらすぐに退出しました。(90分を50分残し^^;)
結果
試験終了後、すぐに結果が画面表示されます。
結果は... 合格！！
78点！(合格ラインは70点)
...ギリギリwww
アンケートに答えて、試験終了でした。
スコアレポートでは分野ごとの正答率も出してくれます。
(ひそかに楽しみにしていました)
【セクション別正解率】
なんとも両極端。
強みと弱点があらわに...
おわりに
資格取得で力のチェックをするとともに、またオンライン在宅受験という新しい経験もできた点で実り多い資格受験となりました！
もっと色々な試験で浸透していって欲しいところです...！
今回の受験はレベル1で、レベル2もあるということで認定期間の5年のうちに次も狙いたいと思っています！
【Webデザイン】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 2 SP版デザインカンプ
背景
公開されているワイヤーフレームからカンプ制作する課題です。
【ポートフォリオ掲載OK！】実践的なWeb制作課題を配布します | PENGIN BLOG
前記事のPC版カンプをもとに、SP版カンプも制作しました。
成果物
画像
制作スケジュールと工数
- 6/29
- はじめからMenuまで 2.0h
合計 2.0h
- 8/10
- Reserveからfootrerまで 1.0h
- 全体余白の修正 0.5h
合計 1.5h
【全体工数】
合計 3.5h
【空白期間の理由】
7月前半には資格試験を入れ、合格していざ...と思ったら異常な常夏状態、自室でのPC稼働が難しくなりました(自室はエアコンなし)。
97年ぶりに最長記録更新 札幌で18日連続の真夏日（フジテレビ系（FNN）） - Yahoo!ニュース
8/10現在いきなり落ち着き18℃、無事再開できました！
(来年までにエアコン付けます^^;)
工夫点
- PC版カンプから使い回して時短
- 縦幅を大きく使って余白を設け、見やすく
- スマホ上で読みやすい文字サイズ16pxを使用(※)
※ 【検証】スマートフォンで読み易いfont-sizeとは？ | SEO対策なら株式会社ペコプラ
反省点
【コンテンツ内容の多いセクションが詰まった印象】
特にメニューセクション。ヒアリング時にスマホのページで乗せる内容をもう少し検討したい。
レスポンシブ対応として縦に羅列する以外の方法も考えたい。
おわりに
本課題を公開しているPENGIN BLOGさま。
Webデザイン制作・コーディングを学ぶ中、実践的に手を動かせる課題の提供をありがとうございました。
ワクチン接種完了まではまだ就活に備える予定なので、とにかく手を動かすこと+資格試験をルーティンに過ごしている自分にとって大変ありがたかったです。
次はこちらのデザインカンプを元にコーディングを進めていきます！
【Webデザイン】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 1 PC版デザインカンプ
背景
公開されているワイヤーフレームからカンプ制作する課題です。
【ポートフォリオ掲載OK！】実践的なWeb制作課題を配布します | PENGIN BLOG
PC版のデザインカンプから先に作成しました。
理由としてはワイヤーフレーム上にお客様側から掲載要望に上がっていたコンテンツ内容が多い印象を受けたので、すべてを掲載する前提でのイメージを作りたかったためです。
成果物
プロトタイプ
クリスタ(@pengin_company)さんの実践的なWeb制作課題に取り組んでみました🌟 https://t.co/G5aIikaq7h
— ふーしゃ@web (@fuchsia_84) 2021年8月10日
出来上がったデザインのXDプロトタイプを投稿です🎥#クリスタチャレンジ pic.twitter.com/ygdC6otAzd
画像
制作スケジュールと工数
- 6/25
- 課題ページ解釈 1.0h
- 素材集め 1.0h
- 画像編集 1.0h
- デザインカンプ(はじめからcardまで) 5.0h
合計 8.0h
- 6/29
- 素材集め・画像編集 1.0h
- デザインカンプ(reserveからfooterまで) 2.0h
- プロトタイプ制作 1.0h
合計 4.0h
【全体工数】
合計 11.0h
工夫点
- ウォームナチュラル配色(※)と植物・木目の写真素材を使用
- 記号、アイコン、画像等に丸みをつける
- 手描き風フォントを使用
- 読みやすさのため数字のみ別フォントを使用
- 派手な演出のない穏やかなアニメーションを採用
- 特に変わった点のないレイアウトを採用
すべて、安心感・親しみやすさを与えるように意識した点です。
※ウォームナチュラル配色の解説↓
色彩検定1級2次の基礎知識（15）〜配色イメージ〜 | Itaming Note
反省点
【共通パーツをまとめて作る】
セクションタイトルやメニュー枠など共通で使用できるパーツが複数あるにも関わらず、ほとんど一つずつ作ったことで余計な工数がかかっていました。まとめて作ることでぐっと時短できそうでした。
【細かい調整は大枠を作ってから】
全体の大枠が出来上がる前に段落やセクション間の細かい余白の調整をしていました。結局後からも調整は入るので、前半の作業に無駄が多くなりました。
次記事にて、SP版制作についてまとめます。
【Webデザイン】オリジナルWebデザイン : 親しみのわく下町の美容室HP
背景
実務に近い形のワイヤーフレームからwebデザインカンプを制作する課題ページを見つけたので、取り組んでみることにしました。
課題ページ↓
【ポートフォリオ掲載OK！】実践的なWeb制作課題を配布します | PENGIN BLOG
成果物
- PC版デザインカンプ(プロトタイプ含、XD) - 6/29完了
- SP版デザインカンプ(XD) - 8/10完了
- 本デザインのコーディング - 12/7完了
それぞれ、リンクから記事に飛べます。
色彩検定1級受験記【合格しました！】
昨年度、1次合格も2次試験で不合格となった色彩検定1級。
今年再挑戦してみました！
結果は見事、合格！！
受験記として、まとめておきます。
1次試験(今回は免除)
1次試験に合格すると、その後2年間(つまり2回分)の受験で1次試験が免除されます。
申込段階から免除申請が必要なので、その点だけ注意でした！
2次試験(12/13)
スケジュール
今年は昨年の反省を活かし、早めに準備。
スケジュール的にはこんな感じでした。
- 10月 色相環・PCCSトーン・明度表を復習する
- 11月 JIS慣用色を暗記する / 問題集を1周する
- 12月 問題集を繰り返し解く / 過去問を解く
勉強内容
ポイントごとにまとめてみたいと思います。
色相環・PCCSトーン・明度表を復習する
下の内容をいつでも書き出せるようにしました。
【色相環】
偶数番号の色名を埋め、奇数番号へ。(自分は15:BG、17:Bあたりをミスしてたので注意しました)
暖色・寒色・中性色の境界が太めに強調されている部分です。
内側の4R、6RPなどはマンセル色相との対応、
外側の1~24の数字はオストワルト色相との対応になっています。
【PCCSトーン】
全12種類のトーンについて、明度領域と彩度領域の位置に並べて覚えました。
以下もポイントになります。
彩度値 :
v : 9s
b、dp : 8s
lt : 6s
sf、d、dk : 5s
p : 3s
ltg、g、dkg : 2s
色グループ :
純色…v
明清色…p、lt、b
暗清色…dkg、dk、dp
中間色…sf、d、ltg、g
【明度表】
すごい量に思えますが、ある程度規則性があるので覚える量は想像より少ないと思います！
- 14/16を境に左右に分ける
- 左右ともに中央(8・20)を軸に左右対称
- 左側
- vの中央(8)値 : 8.0、端まで順に7.0、5.5、4.5
- b、dpの中央(8)値 : 8.5、6.0(■)。端まで順に■-1.0、■-1.0、■-0.5
- lt、sf、d、dkの中央(8)値 : 8.5、7.5、6.0、4.0。端に1つ移動する毎に-0.5
- pの中央(8)値 : 9.0、6/10は-0.5で8.5、端2つ(2〜4)は共通で8.0
- p、ltg、g、dkgの端(2/14)の値 : 8.0、7.0、4.0、2.0。中央3つ(6/8/10)は共通で端+0.5
- 右側
- 中央3つ(18/20/22)が共通、端(16/24)は中央+0.5
- v、b、dpの中央(8)値 : 3.5、5.0、2.5
- lt、sf、d、dkの中央(8)値 : 6.0、5.0、3.5、2.0
- p、ltg、g、dkgの端(16/24)の値 : 8.0、7.0、4.0、2.0。
- 左側
このように、数字の羅列を数カ所覚えればあとは規則的に埋めることができます。
2次試験登竜門ですね...すべてはここからはじまる！！
JIS慣用色を暗記する
今回特に重点を置いて勉強したのがJIS慣用色です。
勉強内容としては、それぞれのPCCS色名(トーンと番号)に該当するJIS慣用色を書き出せるようにしました。
【カラーカードの裏面にJIS慣用色名を記入】
出かける先にも携帯し、ちょっと時間のあるときに取り出して単語帳のように使っていました。JIS慣用色の暗記に加え、
PCCSトーン自体に関しても色名を見ればそれがどんな色か想像できるようになったことが大きかったように思います。
【似たような色のセットを覚える】
dk4…栗色/煉瓦色/弁柄色/海老茶色/鳶(とび)色
↑この5色がすぐに出るように
b16…ターコイズブルー/浅葱色
↑この2色がすぐに出るように
【イメージマップをつくる】
自分が思い浮かべるものと色イメージ・色名を自由に結びつけて、色名とPCCSトーンがすぐに思い浮かぶようにしておきます。
紙に書き出しても、ネットでみつかるツールを使っても、頭の中でも構わないと思います。
【由来を覚える】
色名でググると由来と色意イメージがパッと出てきます。(画像とwikiが一緒に出てくる)
すべて書き出せる頃になると色名はすぐに浮かぶようになるので、検索しては由来を覚え、色イメージも確認できます。
問題集を解く
昨年はここまで準備も出来ずせっかく買った問題集も1周未満という感じでしたので、満を持して登場のこの1冊。
知識問題の確認に加え、配色パターンや文章題の読解など実践的に学習できる問題集で、復習したいテーマに合わせて集中的に取り組むこともでき、便利でした。
特に文章題に関して、実際の2次試験もまずは文章から条件を読み取り、その条件を解読し、複数の条件に合う配色を決めることでようやく回答が導かれるわけですが…
この問題集は配色問題が多く取り入れられ、たくさん練習を積めたように思います。オススメです。
過去問を解く
全体の総復習・実力試しに試験の2週間前あたりから過去問を解きました。
昨年度はよくて8割程度でしたが、今年は9割5分安定となりました。
出題傾向が大きく変わらないことを願いつつ...(盛大なフラグ)、いざ、本番へ。
当日
受験環境について
【試験会場】
昨年と同じ会場へ、少し余裕を持って到着。
試験時間も、同じく受付から試験開始まではお昼をはさむ という珍しい設定でした。
感染対策も兼ね、会場ではなく会場に向かう途中の車内にて早めのお昼としました。
【コロナ対策】
会場での感染予防対策としては会場入り口に消毒液が置かれた他、座席間隔が通常より広くとられていたと記憶しています。さらに、全員マスク着用が義務付けられていました。
昨年よりも私語や飲食をされる方は減った、というよりかはゼロと言った方がよいでしょうか。マスクで息苦しさがあった事以外は快適に受験できたように思います。
試験本番
開始直前、試験問題(まるごと提出するので持ち帰り不可)、カラーカード。そして、おしぼりが配られました。
試験スタート！！
昨年、最初からのりを使用して手がベタベタになって苦労したので、視感問題を後回し。
メモ欄にPCCS色相環・PCCSトーンと位置関係、明度表を1ページ見開きの形にメモ。
準備完了！いざ、突撃〜！
大問2つ目のJIS慣用色/配色の問題へ。
昨年の反省から力を入れたことが活き、完答の予感、、、
ただ、ダイアードの2色と含めてテトラードの4色をつくる、ということを即座に理解出来ず←
後から戻りつつ、無事に解答欄を埋めます。
続いて… インテリアから解こうかな？周辺環境色のマンセル表とか、解き方覚えたら楽だし…
って、あれ？？？？
ない…
そうなんです。今年、出題傾向が変更されました。
そして、ほぼほぼJIS慣用色が絡む配色問題となっていました〜！！
なんと。。なんと。。
やっててよかった〜〜〜〜
勉強の甲斐あり、ほとんど迷うことなく基本色を選択。
配色については、多少疑問点がありましたが、
(g8とg10でナチュラル配色とはなんぞや、など)
すべて筋を通した上で解答欄を埋めることができました。
最後に視感問題を。
ここでもプチパニックがありました(右側の色相には1枚も貼られないのでは、、こんなことあるの)
そして、すべての解答欄にカラーカードを切って貼っていく作業を。
これは昨年学んだのですが、定規は解答欄の大きさを測るのに使用し、
切るときはカラーカード裏面のドット(間隔5mm)をつかって即ハサミを入れると効率的でした。
チョキチョキ、ペタペタ。
最後の3枚を貼っているあたりで試験終了10分前のコールが。
…タイムアップ！
少々焦りながらも、試験終了。
片付けながら丁寧にのりを拭き、
すみやかに退出しました。
手応えは、90%付近。
完全に？な問題は1問のみという結果に！
やっててよかった、JIS慣用色！
振り返りと今後
1次試験が免除になったことで、昨年と比較するとしっかりと準備することができました。
また、出題傾向の変更もあり、昨年度惨敗したJIS慣用色の対策をしっかりしたことが大きな勝因となったように思います。
今年はコロナのこともあり、試験範囲について従来テキストで適応できる範囲とする通知もあったので、今年の出題内容が特殊であるかもしれませんがJIS慣用色のPCCS色相・トーンとの対応を覚えていくことで色名と色イメージが一致するようになった点が色彩検定受検による最大の収穫のように思いました。
これから先、資格試験の勉強をきっかけに身についた色彩感覚をより磨きながら、Webデザイン/開発に限らずメイクや服のコーディネーとなど日常生活においても活用していきたいと思います！
【Webデザイン】オリジナルWebデザイン : 水族館の仮想HP - 3 PC版デザインカンプをつくる
背景
公開のワイヤーフレームからのデザイン作成課題。
前回は背景用の波形SVG作成についてまとめました。
今回は、PC版デザインカンプ全体のまとめです。
成果物
画像
プロトタイプ
→
— ふーしゃ@web (@fuchsia_84) 2020年4月28日
プロトタイプ🎥
工夫点 :
・メイン写真映えるようヘッダー背景透明(スクロール時変更)
・水イメージでセクション境界波型
・綺麗/明るい印象の淡い水色背景
・下部(フッター)は濃い色で安定
詳細は後日記事にします📝
実務めざす取組として、貴重な経験の機会をありがとうございます☺️ pic.twitter.com/ht4Kbidaqe
制作工数
調査 : 1.5h
画像探し : 0.5h
XDデザイン編集 : 12.0h
プロトタイプ作成 : 1.0h
ロゴ制作 : 3.5h
背景用波形SVG作成 : 1.5h
全体の軽微な修正 : 1.5h
PC版デザインカンプ制作
合計 :
予定 16.0h(2人日) / 実時間 21.5h(約2.7人日)
使用ソフト・ツール
工夫したところ
- メイン写真が映えるようヘッダー背景透明、白文字
- 水や海が連想されるようにセクションの境界は波形に
- カップル/家族向けに明るい印象を与えるライトトーンに
- 下部(フッター)を濃い色にして全体を安定させる
できなかったところ
- 予定の2人日をオーバー
- バナー制作/担当者チェック・修正を未実施
- ほぼほぼPhotoshopスキル不足が原因！
全体を振り返って
工夫したところにも記述した配色の面に関しては、ワイヤーフレーム作成のあやさんからもこのようなリプが！ コンセプトに合う配色にできたのではないかと...！ (とってもうれしかった)
はじめまして！
— あや🐈webデザイン&ディレクション (@ayaweb3) 2020年4月28日
水族館の水の感じがでていて素敵です✨
涼しげな配色がいいですね！
ありがとうございました🥰
ただ、"涼しげ"という点については、図らずも札幌市のイメージを強めることにもなったと同時に、"寒々しい"印象を与えてしまったかな、と少し気になりました。 人が遊びに訪れる場所、というところでは、ポップなイメージの黄色を加えるなど、もっと明るさを足してもよかったかもしれないです。
そして、全体を振り返ってみると、
できたと思えているのが実は上記のことくらい。
目安が2人日ということでしたが、バナー制作と担当者チェック・修正なども実施せずでこの工数がかかっていました。
Photoshopを使っていてかなり身に染みましたが、まだまだイメージしているものを実際の画像素材なりに落とし込むには足りていない模様...力不足を感じました。
さらに、あまりこだわる必要のないところに時間を割いてロスしたところも。(ロゴ制作で顕著)
Web制作を行う上では欠かせないところなので、
実務前にできることとしてはPhotoshopでの制作スキルを鍛えておきたいと思いました...！
さいごに
独学の状態から、実務により近い形で学びたい...！
という気持ちから挑戦した今回の課題。
今までの勝手な自作ではあまり意識してこなかった工数が日々増えていく中で、
力不足を感じてへこたれそうになりつつ、しっかりオーバー...
ただ、何とか形にすることができてよかった。
実は、制作に取り組んだのは3月の最終週あたりだったのですが。
この課題の大部分をやり終えた後、コロナショックでうまく気分転換もままならず、
現状と理想との差に大きくショックを受けて思い悩み...
5月からようやく浮上し、制作報告を上げるに至りました。
実際にはお客様がいらっしゃる制作となり、
今の制作はかなり自分本位に進めているものだと思う中での、この現状でした。
しっかりと受け止めて、よりパワーアップすべく
制作経験を積んでいきたいと思います！
さいごに、このような学びの機会を与えてくださったあやさんに深く御礼申し上げます！
あやさんTwitter :
twitter.com
ワイヤーフレーム公開記事 :
【Webデザイン】オリジナルWebデザイン : 水族館の仮想HP - 2 背景用波形素材をつくる
【Webデザイン】オリジナルWebデザイン : 水族館の仮想HP - 2 背景用波形素材をつくる
背景
公開のワイヤーフレームからのデザイン作成課題。
前回は自作ロゴの作成についてまとめました。
今回は、セクション境界に使用した波形素材の制作についてまとめます。
成果物
制作時間 : 1.5h
学習ポイント
Photoshopで波形を描く方法
- 変形フィルター : 波形を使用する
参考 : Photoshopで一瞬で波線を作る | Output48
- 変形フィルター : 波形を使用する
Photoshopでシェイプに変換
参考 : Photoshop CC（2017） 選択範囲からシェイプに変換する PCまなぶ
振り返って
波形のSVG作成については、これまでネット上の制作ツールGet Wavesを使用してきましたが、今回は振幅・波長ともに一定に変化する波形が欲しかったため、自作しました。
Photoshopでの作成で、｢波形｣という便利な変形フィルターを知ることができました。応用すればジグザグ形も簡単に作成できそう...！
そして、最後SVGに書き出すときにつまずいた
｢書き出す有効なアセットがありません｣というエラーが。
これには調べるのに時間をかけたのですが、
結局3回ほど再起動して直すことができました。
今度からよくわからないエラーが出たらまずは再起動... 記憶。
さらに、このエラーを調べていく中で｢画像アセット｣という機能を知りました。
レイヤーに出力したいファイルの拡張子をつけておき(細かいオプションも名前に追加できる)、 ｢ファイル｣→｢生成｣→｢画像アセット｣で指定した形式のファイルが作成できる、というもの！
参考 : スライス不要！画像アセット生成で効率的に画像を作成しよう | 走りがき
今回はエラー解決で力尽きこれは実践できなかったのですが、次に画像を自作するときに試してみたいと思います。
波形SVGの作成ではつくったものも素材1つ、時間も1時間ちょっとだったにも関わらず、
新しく触れるものも多く、学びの大きいものとなりました。
次回、PC版デザインカンプ全体のまとめです。
