徐々にステップアップしていこう!僕がWebを覚えていった流れ

       
web-learning

「Webを勉強していきたい!でも何から始めれば…」という人は結構いると思います。僕が最初Webを勉強することになったとき、覚えることがとても多そうで、いったい何から手をつけていいのかわけがわからなかったです。

そこで今回は、僕がWebを覚えていった過程を書いてみました。それと勉強したときにガッツリ参考にさせてもらったサイトリンクを載せました。Web制作に興味があって、これから勉強しようと思っている方はぜひチェックしてみてください。
Webは最初は難しそうに見えても、大丈夫ですよ!オレでさえできたんだですから!




僕がWebを勉強していった流れ

1. Webサイトが表示される仕組みを理解

「えっ?そっから?」と思ったかもしれませんね。でも僕はまず「一体どうやってWebサイトがパソコンに表示されるんだ?」ってことが不思議でしょうがなかったです。なんで最初はWebサイトが表示される仕組みを調べてちゃんと理解することから始めました。

※ブラウザについて

ブラウザっていうのは、インターネットをみるためのツールです。
例えるならば携帯電話みたいなもんだと思います。ほら、携帯電話っていろいろな機種があるじゃないですか?例えばiOS、Android、BlackBerry、GALAXY とか。
それと同じようにWebサイトを見るためのいろいろなツール=ブラウザがあるんですよ。各ブラウザでその特徴は違います。

各Webブラウザの特徴

1139_64Google Chrome(僕は一番使ってます!)

  • ページ表示速度が一番速い(JavaScriptの読み込みが速い)
  • アドレスバーとタブが両方使える。
  • いろいろな拡張機能が超便利
  • スマホと連携しやすい

1141_64 (1)Internet Explorer(IE)

  • 世界最大シェアのブラウザ
  • Windowsパソコンに必ずインストールされてる
  • 基本的にはWindowsでしか動かない(TдT)
  • バージョンが低いとセキュリティが弱い
  • IE特有のバグが多くWeb制作者には嫌われまくり

1145_64Safari

  • アップルが開発したWebブラウザ。ゆえにMac向け
  • 色合いや文字表示がとてもキレイ
  • 表示速度が比較的速い

1140_64Mozilla Firefox

  • カスタマイズ性が高い → アドオンを入れることで自分好みのブラウザを作成できる
  • Windows、Mac、Linuxなど様々なOSで使える
  • 動画が見れないことがありました(Yahoo!動画など)

1144_64Opera

  • ノルウェーのソフトウェア会社オペラ・ソフトウェアが開発
  • 立ち上がり、表示速度が比較的速い
  • すいません、あんま使ったことないので他の特徴はわかんないっす(T-T)

2. Photoshopに触れる

Photoshop

PhotoshopはWebデザインするときに多くの人が使っている画像編集ソフトです。
とてもいろいろな機能がめっちゃ多くてはじめてPhotoshopに触れたときはすごく戸惑いましたね(-ω-;ムム。大量のコマンド、様々なパラメータ、豊富な色調補正、マスク、アルファチャンネルなどなど、すっごく奥が深いです。何年も使っている人でさえ知らない機能が結構あると聞きます。

だから最初は勉強するというよりも、“触れてみる(遊んでみる)”という感じでいろいろ簡単なものを作ってみるといいと思います。長方形とか円とか簡単なものを。すると徐々に楽しくなってくると思いますよー。

3. デザインの法則を学ぶ

空白のとり方、文字の揃え方、使う色の数など、「いいデザイン」にはルールが存在するのです。覚えておかなければならないのは、デザインとアートは違うということ。

    アート

  • 自分を自由に表現
  • どう感じるかは人それぞれ
  • アーティストは何かを創造する

    デザイン

  • わかりやすく伝える
  • すべてのユーザーを意識する
  • デザイナーは何かを設計する

(※参考:意外に知らないけどかなり深い、デザインとアートの違い

以下のリンクなどを参考にデザインのルールをまずはよ〜く理解した方がいいと思います。

4. Webプログラミング言語を覚える

Webサイトは「HTML」という言語から構成されていて、「CSS」っていうもので見た目をカスタマイズしていきます。この2つを覚えることがまずは第一歩です。

HTML(Hyper Text Markup Language)
Webサイトの骨組みをつくるものです。タグ(<>)で囲まれた部分が内容になります。→ <タグ名>ここが表示される内容</タグ名>

CSS(Cascading Style Sheets)
HTMLで作った骨組みに肉付けしていくもの。フォントサイズ、レイアウト、カラーなどをカスタマイズしていきます。

5. あらゆるWebサイトを見まくる

サッカーをうまくなろうと思ったら、プロ選手の試合をたくさん見て参考にしますよね?
それと同じようにWebサイト作りもまずは世の中のたくさんの見本となるサイトを見て参考にします。

その際に、表面上をただ単にざっと眺めるだけでなく、細い部分(テキストシャドウ、各要素のマージン、色使いetc)と裏側(ソースコード、読み込んでいるファイル)などもよく見て分析するといい勉強になると思います。
「美しい!」と思うサイトには必ず何かしらの理由が存在します。それが何かをしっかり考えて自分のスキルに落とし込むようにしましょう。

6. ひたすら多く作って慣れる!

「初心者のうちはとにかく真似して作りまくれ!質より量だよ!」

知り合いの先輩Webデザイナーさんに強く言われました。サッカーと同じで、特に最初は練習量と比例してうまくなっていきます。量をこなすことで質が生まれて来ると思います。

7. WordPressを覚える

Wordpress

WordPressはブログ作成のためのアプリケーションソフトです。今ではブログサイトだけでなく、企業サイトなどにも多く導入されています。このWordpressを使いこなせるようになると、作れるWebサイトの幅、レベルもぐんと上がると思います。

    ※Wordpressの主な特徴

  • オープンソース(無料で使える)
  • テンプレートを使って簡単に作れる
  • プラグイン(拡張機能)で様々な機能が簡単に追加できる
  • バージョンアップ(進化)し続けている

8. Javascriptを使う

javascript

HTMLとCSSで作った静的(止まったままのもの)をJavascriptというプログラムを使えば動的(動きのあるもの)に変えることができます。スライドショーで画像が切り替わったり、このサイトの右上にあるリボンを押すと画面トップに戻るやつとかはJavascriptを使っているんですよ。

また、Javascriptによって Web APIというのを使うことができます。これによって、Googleマップ、Amazon、Facebook、TwitterなどとWebサイトを連係させることができるようになります。(例:Twitterのツイートをリアルタイム表示etc)

いきなりJavascriptを覚えるっているのはちょいとハードルが高いと思います。実際、僕はまだまだ初心者、勉強中です〜(TдT)。
なので、まずはjQueryというライブラリ(Javascriptをより簡単に利用できるようにしたもの)を覚えるがいいと思います。これなら誰でも比較的簡単にJavascriptを使えます。


何かを勉強する時に共通すると思うのですが、早く覚えようと焦りすぎないことが一番大事だと思います。すぐに覚えたことはすぐに忘れてしまいます。でも、時間をかけて失敗を繰り返して苦しんでやっと覚えたものはなかなか忘れませんよね?

だから僕はまだまだレベルが低くて勉強中ですけど、なるべく焦らないように心がけてます。恋愛と同じでゆっくり徐々にうまくやっていきたいと思っています。



英作文のフルーツフルイングリッシュ