6月21日より3度に渡ってご紹介した社会人でもお得なAdobeアカデミックパックを購入する方法！
にも記していたように、私は今年（2011年2月）にAdobe Creative Suite 5 Master Collection
アカデミックパックを購入し少しずつではありますがソフトの使用方法について勉強してきました。
まず、先だって形にしなければならなかったのが、山田美帆が代表を努めるカラーコンサルタントRosaの公式サイト
を開設することでした。
ここでは、htmlどころかホームページに関してまったく知識のなかった私が勉強を始めてサイトをアップするまでのことを書いていこうと思います。
サイト制作に向けて取り組みを始めたのは、4月の中旬頃からです。
Adobe Creative Suite 5 Master Collection
を持っている時点でサイト制作は
Dreamweaver CS5
で行うことになります。ただ、このソフトはプロの方も使っているものですので、多少たりともコードが読めないと手が出ないだろうと言うことで、できるホームページ HTML入門 Windows対応 改訂版(CDROM付)
を通読することから始めました。このテキストは、メモ帳を使ってページを組み立てていくという非常にシンプルな内容で、htmlの基本を学ぶには十分なものでした。頭に入るまでに数日間を要したでしょうか。
次は、ソフトの勉強です。本当に一からの学習になりますが、これができなければ元も子もありません。とにかく必死こいて頭に入れるしかないのです。まずは、Dreamweaver CS5
の勉強から始めることにしました。やはりテキストを使って操作しながら覚えるのが良いと思い、まずはDreamweaver CS5 スーパーリファレンス for Windows&Macintosh
を1ページずつめくりながら使用方法について学びました。期間にして2週間ほどです。
次は、Fireworks CS5
の習得です。このソフトは、webサイトに最適化した状態で画像が処理できます。多くのwebデザイナーは、
Photoshop
を使っているそうですが、私自身の印象では、
Fireworks CS5
の方が使い勝手が良さそうです。このソフトでもhtml形式のページを作り、cssも作ることができますが、Firewoksはあくまで画像を作るソフトです。SEOも含めた今後の対策を考えれば、あくまでページはDreamweaverで制作し、写真や図、ボタンなどの図はFireworksで作るのが良いと思います。FirewoksはFireworks CS5 スーパーリファレンス for Windows&Macintosh
を使って勉強しました。gifアニメーションなどまだいまいち飲み込めてはいませんが2週間ほどで学習が完了しました。
Web Hosting Servers / ivanpw
さぁ、これでページを作るぞ～というところですが、Dreamweaver CS5
をもう一度復習したいと思い、Adobe DreamweaverCS5パーフェクトマスター (Perfect Master SERIES)
をつかって操作法を習得しました。だいたい10日くらいかけました。
これでwebページ制作ソフトの学習が終わった訳ですが、この手の本はそれぞれ特徴があって勉強になりましたが、とてもとても全機能を網羅しているわけではありません。Adobeのソフトはプロも使っているだけに恐らく、一冊ではとてもとても入りきらないような機能が満載なのでしょうね。
次は、1週間ほどかけて、webサイト構築に参考になるサイトの勉強をしました。
おススメは、
・ホームページを作る人のネタ帳
・Webクリエイターズボックス
の2サイトです。管理人のyamadaさん、Manaさんのwebクリエイターとしての姿勢や能力の高さも去ることながら、webページ制作に有用なサイトを数多く紹介してくださっています。カラーコンサルタントRosa 公式サイト
制作にあたり使用した画像の多くは、これらのサイトから紹介を受けたものです。
今度は、カラーコンサルタントRosaの代表である山田美帆と相談の上、まずは手書きでトップページの形を決めました。そして、コンテンツの内容など1週間ほどかけて議論、ある程度の方向性が決まった時点でサイトの制作にかかりました。
[1]まずはFireworksを使ってトップページの部品を制作する
ヘッダー、ボタンなどある程度固定されるパーツを作成します。トップページのパーツはほとんどFirewarksで作ってしまいました。
[2]Fireworksで作った部品をDreamweaverで組み立てていく
Dreamweaverでまずフレームを作っていきます。最近はPCの画面も16:9が多くなりつつありますので、横が1000pxくらいのワイドな3カラムのページを作ろうと思いました。テンプレートにあらかじめ入っていたヘッダー、フッター付き3カラムのページのコードを参考に、枠組みを作り、そこにFireworksで作った部品を置いていきました。この2つのソフトは連動していますので、Fireworksで作った部品に不都合があれば、修正するとそれがそのままDreamweverのページでも修正が施されます。
Adobe CS5 - in an infographic / pcsiteuk
[3]ヘッダー、フッター、左右のサイドバーをテンプレートに設定して各ページを制作
トップページが出来上がったら、メインコンテンツ（中心の部分）を編集可能領域に設定してこのサイトのテンプレートに設定します。サイト制作にあたり、多くのページを制作しましたが、テンプレートの部分に修正を加えると他のページも自動的に更新されるようになっていますので、後々重大な欠陥があって修正が必要な場合もさほど苦にはなりません。こうして、20ページ以上にも渡るサイトを何だかんだと言って10日程度で作り上げました。素材が揃っていて、やることが決まっていれば一気にやった方がいいです。ちょっと休むと気力まで落ちてしまいます。
Surrounded by code / quinn.anya
[4]ドメイン取得、レンタルサーバーにアップロード
これは、どのwebページでも同じだとは思いますが何分初めての経験で、半日くらいかかってしまいました。何年か前に、ドメインやレンタルサーバーについて調べたことがありましたが、随分と安くなったものですね。
[5]他のブラウザでの動作確認、コードのチェック
基本IEを使用していますが、Safari、Firefox、Google Chromeでも動作確認をしました。なぜかブラウザによってFacebookのLikeboxの人数が異なるのが不思議でしたがどのブラウザでも崩れずに表示されました。
次は、コードの確認です。これまで偉そうに書いていますが、学習歴数か月の初心者ですので、htmlの文法が合っているかどうか分かりません。そこでAnothe HTML-lint gateway
を使ってチェックを行いました。どのページも点数はマイナス。「重大な欠陥を抱えている」と判定されました。このサイトの素晴らしいところは、どこが、どういうエラーで、どうすれば解決するというところまでしっかりと教えてくれます。良く見ると、段落が終了していなかったりといった初歩的なミスから、削除したと思っていたもののゴミが残っていたりと多くのミスが見つかりました。もちろん全てを解決するのは不可能なので、このサイトで大体80点くらいがもらえるまで修正しました。これは丸々2日ほどかかりました。
このようにして何とか公開にありつけたのがこちら
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
カラーコンサルタントRosa 公式サイト
webサイトの学習を始めて3か月、ようやく形にすることができました。
もちろんプロの方から見ればまだまだかも知れませんが、歌って踊れるクリエイターを目指す私にとっては大きな一歩です。
webサイトは作ることよりも作ってからが本当の勝負
webサイトの持つ力は大きいと思います。情報を得ようと思えばまずはweb検索でしょうし、企業の情報開示もwebページを使って行われることがほとんどです。その意味でホームページは24時間情報を発信し続ける基地でもあり、広告でもあるのです。
しかしながら、作りゃいいというものではありません。絶えず更新し、閲覧者に有用な情報を提供していかなければ逆に市場の信頼を損ねることになってしまいます。ですから、webサイトは作ることよりも、作ってからの方が大事だと思うのです。
また、日本でも今年中にはGoogleやYahoo!のアルゴリズムに変更が加わり、今までのSEO対策が通用しなくなると言われています。今回の変更は、スパムのような不良サイトを排除し、優良サイトが検索の上位に来る仕組みになると言われています。よって、内容、更新頻度、文法などがしっかりと整い、ソーシャルメディアと密接に結びついていくことが最大のSEO対策になります。
まだサイトがオープンして数日ですが、私がやることは五万とあります。
サイトのオープンに安心せずに、このサイトと一緒に成長していきたいと思っています。