プログラミングの環境が整っている現在では、昔と比べると比較的簡単にウェブサイトを立ち上げられるようになりました。
その際、切っても切り離せないのがWebデザインのスキルです。
例えハイレベルな機能を実装できたとしても、 見た目がダサければ誰も見てはくれません。
Webサイトも人間も、見た目が死ぬほど重要なのは一緒です。
しかし、これからWebデザインを学び始める初心者の方は、どうやって勉強したらいいのかすらわからないでしょう。
実際にぼくも、一年前はそういう状態でした。
そこからプログラミングの勉強を始め、誰でもできる簡単な勉強法を知ることができたのです。
この方法を使えば、ブラウザに簡単に自分がデザインしたWebサイトを表示させることができます。
そこをクリアーできれば、あとはどんどんコードを書いて実践経験を積み、デザインスキルを向上させていくだけです。
納得のいくオシャレなサイトを作れたときの感動は、本当に素晴らしいものですよ♪
ぜひ楽しみながら学習を進めていってください。
Webデザインの超簡単な勉強法
ぼく自身、最初にWebデザインを学んだ時はAdobeのDreamweaverというソフトを使って練習していました。
今考えると、お金はかかるし操作は難しいしでかなり非効率な方法だったなと感じています。笑
実は、Webデザインの勉強法はかなり簡単に確立することができて、ChromeにHTMLファイルをドラッグ&ドロップするだけなんです。
たったそれだけで、自分が書いたコードを元に自由にWebデザインの練習をすることができます。
HTMLファイルの作成
Webデザインの練習をするにはHTMLファイルが必須で、それにコードを書いてページの骨組みを作っていきます。
なので、まずはHTMLファイルをテキストエディタで用意しましょう。
ちなみに、ぼくが使用しているのは「SublimeText」というテキストエディタです。
↓ここからダウンロード
そして、SublimeText で開いたファイルを保存する際、最後につける拡張子は「.html」にしましょう！
つまり、「hello」という名前をつけたい時は「hello.html」になるということですね。
そうすることによって「このファイルはHTMLのファイルですよ〜！」ということをコンピュータに伝えることができます。
ファイルが用意できたら、あとはその中にコードを書くだけ。
今回は、 <h1> というタグを用いて「Hello」という文字を表示させるようにします。
従って、ファイルの中に書くコードは以下のようになります。
たったこれだけ書けば、「Hello」を表示させるための準備は終了です。
HTMLファイルをChromeへドラッグ&ドロップするだけ
HTMLにコードを書いたら、あとはそのファイルをChromeにドラッグ&ドロップするだけです。
そうすると、ファイルの中に書いたコードが読み込まれ、「Hello」という文字が表示されます。
たったこれだけで、ブラウザで自分の書いたコードを表示できるようになりました。
あとは、このHTMLファイルに対して文字を大きくしたり、色を変えたり、画像を表示させたりといったことができるようになれば、Webデザインの練習をすることができます。
CSSでスタイルを指定
HTMLだけだと、どうしても味気ない見た目になってしまうのですが、それを解決するのがCSSという言語です。
CSSはスタイルを指定することができる言語なので、それによってオシャレなサイトを作成することができます。
↓こういう感じで文字の色や大きさを変えてみたり
HTMLにスタイルシートを適用させたいときは、以下の画像の1行目にあるようなコードをかけば大丈夫です。
このとき、1行目のコードの「href="〜"」の部分に「stylesheet/hello.css」という表記があります。
それは、HTMLファイルと同じ場所にある「stylesheet」というフォルダの中の「hello.css」というスタイルシートを適用しますよ〜！という意味です。
なので、ファイルの構成は以下のようにするとHTMLファイルにCSSで書いたスタイルが適用されます。
ちなみに、CSSファイルの拡張子は「.css」です。
ファイルの配置や、指定するファイル名が違うとエラーが出るので、自分が指定したCSSが適用されない場合は、以下の項目を確認してみましょう。
- スタイルシートの指定はHTMLファイルから行なっているか？
- ファイルの拡張子（HTMLファイル：.html、CSSファイル：.css）は合ってるか？
- ファイル名を指定するとき、大文字、小文字を間違ってないか？
- スペルミスをしていないか？
- コードの中に全角が混ざってないか？
- ファイルの配置は正しいか？
それらを確認してみると、うまくいかない原因がわかるかと思います。
画像の表示
HTMLファイルでは、画像を表示させることもできます。
まずは、HTMLファイルと同じ場所に「images」という画像用のフォルダを作成します。
そして、その中に表示させたい画像ファイルを入れます。
このとき、画像ファイルは日本語ではなく半角英数字で書くように注意しましょう。
画像が配置できたら、あとはHTMLファイルに以下のコードを書くだけです。
で、先ほどと同じようにHTMLファイルをドラッグ&ドロップ。
、、、、、、あれ、画像が半端ない大きさになってますね笑
実は、画像はスタイルを指定してあげないと元の大きさのまま表示されてしまいます。
そのときは、CSSファイルに以下のようなコードを書きましょう。
そうすると、画像がきちんとそのサイズで表示されるようになります。
webデザインの勉強に超便利な「検証機能」
実は、Chromeには簡単にCSSをいじることができる「検証機能」というものがついています。
これを使えば、CSSの内容を書き換えた直後に見た目が反映されるため、コードの値を変えながらすぐに結果を見たいときにとても便利です。
使い方は簡単で、「画面上で右クリック → 検証」でその機能を使用することができます。
検証機能の画面はこんな感じ↓
で、HTMLの部分をクリックすると、それに適用されているCSSが表示されます。
そしてなんと、この検証画面ではCSSを編集したり、新たに書き加えることもできるんです。
編集を加えたいときは、CSSのコードをクリックするだけ。
そうすると、自由にコードが編集できるようになります。
試しに width を 700px にしてみると、画像の幅が広くなります。
↓500px
↓700px
Webデザインの優良教材
Webデザインの勉強法がわかったら、あとはひたすらインプットとアウトプットを繰り返し、手を動かして練習を重ねるだけです。
その際、おすすめなのが「株式会社LIG」のブログ！
こちらのサイトは、ヘッダー・バナー・ナビゲーションバー・見出しなどのデザイン自体がオシャレなのももちろん、ウェブ制作に関する有益な情報がたくさん掲載されています。
デザインの勉強したいなら、LIGのブログを読み漁ってみるのもいいですよ。
あとは、Photoshop VIP もオススメです。
もともと Photoshop に関する情報を配信するメディアなのですが、それだけではなく、Webデザインに関する情報も満載でかなり読み応えがあります。
デザイン学ぶなら、この二つのサイトをみるだけでも学べることはめちゃくちゃたくさんありますよ♪
Webデザインオススメツール
ここからは、実際に僕が使っているWebデザインに役立つツールをご紹介します。
それが、「フォトショップ」と「イラストレーター」です！！！
Webデザインに興味がある人なら一度は聞いたことがあるのではないでしょうか？
フォトショップ
こちらは写真を加工するためのソフトですが、これだけでも十分クオリティーの高いデザインを作り上げることができます。
例としてあげると、こんな感じ↓
フォトショップに関しては、基本的な操作を覚えればこれくらいのデザインはできるようになります。
基本操作を覚えた後、それからどれだけ「おっ！この人センスあるな！」と思わせるような作品を生み出せるかは、あなたの練習量次第！
とりあえず、web系の仕事をするなら学んでおいて損はないですよ。
こちらは、ブロガーにもオススメのツールです。
イラストレーター
イラストレーターはロゴを作成するときに使用します。
オリジナルのフォントを作成したり、フォントとアイコンを合体させたり、イラストを書くときに便利！
これを使うと、下のような画像なら割と簡単に作れます。もちろん練習は必要ですけどね！
オリジナルのロゴやフォントが作れるようになると、デザインの幅はグッと広がります。
デザイナーさんの特徴が一番現れるのもロゴですからね。
自分の色を出したいのであれば、イラレはかなりオススメです。
まとめ
僕自身、プログラミングに慣れるまではHTMLやCSSの勉強から始めました。
厳密に言えば、これらはプログラミング言語ではないのですが、それでも勉強になることは間違いありません。
- 自分の作りたいものを作るにはどういうコードを書けばいいのか？
- 何が原因でうまく表示されないのか？
- 効率のいいコードの書き方はないか？
これらのことを考えながら学ぶことで、RubyやJavaなどのプログラミング言語を学んだときにも早く理解できるようになるのです。
それに、簡単な言語から始めた方が挫折する確率も減るし、楽しく学ぶことができますからね。
web系のプログラマーを目指す方はもちろん、これからプログラミングを始めてみたいという人も、まずはWebデザインの練習からやってみてください。
目に見えて自分の成長がわかるので、きっと楽しむことができますよ♪