デザイン事務所を自営しています。
お客様から頼まれて、Webサイトを作りました。Dreamweaverと
Fireworksで作成して、必要な部分はcssやソースを書き直して修正しました。
アップしてしばらくして、お客様のところにweb制作専門の業者が訪問
してきて、サイトを見て次のように直した方が良いといわれたそうです。
「画像ばかりでヒットしにくいので、コーディングをして
テキスト中心にした方が良い。h1要素を入れないといけない。
我が社ならHTML5とcssでコーディングします。」
自分たちの会社で再制作させろという案内のようですが、いろいろ専門的な
言葉を並べられて、お客様は何のことかわからないのでこのままでは見れなく
なるのではと思い、相談してきました。
私はどちらかというとグラフィックデザインが得意なためサイトを作る時も
画像が中心となってしまいますが、それでもcssやソースで見やすくなるように
しているつもりです。Dreamweaverで制作したのとコーディングするというのは
どういう違いがあるのですか。(そもそもWebデザインとコーディングとはどう
違うのでしょうか。)
とりあえずはwebサイトの閲覧と中のページのフォーム送信は正常に動いて
いますので問題ないのですが、お客様に不安を感じさせなくしたいと思います。
サイト制作について初歩的なことですが、よろしくお願いします。
No.8ベストアンサー
- 回答日時:
何か、「見てくればかり重視する」ことと「論理的な最適化HTML」の比較論になっているような気がしますが、そこまで大げさな話題ではないと思います。
ちょっと極論になりますが、「マークアップ」と「イメージ優先」の違いは、所詮は<img>タグがダイレクトに配置されているか、CSSでブロック要素の背面に配置されているかの違いじゃないでしょうか。
で、イメージ重視になってくると、どうしても画像部品が増え、全部CSSに組んでいると生産性がガタ落ちになるため、直接HTMLに置いてしまう、と。
そうすると、鬼の首でも取ったように、「HTMLの理念に反している」という意見が出てくるような気がします。
少なくともお仕事でWebサイトの制作をされているデザイナさんであれば、ビジュアルの力量は申し分ないことと思いますので、
・見出しタイトル画像は、<h1><h2>タグなりのbackground-imageとして配置する
・ブロック要素としての画像配置は、できるだけCSS背面とする。
・細かいオーナメントのうち、イレギュラーなものはなるべくCSS描画にする
とすれば、大幅に「最適化HTML」に近づくと思います。
うちの会社はWebプログラムの開発がメインですが、企業サイトではデザイナがらみがほとんどなので、(CSS配置も含めて)画像点数が多く、プログラマもDreamweaverを使っています。
エディタマークアップだけで済むほど世の中簡単じゃないです。
デザイナにはDreamweaver、プログラマにはAptanaやEclipseが必要なのは常識です。
で、皆、HTMLとCSSを触る。どれが正解ということはない。
企業に押し掛けて、「アンタのとこのサイトは画像ばっかりでなってない」と押し売りする輩は、「アンタんとこのサイトは被リンク数がほとんどない」と、SEOを押し売りしている輩と同じ下司野郎です。
ケチをつけることはできても、新しい価値やサービスを創造できるわけではない。気にすることはありません。
その程度のことで上がるアクセスアップなんかたかが知れていますし。
デザイナの力量はビジュアルで決まります。
方法論にこだわるあまり、ビジュアルの生産性を落としてまでマークアップを意識する理由はないです。
マークアップだけなら格安で下請けするところもいっぱいありますので、そういうところを使われるのもアリですよ。
ご回答ありがとうございます。
「SEOを押し売りしている…」の意見には力づけられました。
今回のサイトは、特殊な内容で不特定多数の方にアクセスされる必要も無いので
ビジュアル性を落としてまでSEO対策が必要か考えていたところです。
見出しにはデザイン文字の画像を使っていますので
・見出しタイトル画像は、<h1><h2>タグなりのbackground-imageとして配置する 等で
対応してみます。
No.7
- 回答日時:
>そもそもWebデザインとコーディングとはどう違うのでしょうか
これが、質問の本質です。そこを見事に突かれましたね。
カタログやリーフレットのデザインと、ウェブデザインはまったく異なるものです。(と私は新入社員に説明します)
HTMLの目的は
【引用】____________ここから
どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
なのです。カタログなどでは、人が見てアピールする部分が目立つフォントで大きく書かれていれば、それが言わんとするところはわかりますが、機械相手ではわかりません。きちんと、<h1>ここは見だし</h1><p>ここからここまではひとつの段落</p>、ここは<strong>重要</strong>ですよとマークアップしておく必要があります。それがウェブデザインなのです。
先日、このサイトで「簡素化したHTMLを書けるようCSSを勉強中です( http://oshiete.goo.ne.jp/qa/7773302.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. … )』
Lynx( http://lynx-win32-pata.sourceforge.jp/index-ja.h … )で見てみることです。
コーディングは文字通りHTMLコードでマークアップしていくことですが、そのサンプルのNo.1の回答( http://oshiete.goo.ne.jp/qa/7773302.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-html4 … )」
★私はどちらかというとグラフィックデザインが得意なため
それは、とても、すばらしいことです。
読解力さえあればHTMLのコーディングはできますが、スタイルシートでのデザインはスタイルシートの知識だけでなく、美的センスが求められます。こればっかしは、才能の面もあり、知識だけでは追いつけません。
丁重な解答ありがとうございました。
「簡素化したHTMLを書けるようCSS…」とこの解答を保存して、試してみたいと思います。
事務所のスタッフもグラフィックが得意なためスタイルシートでのデザインということにピンときてないようです。
DTPの分野でも、スタイルシートという考え方があり、それとの違いに戸惑っているようです。
今後、InDesignのデータを電子書籍のePubに変換した時、そのデータ精査のためにxhtmlやcssの
知識が必要だといわれています。
あれもこれもでいろいろ勉強しなければならないようですが、がんばってみます。
No.6
- 回答日時:
No.4です。
すみません、補足です。
HTMLそれ自体は、どちらかというと国語の文法に近いです。
ここが見出し、ここからここまでが段落、ここは箇条書き項目、ここは強調、、、
そういうのをマークします。
"デザイン"の分野はCSSの領域ですが、
HTML、CSSの両方を1人で行うのが一般的です。
No.5
- 回答日時:
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の作成方法は変わります。
とりあえず、サイトがあって動いてれば良いというのであれば、今のままでもいいと思いますが
検索エンジンで上位に行きたいなどの要望があるのでしたら、根本的に見直す必要があると思います。
No.4
- 回答日時:
同じ「デザイン」という名前がついていても、
衣装デザイン、建築デザイン、自動車デザイン、パッケージデザイン、キャラクターデザイン、DTP(パンフレットデザイン、広告デザイン)、ウェブデザイン。
全部、ジャンル違いですよ。
>デザイン事務所を自営しています。
どのデザインかわかりませんが、
DTPをされてるならマークアップという言葉くらいはわかると思います。
ウェブページの作成はマークアップ(HTMLという名称のマークアップ言語)で行います。
そのマークアップを適切に行うのがHTMLコーディングです。
最終的に同じ表示になればマークアップは適当で良いというのは、趣味レベルならかまわないと思いますが、
プロとしてやるなら、きっちり勉強するのが良いと思います。
HTMLについて勉強すれば自ずと理解できると思います。
No.3
- 回答日時:
>デザイン事務所を自営しています
この作文のポイントは、この行ですね。
IT関連企業ではなく、製品のデザインとか(プロダクトデザイン)、広告とか、ちらし、雑誌、本など、イラストであったり、おおよそ絵を作業の方たちが集まる集団の事ですね。
つまり、基礎からコンピューターを学んだわけではなく、関連事業として、できる人を雇い入れ、好きに作らせ、
見栄えよく
出来上がった物を売りつけた。
と言うのが実情のようです。本当の話なら。まあ、大抵このような投稿は、過去からの焼き直しや、などサイト関連者による投稿なんですけどね。そこを、あえて回答るるなら
企業としてのアプローチとしては、2つあり、
1.コンサルティング
Webの話だけではなく、その企業のウィークポイントなど改善点を指摘し、それで報酬を得る。システム開発会社(ソリューション事業)に多い、ビジネスモデルですね(営業的アプローチ)。
2.アウトソーシング
要求された物、またはサービスを作って提供する。
質問者さんは2番をしただけですね。そこを理解しないと、この話は、ただの過去からの焼き直しで、「Web製作の心得」なんて言うテーマで本の冒頭に例題として、投稿される事柄ですね
1と2番。どちらが上とか下とか高級とかありません。ケースバイケースです
会社の成長とともに、1番から2番へと事業を展開してゆく必要のあるものです。
デザインだけ請け負う会社だけなら、それだけを行ってください。もしWeb製作事業をしたいのなら、IT関連企業らしく、事業展開を、ソリューション事業に向け準備し、人材を育てるか、雇ってください。SEとかカスタマーエンジニアとか営業とか呼ばれる人種ですね。
HomePageは、たんなるデザインだけ澄むのは、初期事業だけです。これは、クライアントの話で、何の目的で立ち上げたかの話です。これらをもっと有効に活用しませんか? というのもソリューション事業であり、コンサルティングの世界です。
>Dreamweaverで制作したのとコーディングするというのは
これは、あなたの会社でそれを作った人に聞いてください。聞けないような社長なら、お先真っ暗の会社ですね。逆に、回答できない担当者なら、はやめに首にしたほうがよさげです。または、その担当者はデザインだけやらせ、技術的にしっかりしたIT
プロを雇って製作させてください。
実際、多くのIT関連間会社のWeb製作現場は、企画部門(開発、SE)、デザイン部門、開発部門、営業部門(SEがいる所)、があり、営業や、企画でコンセプトなどサイト設計をします。それを元にコーディングを開発部門で行います。その時、このようなページを作るから、デザインを専門にしている人に、ページデザイン及び構成デザインをしてもらい、それにしたがって、サイトの構成とデザインをします。
つまり、分業しているわけですね、それぞれの専門家で。
>Dreamweaverで制作したのとコーディングするというのは
「コーディング」コンピュータ用語ですのでネットでちゃんと検索して意味を確かめましょう。この話はちゃんと「Dreamweave」を理解していれば、こんな内容の質問にはなりません。
http://search.yahoo.co.jp/search?b=1&n=10&ei=UTF …
http://search.yahoo.co.jp/search?p=Dreamweaver%2 …
http://search.yahoo.co.jp/search?p=%E8%A3%BD%E4% …
このようなソフトは初期の頃(2000年頃)、たしかにデザインを主な目的として、IBMなどが有名でしたね。しかし、製作現場からは、ほとんどつかわれませんでした。なぜかといえば、クライアントサイドスクリプトは扱えませんでしたし、直接コードを書いたほうが、うまく配列できるからです。
最近では、クラアントサイドスクリプトだけでなくサーバーサイドのコードも意識して構成できるようになり、まさに手動と、自動とかうまくできる用に作られたのが、「Dreamweaver」で、そのためにプロの現場で指示され、主流になったのですよ。
そう、手動で直接書き込んでも反映されるわけでね。IBMの初期のころは、保存すると、手動で書かれたものがけされてしまいました。これでは、プロの現場では使えなし、何せ生成されるコードはクソでしたからね。
なぜ手動で書き込むかと言えば、GUI上では、うまく行かないことが多々あるからです。しかも、最近(ここ5年くらい)では、クロススクリプティングといって、ブラウザ固有の問題を解決してくれるようにコードも構成してくれるようにはなりましたが、以前では、それも消されてしまいました(自動生成させると)。
さらにNo1さんが指摘したSEOのことですね。
これは、検索サイトで目的とした事柄を、目的におおじて、効率よくヒットさせるためのテクニックです。これは自動ではうめこめません。AIがすすんでも無理だと思います。
何せ、何を検索したら、家のサイトがヒットされるようにするかは、当人でしかわからないわけですから。
ここの部分は、まさにコンサルして、事業展開を聞き、どのようなキーワードでヒットさせるかを戦略的にきめないとだめなことです。
そこの社長、やりました? やっていないですよね。
例えば、衣料屋さんで、この冬、はやりそうな赤のコートがあったとします。当然コートではヒットしますよね。コートと言う文字がサイトにあれば。
しかし、赤のコートのページに飛ぶかと思えば、そうではなくそのサイトの「コートの手入れ」なんて言うページにとんでしまったら(ヒットしたら)、商売的に非効率で、もったいない話です。
そこで、意図を持って、検索エンジンに対して、こうすれば、「赤のコート」のページが誰よりも最初にヒットして、そこのリンクに飛びますよ。とうのがSEOであり、コンサルの仕事です。
そのような仕事しましたか? してないですよね。
このような意図を持ったコードは、「Dreamweaver」でも無理です。テンプレートは作成できますが。
No.2
- 回答日時:
HPのコンサルをしていた事ありますが・・・
>「画像ばかりでヒットしにくいので、コーディングをして
>テキスト中心にした方が良い。h1要素を入れないといけない。
>我が社ならHTML5とcssでコーディングします。」
まぁ~営業トークでしょうが、ご質問者様をHPを製作依頼されたお客様と、どのような打ち合わせをしてからHP製作を行なったのですか?
そこをあいまいな状態にしているので、このような質問になっているように思います。
もう一度、お客様との打ち合わせ記録を確認して、現状のHPを最新技術を取り入れたHPにする必要があるならば、「この部分は製作時になかった新しい技術なので取り入れることでxxxのような効果が期待できるので」(訪問するユーザが増えます)とか(売り上げが増える)というメリットを説明し、お客の判断に委ねるしかないと思います。
No.1
- 回答日時:
>Dreamweaverで制作したのとコーディングするというのはどういう違いがあるのですか。
違いなんて、あるようでないです。DWでもHTMLコーディングするし
単にHTMLコーディングにDW使うか、別の使うか。
>画像ばかりでヒットしにくいので、コーディングをしてテキスト中心にした方が良い。
>h1要素を入れないといけない。我が社ならHTML5とcssでコーディングします。
これは、SEO対策のことを言ってるのですね。SEO対策ってなに?とかはまた別途お調べください。
噛み砕いて言うと、要は、GoogleやYahoo!などの検索エンジンの結果の上位に自分のウェブサイト・ページが掲載されるように工夫をするということです。
HTML5、CSS等は最近の主流で、スマフォにも対応する場合は必須ですね。flashとか表示できませんし。
PC対象なら、まだ別に・・って感じですが、HTML5が主流になっているので、早めに対応しちゃった方がいいってぐらいですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(IT・Webサービス) 飲食店がWEBサイトを作る利点について 2 2022/06/08 20:19
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- インターネットビジネス 個人事業用のwebサイトを作るためのおすすめの本を教えて下さい。 4 2022/06/30 17:20
- サーバー メールサーバーについて詳しい方、メールサーバーの管理業務経験のある方、教えてください。 3 2022/11/12 18:24
- HTML・CSS 依頼したWEBサイトの修正に追加料金がかかる 10 2022/10/24 09:31
- 転職 転職先で迷ってます。地方住み26歳独身女性(独り暮らし)です。 3 2022/11/02 11:59
- ホームページ作成・プログラミング web制作(HP作成について教えてください) 閲覧ありがとうございます。 今、WEB制作の勉強をして 2 2023/04/13 07:23
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
- その他(IT・Webサービス) 動画が多い(容量が多い)Webサイト作成 1 2023/04/08 17:42
- 会社・職場 今後の仕事について 閲覧ありがとうございます。 私は現在28歳の男性です。 自分が向いている仕事、続 3 2022/08/01 12:19
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
min-heightとheightの違いについて
-
div要素が重なってします
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
1時間30分を簡単に表したいで...
-
<div id="container">の使いか...
-
HTML5 iframe の代わり
-
3カラムレイアウトで「常に残り...
-
ヘッダーとフッターだけ背景を...
-
RMS レフトナビ問題
-
<!-- #BeginLibraryItemとは
-
何もいじってないのに、表示崩...
-
一括で全体を右にずらす
-
テーブルを使わずにコーディン...
-
お叱りを受けるような質問なの...
-
要素間、要素内に隙間が空く
-
html の divとtable の役割
-
スペースを使わず文字位置を揃...
-
html5でheaderの中にnav
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
おすすめ情報