レイアウト・サイト構造 Web制作用語

ホームページ（ウェブサイト）を制作し、事業の集客や情報発信を成功させるためには、論理的な構造とユーザーにとって使いやすいレイアウトの設計が非常に重要です。全体の骨組みとなるワイヤーフレームを作成する段階から、インデックスページ（トップページ）と各コンテンツページがどのような階層で結びつくかをツリー構造として整理していきます。ページ内部は、ヘッダー（メインメニュー）、メインカラム（コンテンツカラム）、サイドバー（サイドカラム）、フッター（フッターメニュー）といった各エリアに分割され、それぞれが固有の役割を持っています。

検索エンジンがホームページの構造を正確に読み取れるように、ブロック要素やインライン要素、IDセレクタなどのHTML要素を適切にマークアップします。テーブルレイアウトやフレーム、インラインフレームといった古い手法から脱却し、現在ではCSSを用いた柔軟な構成が主流です。ユーザーが迷わず情報へアクセスできるツリー構造メニューやサブメニュー、直感的な操作を促すクリッカブルマップを含め、全体的な使いやすさを高めていきます。

レイアウトを構成する各要素と階層の役割

ホームページのコンテンツを読みやすく魅力的に見せるためには、マージンやパディングを用いた余白の調整、ラインハイトやレタースペーシングといった細かなCSSレイアウトの調整が大きな意味を持ちます。とくにスマートフォンでの閲覧時において、数ピクセルの余白のズレや、意図しない一行の文字の折り返しがユーザーの離脱を招くこともあります。タイポグラフィレイアウトやフラットデザインを取り入れ、情報の優先順位を明確にしながら、ユーザーが快適に閲覧できるユニバーサルデザインを意識して画面を構成します。また、必要に応じてポップアップウィンドウを活用し、重要な情報を適切に提示します。

マルチデバイスに対応するデザイン設計

現在のWeb集客において、レスポンシブウェブデザイン（マルチデバイス対応）によるモバイルフレンドリーな環境構築は基本事項です。ユーザーの閲覧環境に応じて画面幅が最適化されるように、メディアクエリを使用してリキッドレイアウト（可変幅レイアウト）やエラスティックレイアウトを適用します。かつて主流であったソリッドレイアウト（固定幅レイアウト）とは異なり、あらゆるデバイスでカラムの配置が美しく保たれるように綿密に設計します。ユーザースタイルシートの適用も考慮しながら、どの端末からアクセスしても事業の魅力が正確に伝わるホームページを構築していきます。

カラム

カラム（column）は、文字の位置やデータの長さを表す単位ですが、ホームページ制作・ウェブサイト制作においては、レイアウトの大きな要素の数（左右の分割数など、列単位）、もしくはその要素を指します。

ワンカラムレイアウトや2カラムレイアウトといった表現をします。

カラムと左右のサイドバー

サイドバーありの2カラムレイアウトならば、メインカラム（本文カラム、コンテンツカラム）とサイドバーカラムといったように、左右に2つの分割された要素があるウェブサイトレイアウトを表します。

3カラムと1カラム

3カラムならば一般的には左サイドバー、コンテンツカラム、右サイドバーといった並びになります。

サイドバーを設置しないワンカラムレイアウト、というレイアウトパターンもあります。

ホームページ制作・SEOの1ポイント

カラムを3つに分割すると、その分スクロールしなくても見える部分が増え、サイドバーとしてのナビゲーションなどをたくさん設置することができます。しかしながら、メインコンテンツ部分の重要度が下がり、かつ、テキストやリンク、画像等々共通部分が増えていくため、過剰な設置はページ単体のSEOにはマイナスに働くこともあります。単独のコンテンツページとして際立たせたいときには1カラムレイアウトを検討しても良いかもしれません。

ツリー構造

ツリー構造は、データの構造のひとつで、要素が親子関係をもつ構造のことを指します。端的にはヒエラルキー構造です。ホームページ制作においては、ディレクトリ構造やパンくずリストでツリー構造が示されます。

こうした構造を示すことで、ページの親子関係などを示すことができます。一つのテーマの総論と各論の分類などにも利用することができます。

ディレクトリと子要素

ホームページ（ウェブサイト）においては、ディレクトリが一つの親子関係を示し、例えばトップディレクトリに設置されているトップページが最も上位の要素として存在し、その下のディレクトリは子要素です。かつ、そのディレクトリに下にさらにディレクトリがある場合は、トップページからみれば孫要素になります。

ツリー構造の垂直方向

このホームページにおけるツリー構造の垂直の方向の関係性は、構造化データのパンくずリストでも示すことができます。

ホームページ（ウェブサイト）を設計する際に、トップページからの位置関係なども含めて、ディレクトリごとのコンテンツのテーマ一貫性、ユーザビリティ、クローラビリティを考慮したツリー構造を意識する必要があります。

ディレクトリと構造化データの優先度

ディレクトリによる親子関係が一般的でしたが、近年では検索エンジンにおいては構造化データの方が親子関係を示す場合に優先されます。この時、単純な内部リンクのみのパンくずリストだけでは親子関係は推測に留まりますが、パンくずリストの構造化データマークアップがあると、その親子関係は確定的になります。

ホームページ制作・SEOの1ポイント

ページの親子関係を示すことで、親ページを中心にコンテンツがまとまるため、特定テーマでのキーワード関連性やSEOとしてのパワーを収束させることができます。親子関係にあるページ間はパンくずリストだけでなく、内部リンクの工夫でページ同士を結びつけるほうが理想的です。

ヘッダー（メインメニュー）

ヘッダー（header）は、ホームページ・ウェブページにおけるページの頭部（最上部）にある要素（情報）です。SEOとの関連性も強いためホームページ制作においては工夫が必要な部分になります。

ヘッダー部、ヘッド部、ヘッドと呼ばれることもあります。

一般的にページレイアウトにおいてヘッダー（ヘッダー部）には、トップページへのリンクを含めたロゴやキャッチフレーズ、各コンテンツへのメニューボタン、電話番号等の連絡先などが設置されています。

ヘッダー部のナビゲーション

ホームページ内の全ページに渡り共通に設置されたヘッダー部のナビゲーションはメインメニューやグローバルメニューと呼ばれることがあります。
この際のヘッダーやヘッド部は、html文書におけるheadタグとは区別されます。

ページの最上部にあるため、トップページへのリンク付きロゴやメインメニューなど重要なものを設置するのが一般的です。

ホームページ制作・SEOの1ポイント

ヘッダー部は、文字通りページの上部にある部分であるため、ページをクロールする際に最初に通過するポイントです。ヘッダーナビゲーション（メインメニュー）に設置したリンクはフッターに設置されたリンクよりもクロールされる確率が高いと推測することができます。

メインカラム（コンテンツカラム）

メインカラムは、ホームページ（ウェブサイト）のレイアウトのカラムの概念のうち、各ページに共通する部分であるヘッダー部やサイドバー、フッター部と独立して、そのウェブページ固有のコンテンツが掲載されている「本文」のカラムになります。ホームページ制作においてはカラム分割した上で一般的にサイドバーよりも幅を大きく作成します。

メインカラムは、本文カラム、コンテンツカラム、コンテンツ部といった呼び方もされます。

ページ独自の情報を記載

ページ本文に該当するセクションとなるため、メインカラムに掲載される情報は、そのページ独自の情報、固有の情報となります。

ホームページ制作・SEOの1ポイント

SEOにおいても、メインカラムは、そのページ固有の本文部分として認識され、検索エンジンは、サイドバーやフッター部などに記載された共通テキストなどよりも、この部分に記載されている内容を重視します。さらにホームページ制作時にメインカラム内の特定要素が「この部分は記事である」などと、はっきり示すことで、クロール回数が少ない段階でも正確に本文を読み取ってくれるヒントを示すことになるでしょう。

サイドバー（サイドカラム）

サイドバー（サイドカラム）は、ウェブサイト（ホームページ）のレイアウトのカラムの概念のうち、2カラム以上のページレイアウトにおいて、コンテンツ部分であるメインカラムの横に設置されているカラムになります。ホームページ制作においてはカラム分割した上で一般的にメインカラムよりも幅を小さく作成します。

主にメニューやプロフィール等、共通で表示したほうが好ましい情報などが設置されます。

一般的なサイドバー

サイドバーには、主に各ページヘのリンクやリンク付きの更新情報、全ページ共通で示すべき情報が掲載されています。
WordPressをはじめとするCMSなど、動的生成されるホームページ（ウェブサイト）であれば、ほとんどの場合、サイドバーに掲載されている情報は、全ページ共通です。

一般的に、主要ページへのメニューやカテゴリー・タグリンク、該当カテゴリーの新着記事のリスト、企業連絡先情報、運営者プロフィール等が記載されることが多い傾向にあります。

WordPressサイトの「サイドバー」カスタマイズ

ホームページ制作・SEOの1ポイント

サイドバーからの内部リンク自体は、ユーザービリティ向上のためにもプラスとなる要素ですが、メインコンテンツ部分からのリンクよりは評価が下がります。また、SEOとしては、あまりに大量にリンクすることで、一つずつのリンクの価値が分散してしまいますので、共通部分からのリンクは、重要なページへのリンク設置のみにとどめておいたほうが良いかもしれません。

ユーザービリティの概念に間違えにくさというものがあります。ユーザービリティにおける「間違えにくさ」とは、Webユーザーの操作ミスによるエラーを起こりにくくし、またエラーが発生しても簡㈹こ回復できることを意味します。ホームページに限らず、システムにおいてはエラー発生率を極力小さくすることが重要であり、紛らわしいボタンの配置やリンク距離などを見直し、エラー衣示の文章を分かりやすくするなどして、間違えにくく、エラーとなった場合もユーザーが1人で復帰できるようなサイト設計が必要です。

フッター（フッターメニュー）

フッター（footer）は、ウェブページの最下部を指します。ホームページ制作・Web制作においてフッター部、フット部、フットと呼ばれることもあります。

フッター部には、主にコンテンツページヘのリンク、クレジットなどが記載されています。

企業の連絡先情報などが記載されることもあります。

フッターメニュー

フッターメニューは、ホームページ内のフッター部に設置されたメニューで、一般的に主要ページへのリンク、更新情報など全ページに共通して示すべきリンクが設置されています。

ホームページ制作においてフッターメニューを設置しておくことでインデックス性が向上し、ユーザービリティとクローラビリティの両側面からプラスの効果を期待することができます。

固定フッター

近年ではページの最下部に固定フッターを設置し、お問い合わせボタンなどを常に固定表示する場合がよくあります。

ホームページ制作・SEOの1ポイント

フッター部分からの内部リンクも、サイドバーからの内部リンクと同様に、ユーザービリティ向上のためにもプラスとなる要素ですが、メインコンテンツ部分からのリンクよりは評価が下がります。また、SEOとしては、あまりに大量にリンクすることで、一つずつのリンクの価値が分散してしまいますので、共通部分からのリンクは、重要なページへのリンク設置のみにとどめておいたほうが良いかもしれません。

ユーザービリティの概念に記憶しやすさというものがあります。この「記憶しやすさ」とは、以前のホームページ訪問の際に覚えた使い方を、いかに速く正確に思い出すことができるかどうかという点です。再訪問頻度の高いリピートユーザーと異なり、断続的にサイトを使用するユーザーをターゲットとするサイトなどでは学習した内容を簡単に思い出すことができ、再びサイトを訪れた際にすぐにアクションを起こすができるような設計が必要となります。

コンテンツ

コンテンツ（Content）は、ウェブサイト（ホームページ）において情報の中身という意味です。

ウェブページの中で、メインカラムの中に設置されたテキスト（文章）、画像、動画など、ウェブサイトのなかで「そのウェブページ」の固有の情報です。

htmlは文書ですが、コンテンツとは、メインカラム内の文章だけでなく、「文章や画像などによって表現された、ひとまとまりの情報」といったイメージです。

所在地や創業年等のデータとしての事実情報と比較して、コンテンツは創作要素があり様々な情報から意思表示を行うようなものを指す場合もあります。

コンテンツページとは？ 独自コンテンツの重要性

細かなSEOよりもコンテンツの充実が大切

SEOにはたくさんの要素があり、それぞれ細かくこだわると、膨大な手間がかかります。通常のホームページ制作やコンテンツ配信であるならば、そうした細かなSEOよりもコンテンツ自体のクオリティを向上させたほうが、検索順位向上に貢献してくれるでしょう。

コンテンツマーケティングはこのコンテンツを利用したWebマーケティングです。

ホームページ制作・SEOの1ポイント

ホームページ制作において、細かなSEO用のマークアップや技術を追い求めるよりも、コンテンツSEOを意図して単純にコンテンツを高品質にしたほうが、制作の手間と効果を考えれば効率的です。もしWordPressなどのCMSを利用しているのであれば、予め細かなSEOも設定する事ができるため、コンテンツ作りに集中することができます。

ポップアップウィンドウ

ポップアップウィンドウ（pop up window）は、ウェブページのリンク（アンカー）において、リンクをクリックした場合に、通常は新規ページを同一タブ内（同一ウィンドウ）か、新規タブで開くのが一般的ですが、新規ページを「小さなウィンドウで表示する」形式のウェブページ表示方式です。開いているページはそのままに、小さなウィンドウが別途表示されます。

ポップアップブロック

このポップアップウィンドウ は、ユーザーの意図しないウェブ広告に悪用されるケースが多かったため、ほとんどのウェブブラウザでは、設定でポップアップの非表示設定（ポップアップブロック）などを行うことができます。ホームページ閲覧中に自動的に開くップアップウィンドウはスパイウェアやアドウェアの感染源になりやすいため、近年ではブラウザのセキュリティ機能により自動で非表示となることが多くなりました。

ホームページ制作・SEOの1ポイント

簡単なお知らせや、ワンポイントを示すためにポップアップウィンドウはホームページでよく使用されていましたが、現在ではコードを示す場合などに用いられるに限られてきました。

階層

階層は、ホームページ（ウェブサイト）において、ツリー構造などのディレクトリ単位、検索エンジンにおいては、ディレクトリよりも構造化データのブレッドクラム（パンくずリスト）などで示される、ページの深さを指します。

上位の階層を親、下位の階層を子と表現することがある他、下位の階層を下層と表現し、あるディレクトリの中にあるページ群を下層ページと表現することがあります。

なお、深い階層にあるページ・ファイルは検索エンジンのクローラーに発見されにくい傾向にあります。

トップページを頂点として「階層」によってカテゴリ分類

ホームページ全体を捉えた時、ウェブページが存在するディレクトリなどが多段の階層になっている場合、トップページを頂点として、そのすぐ下の階層は大カテゴリ、その階層の下にある階層は大カテゴリの中の仔細な分類である中カテゴリといったように細かく分類されていきます。

その際の深さは、ディレクトリと子ディレクトリの関係での階層の数になります。

ホームページ制作・SEOの1ポイント

ホームページのSEOを考える上で、ホームページ全体のSEOもきちんと設計する必要があります。こうした階層の深さも、親ページと子ページの関係を推測するのにヒントにはなりますが、正確に検索エンジンに伝えるためには、構造化データマークアップを施したパンくずリストの方が適しているでしょう。

レスポンシブウェブデザイン（マルチデバイス対応）

レスポンシブウェブデザイン（Responsive web design）は、ホームページ（ウェブサイト）を様々なデバイス（機器）で、それぞれの機器の画面サイズに合わせたウェブページを表示をするためのウェブデザインです。「マルチデバイス対応」とも呼ばれます。この「レスポンシブ（responsive）」とは、「反応がよいさま」という意味があります。ホームページのスマートフォン対応の方法のひとつです。

一度レスポンシブウェブデザインのフォーマットでサイトの基本構造を設計しておけば、新規ページ追加の際もスマートフォン用のページを新たに作る必要なく単一のページ生成でホームページを運用していくことができます。

デバイスごとのサイトレイアウト変更

レスポンシブデザイン、レスポンシブウェブデザインとは、ウェブサイト・ホームページを構築するにあたり、単一のファイルでウェブページを生成しながら、CSSなどによってウェブページのレイアウトをアクセスデバイスごとに変更するというウェブサイトデザインの手法です。

（Google検索においては「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」においてレスポンシブウェブデザインを推奨しています）

ウェブサイト構築の手法としては、単一ファイル、同一URLながら、タブレットPCやスマートフォンなど、サイトにアクセスするデバイスによって、レイアウトをパソコンでの表示と異なるものにするという方法で、スマートフォンなどからのアクセス時にユーザーにとって「使いやすく見やすい」サイトに仕上げます。

サイトの「スマホ対応」とスマホ用サイト

ホームページのスマホ対応方法

ホームページをスマホ対応する方法は大きく分けて3つあります。このレスポンシブウェブデザイン、動的配信によるページの振り分け、異なるURLでのページ運用の3つです。スマホ対応への方法論は細かく分類していくことができます。

ホームページのスマホ対応の方法のひとつとしての「レスポンシブウェブデザイン」は弊社も採用しているスマホ対応（モバイルフレンドリー）の方法で、「ひとつのページを作って公開するだけで、見る端末によってレイアウトなどが変わる」というホームページの仕様です。

弊社ではホームページ公開後のホームページ運営のしやすさを考え、このレスポンシブデザインを採用しています。

ホームページのスマホ対応とその後の運用を考えた設計

ホームページ制作・SEO・Webデザインの1ポイント

レスポンシブデザインは、スマートフォンなどの端末からのホームページ閲覧の需要が高まったことから利用され始めました。ホームページ制作においてモバイル独自のホームページを新設するよりも、メディアクエリの利用でレイアウト等をスマートフォンに最適化することで、モバイルユーザーに配慮しつつもホームページ制作の手順を削減することができるため、双方にメリットがある技法です。

メディアクエリ

メディアクエリ（Media Queries）は、CSS3で新規追加されたCSS技法です。

ホームページ制作におけるレスポンシブウェブデザインの際に実装するCSSの記述で、ホームページ（ウェブサイト）にアクセスしたデバイスの画面サイズなどによってウェブページの装飾スタイルを切り替える機能です。

このメディアクエリの技術によって、スマートフォンなどからのアクセスの際にウェブページのレイアウトなどを変更することができます。

一定以上もしくは一定以下の画面サイズのデバイスからのアクセスの場合に、各要素の幅などを自動で切り替える技法などがその代表例です。

メディアクエリの例

@media screen and (max-width: 768px) {
.funfair{
width:100%;
}
}

横幅が768pxまで場合に適用されます。この場合、funfairのclassがついている要素は、横幅が100％で表示されます。

ホームページ制作・SEO・Webデザインの1ポイント

ホームページ制作を行う時にメディアクエリを利用することで、ブラウザ幅等ブラウザ解像度に応じた、CSSを適用することができます。この技術によってホームページのモバイルフレンドリー化が可能になります。

また、ホームページ制作時にメディアクエリの利用をすることで、レイアウト変更の他に一部デバイスからのアクセス時には特定要素を非表示にするなどの配慮によって、モバイルユーザー等のホームページ操作性を高めることも可能です。

ユニバーサルデザイン

ユニバーサルデザイン（Universal Design）は、情報の設計（デザイン）、ホームページ（ウェブサイト）の設計において、すべての人が制限なく使える様に意図したデザインです。
情報を得るうえで、ユーザーによる差が出ないことを意図しており、使い勝手がよく、ユーザーの閲覧・操作に迷いが無いように設計することを指します。

ホームページのユニバーサルデザイン

ウェブユーザーにとっては当たり前である、リンク機能も、無指定の場合一部ブラウザでは、画像リンクでボーダーが表示されますが、見栄えの悪さからボーダーを消すことがあります。
この場合、ウェブに初めて触れるユーザーであれば、それがただの画像なのかリンクなのかがわかりません。
その際にマウスを当てたときに動きをつけたりすることによってリンクであることを感覚的に示すと、「何かがある」という認識を得てもらいやすくなります。

また、通常フォントは、デバイスが異なってもある程度の大きさで表示されますが、画像内に組み込まれた文字はデバイス画面の小ささで縮小された場合、文字が小さく読めない場合があります。視力は人によって異なるため、視力低い方に向けた配慮も必要になります。また、画像内の文字は読み上げ対象とならないため、代替テキストの設定をしっかり行っておく必要があります。

ホームページ制作・Webデザインの1ポイント

ホームページ制作においてWebデザインとしての表現性以外にも、こうした様々なユーザーに対する配慮もデザインの一部として考えることができます。設計という意味でのデザイン性向上を高めましょう。

フラットデザイン

フラットデザインは、デザインにおいて、3D化、つまり「立体化して臨場感を高めること」に対して、要素をフラット化（平面化）・抽象化してシンプルに表現するデザイン手法です。

フラットに抽象化して要素を配置

フラットデザインは、リアルな臨場感よりも、凹凸なくフラットに抽象化して要素を配置するというイメージです。iOSなどのホーム画面がわかりやすいかもしれません。

フラットデザインを採用した場合、ウェブサイト（ホームページ）の操作の上では、操作性が高まるでしょう。

ホームページ制作・Webデザインの1ポイント

ゲームが3D化された当初は、多少の臨場感の向上はありましたが、操作性や雰囲気において2Dのゲームの方が落ち着いて操作できたような印象があります。

ホームページ制作におけるこのフラットデザインの考え方は、そうした違和感の解消という意味で考えると理解がしやすいかもしれません。ただ3D画面に慣れているユーザー層を対象としたサイトの場合は、逆に3D的な要素を意識したほうが良いのかもしれません。

タイポグラフィレイアウト

タイポグラフィレイアウト（typography layout）は、ホームページ（ウェブサイト）において、文字を用いて適切に配列することでウェブページの文字全体の体裁を整えるレイアウト技法です。視覚的なデザイン要素として活用することで読みやすさ・美しさ・伝達力を高めることを目的としています。

レディング、カーニング、ベースラインなどのポイントがあります。

タイポグラフィレイアウトは、フォントの選定、サイズ、行間（line-height）、字間（letter-spacing）、余白（マージン・パディング）、カラー、配置（アライメント）など文字に関するあらゆる要素を緻密に設計します。

タイポグラフィレイアウトの特長と利用のあり方

タイポグラフィレイアウトの特長としては、画像や装飾に頼らず、文字だけで十分に構成美と機能性を両立できる点にあります。そのためたとえば、コーポレートサイトやニュースメディア、ブログなど、テキスト量が多く、コンテンツ中心の構成が求められるサイトにおいてはタイポグラフィを中心としたデザインが非常に効果的です。

ホームページ制作・Webデザインの1ポイント

Webフォントの利用などが高まり、ホームページで利用するフォントもブラウザの違いによるフォントの違いなどは少なくなってきていますが、やはり閲覧デバイスによって若干のズレが生じることがあります。もしズレが気になる場合、フォント表現をしっかりしたものにするために画像の利用を検討しましょう。

リキッドデザイン/リキッドレイアウト（可変幅レイアウト）

リキッドデザイン/リキッドレイアウトは、ホームページ（ウェブサイト）のレイアウトにおいて、ウェブブラウザ幅をに合わせてコンテンツ表示サイズも変更されるように設計されたサイズ可変のウェブデザインです（サイズ可変デザイン）。このリキッド（liquid）は、液体という意味があります。

なお、ブラウザ幅によってコンテンツ幅が変わらないものは、ソリッドデザイン/ソリッドレイアウトと呼ばれます。

多様なデバイスに向けたレイアウト最適化

リキッドデザイン（リキッドレイアウト）は、ホームページ（ウェブサイト）を制作する際に、各要素の幅をピクセルなどの固定値ではなく、パーセンテージなどの相対値で指定する手法です。これにより、ユーザーが使用しているパソコンやスマートフォンの画面幅に合わせて、レイアウトが柔軟に変化して表示されます。

さまざまな画面サイズの端末が普及している現在の事業環境において、どの環境からアクセスしても快適に閲覧できるホームページを提供することは非常に重要です。より専門的には、画面の幅に応じて要素が適切に伸縮する仕組みを取り入れることで、ユーザーの離脱を防ぎ、検索エンジンからの評価向上にもつなげていきます。

レスポンシブウェブデザインとの組み合わせ

このリキッドデザインの手法とメディアクエリを組み合わせることで、スマートフォンから大型モニターまで、あらゆる閲覧環境において自社の魅力を正確に伝達する美しいデザインを構築します。

ホームページ制作・Webデザインの1ポイント

ホームページ制作を行う時にブラウザ幅に合わせてホームページの要素の幅が可変するリキッドデザインを利用すると、各種要素に配置されたコンテンツがもれなく表示されるなどのメリットがありますが、最小値の設定や細かなメディアクエリの設定をしないと、ブラウザ幅縮小時におかしなレイアウトになり、コンテンツが読みづらくなる事がありますので注意が必要です。こうしたWebデザインの選択はあくまで読みやすさを最重要視して検討することが望ましいと考えられます。

ソリッドデザイン/ソリッドレイアウト（固定幅レイアウト）

ソリッドデザイン/ソリッドレイアウトは、ホームページ（ウェブサイト）のレイアウトにおいて、ウェブブラウザ幅が変更されてもコンテンツ表示サイズは一定であるように設計された「固定幅」のウェブデザインです。このソリッド（solid）」には、「固体」という意味があります。

なお、ブラウザ幅によってコンテンツ幅が可変するものは、リキッドデザイン/リキッドレイアウトと呼ばれます。

ホームページ制作・Webデザインの1ポイント

ホームページ制作（作成）にソリッドレイアウトを利用すると、ブラウザ幅に応じたホームページのレイアウト変更がなされないため、カチッとWebデザインの表現したい場合に適しています。文字の改行などにこだわりがある場合には適しているかもしれません。ただし、各種デバイスに合わせて、厳密にメディアクエリを設定しないと、一部デバイスからの閲覧時にレイアウト崩れやはみ出した部分が見えなくなる場合もありますので注意が必要です。

エラスティックレイアウト

エラスティックレイアウト（Elastic Layout）は、ウェブサイト・ホームページのレイアウト設計において、ウェブページの横幅を文字数によって決定にする可変レイアウトのウェブデザインです。CSSにおいて主に要素の単位をemで指定します。ホームページのレイアウト幅を文字数で設定するため、フォントサイズによってページの横幅が変わります。

エラスティックレイアウトの特長として、ユーザーがブラウザ設定やOSレベルでフォントサイズを拡大している場合でも、テキストやその周囲のマージンやパディング、画像の表示サイズなども連動して調整されるため可読性の安定とデザインの整合性を同時に保つことができるという点があります。

エラスティック要素を組み込んだレイアウト

エラスティックレイアウトはテキストのサイズ変更が思わぬレイアウト崩れを引き起こす可能性もあり、各ブラウザのレンダリングの差異によって想定外の見え方になることもあります。そのため、実装時には慎重な設計と十分な動作検証が必要となります。

そうした点があるため現在では、レスポンシブWebデザインの中で、エラスティックな要素を組み込んだハイブリッド型のレイアウトが主流になりつつあります。これはたとえば、画面幅に応じてコンテナを%やvw（ビューポート幅）で設計し、テキストサイズや内側の余白をemで調整します。そうすることでデバイスサイズとユーザー設定の双方に対応できるレイアウト仕様がとなります。

ホームページ制作・Webデザインの1ポイント

エラスティックレイアウトは、フォントサイズによってページの横幅が変わります。ページ幅を「決定した文字数」に合わせるため、設定する文字のサイズが変わるとページ幅が変化する形になります。ホームページ制作において利用する場合、アーカイブページなどでは、場合によってはコンテンツ配信に伴って毎度異なるレイアウトになるため、Webデザインとして新鮮さと面白みを演出できる場合があります。

インデックスページ（トップページ）

インデックスページ（トップページ）は、ウェブサイトにおいて、狭義の「ホームページ」になります。

最も厳密なホームページは、ウェブブラウザのホームボタンで戻るスタートページですが、「ウェブサイト」に限定すれば、このトップインデックスページがホームページになります。

インデックス（index）とは、索引といった意味があるため、インデックスページはウェブサイト中の全ページのうち「全体的に各ページへの案内をする」という役割があります。

ホームページのトップページ

インデックスページは、ツリー構造、階層のトップに位置し、そのドメイン下の全てのウェブページの頂点にあるページです。「インデックス」の名の通り、「索引ページ」として、ウェブサイト内の様々なページ（コンテンツページ）ヘのリンクなどが施されています。

下層ディレクトリにあるウェブページで、ファイル名がindex.htmlやindex.phpとなっている場合、該当ディレクトリに存在するページが単一の場合は個別ページとしての感覚が強いですが、本来「index」は、そのディレクトリのトップページ（インデックスページ）である、という意味があります。

同一ディレクトリに複数のhtmlやページとしてのphpがある場合、index.htmlやindex.phpは、そのディレクトリ内のファイルの索引としての役割が強いという感覚になります。

そしてそれら「索引」の索引がドメイントップのインデックスページとなります。

ホームページ制作・SEOの1ポイント

トップページはホームページの中で最重要である最上位のページです。しかしながら、トップページが特定キーワードで検索結果上位にランクインしていたり、よほどそのホームページを探しているのではない限りは、具体的なコンテンツが掲載されているコンテンツページの方がアクセスを集めやすいこともあります。ホームページの特性を考えてSEOを設計しましょう。

コンテンツページ

コンテンツページは、文字通りコンテンツが込められたウェブページですが、索引的な意味合いの強いインデックスページやカテゴリページなどのリストページに比べて、固有のコンテンツがメインとして組み込まれたウェブページを指します。

狭義のコンテンツマーケティングではこうしたコンテンツページを利用してWebマーケティングを行います。

コンテンツマーケティング

コンテンツページは、ページ固有の情報が掲載されているページとなりますが、事実情報としてのデータだけでなく、様々な情報を組み合わせて意思表示を行うページとしての属性が強くあります。例えば、事実としての価格やスペックのみが掲載された製品ページに対して、製品の強みや使用感を記載したものをコンテンツページとして扱う場合などがあります。

コンテンツページとは？ 独自コンテンツの重要性

各コンテンツページを高品質なものに

インデックスページやアーカイブページと異なり、コンテンツページは情報自体が掲載されているため、検索エンジンから見たナビゲーションとしての機能は少ないですが、ユーザーとしては、本来そのコンテンツページ自体にしか目的はありません。ナビゲーションとしてのページ（ハブページ）はあくまでコンテンツページのための道しるべでしかないため、ユーザーの最終目的であるコンテンツページを高品質なものにしたほうが、ユーザーの満足度は向上するでしょう。

ホームページ制作・SEOの1ポイント

ホームページ制作やオウンドメディア配信においては、まず最初にインデックスページからトップダウン式に体系化していって設計するという方法と、細切れのコンテンツページを、ボトムアップ式で、あとでまとめ上げるという二つの設計方法があります。

オウンドメディア運営などであれば、ある程度の指針だけ定めつつ、自由にコンテンツを配信しながら、あとでカテゴリ分けをするくらいの方が、気兼ねなくコンテンツページを作っていけるかもしれません。

要素

要素は、ホームページ制作（ウェブサイト制作）においては、ウェブサイトを構成する各セクションのことを指し、ブロック要素やインライン要素などの分類があります。

ブロック要素とインライン要素

<div> 汎用ブロック要素

<span> 汎用インライン要素

要素ごとに属性を指定してレイアウト等を決定していきます。ホームページ制作（ウェブサイト制作）においては、要素の内側にまた要素を設置するというケースも一般的です。

要素内の要素

ホームページ制作において要素の内側に要素を設置する事もできますが、ブロック要素、インライン要素のルールに従う必要があり、記述によってはウェブページのレイアウトが崩れることもあります。

子要素と親要素

内に囲われている要素は子要素と呼ばれ、囲っている側の要素は親要素と呼ばれます。

例）親　子

<div class=”oya”>

<div class=”ko”>

</div>

</div>

要素ごとの装飾

また、ホームページ制作時に、要素にidやclassを設定することによって、CSSで要素ごとに装飾を施すことができます（IDセレクタ）。

あまり推奨されませんが、style=””によってスタイルを直接記述することもできます。

• ホームページのHTML編集方法
• ホームページのCSS・スタイルシート編集方法

WordPressのエラー修正やカスタマイズがうまくいかないときこそHTMLの基本で解決する

要素の検証

またウェブブラウザによっては、ウェブページの要素を検証する機能をもっているものもあります（デベロッパーツール、開発者モード等）。この機能によって、該当要素に施されたCSSがどのような指定になっているかを確認することができます。

ホームページ制作・SEOの1ポイント

ホームページ制作においては、なるべく要素の数を少なく制作することが良いとされていますが、きちんとした要素別の意味合いのマークアップをしているのであれば、SEOとしては、この要素数はそれほど問題ではありません。Webデザインとしてレイアウトの調整のために、HTMLマークアップとして論理性が示されつつ余白がつくような要素を使うこと（引用タグなど）のほうがSEOとしては問題となります。

IDセレクタ

IDセレクタは、ホームページ制作時のウェブページにおいてhtml側の要素に付けられたID属性（特定のID名）に対して、CSSのプロパティを設定するためのセレクタです。なお、同一のHTML文書内では同一id名を指定することはできません。

idと類似したものとしてclassがあります。idはページ内リンクのための場所の指定にも使えるものの、classはそうしたものには使えません。しかし、そうした機能がない分、classは同一のものを複数指定することができます。

ホームページ制作におけるIDセレクタの使い方

ホームページ制作においては、HTMLで該当要素にIDを付けて、CSS側でそのIDが付けられた要素内での装飾を指定します。優先される順序などもありますので、うまく適用されない場合は、HTML側の設計やCSS側の記述の順序などを確認してみましょう。

またIDをうまく利用することでページ内部へのページ内リンクにも利用することができます。

ホームページのHTML編集やCSS・スタイルシート編集

• ホームページのHTML編集方法
• ホームページのCSS・スタイルシート編集方法

ホームページ制作・SEO・Webデザインの1ポイント

ホームページ制作においてIDセレクタを利用することで、同じタイプの要素であっても、それぞれにWebデザインの特性を付けていくことができます。また、ID名を付与した要素に対して、内部リンクを設置することで、ページ内の該当箇所へジャンプする機能を実装することもできます。こうしたことから、各要素に同一名IDを付与することができません。

ワイヤーフレーム

ワイヤーフレームは、ホームページ（ウェブサイト）の設計図面のようなもので、ウェブサイトを構成する各パーツであるヘッダー・コンテンツ・サイドバー・フッターといったレイアウト的な側面や色調、ウェブサイトのコンテンツのツリー構造などを示したものです。なお、ワイヤーフレームは、線（wire）と枠（frame）で構成された概略的な設計図という意味があります。

本格的なホームページ制作業務に入る前に、依頼者と制作者の意思のズレを防ぐために利用されます。手書きで構成された概要図から完成物と遜色ないものまで様々な形がありますが、ワイヤーフレームの機能としては「双方の認識の齟齬を防ぐこと」にその意味があるため、その機能を満たすのであればどのような形でも問題はありません。

ワイヤーフレーム制作のメリット

このワイヤーフレームを用いることでホームページ制作（ウェブサイト制作）のご依頼者と制作サイドの認識のズレを防ぐことができます。

ワイヤーフレームの基本的な機能と作成の目的は、あくまで両者の認識のズレを防ぐためであり、それそのものの出来栄えに価値があるわけではありません。

カラーリングに関しても紙に印刷した場合、どうしてもモニタ表示との差が出ますので、カラーの確認はテスト段階のホームページを実際に確認していただき微調整を行うほうが理に適っています。

弊社ではほとんどの場合、このワイヤーフレームはお客さまの目の前で手書きで制作します。
手書きのワイヤーフレーム

ホームページ制作・SEO・Webデザインの1ポイント

ホームページ制作の過程で、どうしてもブラウザなどの影響により、少しずつ仕様が異なるこっていくことは、単一画像の貼り付け以外の方法では、避けることができません。ワイヤフレームはあくまで概要の設計にとどめておき、若干のズレが生じることを理解する必要があります。

クリッカブルマップ

クリッカブルマップは、言葉の通り「クリックすることのできる」「マップ」です。ホームページ制作・Web制作においては情報サイトなどで視覚的にページリンクを設置する時に使用されます。

ひとつの画像に複数のリンクを設置することができ、例えば都道府県の地図の画像の上で、該当都道府県の場所をクリックすると、その場所のコンテンツが示されたページヘとリンクで渡ることができるというものです。

技術的には、クライアントサイドとサーバサイドのクリッカブルマップの手法があります。

ホームページ制作でのクリッカブルマップの利用

クリッカブルマップは、タウン情報や都道府県別の情報を掲載しているポータルサイト系などでよく利用されています。地図上で該当エリアを選択するなど、視覚的にリンク先を選ぶことができるので情報サイトには便利な機能です。

しかしながらモバイル端末等においては、リンク距離があまりに近いと誤操作の原因となるため、利用や作成には注意が必要です。クリッカブルマップ周辺に別途テキストリンクを設置するなどの配慮も必要となるでしょう。

ホームページ制作・SEO・Webデザインの1ポイント

ホームページ制作において、なるべく視覚的な操作のみでユーザーがアクションを実行できるようにしておくことで、操作性が高まり、PV数向上や離脱率の抑制につながるようになり、結果的にプロモーション力が向上するでしょう。しかしながら、Webデザイン性を意識するあまり操作性が低くなるという事象は避けるべきであると考えられます。

ツリー構造メニュー

ツリー構造メニューは、ウェブサイト制作（ホームページ制作）において、各ウェブページへのナビゲーションであるメニューが、サイトのツリー構造にしたがってツリー構造になっているタイプのものを指します。ホームページ制作ではグローバルメニューなどで利用されます。

大分類としてのメニューがあり、それぞれの項目に該当分類の中の中分類のメニュー項目が並んでいるようなイメージです。

クリックオープンやインデント

ツリー構造メニューは、一般的にホームページ（ウェブサイト）のツリーの階層がわかるように、クリックで子ページがオープンになったり、インデントの調整で子要素・子ページだとわかるように工夫されています。

例）

親要素

子要素

子要素

ホームページ制作・SEOの1ポイント

ホームページ制作において、様々な要素やページ、リストの中の階層を示すことは、各部分の重要性の提示に役立ちます。SEOはそういった部分を明確にすることであると考えることもできます。サイト構造だけでなく、リンクリストの構造も階層化し、重要度の違いや親子関係を示すことでサイト全体の構成を伝えてみましょう。

サブメニュー

サブメニューは、ウェブサイト（ホームページ）においては、メインメニューの補助的役割を果たすメニューで、下層コンテンツへのナビゲーション機能をもちます。ホームページ制作においては、ユーザーのクリックなどで表示するといった形式で表示領域を少なくしたり、サイズの調整でメインメニューとの重要度の違いを示す場合もあります。

クリックで表示するサブメニュー

ツリー構造メニューにおいて、メインメニューのリストの内、サブメニューが存在する場合には、メインコンテンツへのリンクをクリックで、サブメニューをオープンにするなどの工夫の方法があります。jQuery、jQueryMobileなどではこうしたライブラリが配布されています。

ホームページ制作の技法としてウェブページ全体の印象としてはコンパクトにまとめつつ、ユーザーの意図に従い、必要に応じてサブメニューを表示するという方法として設置されます。

スマートフォン用メニュー

画面領域が小さい場合に適しているため、スマートフォン表示用のメニューを作成する際に利用されます。スマートフォン用にクリックオープン形式のメニューを作成し、PC表示用メニューとスマホ用メニューをメディアクエリで振り分けます。

ホームページ制作・SEOの1ポイント

ホームページ制作におけるSEOの一つの考え方は、どの部分が重要で、どの部分が補足情報かということをきちんと検索エンジンに示すことであると捉えることができます。サブメニューとメインメニューとの重要度の違いを示すことで、優先されるページが変化してきますので、サブメニューへの工夫も検討してみましょう。

フレーム

フレームは、ウェブページを動的生成することが困難だった時代によく使われたウェブ制作手法で、ウェブページを構成する各部分を分割して制作し、各フレーム内に呼び出すことによって、共通項である部分の更新、編集を容易にする手法です。共通表示部分であるロゴやメインメニューなどを固定的に表示し、固有の情報が掲載されたコンテンツ部分だけを切り替えていくといったサイトの仕様に用いられます。

フレームを用いたホームページ（ウェブサイト）の制作にはframeタグなどが使われます。

近年では、一般的にインラインフレームが使用されます。

ホームページ制作でフレーム分割するメリット

かつてはホームページ制作でもよくframeタグの利用などで、要素が分割されながらページが作成されていました。フレームの仕組みは、異なるHTMLページなどをそれぞれパーツとして取り扱い、分割されたパーツを呼び出す形になります。こうして各パーツを統合する形でホームページを仕上げることで、共通項であるサイドメニューなどの編集を楽にすることができます。

ホームページ制作でフレーム分割するメリットとしては、共通項の編集が一度で済むという点でした。こうした仕組みは現在PHPとデータベースを組み合わせる仕組みが多く利用されているため、frameタグによるフレーム分割でのホームページは無くなりつつあります。

frameで呼び出しているページの更新

ホームページ修正を実施している際、修正内容の確認のためにブラウザを更新しても、修正後のデータが反映されない場合があります。これは、frameで呼び出しているhtmlページ側がブラウザで更新されていないことが原因です。

フレームを再読み込み

ブラウザキャッシュが更新されれば、いずれホームページ修正内容の反映、確認ができますが、すぐに確認したいときの対処法としては、ブラウザ上で「呼び出している側のhtml」の上で右クリックをして「フレームを再読み込み」を押すとページが更新されます。

地図データの埋め込みにおけるインラインフレームの利用

フレームは、基本的に現在のページとは別のところにある「別ファイル」をページ中に呼び出す、という仕組みですが、現在では、基本的なホームページでは使用されないものの、インライン要素として外部ページを呼び出す形のインラインフレームは「地図データの埋め込み」などで現在でもよく使用されています。

ホームページ制作・作成の1ポイント

フレーム分割してホームページを作成する流れは、phpの利用やMySQL等の利用によって、ページの動的生成するスタイルに取って代わられました。現在では旧来からのカラム分割方法としてのフレーム分割はホームページ制作で用いられることはほとんど無いでしょう。

インラインフレーム

インラインフレームは、フレームと同じようなウェブ技術ですがインライン要素として外部のページを呼び出します。

現在でもホームページ制作における「ウェブページへの地図の埋め込み」などで利用されている方法です。

通常のフレームが、ページ上の分割としての機能面を指しているのに対して、インラインフレームはホームページ制作における「外部ページの呼び出し引用」というような形で使用されます。

例えば、ホームページ制作を行う時に、外部サイトであるGoogleMapやYouTubeのサイトコンテンツを「埋め込みコンテンツとして」ページの中に呼び出す時に実装されます。

インラインフレームの実装

ホームページ制作においてウェブページ内におけるインラインフレームの実装にはiframeタグが使われます。

HTML5からはframeタグなどは廃止されましたが、このiframeはHTML5でも標準です。

iframeタグにより、呼び出し元のURLや表示幅を指定します。

ホームページ上での地図データの呼び出し

現在ホームページ制作において最もよく利用されるインラインフレームの仕組みは、GoogleMapなどの地図データの呼び出しでしょう。

例えば、ホームページ制作で会社概要ページを作る際、GoogleMap上で自社の住所を入力して取得した「埋め込み地図」を貼り付ける時にインラインフレームが使用されます。

インラインフレーム（iframe）埋め込み時のレイアウト崩れとCSS

インラインフレーム（iframe）を埋め込む際、そのインラインフレームの大きさがコード内で指定されている場合があります。そのまま埋め込むと、スマートフォン表示の際にレイアウトが崩れることがあります。この場合は、CSSでiframeの最大値を100%に指定しておくことで、レイアウト崩れを防ぐことができます。

ホームページ制作・作成の1ポイント

インラインフレームはホームページ制作において、Googleマップ等の地図の埋め込みなどに使用されます。基本的に外部サイトの情報を埋め込む場合は、この方式が用いられます。ホームページ制作でページを作成する際、文章などをそのままコピーして貼り付けると、パンダアルゴリズムにコピーコンテンツ判定される事がありますが、ブロッククオートの使用やインラインフレームの使用だとそうしたSEOに関するマイナス判定は受けません。

静的ページ

静的ページ、静的サイトは、ホームページ制作では古くから使われてきたページタイプで、ウェブページ・ウェブサイト（ホームページ）のうち、ページをphpなどで動的生成せずにhtmlなどの単一ファイル（装飾に関しては外部CSSなどを呼び出します）で表現する場合を指します。 静的ページは、Static Page（スタティック・ページ）とも呼ばれ、ほとんどはhtmlのためStatic HTMLとも表現されます。

phpなどで様々なパーツを寄せ集めてhtmlを吐き出すタイプである動的ページと対比されます。

弊社で静的HTMLホームページ、静的HTMLサイトと表現している場合は、こうした静的ページで作られたホームページを指しています。

静的ページの特徴

一般的に静的ページは、そのページ自体を更新しないかぎり、サイドバーの「新着情報」部分などのページの内容が変わることはありません（インラインフレームの場合は取り扱いが異なります）。

ホームページ（ウェブサイト）の共通部分の修正の際は、各ファイルごとに修正が必要なため、手間がかかりますが、プログラムを動かしてページを生成するわけではないため、サーバーの負荷は少なく、ページの表示速度も速いという特徴があります。

制作費用が安価であることが多いので、あまりホームページ内容を追加・更新しないホームページを利用する場合には適しているでしょう。

静的HTMLサイトとSEO

静的HTMLサイト（静的HTMLホームページ）は、動的ページ生成と比較して、SEOの改良がしにくい特徴があります。

例えば、動的ページ生成の場合は、ヘッダー部分の調整の際にヘッダー部のphpなどを編集すればすぐに全ページにSEO変更内容が反映されますが、静的ページの場合は、各ページが独立したHTMLとして存在しているため、全ページを編集する必要があります。単一ページの修正であれば手間はほとんど変わりませんが、共通部分の修正の場合の手間は大きく異なってきます。

SEOは、キーワード調整も含めてデータの数値を見ながら常に改良する必要があるため、度重なるページの修正の手間を考えると静的HTMLサイトではSEOを実施しにくいと言わざるを得ません。

ホームページ制作・SEOの1ポイント

静的ページは、動的ページと比べて圧倒的に速い表示速度を誇っていますが、ページの修正の際に、各ページを修正しなければならないケースがほとんどで、修正作業の煩雑さの問題が残ります。

しかしながら、基本的にはWordPressなどCMSで動的ページ生成によるホームページ制作を行っていても、共通部分を吐き出してしまう動的ページでは表現しづらい特殊なページを制作する場合は、その部分だけ静的ページで制作するのもよいでしょう。

動的ページ

動的ページ、動的サイトは、ホームページ・ウェブサイトのアクセスユーザーのリクエストに応じて生成されるウェブページ・ウェブサイトです。ホームページ制作において、CMSベースのホームページを利用する場合に使われます。なお、動的ページはDynamic Page（ダイナミック・ページ）とも呼ばれます。

イメージとしては、静的ページの場合は、ユーザーのリクエストに応答して、htmlなど、既に存在しているその「ページファイル」をブラウザへと送信しますが、動的ページは、そのウェブページであるhtmlファイル、phpファイルなどを、リクエストがあったその場で様々なプログラムを動かして生成し、ブラウザへと送信します。

実際の動的ページは、phpやMySQLなどを利用して実装されます。WordPressもページは動的生成されています。

動的ページ・動的生成の特徴

この動的生成とは、ウェブページを構成する各部分（ヘッダー、フッター、サイドバー、コンテンツ）などがそれぞれ別のファイルとして存在し、該当ページにアクセスがあると、それらを組み合わせてページを生成することを指します。

この仕組みは、様々なプログラムを動かしてウェブページを生成するため、静的ページに比べて、サーバーの負荷も高く、表示速度も遅いですが、例えば、ウェブページの一部分の変更や、サイドバーの新着情報（の詳細ページへのリンクなど）などのページ情報の更新を簡単に様々なページに反映することができます。

サーバー負荷や表示速度向上のために、キャッシュなどの仕組みが利用されます。

動的サイトとSEO

動的サイトはホームページの共通項部分の編集がしやすいため、静的HTMLサイト（静的HTMLホームページ）と比較して、SEOの改良がしやすい特徴があります。

SEOは、キーワード調整も含めてデータの数値を見ながら常に改良する必要がありますが、動的ページ生成の場合は、例えばタイトル共通部分の調整の際にヘッダー部のphpなどを編集すればすぐに全ページにSEOタイトル変更内容が反映されますが、静的ページの場合は、各ページが独立したHTMLとして存在しているため、全ページを編集する必要があります。

しかしながら、静的HTMLサイトと比較してサーバー負荷が高く、サイト表示速度が低下することがSEOマイナス要因となるので、キャッシュの利用など別の対策が必要になります。

ホームページ制作・SEOの1ポイント

以前は静的ページに比べて動的生成されるページはSEOに不利ということが話題になったことがありますが、現在の検索エンジンは動的生成されたページもよほど複雑なものでない限りはクロールを行いますので、それほど関係はないと考えることができます。問題があるとすれば、動的生成によるサーバー負荷や読み込み速度の低下です。しかしながらこれらは、様々なキャッシュの利用でクリアすることができるでしょう。

モニタ/モニタ解像度

モニタは、ホームページ（ウェブサイト）を表示するブラウザで描画する、コンピュータのディスプレイ装置です。そして、モニタ解像度は、モニタにおける色表現区画の数になります。

モニタ自体はホームページ（ウェブサイト）と直接関係ありませんが、解像度等の閲覧環境を意識してレイアウトを設計するという意味では制作に関係しています。

モニタ解像度

モニタの解像度は、「1280×1024」、「1024×768」といったように表現され、描画される画面の区画の数を示し、モニタに表示される情報量（きめ細かさ）がどれほどあるか、という指数になります。
解像度の数値のうち、最初の数値は横のピクセル・ドット数、後に続く数値は縦のピクセル・ドット数を意味します。

ホームページとモニタ解像度

ホームページ制作（ウェブサイト制作）においては、CSSのメディアクエリの記述で、解像度に合わせたホームページ（ウェブサイト）の表示の仕方を指定することができます。

ホームページ制作・SEOの1ポイント

ある程度、モニタ解像度ごとのホームページレイアウトを用意したほうがユーザーの読みやすさは向上します。場合によっては、一部の要素を非表示にするなどの工夫によって、スクロールの手順を少なくすることも良いでしょう。モバイルデバイスへの配慮であればこうした工夫はSEOにマイナスには働かないと推測されます。

オーサリングツール

オーサリングツール（Authoring Tool）は、ウェブにおいては、ホームページ制作・ウェブサイトを構築する際に、プログラム・コード記述せずにウェブサイトを制作するためのソフトウェアです。ウェブオーサリングツールとしてはホームページ・ビルダー、ドリームウィーバー（Dreamweaver）などが有名です。

HTMLタグやCSS、phpなどの専門的な知識がなくてもホームページ作成を行えることから、初心者向けのツールとして、Web黎明期から活用されているツールです。

最近では、Web上に無料ホームページサービスが増えてきたため、以前に比べて初心者向けのツールとしての注目度は下がりましたが、今でもたくさんのオーサリングツールが販売されています。

オーサリングツールを使ってホームページ制作を行う場合

オーサリングツールは、ある程度専門的な知識がなくてもホームページ制作を行えるソフトウェアですが、実際にホームページ制作を行って公開する場合、ツールとは別にサーバーを用意する必要があります。

ホームページ制作の段階としては、オーサリングツールでホームページを構成するファイル群を作成し、完成後にWebサーバーにアップロードするという作業が必要になります。

無料ホームページでは、こうしたサーバー関連の設定も予め行われているため、初心者がホームページ制作を行う場合の手間をさらに省くものとして、無料ホームページの方が利用されやすくなっています。

ウェブオーサリングツールへの考え方

弊社では、原則的にウェブサイト構築にあたり、WordPress等のCMSの活用を推進させていただいており、ホームページ（ウェブサイト）を制作する際に、CMS本体のインストールなどは行いますが、このようなウェブオーサリングツールは使用しません。

WebオーサリングツールはHTMLやCSSの知識・技術がなくてもページを簡単に作成できますがその分制限が多いことも事実です。

ホームページ（ウェブサイト）の真価

ウェブオーサリングツールを用いれば、見栄えだけのホームページ（ウェブサイト）は比較的容易に設置することができますが、ウェブサイトの真価はそのWebマーケティングツールとしての機能だと考えています。その大半の部分はプランニングやコンテンツにあるため、「ホームページを制作すること」をゴールにしてはいけないと考えています。

Web制作会社（ホームページ制作会社）として

ウェブオーサリングツールは、確かにある程度の作業を短縮できる可能性はありますが、Web制作会社（ホームページ制作会社）がウェブオーサリングツールに頼ると、形だけで根本的な技術が培われず、またそのソフトウェアの性質と制限とソースコードの無駄が増えるため、かえって制作時間と労力がかかると考えており、弊社では一切使用しません。

ホームページ制作・ツール活用の1ポイント

ホームページ制作にあたり、オーサリングツールを使うと手間が省ける面がありますが、形だけのホームページの作成だけで終わってしまうこの多い制作方法です。どのようなホームページにしたいかを明確にプランニングしてから制作する必要があります。

また、オーサリングツールを利用して、ホームページを作成し、サーバーにアップロードしてホームページを公開するという場合であれば、比較的SEOを施しやすくなりますが、JimdoやWixなどの無料ホームページを利用してしまった場合は、細かなSEOを実施することはできません。

ホームページ公開後の運営の際に、様々な知識習得があり、様々なことに気付きがある度に無料ホームページのデメリットを痛感される方がたくさんいらっしゃることも事実です。

カテゴリ別 Web制作/ホームページ制作用語集

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ