PR

Webサイト制作実習(静的サイト)

Webサイト制作実習 制作実習

現在、大阪にある職業訓練校の「グラフィック・WEBデザイン修得科」というコースを受講しています。期間は6カ月間です。

今日は5回目の「ハローワーク来所日」でした。次回のハローワーク来所日は職業訓練校の修了式の2日後なので、在校中の来所は今日が最後となりました。

今回は、昨日(9月26日)まで取り組んでいたWebサイト制作について紹介していこうと思います。

課題テーマ、使用言語、授業形態

制作課題のテーマは「店舗等に利益をもたらすようなWebサイト」というものでした。

使用した言語は、「html」「css」「javaScript」です。javaScriptに関してはjQueryのみを使用しています。

▼授業で使っていた教科書(の新版)

僕が受講している職業訓練のクラスは制作実習期間に入っているため、授業は生徒各々が自分の作るものと向き合う感じで進行されていて、何か質問等があれば教室内にいる先生2人のどちらかに声をかけるという形式となっています。

制作時間について

9月21日からWebデザインの制作課題に取り組んでいたのですが、23日(金)~25日(日)が三連休だったので、空いている時間の大半を制作時間に割きました。もちろん遊びに行ったりもしていたので、朝から晩までパソコンの前で作業をしていたというわけではありませんが、3日間トータルで15時間くらいは作業していたと思います。

23日(金)~25日(日)が三連休
9月21日から「実技(Webデザイン実習)」。それまでは2週間くらい動画編集の授業がありました。
23日(金)~25日(日)が三連休
先生曰く、「Web業界での就職を考えている人は、Webサイトを3~4個くらいは制作してポートフォリオに入れたほうがよい。」ということなので、時間のある限り色んなジャンルのWebサイトを作っていこうと思っています。

23日(金)~25日(日)の3連休でほとんど完成させ、週末を終えて月曜日の朝には最終確認をして先生に制作物を提出しました。そのあと、先生からのご教授を受けて修正を行い、その日中に最終提出をしました。

成果物について

以下のURLから制作したWebサイトが見られます。素材は全て著作権フリーで無料のものです。

心斎橋駅前バー PARABOLAM トップページ
心斎橋駅から徒歩4分のカジュアル&オーセンティックバー! 不定期でDJイベントなどを開催しています。 インスタ映えするドリンクとフードのメニューを多数ご用意!

「BAR PARABOLAM」という名の架空のバーが心斎橋駅前にあるという設定で制作しました。

制作1~2日目は、いきなりコードを書いていくということをせず、Adobeのillustratorを使ってコンセプトシートやデザインシートといったものを作成するというところから始めました。

先生が「どんな感じでシートを作ったら制作がスムーズに進むのか」というところを丁寧に教えてくれたので、ペルソナ設定などにも時間を割いてシートを作りました。

シートが完成してからは、Webサイトの構想が自分の頭の中に出来ていっていたので、ひたすらコードを書いたりググったりして仕上げるだけでした。


以上が、職業訓練校での「Webサイト制作」についてでした。

いま振り返ると、コンセプトシートとデザインシートの作成が制作の80%を占めていたのではないかと思います。(割いた時間数の話ではなくデザインする上での重要度の話)

一旦、1つのWebサイト制作を終えましたが、やりたいこと、やらなければならないことはいっぱいあります。

作ったものには区切りをつけて、今からはポートフォリオサイトや他のWebサイトの制作などに取り組んでいこうと思います。

タイトルとURLをコピーしました