前回の続きから...、
Aちゃん：「とりあえず、ウェブ上にアップ致しました。」と、Aちゃんから連絡を頂きましたッ。
ぼく：「先日、Sさんと揉めていたみたいですが、どうしたんですか？何か私が作成したhtmlに問題でもありましたか？」との、ぼくの質問にッ...、
Aちゃん：「いやぁ～ッ、このテーブルレイアウトでの作り方で...、」
「私は、初めが肝心なので、コピー＆ペーストでページ作成は、流石に如何なものかと...、」
「Sさんいわく、初心者には無理ですよ！！」
「という事だったので、あえなく折れたわけです。」
と、Sさんと揉めていた内情を私に説明してくださいました。
しかしこの時点では、これ以上のページを作成するのは、私も無理！といった感じで考えておりました。
ここで、ホームページ制作初心者の方がお読みになることを考慮して、2019年の私から、2002年へのぼくへのアドバイスをしてみようと思います。
まず、当時お教えいただきましたSさんには、大変申し訳ないことではございますが、初めの参考ページを探すところまでは問題ありませんが、問題はその次の「いきなりのコピペ！」...。
現在の私がアドバイスするのであれば、当時の私は「フォトショップエレメント」なるソフトは持っていたものの、この当時のスキルでは、フォトショップでワイヤーフレームやデザイン見本を作成するのは不可能と考え、まずは鉛筆と白紙の用紙を用意して、フリーハンドでも良いので、参考サイトのレイアウトを紙に記載することから始めることをアドバイスいたします。
次に、フォトショップで見た目のデザインまで作成できれば良いのですが、フォトショップを使いこなせるようになるまでは、予想以上に時間がかかるので、用紙に記載したデザイン、もちろん配色なども決めなければいけませんが、イメージに合った色を色鉛筆でも問題ないので書き込みます。
そこまで出来れば、その次はAちゃんに相談が良いでしょう...。
おそらくそこまでの指示があればAちゃんは出来るはず、しかし、デザインカンプを作成するとなると、Aちゃんから別途料金を請求される可能性もございますが、それは致し方ないことで、また、出来ないといわれれば、デザインカンプを作成する人を探すことになりますが、新聞の折り込み広告を依頼していた広告代理店にお願いしたとしても、比較的安価に作成してもらえるように感じます。
※デザインカンプとは、Webサイトや印刷物などのデザインの完成見本です。正式名称は「Design Comprehensive Layout」で、「カンプ」と略されることもあります。ラフな骨組みの「ワイヤーフレーム」に画像、色、フォントなどの具体的な要素を加え、クライアントや制作チームと完成イメージを共有するための重要なツールです。
デザインカンプが完成すれば、後はAちゃんにお願いすれば間違えなくhtmlコーディング作業は問題なく行ってくれるでしょう。この辺がホームページ制作初心者には理解しがたいところだと感じますが、php使いであれば、htmlやcssは比較的簡単におこなえる作業です。
この順序でホームページ制作、ECサイトの制作をすすめれば、これからお話しする大きな間違えにはならなかったように感じます。
また、お話のなかで、Aちゃんに「流石に如何なものかと...、」と言われた際に、第1話でお話しした目的の本題である、「沢山の人に興味を持ってもらうこと！」が本題であることをAちゃんにお伝えすれば、間違えなく別の方法を提案されたことのように思います。
以上のことを踏まえ、しっかりとしたhtmlとcssを使用したコーディングをおこなえるようになるまでは、おそらく2002年のぼくの場合、htmlなら1～3ヶ月、cssまで含めるとなると勉強時間にもより異なりますが、おそらく3ヶ月から半年くらいでマスターできるように感じます。
時がすぎ2008年頃までは、ぼくはテーブルレイアウトでページの作成をしておりました。
なぜ2008年頃まで、この大きな過ちに気が付かなかったと申しますと、ありがたい事に、日々の他の業務が忙しく、この時点での、ぼくのページ作成スキルはッ、HTMLは読め、tableレイアウトでページは作成できるものの、大事なのは、写真である画像やキャッチコピーなどだと思っており、写真撮影やコピーライティングなどを重点的に勉強しておりました。
しかしながら、2008年頃から、
jQuery（ジェイクエリー）で、動きがあるサイトが増え始めてきておりました。
ちょうどその頃、自分が運営するECサイトにも、もう少しデザインに動きなど加えたいなぁ～。などと思い色々と調べてみた所、どうやらXHTMLとCSSとjQueryを使用しないと、思ったようなデザインのページは出来ないことが分かりました。
そこで、まずはXHTMLから勉強のやり直しです。
この時、思い出してしまったのです。
Aちゃんが言っていた「tableレイアウトは如何なものか」という事を...。
実は、2002年の時点でXHTMLもCSSも、すでに確立された技術で、ぼくが、ページ作成初心者だという事で、実に6年近く、基本構文では無く、自己流のページ作成を行っていたことになります。
すでに皆さんお気づきですね、コレが私が犯した重大なトホホッな失敗です！！
では何故？6年もの間、自己流のページ作成で満足していたかというと、結論は、ウェブ上にアップされたページの見た目が同じようだからです。
今では、ウェブ上の表のページを見るよりも、はるかにソースコードを見る時間のほうが長いのですッ。
しっかり、マークアップ出来ているか、また、余分なIDやclassは、タグは間違えていないか？などのチェックや、構文自体がおかしくはないかなどを常にチェックしながら、ソースコードを記載していくわけです。
上記の事柄が正しく行えていないと、ページの表示速度や、SEOなどにも影響してきてしまうので、このhtmlの記載方法が、まずホームページを作成するうえで、初めに考えなくてはいけない、重要な事柄になります。
Aちゃんは、すべてわかっていた事と思います。と、ここまで5話にわたり、ぼくの失敗談を記載してきました。
この失敗の経験を踏まえ、やはり、「急がば回れ！」とは先人の素晴らしい知恵だと感じる今日この頃です。
という事で、また機会がございましたら、参考になる実体験を記載したいと思います。
お仕事のご依頼は下記より...、それではまた次回...。
