webデザインのあれこれ【part1】

投稿者: 


皆様こんにちは!!初めまして!デザイナーの霜月です。

私はこれまで主にwebデザイナーとして色々なwebサイトを制作してきました。

今回は皆さんにもっとwebデザインについて知ってもらいたい!!ということで

早速色々紹介していきたいと思います!

 

・・・といいましてもwebデザイン、と聞くと

 

プログラミングみたいなこともするんでしょ・・・?難しい・・・。

全然わからないしとっつきにくいな・・・

 

と思う方が多いのではないかと思います。

 

 

 

 

そこで今回は

コーディングなんてしたことない!

webデザインってどうすればいいの!!

という方におすすめのとっておきのサイトをご紹介したいと思います!!

 

 

 

webデザインについての勉強におすすめのサイト

 

ドットインストール

 

こちらのサイトは動画解説付きでhtml、css、javascriptなど

基本のコードの書き方を、3分動画というお手軽時間で無料で学べるサイトです!

動画を見ながら実際サイト上にコードが書けるエディタもあったりして、

実践形式で学ぶことができます。

実際私がまだwebについて何もわからなかったときに、見て勉強していたサイトですので、

webデザイン初心者さんに本当におすすめです!

https://dotinstall.com/

 

 

サルワカ

 

こちらのサイトはwebデザイン全般に関してわかりやすく解説してくれるサイトで、

中でもおしゃれなcssコードがたくさん紹介されていて、見ているだけでも楽しいサイトです!

私自身今でも、こちらのサイトにはとてもお世話になっています。

https://saruwakakun.com/

 

 

Progate

 

ドットインストール同様、コーディングしながら学習していくサイトです。

無料版と有料版があり、初心者向けの基礎知識などは無料版で学べます。

アプリ版もありますので、スマホでも気軽に勉強できる便利なサイトです!

https://prog-8.com/

 

 

おすすめエディタの紹介

 

よーし!少しはweb制作についてわかってきたぞ・・・!!

でも、コードって実際何のツールで書けばいいの・・・?

と、思った方!!これからコーディングをする上でおすすめのエディタも紹介したいと思います!

 

 

Dreamweaver

 

こちらAdobeが販売しているwebオーサリングツールです。

チュートリアルや高機能な入力補助機能も搭載されていたりと、有料ですが初心者の方におすすめのエディタです。

先ほど紹介させて頂いたドットインストールみたいに、コードを書くだけで瞬時に画面上にデザインが表示されたりと、わかりやすく便利な仕様が豊富です。

https://www.adobe.com/jp/products/dreamweaver.html

 

 

Atom

 

こちら私がずっと愛用しているテキストエディタです。

シンプルで見やすく、プラグインも充実していて、なんといっても無料ですので、気軽にダウンロードできるところがおすすめです!

基本は全て英語表記なのですが、日本語化も対応してますので安心して使えます!

初心者さんからプロの方まで幅広く使われております。

※現在はサービス終了しております。

https://atom.io/

 

 


 

いかがでしたでしょうか!

今回はわかりやすく学べるサイトと、おすすめエディタの紹介でした!

 

次回もお楽しみに!

The following two tabs change content below.
Avatar photo

霜月

ゲームと漫画とミュージカルが好きです。ミュージカルは特にレ・ミゼラブルが好きです。他に劇団四季や2.5次元舞台も観に行きます。 最近ゆるキャラにハマって毎日癒されております。何卒よろしくお願いいたします!!

コメントを残す