コーディングについて

株式会社Webの間に制作に関する考え方について久し振りに更新します。過去の記事はこちらです。

先日Yahoo!知恵袋にて「高度なHTML、CSSコーディングとはどういうものを指しますか。」という質問がありました。この質問に回答しベストアンサーとなりました。ここで回答したことには自分のコーディングについての考え方になります。これに少し加筆をしてコーディング時に意識していることをお話しします。

表示が崩れない

大前提の話です。最近は少なくなったように思いますが、一部ブラウザで崩れるケースはあります。これは単なる確認ミスが招いているだけなのですが。ちなみに弊社ではIE6以降、FirefoxSafari最新版に対応しています。Google Chromeもですね。

ソース上に無駄がない

いくらCSSベースでコーディングをしていても<div>タグが多かったり空要素があったりしていたら意味がありません。弊社では見栄えのためだけのタグは記述しません。同様にCSSも無駄のない記述を意識しています。

論理構造に即している

CSSベースなのにテキストが全て<div>タグで記述されていることもあります。<table>タグと変わらないので全く意味がありません。見出し部分には<hx>タグ、本文テキストには<p>タグというように定義リストタグ(<dl>)やリストタグ(<ol>・<ul>)など内容に即して意味付けが明確であることが大切です。

ディレクトリ構造

ページ数が多い場合はどのようにグルーピングをするかは重要です。ルートディレクトリに全てのファイルを集めたり、ディレクトリの中に1ページしかないような構造であるとページ間の関連性も不明確にもなるし何よりも管理がしづらくなります。

検索エンジンに最適である

これは上記とどう違うのかわかりづらいかもしれません。しかし非常に大切なことで、例えば<title>タグや<meta description>タグ、<meta keywords>タグが固有化されていないケースなど未だにあります。またページのユニークな部分を主張するような構造にすることもここに該当します。これらはユーザーや検索エンジンに何を伝えたいかが明確になっていないことが原因にあります。また主張が絞り込めいないケースもそうですね。実際にこの部分ができていないために検索エンジンに下層ページが認識されていないケースも把握しています。

表示速度が速い

最近Googleが表示速度をランキングのアルゴリズムに加えました。これは表示速度が早いことがランキングにプラスになること、また逆に遅いことはマイナスになるということです。ここで大切なのは制作会社の作り方によってはランキングが低下する一因となりかねないことです。単に作れればいいという訳ではありません。

管理・更新しやすい

共通部分を外部ファイル化したりディレクトリ構造の作り方などです。これらがきちんとできているかいかんで運用のしやすさは飛躍的に変わります。使う側の立場で作ることが大切です。

わかりやすいソースである

わかりやすさも大事な要素です。例えばCSSを見やすくするために目次を付けたり範囲を指定で設定しています。一見無駄になるのではという感じもしますが、効率化を図り過ぎて逆にわかりづらくなるようなら重複したとしてもわかりやすさを重視することもあります。この点はセンスによるところが大きいです。またCSSだけでなくHTMLをルールに沿った記述にすることも同様です。


というような感じです。これら全てを満たせる訳ではなく状況にあわせてベストな選択をしています。そしてその根拠をきちんと説明することが大切であると考えています。またCSS3を利用することで利便性が高まるので自社サイトではできるだけ新技術を試すことも忘れません。HTML5も同様で非常に興味がありますね。

新規サイト「CFD取引のすべて」立ち上げのお知らせ

株式会社Webの間は新規サイト「CFD取引のすべて(http://www.jyc.jp/)」を立ち上げたことをお知らせいたします。

「CFD取引のすべて」は今話題の差金決済取引、CFD取引についての情報を提供しているホームページです。CFDの各取引についての解説や取引を提供している業者を詳しく紹介しています。当ホームページを経由して口座開設をすることもできます。





関連情報

学校関係者向けセミナーを行いました

先日(6月19日、24日)に新宿と横浜にて学校関係者向けのセミナーに参加しました。教育企画センターという学生募集や広報戦略のコンサルティングを行っている会社が主催です。

内容は『Webの考え方ひとつで学生募集は明日からでも変わる!』というもので、インターネットを活用して学生募集にどう繋げるかということがテーマとなります。自分は「iPhoneiPadにおける学校Webの可能性」とiPhoneiPadを学生募集に活用しようという観点から話をしました。以下が簡単に内容となります。

現状分析

iPhoneiPadのPC環境との違いと対応について

  • PCとiPhoneの表示領域の違い
  • タッチスクリーン
  • Flash
  • 読込速度
  • 問い合わせ(電話・メール)
  • 地図の活用
  • リンクについて
  • 動画利用に関する注意点

iPhoneiPadを学生募集に繋げる方法

抜粋となりますが、このような内容のセミナーとなります。資料もあるのでもしご興味の方がいらっしゃいましたらお問い合わせフォームよりメールをお送りください

関連情報

新規サイト「コンタクトレンズ通販比較」立ち上げのお知らせ

株式会社Webの間は新規サイト「コンタクトレンズ通販比較(http://www.eye-dea.net/)」を立ち上げたことをお知らせいたします。

コンタクトレンズ通販比較」は全国のコンタクトを販売しているショップ情報とコンタクト通販の情報を掲載したホームページです。ショップ情報は住所をはじめ、電話番号、営業時間、定休日、ホームページのご紹介、ショップの地図までを詳しく掲載しています。



関連情報

学校関係者向けセミナーに参加します

株式会社Webの間代表取締役西部俊宏が2010年6月19日(土)・24日(木)に学校関係者向けセミナーに講師として参加します。内容は「iPhoneiPadにおける学校Webの可能性」と学生募集におけるWebの活用についてiPhoneiPadの点から講演を行います。
詳細は「教育企画センター|学校関連セミナー」をご覧ください。

関連情報

にゃんちゅうさんのレーシックの体験談を掲載しました

運営サイト「レーシック体験談+(http://www.lasik-plus.biz/)」においてにゃんちゅうさんのレーシック体験談を掲載したことをお知らせいたします。にゃんちゅうさんは眼が悪くてもほとんど裸眼で生活をしていたので不便だったと語っています。

※レーシック体験談+について

レーシック体験談+はレーシックの体験談を集めたホームページです。レーシックは経験がある、ないの差が著しくあるので体験談を紹介することで理解を深めていただくことを目的としています。こちらもどうぞごご覧ください。

関連情報

新規サイト「メガネ×眼鏡サーチ」立ち上げのお知らせ

株式会社Webの間は新規サイト「メガネ×眼鏡サーチ(http://www.eye-doc.org/)」を立ち上げたことをお知らせいたします。

「メガネ×眼鏡サーチ」は全国の眼鏡を販売しているショップを網羅したリンク集です。ショップ情報は住所をはじめ、電話番号、営業時間、定休日、ホームページのご紹介、ショップの詳しい地図を掲載しています。

関連情報