こんにちは！マツオです。
私は１級ウェブデザイン技能士の実技試験を2022年2月に受ける予定にしています。
当ブログでは、１級ウェブデザイン技能士の実技試験対策として過去問題に記載されている用語や技術的内容をまとめていこうと思います。
私が見た限りでは、1級ウェブデザイン技能士の実技試験対策を記載しているサイトや書籍は無く、これから１級実技試験を受けてみようと思われている方にとって、少しでもお役に立つ内容になれば幸いです。
第１回目は、ペーパー実技試験より「ワイヤーフレーム」について記載します。
私と一緒に試験に挑戦して合格しましょう！
※なお、当ブログは１級実技試験過去問題の直接的な解答を記載することはしません。
試験対策として、用語説明や技術的説明に止めた形で記載していきます。
１級ウェブデザイン技能士とは
国家検定制度である技能検定制度の一つです。
特定非営利活動法人インターネットスキル認定普及協会が実施しています。
試験は学科および実技試験で実施され、１級、２級、３級の等級が設定されています。
試験に関する詳細は、上記リンク先のインターネットスキル認定普及協会のサイトでご確認ください。１級学科試験について留意点が１つあり、インターネットスキル認定普及協会のサイトでは過去３回分の過去問・正答しかダウンロードできません。1級学科試験の過去問のまとめサイトは現時点では無く、また過去問に関する書籍も無いため、直ぐに手に入るのは過去3回分の過去問のみとなります。
私の感覚的には、過去3回分の過去問のみで1級学科試験に合格するのは難しいように思えます。できるだけ早い段階から過去問をダウンロードしておき、実際試験を受けるときに過去4回分以上の過去問の確保があれば、試験を有利に進めることができると思います。
ワイヤーフレームとは
ワイヤーフレームの前に、デザイン工程の説明をします。
デザイン工程
デザイン工程とは、「スケッチ」⇒「ワイヤーフレーム」⇒「モックアップ」⇒「プロトタイプ」
というようにステップを踏んで完成形に近づけていく工程となります。
各工程の概要
- スケッチは、コンセプト沿った基本的な骨組みを視覚化する作業で、紙やデジタルに描いた絵となります。
- ワイヤーフレームは、レイアウト設計を行う作業で、どこにどんな要素（機能）が配置されるのかを線画と文字で表したものとなります。
- モックアップは、ビジュアル面でのサンプルで、配色、文字の大きさ、ボタンの形状や位置、写真や画像の配置などのイメージを確認するものとなります。
- プロトタイプは、機能面でのサンプルで、クリック時の動作、リンク先へ遷移などの挙動がシミュレーションされたものとなります。
ワイヤーフレーム
先ずは、ワイヤーフレームを作成する仮想サイトの大まかな配置を決定します。
（仮想サイトは、ウェブデザイン技能検定サイトを参考にします。）
配置
上から順にヘッダー、グローバルナビゲーション、コンテンツ、フッターと配置します。
続いて、配置した各要素の詳細を決めていきます。
ヘッダー
- ロゴは左上に配置します。
- 検索フォームは右上に配置します。
グローバルナビゲーション
- グローバルナビゲーションを配置します。
マウスオン時にサブナビゲーションを表示するようします。
フッター
- プライバシーポリシー、お問い合わせ、サイトマップなどを配置します。
- コピーライト、ページトップへのアンカーリンクを配置します。
続いて、コンテンツの配置となります。ページによってヘッダー、グローバルナビゲーション、フッターの内容を変える必要が無い場合は、ここまで作成したものをひな形として使い回します。
コンテンツ
以下の３種類のページを例として説明します。
- トップページ
- お知らせ一覧ページ
- お知らせ詳細ページ
トップページ
- メインビジュアルを配置します。
自動再生機能を備えたカルーセル・スライダーを実装します。
キャッチコピーを添え、該当するページへのリンクを設定します。 - お知らせ情報のエリアを配置します。
更新が新しい順に5件まで表示します。
記事タイトルには「お知らせ詳細ページ」ヘのリンクを設定します。
お知らせ一覧ページ
- パンくずリストを表示します。
- 1ページにつき最大50件まで表示します。
記事タイトルには「お知らせ詳細ページ」ヘのリンクを設定します。 - ページャーは記事数に合わせて追加し、最大「数字」ボタン5個と「前後」ボタン2個を表示します。
お知らせ詳細ページ
- パンくずリストを表示します。（パンくずリストに記事タイトルも入れます。）
- お知らせのタイトルを表示します。
- お知らせの本文を表示します。
- 「前の記事」、「次の記事」へのリンクを設定します。
- 「一覧へ戻る」ボタンを設置します。
以上で、コンテンツの説明を終わります。
あとは、（通常の作成手順とは逆ですが）説明内容のエリアやパーツを線画で表してワイヤーフレームを作成します。
コメント