HTML/CSS

DarKCodeとは?おすすめ動画5選【HTML・CSS】

2019年5月24日

 

みなさま!!DarkCodeという動画をご存知でしょうか?

今後大注目の動画だと思っています。

HTMLとCSSのみを使って色んなWebデザインを作る過程を載せてくれている動画なのです。

今回はこれから僕がこれから日本でも流行るであろう大注目の動画DarkCodについて紹介していきます。

 

必見!DarkCodeとは?

 

DarkCodeは正確にはYoutube投稿者のチャンネルの名前です。

 

チャンネル名DarkCode
動画内容Webデザインのコード編集
登録者数108,160人(2019年5月8日時点)
投稿数170本
動画の平均時間10分程度
運営者外国の方(女性?)

 

2019年5月8日現在の登録者数は108160人でそのほとんどが外国の方だと思われます。(コメント欄が英語ばかり。たまに僕もコメントしているので見つけてね)

 

動画についての説明の概要欄には

 

DarkCode is a channel for Learning Web Designs, Websites Building, Ui Designs Using Only HTML5 And CSS3 and some Javascript. Our Content is 100% free and easy to got it ♥

引用元:https://www.youtube.com/channel/UCD3KVjbb7aq2OiOffuungzw/about

 

と書かれています。

 

簡単に日本語訳すると

 

「ダークコードはウェブデザイン、ウェブサイトの作り方、ユーザーインターフェースデザインの学習チャンネルです。HTML5 とCSSとたまにJavascriptを使います。無料だし簡単に勉強できるよ♥」

 

って感じですね。

最後のハートが気になりますが運営者は女性なのでしょうか。

 

動画内の表記言語の指定が英語ですし、概要欄も英語で書かれているので運営者が外国の方であることは間違いなさそうです。

 

動画の内容はHTMLとCSSのみを使ったコード編集がほとんどで、たまにJavascriptを使った動画もあります。

 

Web系のプログラマーになりたい方や、Webデザインを勉強中の方はめちゃくちゃ面白いと思います。

 

てんし君

HTMLとCSSの勉強を始めたときにYoutubeにいい教材があるかな~と思って調べたことが見つけたきっかけでした。

初めて見た時は、こんなにかっこいいデザインが作れるなんてすごいなという感じでしたね。

創作意欲の高まりが半端なかったです。

 

僕が厳選したDarkCodeの面白い動画5つ

 

言葉で言っても面白さは伝わらないと思うのでまずは見てもらいましょうってことで、僕が個人的に170本の動画から特に面白いと思った動画を5つ厳選してみたのでぜひご覧ください。

 

BGMもノリノリの曲ばかりなのでワクワクしてみることが出来ると思います。

 

てんし君

全部面白いから悩みに悩んだぞ。

 

1.文字が顔に...あっという間の7分間!

 

「Eyes follow mouse curser using HTML CSS & Javascript」

 

というタイトルで投稿されています。

マウスのカーソルに合わせて目が動くデザインを作り上げていく動画です。

無機質な文字列からポップなキャラクターが作り上げられていく様子が収められています。

これにはコメント欄も驚きと称賛で溢れてましたね。

 

「どっから考えが浮かんでるの!?」

「すげぇ。Javascriptをおしえてくれ…」

「めっちゃカッコいいじゃん!!」

 

という言葉が沢山ありました(笑)

 

2.合計48万回再生!美しいログインフォーム

 

「Animated Login Form Using Only HTML & CSS」というタイトルで投稿されています。

シンプルながら洗練されたデザインのログインフォームが作られています。

どうして一番再生されているかはわからないですが、見てみると作ってみたくなります。

 

てんし君

何かの紹介でバズったのかもしれませんね

 

しかもこのログインフォームもそこまで複雑な構造になっていません。

僕は好きすぎてこのデザインのコードを暗記しています。

個人的に色のバランスが好きです。DarkCodeの動画ではよくこの動画に出てくる緑色が使われています。

 

3.日向(ヒナタ)を使った激熱なデザイン

 

「Ui Card Design - Hinata Profile Card Using Only HTML & CSS」というタイトルで投稿されています。

プロフィールのカードをHTMLとCSSを使って作成するという動画です。

あの人気少年漫画ナルトのキャラであるヒナタが使われているということでピックアップしました。

 

他のプロフィール作成の動画でもワンピースの登場キャラクターであるゾロが使われてましたし、ほかの動画では七つの大罪のメリオダスが使われていましたし、運営者ジャンプ大好き説あるんですよね。

 

DarkCodeの動画の中では割と長めの12分19秒もあるし、何かこだわりも難じさせる動画になっております。

 

作者は日本のことも好きかもしれませんね(笑)

てんし君

個人的には日本のアニメが使われていることが嬉しいです。

 

4.遊び心満載!かわいい動くアイコンデザイン

 

「Awesome Social Media Buttons Hover Only HTML & CSS」というタイトルで投稿されています。

TwitterやFacebookのアイコンがユニークに動くデザインになっています。

 

DarkCodeの動画ではマウスのカーソルに合わせて変化したりするデザインがよく使用されていますがこれは典型的なパターンです。

 

5分程度の動画ですが、DarkCodeの動画の基本が多く取り入れられており気に入ったのでピックアップしました。

 

5.スマホ対応【背景が動くLP】

 

「Animated Full Landing Page Using Only HTML & CSS」というタイトルで投稿されています。

見てもらうのが1番ですがとりあえずかっこいいです(笑)

ちなみにLPというのはランディングページの略で基本的には1枚のWebページを指します。

スマートフォンにも対応させながら作っているのでその点でも勉強になります。

 

Webデザイン作成練習にも使える

 

DarkCodeの動画はただ見るだけでも楽しめますが実際にHTML やCSS,Javascriptを使ったWebデザインの作成練習にも使えます。

 

僕は実際にHTMLとCSSを使ったWebデザインの練習にこの動画を使っています。

スマホの画面で動画を流しながらPCでコードを書いていくって感じです。

途中で意味の分からないコードが出てきたらその都度調べるといいと思います。

 

効率面や勉強の真剣さの度合いではおすすめできない

 

この章の冒頭では勉強できるといいましたが、結論からいうと

なるべく早くWebデザインを仕事にしたい方にはおすすめできません。

 

理由としては

 

・DarkCodeで身に着けたデザインが実際に必要とされるかはわからないから

・わからないところが出てきたら自分で調べなければならず、効率は悪い

 

以上の2点があげられます。

もし今すぐにでもWebデザイナーやWeb系のエンジニアになりたいのであれば、お金を払ってスクールに行くことがいちばん効率がいいです。

今は、Web系のスクールも充実しています。

 

こんな人にはDarkCodeでの学習はおすすめ

 

実際に僕はDarkCodeno動画で基本的なHTMLとCSS勉強をしています。そんな僕が感じている「こんな人におすすすめ」に当てはまる人は

 

・自分で調べることが苦じゃない

・趣味程度で勉強したい人

 

です。

ぶっちゃけ初心者がDarkCodeで勉強しているとわからないところはたくさん出てきます。

その際には自分で調べる必要が出てきます。

それが別に苦ではない方はDarkCodeで勉強することはいいと思います。

あと、少し趣味でHTMLとCSSを動かしてみたいという程度の方もいいと思います。

 

おわりに

 

今回はDarkCodeというHTMLとCSSの勉強にも使えるWebデザインの動画を紹介しました。

勉強している方もそうでない方も楽しめます。

個人的には今後チャンネル登録者数も増えて日本の視聴者さんも増えていくんじゃないかなと思っています。

プログラミングの学習者も増えている中でこのような動画が無料で公開されていることは嬉しいですよね!

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS
-, ,

S