- ベストアンサー
Web制作の基礎知識と基本的な違いとは？
- Web制作について基本的な知識とWebデザインとコーディングの違いについて説明します。
- 「画像ばかりでヒットしにくいので、コーディングをしてテキスト中心にした方が良い」というアドバイスについて、HTML5とCSSを使用する方法をご紹介します。
- Webサイト制作でグラフィックデザインとコーディングの違いについて解説します。Dreamweaverでの制作と後からコーディングする方法の違いも解説します。
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
何か、「見てくればかり重視する」ことと「論理的な最適化HTML」の比較論になっているような気がしますが、そこまで大げさな話題ではないと思います。 ちょっと極論になりますが、「マークアップ」と「イメージ優先」の違いは、所詮は<img>タグがダイレクトに配置されているか、CSSでブロック要素の背面に配置されているかの違いじゃないでしょうか。 で、イメージ重視になってくると、どうしても画像部品が増え、全部CSSに組んでいると生産性がガタ落ちになるため、直接HTMLに置いてしまう、と。 そうすると、鬼の首でも取ったように、「HTMLの理念に反している」という意見が出てくるような気がします。 少なくともお仕事でWebサイトの制作をされているデザイナさんであれば、ビジュアルの力量は申し分ないことと思いますので、 ・見出しタイトル画像は、<h1><h2>タグなりのbackground-imageとして配置する ・ブロック要素としての画像配置は、できるだけCSS背面とする。 ・細かいオーナメントのうち、イレギュラーなものはなるべくCSS描画にする とすれば、大幅に「最適化HTML」に近づくと思います。 うちの会社はWebプログラムの開発がメインですが、企業サイトではデザイナがらみがほとんどなので、（CSS配置も含めて）画像点数が多く、プログラマもDreamweaverを使っています。 エディタマークアップだけで済むほど世の中簡単じゃないです。 デザイナにはDreamweaver、プログラマにはAptanaやEclipseが必要なのは常識です。 で、皆、HTMLとCSSを触る。どれが正解ということはない。 企業に押し掛けて、「アンタのとこのサイトは画像ばっかりでなってない」と押し売りする輩は、「アンタんとこのサイトは被リンク数がほとんどない」と、ＳＥＯを押し売りしている輩と同じ下司野郎です。 ケチをつけることはできても、新しい価値やサービスを創造できるわけではない。気にすることはありません。 その程度のことで上がるアクセスアップなんかたかが知れていますし。 デザイナの力量はビジュアルで決まります。 方法論にこだわるあまり、ビジュアルの生産性を落としてまでマークアップを意識する理由はないです。 マークアップだけなら格安で下請けするところもいっぱいありますので、そういうところを使われるのもアリですよ。
その他の回答 (7)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞そもそもWebデザインとコーディングとはどう違うのでしょうか これが、質問の本質です。そこを見事に突かれましたね。 カタログやリーフレットのデザインと、ウェブデザインはまったく異なるものです。(と私は新入社員に説明します) HTMLの目的は 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より なのです。カタログなどでは、人が見てアピールする部分が目立つフォントで大きく書かれていれば、それが言わんとするところはわかりますが、機械相手ではわかりません。きちんと、<h1>ここは見だし</h1><p>ここからここまではひとつの段落</p>、ここは<strong>重要</strong>ですよとマークアップしておく必要があります。それがウェブデザインなのです。 先日、このサイトで「簡素化したHTMLを書けるようCSSを勉強中です( http://okwave.jp/qa/q7773302.html )」と言う質問がありました。とても良いサンプルにしたつもりですから、説明をよく読んで、ぜひ試してください。 オリジナルのサイトのURLは、当掲示板の規約で削除されていますが、HTML自体が[約17,000 バイト]ありましたが、書き直したものは[2,500バイト]しかありません。 次の画像を用意して実際にご覧ください。 メニューの背景画像(topillust.jpg):width:744px;height:484px 飾り画像(goant.gif):width:744px height:26px タイトル画像(titlebar.gif)width:744px heightt:72px ・・・・オリジナルは、すべてのリンクが画像でした。 そして、もっとも良いのは、googleが言うように 『Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )』 Lynx（ http://lynx-win32-pata.sourceforge.jp/index-ja.html )で見てみることです。 コーディングは文字通りHTMLコードでマークアップしていくことですが、そのサンプルのNo.1の回答( http://okwave.jp/qa/q7773302.html#a1 )のとおりです。 「画像ばかりでヒットしにくいので、コーディングをしてテキスト中心にした方が良い。h1要素を入れないといけない。我が社ならHTML5とcssでコーディングします。」 これについて説明しておきます。 HTML5は、HTML4.01strict!!-transitinalじゃない--の「文書構造とプレゼンテーションの分離」が徹底されます。すなわち、HTML4.01で残っていた非推奨要素や属性、プレゼンテーションに関わる要素がなくなり、セマンティク(文章の構造)を示す要素が追加になります。header(文書のヘッダ),section(本文),footer(フッタ),aside(本文と関係ない記事),article(headerやsection,footerを持ちうる完結した記事),figure(挿絵的な要素),nav(ナビゲーション)などです。そのため、一般的には <body> <header> <h1>このページのタイトル</h1> <div class="abstract"> <p>要約</p> </div> </header> <section> <h2>本文(章)見出し</h2> <p>段落</p> <section> <h3>本文(項)見だし</h2> <p></p> </section> </section> <footer> <h2>フッタ</h2> <nav> ナビゲーション </nav> <address></address> </footer> </body> のようなマークアップになるでしょう。これだと機械(検索エンジンにも一目でそのページの内容を理解できます。これがSEOなのです。 ちなみにHTML4.01だと、 <body> <div class="header"> <h1>このページのタイトル</h1> <div class="abstract"> <p>要約</p> </div> </div> <div class="section"> <h2>本文(章)見出し</h2> <p>段落</p> <div class="section"> <h3>本文(項)見だし</h2> <p></p> </div> </div> <div class="footer"> <h2>フッタ</h2> <div class="nav"> ナビゲーション </div> <address></address> </div> </body> とマークアップされて来たはずです。→「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 ★私はどちらかというとグラフィックデザインが得意なため それは、とても、すばらしいことです。 読解力さえあればHTMLのコーディングはできますが、スタイルシートでのデザインはスタイルシートの知識だけでなく、美的センスが求められます。こればっかしは、才能の面もあり、知識だけでは追いつけません。
お礼
丁重な解答ありがとうございました。 「簡素化したHTMLを書けるようCSS…」とこの解答を保存して、試してみたいと思います。 事務所のスタッフもグラフィックが得意なためスタイルシートでのデザインということにピンときてないようです。 DTPの分野でも、スタイルシートという考え方があり、それとの違いに戸惑っているようです。 今後、InDesignのデータを電子書籍のePubに変換した時、そのデータ精査のためにxhtmlやcssの 知識が必要だといわれています。 あれもこれもでいろいろ勉強しなければならないようですが、がんばってみます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
No.4です。 すみません、補足です。 HTMLそれ自体は、どちらかというと国語の文法に近いです。 ここが見出し、ここからここまでが段落、ここは箇条書き項目、ここは強調、、、 そういうのをマークします。 "デザイン"の分野はCSSの領域ですが、 HTML、CSSの両方を1人で行うのが一般的です。
- mezashi2000
- ベストアンサー率37% (79/210)
WEB製作でディレクション的なことをしています。 後から来た製作業者のいう事は特におかしなことを言っていません。 いわゆる「SEO対策」に基づいての指摘ですね。 SEO対策とは、GoogleやYahooなどの検索エンジンに引っかかりやすくするための手法です。 つまり業者は 「当社で作り直していただければ、より検索エンジンに掲載されやすいサイトにいたします」 という事です。 昔と違い、WEBが普及してきた事で、有害なサイトを排除する動きがあります。 そこで検索エンジン(GoogleやYahooなど)は、逆の発想で「有益なサイト」を優先して掲載します。 しかし、有益と言っても、情報を収集するロボットプログラムにサイト中身の理解はできませんので いくつかのルールに基づいて情報を収集し、サイトをランク付けします。（各社独自のランク付けもあります） その一つが、国際的に策定されているサイトのページ構成があります。 簡単に言うと以下の内容です。 1.HTMLには情報だけが記載されている、見栄えのデザインはCSSにて制御する 2.HTML構成が順当である 大見出し→<h1>タグ、中見出し→<h2>タグ、小見出し→<h3>タグというように適切なタグを適切な場所に記載している 3.タイトルやページ説明のmeta記述と、ページの中身があっている ※これはテキスト判断なので、同様の単語が適切に配置されているかで判断 このようにページを構成するタグの書き方もある程度ルールに基づいて作成されていないと WEBサイトとしての評価がさがります。 ＞私はどちらかというとグラフィックデザインが得意なためサイトを作る時も画像が中心となってしまいますが、それでもcssやソースで見やすくなるようにしているつもりです。 みやすいというのは大事なことですが、必要以上に画像に頼っているのではないしょうか？ 本当にテキストではダメなのか？ 特殊なフォントじゃなくてもいいのでは？ など、見直す部分は沢山あるかと思います。 私も、作成時の段階では、イラレ等を用いてサイトを画像で作成しますが 最終的には細分化して、不必要な画像は極力省き、テキストで表現できる部分はテキストに置き換えます。 ＞Dreamweaverで制作したのとコーディングするというのはどういう違いがあるのですか。 同じです。 DWのデザイン画面で作成したものは、同時にHTMLタグで書き出されてコーディングされます。 しかし、DWのデザイン画面で作成するものは、見た目があえばそれでいいという状況だと考えてください。 WEB製作会社では、基本的にコーディング=HTML化は手でコードを書いて行きます。 ＞Webデザインとコーディングとはどう違うのでしょうか Webデザインとはページの見た目のデザインからサイトの構成まで全般を言います。 コーディングとはデザインをHTMLに書き起こす事をいいます。 お客様が何を望まれているかによって、WEBの作成方法は変わります。 とりあえず、サイトがあって動いてれば良いというのであれば、今のままでもいいと思いますが 検索エンジンで上位に行きたいなどの要望があるのでしたら、根本的に見直す必要があると思います。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
同じ「デザイン」という名前がついていても、 衣装デザイン、建築デザイン、自動車デザイン、パッケージデザイン、キャラクターデザイン、DTP（パンフレットデザイン、広告デザイン）、ウェブデザイン。 全部、ジャンル違いですよ。 >デザイン事務所を自営しています。 どのデザインかわかりませんが、 DTPをされてるならマークアップという言葉くらいはわかると思います。 ウェブページの作成はマークアップ（HTMLという名称のマークアップ言語）で行います。 そのマークアップを適切に行うのがHTMLコーディングです。 最終的に同じ表示になればマークアップは適当で良いというのは、趣味レベルならかまわないと思いますが、 プロとしてやるなら、きっちり勉強するのが良いと思います。 HTMLについて勉強すれば自ずと理解できると思います。
- lupin-333333
- ベストアンサー率31% (294/933)
＞デザイン事務所を自営しています この作文のポイントは、この行ですね。 ＩＴ関連企業ではなく、製品のデザインとか（プロダクトデザイン）、広告とか、ちらし、雑誌、本など、イラストであったり、おおよそ絵を作業の方たちが集まる集団の事ですね。 つまり、基礎からコンピューターを学んだわけではなく、関連事業として、できる人を雇い入れ、好きに作らせ、 見栄えよく 出来上がった物を売りつけた。 と言うのが実情のようです。本当の話なら。まあ、大抵このような投稿は、過去からの焼き直しや、などサイト関連者による投稿なんですけどね。そこを、あえて回答るるなら 企業としてのアプローチとしては、２つあり、 １．コンサルティング Ｗｅｂの話だけではなく、その企業のウィークポイントなど改善点を指摘し、それで報酬を得る。システム開発会社（ソリューション事業）に多い、ビジネスモデルですね（営業的アプローチ）。 ２．アウトソーシング 要求された物、またはサービスを作って提供する。 質問者さんは２番をしただけですね。そこを理解しないと、この話は、ただの過去からの焼き直しで、「Ｗｅｂ製作の心得」なんて言うテーマで本の冒頭に例題として、投稿される事柄ですね １と２番。どちらが上とか下とか高級とかありません。ケースバイケースです 会社の成長とともに、１番から２番へと事業を展開してゆく必要のあるものです。 デザインだけ請け負う会社だけなら、それだけを行ってください。もしＷｅｂ製作事業をしたいのなら、ＩＴ関連企業らしく、事業展開を、ソリューション事業に向け準備し、人材を育てるか、雇ってください。ＳＥとかカスタマーエンジニアとか営業とか呼ばれる人種ですね。 ＨｏｍｅＰａｇｅは、たんなるデザインだけ澄むのは、初期事業だけです。これは、クライアントの話で、何の目的で立ち上げたかの話です。これらをもっと有効に活用しませんか？ というのもソリューション事業であり、コンサルティングの世界です。 ＞Dreamweaverで制作したのとコーディングするというのは これは、あなたの会社でそれを作った人に聞いてください。聞けないような社長なら、お先真っ暗の会社ですね。逆に、回答できない担当者なら、はやめに首にしたほうがよさげです。または、その担当者はデザインだけやらせ、技術的にしっかりしたＩＴ プロを雇って製作させてください。 実際、多くのＩＴ関連間会社のＷｅｂ製作現場は、企画部門（開発、ＳＥ）、デザイン部門、開発部門、営業部門（ＳＥがいる所）、があり、営業や、企画でコンセプトなどサイト設計をします。それを元にコーディングを開発部門で行います。その時、このようなページを作るから、デザインを専門にしている人に、ページデザイン及び構成デザインをしてもらい、それにしたがって、サイトの構成とデザインをします。 つまり、分業しているわけですね、それぞれの専門家で。 ＞Dreamweaverで制作したのとコーディングするというのは 「コーディング」コンピュータ用語ですのでネットでちゃんと検索して意味を確かめましょう。この話はちゃんと「Dreamweave」を理解していれば、こんな内容の質問にはなりません。 http://search.yahoo.co.jp/search?b=1&n=10&ei=UTF-8&fr=ie8sc&p=%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%A8%E3%81%AF http://search.yahoo.co.jp/search?p=Dreamweaver%20%E4%BD%BF%E3%81%84%E6%96%B9&rs=2&aq=-1&ei=UTF-8&n=10&fr=ie8sc http://search.yahoo.co.jp/search?p=%E8%A3%BD%E4%BD%9C%E7%8F%BE%E5%A0%B4%E3%80%80Dreamweaver+%E4%BD%BF%E3%81%84%E6%96%B9&aq=-1&oq=&ei=UTF-8&fr=ie8sc&n=10&x=wrt このようなソフトは初期の頃（2000年頃）、たしかにデザインを主な目的として、ＩＢＭなどが有名でしたね。しかし、製作現場からは、ほとんどつかわれませんでした。なぜかといえば、クライアントサイドスクリプトは扱えませんでしたし、直接コードを書いたほうが、うまく配列できるからです。 最近では、クラアントサイドスクリプトだけでなくサーバーサイドのコードも意識して構成できるようになり、まさに手動と、自動とかうまくできる用に作られたのが、「Dreamweaver」で、そのためにプロの現場で指示され、主流になったのですよ。 そう、手動で直接書き込んでも反映されるわけでね。ＩＢＭの初期のころは、保存すると、手動で書かれたものがけされてしまいました。これでは、プロの現場では使えなし、何せ生成されるコードはクソでしたからね。 なぜ手動で書き込むかと言えば、ＧＵＩ上では、うまく行かないことが多々あるからです。しかも、最近（ここ５年くらい）では、クロススクリプティングといって、ブラウザ固有の問題を解決してくれるようにコードも構成してくれるようにはなりましたが、以前では、それも消されてしまいました（自動生成させると）。 さらにＮｏ１さんが指摘したＳＥＯのことですね。 これは、検索サイトで目的とした事柄を、目的におおじて、効率よくヒットさせるためのテクニックです。これは自動ではうめこめません。ＡＩがすすんでも無理だと思います。 何せ、何を検索したら、家のサイトがヒットされるようにするかは、当人でしかわからないわけですから。 ここの部分は、まさにコンサルして、事業展開を聞き、どのようなキーワードでヒットさせるかを戦略的にきめないとだめなことです。 そこの社長、やりました？ やっていないですよね。 例えば、衣料屋さんで、この冬、はやりそうな赤のコートがあったとします。当然コートではヒットしますよね。コートと言う文字がサイトにあれば。 しかし、赤のコートのページに飛ぶかと思えば、そうではなくそのサイトの「コートの手入れ」なんて言うページにとんでしまったら（ヒットしたら）、商売的に非効率で、もったいない話です。 そこで、意図を持って、検索エンジンに対して、こうすれば、「赤のコート」のページが誰よりも最初にヒットして、そこのリンクに飛びますよ。とうのがＳＥＯであり、コンサルの仕事です。 そのような仕事しましたか？ してないですよね。 このような意図を持ったコードは、「Dreamweaver」でも無理です。テンプレートは作成できますが。
- gtx456gtx
- ベストアンサー率18% (194/1035)
ＨＰのコンサルをしていた事ありますが・・・ >「画像ばかりでヒットしにくいので、コーディングをして >テキスト中心にした方が良い。h1要素を入れないといけない。 >我が社ならHTML5とcssでコーディングします。」 まぁ～営業トークでしょうが、ご質問者様をＨＰを製作依頼されたお客様と、どのような打ち合わせをしてからＨＰ製作を行なったのですか？ そこをあいまいな状態にしているので、このような質問になっているように思います。 もう一度、お客様との打ち合わせ記録を確認して、現状のＨＰを最新技術を取り入れたＨＰにする必要があるならば、「この部分は製作時になかった新しい技術なので取り入れることでｘｘｘのような効果が期待できるので」(訪問するユーザが増えます)とか(売り上げが増える)というメリットを説明し、お客の判断に委ねるしかないと思います。
- kool_noah
- ベストアンサー率33% (95/285)
>Dreamweaverで制作したのとコーディングするというのはどういう違いがあるのですか。 違いなんて、あるようでないです。DWでもHTMLコーディングするし 単にHTMLコーディングにDW使うか、別の使うか。 >画像ばかりでヒットしにくいので、コーディングをしてテキスト中心にした方が良い。 >h1要素を入れないといけない。我が社ならHTML5とcssでコーディングします。 これは、SEO対策のことを言ってるのですね。SEO対策ってなに？とかはまた別途お調べください。 噛み砕いて言うと、要は、GoogleやYahoo!などの検索エンジンの結果の上位に自分のウェブサイト・ページが掲載されるように工夫をするということです。 HTML5、CSS等は最近の主流で、スマフォにも対応する場合は必須ですね。flashとか表示できませんし。 PC対象なら、まだ別に・・って感じですが、HTML5が主流になっているので、早めに対応しちゃった方がいいってぐらいですね。
お礼
ご回答ありがとうございます。 「ＳＥＯを押し売りしている…」の意見には力づけられました。 今回のサイトは、特殊な内容で不特定多数の方にアクセスされる必要も無いので ビジュアル性を落としてまでSEO対策が必要か考えていたところです。 見出しにはデザイン文字の画像を使っていますので ・見出しタイトル画像は、<h1><h2>タグなりのbackground-imageとして配置する 等で 対応してみます。