ホームページ（ウェブサイト）を制作し、事業の集客や情報発信を成功させるためには、論理的な構造とユーザーにとって使いやすいレイアウトの設計が非常に重要です。全体の骨組みとなるワイヤーフレームを作成する段階から、インデックスページ（トップページ）と各コンテンツページがどのような階層で結びつくかをツリー構造として整理していきます。ページ内部は、ヘッダー（メインメニュー）、メインカラム（コンテンツカラム）、サイドバー（サイドカラム）、フッター（フッターメニュー）といった各エリアに分割され、それぞれが固有の役割を持っています。
検索エンジンがホームページの構造を正確に読み取れるように、ブロック要素やインライン要素、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など、動的生成されるホームページ（ウェブサイト）であれば、ほとんどの場合、サイドバーに掲載されている情報は、全ページ共通です。
一般的に、主要ページへのメニューやカテゴリー・タグリンク、該当カテゴリーの新着記事のリスト、企業連絡先情報、運営者プロフィール等が記載されることが多い傾向にあります。
ホームページ制作・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 class=”oya”>
<div class=”ko”>
</div>
</div>
要素ごとの装飾
また、ホームページ制作時に、要素にidやclassを設定することによって、CSSで要素ごとに装飾を施すことができます（IDセレクタ）。
あまり推奨されませんが、style=””によってスタイルを直接記述することもできます。
WordPressのエラー修正やカスタマイズがうまくいかないときこそHTMLの基本で解決する
要素の検証
またウェブブラウザによっては、ウェブページの要素を検証する機能をもっているものもあります（デベロッパーツール、開発者モード等）。この機能によって、該当要素に施されたCSSがどのような指定になっているかを確認することができます。
ホームページ制作・SEOの1ポイント
ホームページ制作においては、なるべく要素の数を少なく制作することが良いとされていますが、きちんとした要素別の意味合いのマークアップをしているのであれば、SEOとしては、この要素数はそれほど問題ではありません。Webデザインとしてレイアウトの調整のために、HTMLマークアップとして論理性が示されつつ余白がつくような要素を使うこと（引用タグなど）のほうがSEOとしては問題となります。
ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ
『お客さまのお客さま目線』でのWeb制作、Webマーケティング」
ホームページ制作 京都のWeb制作会社（ホームページ制作会社）ファンフェアファンファーレは、Webマーケティングツールとして、Webマーケティング・SEMを意識したWeb集客・プロモーション力のあるSEO特性・ウェブPR力の高いSEO対策付きのホームページ制作（ウェブサイト制作）・作成、WordPress（ワードプレス）などのCMS（コンテンツマネジメントシステム）の導入やカスタマイズ、ウェブサイトの高速表示化、レスポンシブデザイン、モバイルフレンドリーを得意としています。
SEOの基本機能を備え、自社更新可能なWordPress（ワードプレス）を利用したホームページ制作（ウェブサイト制作）をはじめ、HTML5,CSS3,jQueryによるホームページ制作（ウェブサイト制作）やサイトカスタマイズ、ホームページのSEO対策などのWeb制作サービスを提供しております。新規でのホームページ制作・作成はもちろん、既存ホームページの修正・更新代行やSEO（SEO対策）にかかるカスタマイズ、ホームページを活用したWebマーケティングのためWebコンサルティングサービスなどを提供しています。
ホームページ制作価格表（Web制作サービス）
WordPressホームページ制作（ウェブサイト制作）
WordPressホームページ（ウェブサイト）の新規ご制作、ウェブPRを加速させるWordPress（ワードプレス）などのCMSを活用したオウンドメディア構築・コンテンツマーケティング、既にお持ちのホームページ（ウェブサイト）のWordPress化やWordPressのカスタマイズもお任せください！WordPressを利用したWeb集客・Webマーケティングに効果的なオウンドメディアによるコンテンツマーケティングやWordPressサイトのSEOやコンテンツSEOも手がけております。
- WordPress（ワードプレス）を利用したホームページ制作（ウェブサイト制作）
- WordPress（ワードプレス）のカスタマイズ
- ホームページ（ウェブサイト）のWordPress化
- WordPressなどのCMSを活用したオウンドメディア構築
Webマーケティング&SEO・SEM
株式会社ファンフェアファンファーレは、WebマーケティングツールとしてのWeb集客・Webプロモーション効果を意識してSEO対策を施したホームページ（ウェブサイト）を制作しております。ホームページ制作・作成にあたっては、ホワイトハットSEO、良質・高品質なコンテンツ制作を最重要視しています。 また、ホームページ制作のみならず、Webマーケティングの効果を高めるためのSEO内部対策・SEO外部対策、コンテンツSEO等のSEO・SEO対策・検索上位表示によるWeb集客やコンバージョン率向上と集客効果を高めるコンテンツ追加・改良、そしてリスティング広告やアドネットワーク広告などのWeb広告の利用など、ホームページを活用するための様々なWeb集客・Webマーケティング分野のお手伝いをしています。 ホームページ運営・公開後のホームページのSEO対策、SEM（サーチエンジンマーケティング）やオウンドメディアによるコンテンツマーケティング・コンテンツSEO、ソーシャルネットワークとの連携、ウェブ広告の活用などもお任せください！
Webマーケティング
SEO（検索エンジン最適化）
ホームページ制作 京都
ホームページの新規制作やホームページの企画・運営・更新、カスタマイズなど、Web制作サービスのご依頼は、京都のWeb制作会社ファンフェアファンファーレへ
京都でホームページ制作（ホームページ作成）ならお任せください。京都府京都市、京都市近隣の市町村・関西・近畿圏はもちろん、ホームページ制作、ホームページのリニューアルやカスタマイズ・SEOなどのWeb制作サービスにつき全国対応しております。ホームページ制作・ホームページ作成やホームページのSEOはもちろん、コンテンツ制作やWebマーケティングにかかるWebコンサルティングも対応可能です。
Related page
-
ホームページ（ウェブサイト）を新たに制作する際、あるいはリニューアルを検討する際、まずは自社の事業目的に合わせたホームページの種類を正しく選択することが重要です。一般的に、ホームページはその役割や目的によって、コーポレートサイト、メディアサイト、ECサイト、ポータルサイトといったいくつかの形式に分類されます。 それぞれのホームページには得意とする集客手法や、
-
ワイヤーフレームは、ホームページ（ウェブサイト）の設計図面のようなもので、ウェブサイトを構成する各パーツであるヘッダー・コンテンツ・サイドバー・フッターといったレイアウト的な側面や色調、ウェブサイトのコンテンツのツリー構造などを示したものです。なお、ワイヤーフレームは、線（wire）と枠（frame）で構成された概略的な設計図という意味があります。 本格的な
-
ホームページ（ウェブサイト）を制作し、運営していく中で「文字化け」という現象に直面したことがあるかもしれません。この文字化けを引き起こす主な原因が、文字コードの設定ミスです。文字コードとは、コンピュータが文字をデジタルデータとして認識し、ブラウザなどの画面に正しく表示するための規則を指します。 現在、ホームページ制作において主流となっているのは「UTF-8」
-
ホームページ（ウェブサイト）でブログ記事や新着情報を公開する際、コンテンツの質と同じくらい重要なのが画像の設定です。記事の冒頭や一覧ページ、あるいはSNS上で情報が共有された際に表示される視覚情報は、ユーザーがそのページを訪問するかどうかを瞬時に判断する大きな基準になります。 一般的に、記事の顔としてページ上部に配置されるメインの画像を「アイキャッチ画像（ヘ
-
ホームページ（ウェブサイト）制作において、商品や施工事例などの写真を効果的に見せるための機能である「画像ギャラリー」「Light Box」「スライドショー（スライダー）」についてのご説明です。 ホームページ内で画像をどのように配置し、どのように動かすかは、訪問者の直帰率や滞在時間に大きく影響します。事業の魅力を的確に伝えるためにも、これらの画像表示機能を目的
