デジタルハリウッドを修了しました(10)
企業サイトの作成と課題
ワークでデザインした架空の企業のWebサイトのコーディングです。
先にやったお店のコーディングと比べて制作するページ数が増えます。要素が増えて、表現方法やデザインもバリエーションが増えているので、覚えることもたくさんあります。
とはいえ、デザインカンプと考え方は同じで、基本的には同じことの繰り返しなので動画のとおり手を動かしていきましょう。
カンプの通りにレスポンシブデザインが切り替えられたり、フォームが「フォームらしい機能になっていく」のは、いかにも自分がWebサイトを作成しているのだと実感できて楽しかったです。
課題はワークの企業サイトをベースに、オリジナルのページを追加するというものです。
<head>内の<meta>の設定
最初にindex.htmlを作っていくのですが、ここのカリキュラムが一番ボリュームがあります。
カリキュラムの内容を見ていくと、久しぶりに<head>内の<meta>の設定（titleやviewportとか）についてお話しがあったと思います（私のメモにそう書いてあった）。
前回の課題の時にも書いたのですが、ワークではWebページをどんどん作っていきます。一方で、<head>内の要素については最初に話があって以降はあまり触れられません。あんまり手を動かすこともないので、このボリュームたっぷりな動画できっちり覚えておきたいです。
<header>と<footer>
同様に、<body>内の<header>と<footer>も最初にやってからは、コピペで使い回していたような記憶があります。<header>と<footer>は全部のページで共通なので、このコピペで使い回しが重要でした。
卒業制作に入ってから痛感するのですが、ある程度ページを作ってから<header>や<footer>にミスがあると後戻りして修正するのがツライです。
例えば、5ページほど作ってから以下のようなミスが発覚した場合……
メニュー名が誤記
copyrightが前年のものだったり（2024とすべきを2023になっていた）
ナビゲーションに設定したリンク先のパスが間違っていた（階層が違う、絶対パス、スペルミスなどなど）
コピペで使い回していたら、作った5ページ分を修正することになります。リンク先のパスを間違えていたら、もちろんリンクのチェックも必須です。
修正結果を確認せずに検索置換で一気に直してみたら、直さなくて良いものまで変更されているとか。
コピペで使い回すのは簡単ですが、ミスがあった場合の後戻りが面倒です。動画内では、これら共通部分は最初に話があるだけなので、きっちり作ってチェックしておきたいです。
reset.css、common.css
HTMLだけでなく、共通で使い回すCSSも同様にきっちり作ってチェックしておきたいです。
reset→common→各ページと優先度の順番にリンクしていくことも忘れずに。
これらのCSSの設定を正しくやっておかないと、動画の通りに作っているはずなのに、見た目が動画の通りにならないといった不具合が発生します。
メニューの動作
<header>と<footer>内のメニューの動作をCSSで設定します。これもコピペで使い回しなので、最初にきっちり作ります。
ここでハマってしまったのがハンバーガーメニューです。
※教材によって変更がある可能性もあります。あくまでも私が受講した時のお話しです。
ハンバーガーメニューはCSSでも実装できます。先にやった、ワークのカフェやプロフィールサイトの課題はCSSでした。
しかし、今回の企業サイトのワークではjavascriptで実装するということで……ワークの段階では実装しませんでした。
ところが、この後は中間課題に進んでしまうので、このワークで作ったサイトでハンバーガーメニューをjavascriptで実装する動画はありません。
今にして思うと、javascriptでハンバーガーメニューを実装する方法について、質問をすれば良かったのですが。受講当時は「いつかやるだろう」ぐらいの気持ちで、するっと流してしまいました。
これが後に、卒業制作で苦労することとなりました。
なので、javascriptでハンバーガーメニューを実装したいと思うのなら、動画による受講は無いものの自分で、きちんと作ることをオススメします。
私のように気付かないで卒業制作まで進んでしまうと、いろいろとハマってしまいます。
レスポンシブデザインとフォーム
※教材によって変更がある可能性もあります。あくまでも私が受講した時のお話しです。
卒業制作も絡めて、もう一つハマったのがフォームをレスポンシブデザインで表示する場合でした。
動画の通りに手を動かしていれば、もちろん意図通りに表示されます。しかし、実はスマホサイズで極端に画面幅を狭くすると、チェックボックスがズレたりします。もちろん、許容範囲で見逃しても良いようなズレではありますが……。
このワークでは、もちろんこれで問題ありません。
しかし卒業制作で、このワークに忠実に作ってしまうと、フォームに使うボタンとか、入力フォーム内のサンプルテキストとか、思わぬ所でズレたり欠けたりします。検索すればCSSの設定で簡単に回避できるのですが、これを知らない人にとっては、なかなか厳しいです。
まさ先の話が続いてしまい申し訳ありません。とりあえず「ワークの通りにやっているのにおかしい？」ということが、卒業制作ではけっこうあるということを頭の隅にちょこっと覚えておいてください。
基本的に数をこなす
トップページができたら、会社概要や商品説明といったページをそれぞれ作っていきます。共通するもの（<head>内の<meta>の設定、<header>と<footer>など）は、トップページのものを使い回していくことになります。
各ページごとに初出の要素やデザインがあるので、いろいろなバリエーションのページが作れて楽しいです。まずは動画の通りに手を動かしていきましょう。
メニューにあるページをすべて作ったら、ワークは終わりです。
この記事を書いていて気付いたのですが、「お問い合わせ」ページの「プライバシーポリシー」の内容やメールフォームの動作は実装しません。このワークでは省略されましたが、卒業制作でメールフォームを使う場合は必須となります。
課題は新しいページ
ワークのページをすべて作ったら課題への挑戦となります。
前回の課題と違い、デザインカンプの通りに新しいページを作ることになります。とはいえ、ワークと同じ企業のページなので新しいデザインを考えたり、新しいオブジェクトを作るといったことはありません。
「新しく作る」ということで面食らうかもしれませんが、基本的にはワークでやってきたことを積み重ねていくと、カンプの通りに再現できるようになっています。たとえばヘッダーやフッターは、これまでのワークと全く同じです。
DTPをやっていても同じなのですが……一冊の本を作るとき、作業を効率化するために異なるページでも同様のあしらいやパーツを使うことは良くあります。
今回の課題も同様の考えで、これまでのワークでやってきたセクションやパーツを組み合わせていけばなんとかなります。
オリジナリティは必要？
※個人の感想です
デザインカンプはすでに用意されているので、デザインのオリジナリティを発揮する場面はありません（デザインカンプから逸脱するのは課題の趣旨にそぐわないです）。
その一方で、Webサイトの作りに習熟している方ならワークの通りにやらず、もっと効率的なコーディングでデザインカンプを再現できると思います。
ただし、これは初学者向けのスクールの課題。おそらく、コーディングのオリジナリティは求められていません（トレーナーさんに絶賛されるとは思います）。
この課題の後に、すぐに中間課題が控えています。この課題は素早くこなして、中間課題でじっくりと作り込んだ方が良いかもしれません。
リファレンス動画
HTMLとCSSのリファレンス動画も用意されています。重要なリファレンスについては、デジハリ側で視聴を推奨しています。ワークでは習わないけど大事な話がたくさんあります。
私は中間課題に進む前にすべての動画を視聴しました。
前回も書きましたが、動画に出てくる言葉を知らなくても良いと思います（良くはないんだけど）。しかし、動画を視聴しておけば、ワークや課題で手を動かしているうちに、なんとなく言葉の意味がわかってきます。
正直、リファレンス系の動画は座学が中心で退屈だし、カリキュラムの消化が厳しくなるし、見なくても卒業できるのですが……これからWebのお仕事をしていくためにも、言葉や概念を知っておいた方が良いかと思いました（個人の感想です）。
なお、学習システムの動画はデジハリの卒業予定日を過ぎると視聴できなくなります。「卒業制作が終わってから、ゆっくり見よう」と思っている方はご注意を！
この記事が気に入ったらサポートをしてみませんか？