中間課題(4)コーディング、課題提出-デジハリ修了(14)
コーディングへ
トレーナーさんからデザインカンプの承認をいただいたら、いよいよコーディングです。
私の場合、ここにたどり着くまでに課題着手から二週間以上経過していました。完成までは1ヶ月ぐらいかかりそうな予感です。
スケジュールの予定通りではありますがヒアリングシートにあった納品希望日「発注から2週間」からは大幅にオーバーしています。課題とはいえ、納期を超えている（見積もりを超えた作業時間）のは反省です。
コーディングに関しては、以下のような感じで作業を進めました。
課題のプロフィールサイトをベースにする
構造は課題からあまり逸脱しない
class名は本サイト用にする
自分のできる範囲でデザインを変えてみる
こんなカンジなので、これまでの課題の繰り返しを書くことになりそうです。
課題のプロフィールサイトをベースにする
課題で作成したプロフィールサイトをベースに作っていきました。
ディレクトリの構成（カレントにhtmlを置いて、CSSや画像は下位ディレクトにみたいな）とかファイルの命名方法も同じようにしています。reset.cssもこれまでと同じものを使いました。
白紙のHTMLドキュメントから作ろうとすると、どうしても漏れやミスが出てしまいます。それなら共通する部分はコピペで使い回していった方が便利。
ディレクトリの構成を変えなければ各ファイルへのリンクも同じ考え方でできるし、reset.cssやcommon.cssも、あえて名前を変える理由が私には無かったです。
「改修」ではないですが、使えるものは使っていきたいです。
※もちろんサイトの構成によります。あくまでも本課題においては有効であることをご了承ください。
head内のmeta、titleを変更
デザインカンプでは求められていないので、意外と見落としがちです。
HTML宣言や言語の設定のように、共通する要素はコピペで使い回しです。
サイトの概要やタイトルはスグ食べ用に変更しました。
faviconも作成済みだったので、この時点でfaviconがスグ食べ用に差し替わっていることも確認しました。
reset.css、common.css
reset→common→各ページと優先度の順番にリンクしていくことも忘れずに。
これらのCSSの設定を正しくやっておかないと、動画の通りに作っているはずなのに、見た目が動画の通りにならないといった不具合が発生します。
構造は課題からあまり逸脱しない
<header>にグローバルナビを入れて、<main>内には<section>で区切ったコンテンツを配置、<footer>にサイトマップという作りにしました。
これはワークや課題で作ってきたWebページの構造を踏襲しています。reset.cssも同じものを使い、スマホ用のハンバーガーメニューや各コンテンツの作り方も、ほぼ踏襲しています。
これしかやり方を知らないというのが最大の理由です。
それと同時に、逸脱することで「何が起きたか分からない」という状態を避けるためでもありました。
たとえば表示エラーが発生した場合、講義の通りに作っていれば「講義の通りに作っているのか否か」で原因が追及できます。
しかし、オリジナルの構造にしてしまうと「オリジナルの構造がエラーの原因」という可能性が常に付きまといます。
課題をこなしていくのが精一杯で、こういったイレギュラーに対応できそうになかったので、まずは講義で習った通りに作っていくことにしました。
したがって、まだ学習していないjavascriptも使用していません。
もちろん、講義の内容より効果的な構造で作っていける方は、どんどんそれを取り入れていった方が良いと思います。
class名はスグ食べ用にする
私の考えたデザインは、これまでの課題と比べてコンテンツ量や修飾が増えます。そのため、なんでもかんでも<section__contents>という訳にはいかなくってきました。
class名の付け方については、『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』を参考にしました。
classの記法はBEMを使いました。
デジハリの講義でもBEMで書いていたと思います。
classは事前に考えた方が良いかも
自分で考えたデザインをHTMLに落とし込みながら、BEMでclass名を設定していくというのははじめての経験かも知れません。
<header>や<footer>は、おおむね似たような作りなので、これまでの課題を参考にできました。
しかし、各コンテンツの設定には苦労しました。
使い回せると思った要素が使い回せなかったり、思い付きで色を変えようと思ったら思いのほか大工事になったり……コーディングの段階でclassを設定しようとすると、この「思いのほか」にぶち当たります。
なので、ワイヤーフレームかデザインカンプの段階で、class名を設定しておけば良かったなあと、卒業制作を終えたあたりで反省しました。
自分のできる範囲でデザインを変えてみる
※これは課題の条件ではありません。あくまでも初学者でもできる範囲の程度のお話しです。
あまり課題から逸脱しない構造にしているのですが、それではつまらないので自分なりに色を変えたり、新たな修飾を付けたりしてみました。
コンテンツの区切りに枠線を付けたり、重要なテキストにだけ蛍光ペンのようなマーカーをつけたり。角丸の設定が簡単にできるので、ついつい多用してみたり。
大したことはできていないのですが、それでもコードをちょこっといじるだけでパッと見た目が変わるので、いろいろいじっているのが楽しかったです。
でも、「HTMLとCSSで何ができて、どうやるのか」というのは、初学者にとっては意外と難問でした。
たとえば「角丸」を設定しようと思っても、知らない人にとっては「境界線で四隅の半径を設定（border-radius）」することだと発想できないです。
（※border-radiusで角丸にするのは、デジハリの講義で習います。あくまでも、たとえ話として）
そんな私にとって役に立ったのが『HTML5 & CSS3 デザインレシピ集』でした。
初版が2017年と、けっこう古いのですが。
目次を眺めたりページをパラパラめくっていけば「HTMLとCSSで何ができて、どうやるのか」を知ることができました。一覧をランダムに眺めながら、自分に関係ありそうなところを拾っていくのなら本書はオススメだと思います。
以下、余談
私がInDesignを使ううえで、長らくお世話になってる『InDesign CS6逆引きデザイン事典PLUS』という本があります。
（逆引き事典そのものはCS3かCS2あたりから読んでいる）
これらの本で特にありがたいのが「InDesignで何ができて、どうやるのか」が書かれていること。
InDesignにしてもWebにしても、目的を達成しようと思えばいろいろなやり方があります。でも、それって「本来のあるべき姿」なのかどうかが初学者だと判断できないことが多々あります。
たとえば「角丸」の件――画像を角丸で表示したいと思った場合。Photoshopで画像を角丸にマスクする、というやり方でも見た目の目的は達成できます。
でも、InDesignなら画像フレームを角丸（角丸のオブジェクト内に貼り付け）にする、Webならborder-radiusを設定するやり方もアリです。
（InDesignであればPhotoshopのマスクレイヤーの操作もできるので、もっといろいろ考え方はあるでしょう）
使い所や効率化の話をしながら「何ができて、どうやるのか」を説明してくれる、逆引き事典の存在はすごく助かりました。
でも、こういった手厚いフォローに慣れすぎたせいか、最近では他のソフトを使おうと思ってもちょっとツライです。
課題提出時の注意
そんなこんなでコーディングを終えたら、いよいよトレーナーさんに提出です。
課題を提出する際のフォルダ名や著作権関連の注意事項は、プロフィールサイトの課題時の「課題概要」や「納品前のチェック」に記載されています。
それ以外にも、以下のような注意をトレーナーさんからいただきました。
アクセシビリティガイドライン
アクセシビリティガイドラインの注意は、これまでの課題でもありました。
ただ、今回は新たにコードを書いています。そのため、うっかりミスが発生しやすかったです。
私の場合はalt属性の代替テキストを付け忘れた（流用元の古いまま）とか、リンク先のIDが存在していないといったミスがありました。
Chromeのエラー（構文エラー）
HTMLの構文エラーがあった場合、Chromeが補完して表示してくれることもあります。
でも、この補完に頼った表示はNGです。
↑のアクセシビリティガイドラインのチェックの際に、構文エラーの修正も求められます。
リンク先がないならトップへ
今回の課題ではコンバージョンボタンの実装が必須となります。
しかし、これをクリックした先に表示される申し込みフォームのページや、資料のダウンロードまで用意できないこともあるでしょう（私は用意できませんでした）。
その場合、とりあえず「ボタンが動作した」体裁ということで、ページ内のトップへ遷移させることとしました。リンク先は「<a href="#">」と設定します。
※このあたりの考え方はスクールやトレーナーさんによって異なる可能性もあるので、必ず確認しましょう。
CSSで画像のサイズを極端にリサイズしない
Adobe Stockの素材などで、印刷用途に使用するものは解像度が高く、画像サイズが大きいものがあります（横幅が4000ピクセルになるものとか）。
Webページで表示する際に、CSSでブラウザや表示領域に合わせて縮小表示もできます。しかし、極端に大きな画像サイズは、ファイル容量も大きく通信の無駄です。
なので、CSSで極端にリサイズするぐらいなら、ある程度、画像の大きさとファイル容量を減らしましょう。
私の場合、レスポンシブデザインを前提とするので、なかなかサイズを決めにくい＝とりあえずCSSで表示領域内に収めたい気分だったのですが。
でも、4000ピクセルの画像を800ピクセルに縮小表示は、現在のところWebページの実態にそぐわないそうです。
なので、ある程度サイズを決めてしまい、それに合わせて、Photoshopで画像サイズを変更しました。
じゃあ、「ある程度のサイズ」とは何なのか？ という話になるのですが。
ネット検索したり、トレーナーさんとの相談の上で「現時点では最大の横幅は1200ピクセル」としました。これが正解というよりも、まずは最大値の基準を決めてしまいました。
今後も端末の進化によって、ここは変わっていくと思います。
無駄なスクロールバー
私のデザインでは、コンテンツの入れ子構造がけっこう深くなりました（<div>の中に<div>があって、さらにその中に<div>が……）。
その際、widthやmarginの値が正しく設定されておらず、横スクロールバーが常に表示されていました（ブラウザの表示幅の外側にビミョーな余白ができている）。
この場合、エラーを吐くわけではないのですが、意図通りに表示幅に納まっていないということで修正を求められました。
微妙なレスポンシブデザイン
上記と似たようなケースで、ブラウザの幅を徐々に狭めて（広げて）いくと、部分的に表示が切り替わったり、切り替わらなかったりということもありました。
これはメディアクエリーで設定した幅に矛盾があったり、数値の設定ミスです。
作業中のデータは納品しない
作業途中のデータ（PSD、AIとか）やバックアップ用に取っておいたデータなど、Webページでは使わないデータは納品用のフォルダから除外してください。
「どうせ課題だから」「あっても無くても動作に関係ない」と思いがちですが、悪いクセは思わぬところで出てしまいがちです。今からでも悪いクセは修正しておきたいです。
完成したWebページを見せて承認を得る
こうしてできた課題のサイトがこちらです。
これもchatworkでトレーナーさんに提出しました。面談はしませんでした。
もちろん必ずスケジュールの進捗も報告しましょう。「予定通りの提出」「遅れている」「前倒し」「順調に進んでいる」「不明点だらけ」……とにかく報告です。
そして、トレーナーさんのチェックと修正も合わせて、完成までに1ヶ月かかりました。
今にして思うと、いろいろとツッコミどころもたくさんありますが、何はともあれ形になりました。
それでも、予定通り12月の上旬に中間課題を終えられてホッとしました。
あとは年内にカリキュラムを終えることを目標として、講義を進めていきます。
お願いとお礼
以前もちょこっと書いたかもしれませんが。
今回の課題ではクライアントの立場が明確化されていますす。クライアントからの要望に応じて、ワイヤーフレーム、デザイン、コーディングを作っていき各段階でチェックが入ります。
ここでのチェックは、トレーナーさん＝ディレクターでもあり、クライアントでもあります。
以下は、私の個人的な考えなのですが……。
質問をしたり、確認をしてもらうときは「お願い」
回答をもらったり、チェックバックが入ったときは「お礼」
上記の2点を心がけたいです。
ことさらに謙る必要はないのですが、