【デジタルハリウッド授業体験記 #1】デジタルデザイン専攻_HTMLの基礎

デジタルハリウッド本科デジタルデザイン専攻

やすのり
Tekito styleを運営しているやすのり(@98nasi_nori)です。普段は都内でWebディレクター/マーケターなどをしています。

現在僕は都内のITベンチャーで働きつつ、デジタルハリウッドのデジタルデザイン専攻に1年間、週2回通っています。2017年4月からスタートし、10月でもう授業の半分が終了しました。

これまでの半年間では、グラフィックデザインの基礎やWeb・スマートフォンのUIデザイン、Processing、AfterEffectでの動画制作、プロジェクションマッピング、Unityなどを学んできました。

10月以降の後期からは、HTMLやCSS、JSでのサイト制作や、UI・UXデザインに関して理解を深めていく感じです。

本レポートでは、日々のデジタルハリウッドでの授業の様子(デジタルデザイン専攻)を、簡単にレポートしていきます。

※本記事の公開日:2017/10/15

Day41の授業テーマ

本日41回目の授業の目的は、HTMLの基礎を学び、サイト構造を理解しながら適切にマークアップしていくこと。

そしてGitHubを用いたバージョン管理や、HTMLベースのサイトを実際にWeb上に公開するまでを順序立てて進めていきます。

テキストエディタの設定

まずは、コーディングで必須となるテキストエディタ「Atom」の設定から。AtomはGithubが制作しているHTMLベースのエディターです。

https://atom.io/

SiteGuard WP Plugin

僕は普段Sublime Textを使っているのですが、せっかくなのでダウンロードしてみました。

導入しておくべきおすすめプラグインや、フォント、などなど設定していきます。また抑えておくべき便利なショートカットについても紹介。

HTMLの概要

SiteGuard WP Plugin

次にHTMLについての概要や、実際にタグを使ってサイト構造の考え方などを学びました。

複数ファイルやフォルダをまたいだ時のリンクの指定方法や、ブロック要素とインライン要素について、またコーディング時のコツなど、全く触れたことがないとなかなか授業テンポは早く感じるペースです。

SiteGuard WP Plugin

またPhotoShopで制作されたサイトデザイン案を元に、HTMLで構造を設計していきます。実際の制作現場でのフローも踏まえて、進め方を学んでいきました。

またhtmlvalidatorなどを用いて、実際に作成したHTML文章のチェックなども行いました。

validator

僕は仕事の業務でもHTMLを使っているので、このあたりはさくっと。ですが理解が曖昧だった箇所や、見解が分かれるようなマークアップ時の考え方など、学ぶことは多かったです。不明点があれば先生が丁寧に対応してくれます。ありがたい限り。

実際にGitHubでサイト公開

続いて授業の後半では、先ほど制作したHTMLファイルをGitHubを用いて公開しました。

SiteGuard WP Plugin

GitHubとは、Gitというバージョン管理システムを利用した、Webベースのソースコード管理サービス。複数人でソースコードを管理したり、過去に更新した時のファイルに戻ることなどができます。
GitHub

SiteGuard WP Plugin

GitHub上で新規リポジトリを作成し、Githubのデスクトップアプリと連動、ページのURLを発行しました。実際にローカルでの変更をGitHub上に反映し、ネット上にサイトを公開させることができました!

注意点などは色々ありますが、無料な上に簡単に設定できるので、今後もぜひ活用していきたいところ。

まとめ

こんな感じで後半初日の授業が終わりました。自分で過去に勉強したり、触れたことがある内容ばかりではありましたが、それでも新しい気付きなど色々学ぶことができました。

次回は細かいHTMLの仕様やCSSなどを進めるようです。
ではまた!

他のデジハリの授業レポートはこちらもご参考ください ↓↓

デジタルハリウッド

【デジタルハリウッド授業体験記 #2】デジタルデザイン専攻_デザインの潮流とUXD

【デジタルハリウッド授業体験記 #3】デジタルデザイン専攻_リーンスタートアップとリーンキャンバス

デザインについて本気で学ぶなら、デザインスクールに通うのは効率よく、かなりおすすめな選択肢です。デジハリ以外にも色々とあるので、良かったら参考にしてみてくださいね ↓↓

Webデザインスクール・専門学校に通うメリット・デメリットを経験者が比較してみた




ABOUT US

都内で働くWebディレクター/マーケター(@98nasi_nori )。ときどき旅人な91年生まれ。早稲田大学卒。主にWebプロダクトのUI/UX改善の企画・ディレクションやSEO対策、トイレ掃除などしてます。もともとWebライター・編集者。開発やデザインも細々と勉強中……。学生時代は1年間の世界一周経験あり(過去約40ヶ国訪問)。お気に入りの国はベトナム、モロッコなど。好物は家系ラーメンとタピオカ。

こんな人が書いてるYO↓