コーディング
HTMLやPHPなどのソースコードの記述を行うこと、またはその人員のことをいいます。
概要
コーディングとは、プログラミングとかなり近い性質を持っていますが、実際には指定の言語(ここではHTMLやPHP等)のソースコードを用いてクライアント側(コンピューター側)が理解できる記述を行うことをいいます。
HTMLは、本で言う「タイトル」「段落」等がタグとして記載ができます。
その記載すべき部分に文章や画像を表示させることで、Webページを構成していきます。
そういったソースコード制作業務を行う人を「コーダー」といいます。
この用語のメモ
見積もりで「コーディング費用」として登場する場面が多いです。
ページをデザイン・コーディング費用で一式表示する制作会社もあれば、分けて記載する制作会社もあります。
「SEOコーディング」と記載される制作会社も多いですが、マークアップをどれだけ考慮してくれるかを確認してみましょう。
(例えば、HTMLレギュレーションがあるか、SEO的な実績があるかなど)
デザイナーとコーダーでは、デザインの複雑さとコーディングでの再現度の問題で衝突が起こりやすいです。
クライアントの意向やマーケティング上必要な表現を行うにあたり、「テキストとして表現したい部分」と「画像として表現したい部分」をきちんとクリアにしておくことが円滑な制作進行につながります。
ディレクターとしてもこのあたりの調整をしっかり行うことが肝要です。
関連用語
- HTML
- 内部施策
- セマンティックウエブ
Web担当・運営・解析・SEO問題集の例題問題
コーディングに関連するジャンルの練習問題を掲載しています。Web担当・運営・解析・SEO問題集一覧から各ジャンルの問題にチャレンジできます。
クリックすると問題の答えと解説が見れます。
- frameタグ
- timeタグ
- embedタグ
- preタグ
この答えの解説
frameタグは、HTML5では廃止されました。
HTML5ではiframe(インラインフレーム)が引き続き使用できますが、frameはHTML5を文章構造、CSSを装飾指定に分割する過程上で廃止となりました。
- tbodyタグ
- dtタグ
- thタグ
- trタグ
- tdタグ
この答えの解説
dtタグは、dl(定義リスト)タグの入れ子になります。dlタグの入れ子にdtタグとddタグを使用します。
dtタグとddタグは、「質問と答え」の関係のような人まとまりの意味を持つ表現をしたいときに使うため、Q&Aなどのサイトに多用されます。
- imgタグ
- marqueeタグ
- spanタグ
- aタグ
- divタグ
この答えの解説
pタグはインラインタイプのタグなので、ブロックレベルタイプのdivタグやulタグは構文上入れ込むことができません。
- 限られた画面上において端末上での視認性が確保されている
- 情報が整理され、見つけたい内容を見つけやすくしている
- 閲覧端末の画面サイズに合わせたページ展開ができている
- ボタンやリンクテキストなどの間隔が十分に取れている
- 可能な限りコンテンツをたくさん詰め込んでいる
この答えの解説
魅力的なコンテンツの提供は大賛成ですが、1ページに沢山のコンテンツを展開してしまうと視認性低下や情報量過多による混乱を招くため、モバイルユーザビリティに該当しているとは考えにくいです。
- http://www.test.com
- https://test.com
- 他の選択肢すべて
- http://test.com
- https://www.test.com
この答えの解説
この場合、出題のドメインでは上記のドメイン全てを登録することができます。
しかし、内部施策でメタタグなどを使用しURLを統合しないとURLがwww有り無しで分かれた場合、サイトの評価が分散されてしまいます。
- PC版サイトしか作成していない場合、モバイル端末からの検索順位が下がる
- ほとんど内容が薄くてもPC版からモバイル版へのリンクを大量に張れば順位が上がる
- ほとんど内容が薄くてもモバイルサイトを別で作った方がよい
- PC版サイトを作り込んでいるのであれば、モバイル版は何もしなくても検索順位が上がる
この答えの解説
PCサイトをしっかり作っているからといって、コンテンツをモバイル版で障害なく見れるようにかつボリュームを落とさないようにしない限り、モバイル端末での検索順位向上は望みにくいと考えます。
- 301リダイレクト
- 移設前サイトの移設後サイトへの告知
- 新ブックマーク先の案内
- 302リダイレクト
- メルマガやSNSによる告知
この答えの解説
302リダイレクトは、単なる「一時的な転送」に用いられる記述になります。
リダイレクト方法を間違えると、サイトの評価を引き継げなくなるため、悲惨な状況を避けるためにもサイトを閉鎖する際は必ずリダイレクト方法を確認しましょう。
- リンクとリンクの間の間隔が10px以下で作っている
- エレメント(リンク要素があるコンテンツ)が動く要素が多数設置されている
- サイトに埋め込まれている画像の解像度が高い
- サイトは可変式だがメタタグのviewportが設定されていない
この答えの解説
リンクとリンクの間隔が狭すぎると、誤動作が発生しやすくユーザビリティ面においては指摘を受けやすい内容になります。
- Search Engine Optimization
- Search Engine Operation
- Search Electronic Operation
- Social Engine Operation
- Social Electronic Optimization
この答えの解説
SEOは「Search(検索) Engine(エンジン) Optimization(対策)」の頭文字をとった名称になります。
それ以外はそれぞれ単語が違います。
関連タグ【Web制作】に関するよくある質問
Web制作に関するよくある質問を抜粋しています。Web制作に関するよくある質問はこちらから。
全体的な工程としては、「打ち合わせ」「納期・見積」「サイトマップ」「構成案(ワイヤフレーム)作成」「デザインカンプ」「デザイン制作」「コーディング」「校正・テスト・品質管理」「公開」「運営・運用」をトータルとした工程になります。
これだけでもかなりの工程数になるかと思います。
各工程には普通、「納期」を設定しているため、各工程が遅れてくると、他の工程のスケジュールが圧迫されてしまい、タイトなスケジュールをこなさなくてはならなくなります。
ディレクターは主に前半の「打ち合わせ」から「構成案(ワイヤフレーム)作成」までを担い、あとは品質チェックや進行管理を中心に行います。
デザイナーは「デザインカンプ」及び「デザイン制作」、コーダーは「コーディング」と「校正・テスト」をそれぞれ担う形となり、Web制作の分業化が進んだ今、ざっくりですがこういった形で業務が行われています。
CSSは組み込みされたHTMLの装飾を行うものです。よって、レイアウト等の配置もこのCSSで行う形になります。
CSSを初めて使用する際に壁にあたってしまうポイントとして「float」の処理ではないかと思います。
むしろ、floatの仕様が理解できればある程度のレイアウトのコントロールができるようになるので、何度も繰り返し組んでみましょう。
floatと併せて「clearfix」というものも覚えるとレイアウト崩れが防げます。
製作工程に応じて使いやすいソフトが大筋決まっていることが多いです。
構成案やサイトマップを作る際はMicrosoftの「Excel」や「PowerPoint」が鉄板です。
大まかなデザイン枠を作る分にはPowerPointがあれば十分作れますし、サイトマップやスケジュール・見積もりなどの情報は、Excelがほとんど使われることが多いです。
いずれもPDFに手軽に変換できる点も非常に使いやすい要因となっています。
デザイン面では、Adobeの「Illustrator」か「Photoshop」が鉄板で、まれに「Fireworks」を使用しているユーザーもいます。
一般的に紙媒体もやっている企業では、「Illustrator」を使用してサイトデザインを制作しているケースが非常に多いです。
コーディング等ではAdobeの「Dreamweaver」がもっとも有名ですが、テキストエディタでコードを作成できる力があれば、ワードパットソフトの「Terapad」やGithubが提供している「Atom」も非常に使いやすいです。
コーディング面においてはファイルのエンコードとHTMLやCSS記載のエンコードをあわせないと文字化けも起こしてしまうので、個人的には「Terapad」が使いやすいと感じています。
運用面、特にアクセス解析などにおいてはこちらもMicrosoftの「Excel」や「PowerPoint」が非常に使われます。ツールとしては「Googleアナリティクス」と「Googleサーチコンソール」を使います。
Excelはうまく使えば得られたアクセス情報からさらに様々な視点でのアクセス情報を拾い出すこともできるため、Excelを使いこなせることができれば大きな武器になります。
アクセス解析等はディレクターが兼任しているケースも多いです。
ざっと上げましたが、全てを担当する場合は「Excel」「PowerPoint」「Illustrator」「Photoshop」「Dreamwerver」「Googleアナリティクス」「Googleサーチコンソール」の7つをマスターすることで大半の業務が行える形になります。
浅く広く習得するか、深く狭く習得するかは得手不得手で決めればよいのではと思います。
関連タグ【Webシステム】に関するよくある質問
Webシステムに関するよくある質問を抜粋しています。Web制作に関するよくある質問はこちらから。
Wordpressはオープンソース型のブログサイト構築アプリのことで、これを使うことで「好きなデザイン」で「固定ページ」や「記事」を特段HTMLを知らなくても一般的なブログサービスのように構築できるアプリです。
企業サイトでも非常に普及しており、一般事務職の方々が「新着情報」を更新し続けることもごく当たり前になりました。
このWordpressで特に求められるのは、アプリ導入から構築するところまでが必要で、その構築費用にかなりの初期費用を投資する必要があります。
あまり自分自身でコードを組むことは行っていません。
javascriptはあらゆるサイトに動作別でたくさんソースコードが公開されているのでそれらをアレンジして自分流に組むことが多いです。
組んだのに動かないこともたくさんあり、その場合は1行ずつ面倒でも検証し続けることで、記載ミスを見つけて動かすことができているのでいきなりイチから全部組まないとダメ!ということではありません。
制作現場でも自身で組んでいるコーダーももちろんいらっしゃいますが、サイトからソースを抽出することが多いです。
Web制作においては、基本的に適材適所において使用ツールを使い分けていますが、当サイトにおいては以下のように使っています。
デザインは「Photoshop」で一部アイコンを作るときには「Illustrator」を使用しています。
マニュアルなどの配布物は「PowerPoint」を使い、編集等を行っています。
コーディングについては「Terapad」を中心に、ときどき「Dreamwerver」を構文チェックなどに使用しています。
サーバー環境は、フリーソフトの「xampp」を使い、テストやモバイル画面のチェックも行っています。
関連タグ【SEO】に関するよくある質問
アクセス解析に関するよくある質問を抜粋しています。SEOに関するよくある質問はこちらから。
まず、どのように攻撃されているかを冷静に見ていきましょう。特に多いのが「リンク」攻撃です。
不自然なリンクがあり、理不尽なペナルティが届いたら「リンク否認」をすぐに行いましょう。
SEO業者などによって質の低いコンテンツが載っているサイトからの大量のリンクが張られたりする悪質な手口を実行してくることがあるため、Googleから通知が着たら「あわてず」「冷静に」「URLを確認してリンク否認」を実行しましょう。
そして、「手動による対策」が表示されていた場合は、「不適切なサイトからのバックリンクがあったため、リンク否認を行いました。対象サイトはhttp://○○です。」といったような内容で送ると良いでしょう。
手動による対策で下がった場合は、1つ上の質問の内容の通り、コンテンツの中身を精査してみてください。
競合が順位が上がったことにより、順位が落ちることも当然ながら多々あります。
そのような場合は、相手のコンテンツのどういった点がよさそうに感じるのか、キーワードの頻出具合はどのようになっているのか、コンテンツに厚みや面白味があるか、どの端末でも問題なく閲覧できているか、サイトが軽いか(容量が少なく済んでいるか)。
ざっと思いつくものでもこれだけあります。競合と比べて劣ってそうと思うところは1つずつ地道に改善していきましょう。SEOは一日にして成らずです。
まずは、上位に来ているサイトのコンテンツをしっかり見てみましょう。
何故上位に来ているのか。答えは簡単で、競合他社のほうがその「検索結果に表示」されている内容について「説明が上手いから」とGoogleが認めているからです。
どのへんが説明が上手いのかということですが、まず文章量の多い少ないはそこまで関係ありません。
同じような情報であればどれだけ様々な視点を持って説明をしているか、という点であったり、全く同じコンテンツレベルだと感じるなら、それをGoogleが「どれだけ正確に読み込みできているか」も重要です。
アンカーリンクのつけ方も重要です。内部リンク、アンカーテキスト、前後ページの関連性など上げるとキリがありません。
やれることをやって、しばらく様子を見て、さらに改善案を考えページを成長させていく他ありません。
Fetch as Google自体はGoogleサーチコンソールのアップデートによって終了してしまいました。現在では、それに変わるツールに「URL検査」というものがあります。
対象のURLを入れ込み、URLのステータスを出力してください。出力されたページの現在の状況が確認できます。
その中に「インデックス登録」という項目が選択できる場合、インデックスをリクエスト(再クロール)することができます。
リクエストしたURLは、最大2~3日くらいでインデックスされるかされないかが決定し、された場合はインデックスされた数に追加されます。
クリック数、コンバージョン率、合計表示回数、平均掲載順位などの検索キーワード関連の他にGoogleにインデックスするページを増やしたり不要なURLを削除したりするツールです。
サイトの構造を精査したりサイト上に検出されたエラーを修正することにより、検索結果に画像を表示、評価の★マークをつけたり等といった検索に効果をつけることもできます。
索引から探す
- 用語集【A-Z一覧】
Web制作・運営・解析・SEO用語集のAからZまでで出てくる用語一覧をまとめています。
- 用語集【あ行一覧】
Web制作・運営・解析・SEO用語集の「あ行」で出てくる用語一覧をまとめています。
- 用語集【か行一覧】
Web制作・運営・解析・SEO用語集の「か行」で出てくる用語一覧をまとめています。
- 用語集【さ行一覧】
Web制作・運営・解析・SEO用語集の「さ行」で出てくる用語一覧をまとめています。
- 用語集【た行一覧】
Web制作・運営・解析・SEO用語集の「た行」で出てくる用語一覧をまとめています。
- 用語集【な行一覧】
Web制作・運営・解析・SEO用語集の「な行」で出てくる用語一覧をまとめています。
- 用語集【は行一覧】
Web制作・運営・解析・SEO用語集の「は行」で出てくる用語一覧をまとめています。
- 用語集【ま行一覧】
Web制作・運営・解析・SEO用語集の「ま行」で出てくる用語一覧をまとめています。
- 用語集【や行一覧】
Web制作・運営・解析・SEO用語集の「や行」で出てくる用語一覧をまとめています。
- 用語集【ら行一覧】
Web制作・運営・解析・SEO用語集の「ら行」で出てくる用語一覧をまとめています。
- 用語集【わ行一覧】
Web制作・運営・解析・SEO用語集の「わ行」で出てくる用語一覧をまとめています。
タグから探す
- タグ【Web制作】
Web制作・運営・解析・SEO用語集に登録されているタグ【Web制作】一覧をまとめています。
- タグ【Webシステム】
Web制作・運営・解析・SEO用語集に登録されているタグ【Webシステム】一覧をまとめています。
- タグ【SEO】
Web制作・運営・解析・SEO用語集に登録されているタグ【SEO】一覧をまとめています。
- タグ【SEM】
Web制作・運営・解析・SEO用語集に登録されているタグ【SEM】一覧をまとめています。
- タグ【アクセス解析】
Web制作・運営・解析・SEO用語集に登録されているタグ【アクセス解析】一覧をまとめています。
- タグ【広告】
Web制作・運営・解析・SEO用語集に登録されているタグ【広告】一覧をまとめています。
- タグ【マーケティング】
Web制作・運営・解析・SEO用語集に登録されているタグ【マーケティング】一覧をまとめています。
よくアクセスされている用語
- HTML
Webページを構成するために必要な言語のことです。 - PPC
クリックすることで課金される広告のことです。 - コーディング
HTMLやPHPなどのソースコードの記述を行うこと、またはその人員のことをいいます。 - 直帰率
初めてサイトに訪れたページでサイト内の他のページへ行かずにサイトから離脱した割合のことをいいます。 - ページビュー
Webサイトのページを表示された数のことをいいます。 - レスポンシブデザイン
一つのページ(URL)で使用OSや画面、ブラウザを問わず閲覧をサポートしているデザインをいいます。
その他カテゴリー
- GAレポート作成ツール
面倒なアクセス解析レポート作りはもうやめよう!
- Web担当者問題集
GoogleアナリティクスやSEOに関する問題集を作っています。
- Web運営用語集
Webや解析などでよく使う単語辞典ページを用意いたしました!
- よくあるご質問
よくいただくお問い合わせ内容の一覧になります。
- お問合せ・情報
当Webサイトについてのお問合せや様々な情報をこちらにまとめております。
- 新着情報・更新情報
当サイトの新着情報・更新情報はこちらから。