【職業訓練校】Web制作6ヶ月コースの授業内容やリアルな感想など1ヶ月毎のまとめ

Web制作学習２ヶ月目

CSS

先月に引き続きCSSの学習をしました。
擬似クラスやfloat、display: flex; などを学び、デザインの幅をすごく広がった気がします。

Adobe XD

Adobe XDの基本操作やワイヤーフレーム、デザインカンプの作成方法を3日間で学びました。

初めて触るAdobe XDの操作に戸惑いながらも、ワイヤーフレームとデザインカンプを作成しました。
操作に慣れないこともありますが、ワイヤーフレームやデザインカンプを作成していても全然面白みを感じられませんでした。

しかしながら、この先自分自身でAdobe XDを使うことがあるかはわかりませんが、WEB制作で必要な工程を経験できたのはすごく大きいと感じました。

グループプロジェクト

今回のグループワークで早くも３回目となりました。
過去２回のグループワークとは違って、11日間という期間内にwebサイトを完成させプレゼンするという、実戦形式に近いグループプロジェクトでした。
上記で11日間といいましたが、午前中はグループプロジェクトの進め方についての講義があったので実質作業できるのは午後の３時間のみ。最後の３日間だけ丸一日使うことができました。

グループプロジェクトの内容は、実在する小児医院の一昔前の見づらいWebページを、HTMLとCSSを駆使して見やすいサイトページに作り変えることでした。

グループのメンバーは講師陣が決めた7班（１グループ4人ないし５人のチーム）でグループプロジェクトを行いました。

サイト制作の準備

サイト制作は下記のような手順で準備しました。

➀サイト目的と閲覧者を策定

まず、サイトの目的（ゴール）を明確にします。

つまり、サイトリニューアル目的はサイトに必要な情報を簡潔にわかりやすくまとめて、お問い合わせを減らすことです。

次に閲覧者の選定ですが、「目的を達成するための顧客」は誰なのか（ターゲット）を「属性」、「価値観」、「願望」を軸に明確にします。

②サイト内に必要なコンテンツの確定

ターゲットが必要とする情報や目標を達成するために必要な情報を考えます。
また、クライアントからはサイトに掲載すべき情報をヒアリングします。

今回のプロジェクトでは、講師方をクライアント役と見立てて打ち合わせを行いました。

③サイトマップ作成：サイト構成を作成

同業他社のサイトを参考にしながら、ページ構成を考えます。

ページ構成を考えたら、各ページにどの情報を掲載するかを決定します。
各ページに掲載する情報を割り振ることで、足りないページがあった場合は追加します。

このときにページ掲載情報量が少ない場合は他のページとの統合や、必要のないページは削除も検討します。

④ワイヤーフレーム：作成

ワイヤーフレームではページ内のどの位置に何の情報をどのように表示するかを決めます。

ワイヤーフレームを使用してクライアントとページ構成を決める打ち合わせをしたり、デザイナーにデザイン依頼をしたり、プログラマーに機能実装可能どうかの確認をします。

今後の制作過程の設計図となるものなので、必要な情報が過不足なく掲載されていなければいけません！

良いワイヤーフレーム例

• クライアントにページ情報を確認してもらい承認をとることができる
• デザイナーにどこになんの情報があるかきちんと伝えることができる

悪いワイヤーフレーム例

• 具体性がないためWebサイト制作依頼者から承諾を得ることができない
• 承諾を得ないまま次工程に進むと手戻りの可能性や大幅な変更につながる
• デザイナーが何を表示させるのがわからず質問メールがたくさん届く

⑤デザインカンプ作成：ページデザイン

ワイヤーフレームを元にデザインカンプを作成します。
サイト作成の練習時はシンプルな構成の参考サイトを見つけて、模倣するのがおすすめ。

私たちのグループは上記のようにデザインのルールを決めてデザインカンプを作成しました。

⑥ディレクトリマップ作成

ディレクトリマップはWebサイト内のすべてのページの位置とファイル名を一覧にしたものです。主にExcelを使って作成します。ディレクトリマップを共有することでWebサイトの制作管理やコンテンツの維持管理がスムースになります。
コーディングする際も、ディレクトリマップをもとにフォルダとファイルを配置します。

⑦コーディング

上記の画像は私のチームメンバーの方がまとめてくれたものです。
チームでの大まかな流れは下記にまとめました。

❶コーディングの基本ルールを決める：全員

私たちのグループはResetCSSを利用し、class名はBEMを採用しました。
ResetCSSはブラウザが用意したデザインをリセットすることができます。

<!-- wp:code -->
<pre class="wp-block-code"><code>ResetCSS
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.0/destyle.css">
  <link rel="stylesheet" href="css/style.css">

JavaScript
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/googlefonts.js"></script></code></pre>
<!-- /wp:code -->

❷コーディング作業：個人

基本デザイン以外のデザインは個別でCSSファイルを作成し、” css/style.css “に取り込みます。

➌マージ作業：個人

「基本デザイン」と「ヘッダー・フッター」を「各ページ」にコピペで移植します。
「共通パーツ」が出来上がったら保留にしていたページに移植する。

❹確認作業：個人

• 制作したページがデザインカンプと同じデザインになっているか確認
• 外部CSSや画像のリンクが切れていないか確認（階層が違う場合は相対パスの変更が必要）
• ページ間を移動してリンクが切れていないか確認（階層が違う場合は相対パスの変更が必要な）

受講して感じたこと

◎ゼロからのサイト作成

ワイヤーフレーム→ デザインカンプ→ コーディングと、これまでの授業で学んだことを自分たちの手でゼロからサイト完成までを通しで作り上げられた経験は大きく、少しの自信にもなりました。

◎実戦形式のグループプロジェクトを経験

初めましてのメンバー同士でグループワークをするのは、想像していたよりも大変困難でした。

実際のWEB制作の仕事では、トップのディレクターがメンバーの能力に合わせて仕事を割り振ると思いますが、このグループプロジェクトではチームメンバーに上下関係などなく横一線の状態でした。

さらにお互いの得意・不得意の能力もわからない状況な上に、時間にも限りがあるのでとりあえず先に進まないといけませんでした。私たちのグループにはweb系の経験者がいなかったので、誰もゴールまでの道筋が見えてないという状況にもすごく焦りました。

そういう状況下でありながらも、時間内にサイトと発表資料を完成させ、最後までプロジェクトを完遂できたことは間違いなく良い経験となったと思います。

×各ページのパスを途中で変更

例えば、当院の紹介ページのパスは序盤の打ち合わせの段階では “/clinic/index.html”となっていましたが、コードを打ち始める段階で“/clinic/index.html”のファイルの作成方法をわかっていなかったのと、グループ全員がindex.htmlのファイル名で作成するとわけがわからなくなると考え、チームで話し合って上記のパスに変更しました。

プロジェクト後半に講師陣との打ち合わせ時にパスを変更したと話すと、それはやってはいけないと忠告されました。なぜならば、パスが変えたことにより変更箇所がたくさんできてしまうためです。パスが変われば相対パスで紐づけていた画像などが表示されなくなったりします。

不幸中の幸いで、しっかりチームでファイル名を変更することを話していたので上記のような不具合は起こりませんでしたが、今後注意すべき点だと理解しました。

×ページの基本構成の作り込み不足

コーディングを始める前の段階でページの基本構成を決めなければいけなかったが、重要性をわからず蔑ろにして、とりあえず各自コーディングをスタートさせました。

最後に全てのページをドッキングしたときに、もれなくデザインが崩れてしまいました。原因は人によって使っているHTMLの構造やclassが微妙に違っていたため。それらを全ページ合わせる作業をして修正をしましたが、コーディングを始める前にしっかりと作り込んだ基本構成ファイルのHTMLを作成し、メンバーと情報共有できていれば、後々二度手間にならずに済んだと思いました。