• HOME
  • コーディング
  • WEB制作をこれから始める人,そして挫折した人々へ|[心構え]1/3
schedule2011.7.5

WEB制作をこれから始める人,そして挫折した人々へ|[心構え]1/3

Web制作をやってみたいと思い、いざ作り始めてみると中々思うように作れないがあると思います。でもそれはただ知識がないだけで才能が無いと諦めるのは少し早いかもしれません。重要なことだけを抑えればWebデザイナーにだってなれるはずです。

HTMLでサイトを作ることはまったく難しくありません。文字の読める年齢であれば小学生でも1週間あればサイトを作ることができるでしょう。それくらい今の世の中には便利なものが無料で使えます。HTMLコーディングは文章を書くだけであり、Webコンテンツを制作するための過程段階。大事なのはコンテンツの中身であり、伝えるためのデザイン。HTMLを覚えた後に本当に悩むべき壁ができるでしょう。

このページではHTML構文でWebサイトを作れるようになるために必要だと感じたこと、そして制作ツールを3ページに分けて簡潔に書きます。

Webサイト制作を覚えるための心構え

心構え

高価なWebエディタソフトなんていらない

世の中にはWEBページを作るためのソフトウェアが沢山あります。中には自動でタグを書いてくれたり直感的にデザインを見ながら(WYSIWYG)作れるものもあります。ソフトウェアに高額なお金を支払えばそれだけの対価は得られるでしょう。

ただし、それはテンプレートをいじるだけであったり無駄なタグが沢山書かれたページになるでしょう。

初めは手打ちで作ろう

有料のソフトウェアでDreamweaverというAdobeから出ています。もしこれらを初めから使うのであればソフトウェアの勉強を頑張りすぎ、肝心のHTMLの書き方は覚えないでしょう。

何よりも自動でタグの要素や属性が記述されるためタグの意味を理解できません。初めに言ったとおりHTMLは難しくありません。WEBサイトに必要なものさえ知っていればあなたはグングン成長するでしょう。

ソフトウェアはあくまで手間を省くためのもの

HTMLを覚えてしまえば「あれが自動化されればもっと時間が使えるのに!!」、という面が出てきます。たとえば数ページにわたるHTMLファイルに共通のタグを書いていたとしましょう。それを1ファイルづつ修正するのは困難です。ソフトウェアを使えば一括で修正することも可能です。

時間短縮するためにはソフトウェアの便利な機能を使うことは優良です。しかし邪魔になることもしばしば。僕もDreamweaverユーザーですがファイルビューアーとFTPアップロードにしか使っていません。

ググれカス

誰が言い始めたか、とても厳しい言葉です。ですが、その通りだと思います。今は色々な情報がネット上に書かれています。WEB制作に関することは特に多いでしょう。

「ググれカス」は少々きつい言い方ですが、ボクは「検索し、自分の求める答えを構築せよ」だと考えます。様々な検索結果が出ますが求める答えが見つかることは余りありません。答えはピース(かけら)で落ちています。ひとつに集めて願いを叶えましょう。

これからWebサービスを作るのですから使いこなしましょう。

W3Cにこだわるな

HTMLの作り方を学ぶ課程で必ずW3Cの話題が出るはずです。HTMLチェッカーも沢山あります。作ったサイトのコーディングをチェックしてみると良くわからないエラーが沢山出てくると思います。
エラーの意味はHTMLの知識が増えてくるにつれて理解できてくるでしょう。問題はなれるまでそのエラーの対処をどうするか・・・。

すっぱり無視してください。W3Cはただの指標ルールです。破ったからといってWebページが表示されないこともないですし検索に引っかからないこともありません。

デザイングをするコツ

手書き

まずは必要最小限のネタにコンテンツを絞る

作りたいサイトを思いついたとしましょう。よくやることが必要以上に情報を置いてしまうこと。いくつもの要素を盛り込むことはとても難しく、まとまりのないものになってしまいます。

サイトのコンセプトにも通じますが本当にコンテンツにしたいことは何かを考えましょう。どうしてもやりたいネタがあった場合は思い切って別サイトを作りましょう。

一度紙にラフを書く

よく初心者の方がいきなりコーディングから始める方がいます。Photoshopなどのペイントソフトでデザインを始めてしまうことも同じくです。これはあまり効率が良いとは思えません。

まず紙に簡単に書くことで具体的なページデザインが見えてきます。書いたものを切り刻んでツギハギのように修正するのも良いと思います。ラフの段階である程度の事をきめていれば修正という苦行が大幅に削減されることでしょう。無駄を省くことで諦めたくなる気持ちも少なくなるかもしれません。

他のサイトをパクれ

言葉は悪いですが、パクってもパクらなくても必然的にWebページは似たようなデザインになります。これはユーザビリティを考えているからだと思っています。

真似るといってもそのまま使う事は危険です。いくつかのサイトを参考にし、それぞれの良いところを学びましょう。そしてより良くなるデザインを考えればオリジナルデザインの出来上がりです。

Web制作で何よりも大切なこと

別にWebだけに限りませんが作りたいものを明確にすること。作りたいものがなければどうしようもありません。

ただ漠然と参考書の通りに作っても何も得られないでしょう。

僕がコーディングを覚えた流れ ~参考程度に~

  1. ゲームのカタログサイトを作ろうと考えた。
  2. カタログ管理をするには何で作れば良いのか調べる。
  3. PHPでデータベースを使えば可能とわかる。Wordpressがいいかもしれない。
  4. WPの参考書を買う。中身はXHTMLで書かれていることを知る。HTMLの書き方をググる・・・
  5. カラムわけという最近のWebデザインを知る。自分の理想に近いサイトを探してパクる。
  6. 他サイトのソースを見て構造を調べ参考にする。(タグの意味は理解していない)
  7. ひたすらWPのデバッグと修正を繰り返して初のWebサイト完成。

今そのサイトを見るとタグはめちゃくちゃに書かれています。リストも使っていません。HTMLの良いところは必要なタグを使わずともサイトができてしまうところ。

現在でもキレイなコードは書けませんが、タグの80%はDIVで書かれているなんてことは無くなりました(笑)

そんなW3Cで何百ものエラーが出るサイトですがきちんと検索には引っかかっていますよ。