webデザイン技能検定2級実技
いつも似たような問題傾向ということが調べて分かったので、下記の記事を参考に実際に制作を行った。
Q1
成果物
![](https://assets.st-note.com/production/uploads/images/95458184/picture_pc_bf5c89c6cb8e8f3ae2041937cc1218a0.gif)
![](https://assets.st-note.com/production/uploads/images/95458186/picture_pc_13f6a275d2ae99299f565f74bf85b5d3.gif)
![](https://assets.st-note.com/production/uploads/images/95458190/picture_pc_04f081daa488d526a66be1d428c32dad.gif)
![](https://assets.st-note.com/production/uploads/images/95458187/picture_pc_8e4e616700708fd61f1b30b822de5bc2.gif)
![](https://assets.st-note.com/production/uploads/images/95458185/picture_pc_8df755b6d674f4a2d0cc702480eb8535.gif)
![](https://assets.st-note.com/production/uploads/images/95458189/picture_pc_6f104bd8996006eaf8019c4b4bd717b7.gif)
![](https://assets.st-note.com/production/uploads/images/95458188/picture_pc_4e617481cbf2989b0f66ca47c7247733.gif)
![](https://assets.st-note.com/production/uploads/images/95458191/picture_pc_ed3be2858aad55543bbdc4a4d31983f2.gif)
気づき
![](https://assets.st-note.com/img/1673493225188-J4eyyZJNyU.png)
上記のようなレイヤー構成にすることと「WEB用に保存」のショートカットキーを一時的に覚えておくことでまあまあ楽に作れた。
もっと膨大な量を処理するときはマクロ作ったら良いと思うが、実技試験はたっぷり時間があるそうなのでそんなタイトな感じでもない。このくらいで良いでしょう。
Q2
成果物
![](https://assets.st-note.com/production/uploads/images/95459037/picture_pc_0e618c1e53c2656a153251ad43c6d49c.gif?width=1200)
気づき
背景には今回はOKUMONOの画像を用いている。フリー素材。
タイムラインは簡単なループアニメーションを作るのに最適だと思う。
レイヤーはこんな感じにしました。
Ctrl+Gで簡単にグループ化できる。非表示を切り替えやすくなるのでちょっと楽になる。日頃からグループ化するの大事だと思います。
![](https://assets.st-note.com/img/1673494649652-hMkWqDQLHg.png)
Q3~Q5
・コーディングの課題だったのでPhotoshopの自己学習をしようとしていた意図から外れてしまう
・実際の試験では試験用パソコンに予め保存されたデータを基に課題を解くらしく、今自分で取り組めるコードが手元にない
という感じなので今回は割愛します。
参考までに令和4年度第1回の作業1を見たところ、
作業 1
仕様
・ 幅 800px 高さ 40px 内で 4 つのメニュー項目を作成すること(各々のメニュー項目の幅は任意とする)。
・ 解像度 72ppi(dpi)
・ GIF 形式
・ 256 色
・ ロールオーバーのためにメニュー項目毎に、視認性のためのコントラスト(十分に異なる明度差)に配慮した2種の統一感のあ る画像を作成すること。
・ ナビゲーションの項目は次の表記とすること。
HOME、検定情報、技能検定、受検申請
といった内容で大体さきほど取り組んだQ1、Q2と同じような中身であることを確認したので実技試験に即した学びができたのではないでしょうか。
ちなみに上のやつを実際に作るとこんな感じになるんじゃないかと思います。
文字をあらかじめ中央ぞろえの設定にしておけば中身変えたときも位置がずれないので安心ですね。
![](https://assets.st-note.com/production/uploads/images/95460026/picture_pc_e845f4339e2bd767b611e28911edf8a8.gif?width=1200)
さいごに
実技試験は学科試験よりもかなり簡単と調べている途中で聞いていましたが、本当に思ったより簡単でした。ある程度アドリブでも対応できそうですね。
学科試験の対策の方がよほど必要だなと感じました。
おわり