アラフィフの気になる事 -ともたか39-

ともたか39と申します!アラフィフのフリーランスブロガー。50代周りになり健康、ファッション、趣味などアラフィフ目線で感じた情報を発信し、悩みに対しても改善策を探求しています。

HP

HTML5の新しい構造化タグ

あなたのホームページではHTML5の構造化タグ使ってますか?

HTML5

インターネットの進化は早いです。一昔前まではパソコン主導でネットサーフィンしていたのが携帯電話(ガラケー)になり、そして今はスマホでネットサーフィンする事が主流になりました。
HTMLも同じでHTML4やXHTMLなど進化し続けて、気が付くとHTML5が主流になりつつあります。
ホームページを新規制作するのにあたりHTMLは最新のHTML5にした方が良いの?と質問される事が増えましたが、答えはYESです。HTML5を使った方が良いでしょう。
理由は新しい構造化タグが新規に追加された事と、この新しいタグにより今後のSEOへも影響がでると予想されるからです。
“ともたか39”のHP制作経験、SEO経験も含めHTML5の構造化タグの説明と今後SEOについて述べていきますので、これからホームページ制作をおこなう方への参考になれば幸いです。

HTML5での新しい構造化タグ

header

ヘッダーセクションで、ページの冒頭部分で使用します。
今まではdivタグなどでclassやidでheaderと指定して定義していた部分をheaderタグを使用して直接指定する事が可能になりました。
具体的にはサイト全体のロゴやサイトタイトルなどを上部で表現する時に使用する人が多いです。

footer

フッタセクションで、ページの最下部で使用します。
今まではdivタグなどでclassやidでfooterと指定して定義していた部分をfooterタグを使用して直接指定する事が可能になりました。
具体的にはサイト下部のロゴやコピーライトなどを下部で表現する時に使用する人が多いです。

nav

ナビゲーションメニューなどを指定する時に使用します。
これもまたheaderやfooterと同じでdivタグなどでclassやidを指定して定義していたものをナビゲーション専用に用意された構造化タグです。

article

独立した1つの記事(コンテンツ)として使用します。
1つの記事とは何?と疑問が湧いてきますが、調べたところ認識、解釈は人それぞれでした。
これでは明確な答えにはなっていませんね。
私個人の見解でしかありませんが、1ページ内にある全体のコンテンツをarticleタグで括るというより、articleタグで括られた内容が独立した1つのコンテンツになっている場合に使用するんだと解釈しました。
※もし違うという人がいらっしゃいましたら遠慮なく突っ込んでください!

section

ページ内の章を括る時に使用するタグです。
本で例えたら第1章、第2章などの切り分けに使用します。
具体的には1記事(1コンテンツ)の中で章分けして記事が成り立つ事が多いかと思いますが、その際に使用することを推奨されています。

aside

ページ内の余談や補足説明の情報などを括る時に使用するタグです。
具体的には記事内の内容と関連はしているけれども、少しずれた内容を説明する時に使用します。
例えば用語の説明や補足情報を解説する時などに使用するイメージです。

main

ページ内にあるメイン部分を括る時に使用するタグです。
具体的にはそのページのみで独立していて、そしてそのページのみの固有で主体となる部分としての使用になります。

HTML5使用でのSEOへの影響

HTML5から新機能として追加されたこの構造化タグは、SEOにも大きく影響されると考えられています。
理由としては、それぞれ専用の構造化タグを使用し構造化する事で検索エンジンのアルゴリズムが解釈しやすくなり、セクション毎のアピールがHTML4より強くできる事にあります。
ホームページを新規制作する場合には、HTML5を使用する事を強くお勧めします。
ただし現状HTML4やXHTMLなどの古いバージョンのHTMLで運用していて、かつ狙ったキーワードで上位表示されている場合は、一概にHTML5化のお勧めはできません。Googleを主とした検索エンジンはコンテンツ(記事内容)重視でみています。構造を変えた事で記事の内容やセクションも変わってしまうと、現在評価されている検索順位が評価し直され、検索順位を下落させる可能性もあるからです。
そのため、もし現在運用しているサイトをHTML5化させたい場合は、ページ毎の検索順位を確認してから検討、制作する事をお勧めいたします。

HTML5を推進します!

あなたのホームページはHTML5になってますか?

社会の進化も早くネットの進化も同じく早いです。 一昔前まではパソコンの普及率が低く、パソコンの普及率が高くなりました。その後今度はパソコンの普及率が下がりあっという間にスマホの普及率が上がる時代になりました。現在はパソコンは持っていなくてもスマホを持っている方が多くネット検索、アプリダウンロード/使用は断然スマホの時代になっています。
そこでホームページはPCメインで作るよりもレスポンシブ対応も含めスマホをメインターゲットに制作するために「HTML5」の必要性は欠かせません。
html5

HTML5とは?

今までのHTMLの書式と大きく違うのは以下のタグが増えたことです。
■html冒頭での宣言文
  • <!DOCTYPE html>→HTML5はこの宣言文だけです。
■セクションで使用するタグ
  • header→ヘッダであることを示すタグ。
  • nav→ナビゲーションであることを示すタグ。
  • section→1つのセクションであることを示すタグ。
  • article→記事であることを示すタグ。
  • aside→余談・補足情報のセクションであることを示すタグ。
  • footer→フッタであることを示すタグ。
■メディア再生で使用するタグ
  • audio→音声ファイルを再生するタグ。
  • video→動画ファイルを再生するタグ。
  • source→音声・動画ファイルを指定するタグ。
これらの増えたタグを上手に使用する事でセクションの切り分けがハッキリし構造もシンプルで明確に定義できるため、Googleなどの検索エンジンのアルゴリズムに対し、旧形式のhtmlより要素の解読、認識をさせやすくなりました。
そして今まではFlashやJavascriptなどを使用しなければ再生不可能だった音声ファイルや動画ファイルもHTML5仕様からhtmlだけで基本的には可能になったため、そのままでPCのブラウザやスマホのブラウザで再生する事が可能になりました。
もしHTML4以下、またはXHTMLでコーディングされているサイトであれば、できるだけ早くHTML5へ移行しGoogleなどの検索エンジンへ良いアピールをおこなうようにしましょう。
これ以外にも増えたタグがありますがここでは割愛します。
上記以外のタグを知りたい方は「HTML5入門」を参考にしてください。

HTML5+CSS3+JAVASCRIPTでスマホアプリが開発可能

HTML5とCSS3とJAVASCRIPTを使えばスマホアプリが自分で開発できてしまえる事はご存知でしょうか?
まだまだAndroidやiPhoneのネイティブアプリの方が普及していてAndroidであればJAVA言語、iPhoneであればSwift言語のようにそれぞれ特化したプログラム言語を習得する必要があり、初心者にはとても難しく容易に手を出せるものではありません。そしてAndroidとiPhoneの両方でリリースしたい場合はアプリを別々に開発する必要があり、プログラミングに慣れていない方にはかなり難解で、英語レベル1の人がいきなりTOEICで800点以上に挑戦するような感じです。
しかしHTML5+CSS3+JAVASCRIPTだけで開発可能にするフレームワークが世には出ていて、これらを使えば難しいプログラム言語を使わなくてもスマホアプリが開発できてしまうのです。
しかもこれで開発されたアプリはAndroidとiPhoneの両方へ対応したアプリ(ハイブリッドアプリ)になります。
有名どころのフレームワークとしては、
Apache Cordova
PhoneGap
Ionic
Monaca
などです。
私の個人的な意見ですがMonacaはクラウドサービスのためパソコンにブラウザがあれば、基本的パソコンには何もインストールせず使用する事ができます。そして3つまでのプロジェクト、ビルドが1日3回までと制限付きですが無料で使用できるので、慣れていない方にもハードルが低く挑戦可能だと思います。
HTML5でのサイト制作では物足らず、それ以上の事に挑戦したいというあなた、是非チャレンジしてみてはいかがでしょうか?

アンケートモニター登録

ホームページをちょっと変更したいのに…

ホームページを少しだけ変更・修正・調整したいのに…

ホームページ(以下HP)の画像を数個差し替えたいだけなのに。ちょっとしたレイアウト変更、文章変更したいのに?、社内にWebに詳しい人がいない事をよい事に?万円から?十万円を請求されたなんて事ありませんか?
そんな方は20年以上400以上サイト制作してきた“ともたか39”へお問合せください。無料診断し、あなたにあった価格でHPの修正、変更をおこなわせていただきます!!

ご連絡はこちらのフォームから→お問い合わせフォーム

ホームページ

クラウドソーシングで仕事を請ける方を信頼できる?

分からない事、手が付けられない事が多いために、安易にクラウドソーシングのサイトを使用して匿名の人(エンジニアなど)に依頼すると、安価だから「痒いところに手が届く」ものをやってもらえなかったり、依頼側がその技術、知識が不足しているために高価な費用を請求されたり、最悪の場合、依頼しても納期に間に合わない、そのまま逃げてしまうなんてことは、私の経験上よくありました。
クラウドソーシングのサービス自体、全部がそういう人だらけではないのですが、当たり外れが多いのが現状です。
私はこういった点を排除し、信頼していただけるよう身元、そして今までの実績経験をお伝えし、依頼主の方とキチンと相談、問題点の洗い出し、ご提案をさせていただいた後に作業に着手いたします。

画像差し替え、html+css変更で、ん十万円??

サイト全体のリニューアル、またはスマホ対応(レスポンシブ対応など)をおこなうことは作業ボリュームが多くなるので、ん十万円かかっても仕方ないケースはあると思います。
そうではなくページ内の一部分の文章変え、画像の差し替え、または特定の表示エリアを変更したいだけなのに、単発の仕事や単価が低そうな仕事だけを請けてくれる方はそう簡単にみつらないようです。
会社員時代も現在のフリーランスでも友人、知人からちょっとした変更を頼まれる事がしばしばあるですが、作業ボリュームからみても値段をつけられる仕事じゃなさそうに受け手側からはみえるのですが、依頼者側からしたら凄く喜んでもらえます。
そこで思うのは、その会社にWebの知識を持った方が1人でもいたららくなんだろうなぁと感じます。
ただしかし!Webの変更自体、月に1度以下となると余計な人材を補充することはコスト面からみても割に合わないのでしょう。

ちょっとしたHP変更に“ともたか39”を使ってください!!

私は40代後半の所謂“アラフィフ”ですが、Webで20年以上ご飯を食べさせてもらい、世界最大手ソフトウェアメーカー、大手国内車自動車メーカー、大手国内スーパーチェーン、大手経済誌、そして大手学習塾のHPサイトをレギュラーで5年以上制作、メンテナンスをした経験があり、または街の小売店、中小企業の“小”のHPサイトの制作、運用、メンテナンス管理をおこなってきた実績があります。
※お問い合わせいただいた方には、上記の詳細をキチンとお伝えします。 まさに「痒いところに手が届く」事も、「あともう少しココをこうしてほしい」という事も喜んでやらさせていただきます。
街の商店街には日用品の修理屋さんが当たり前のようにあります。時計であれば時計屋さん、靴であれば靴屋さん、愛着があるものであれば修理して更に続けて使用したいと少しでも思う事あるかと思いますが、WebのHPでは、それをおこなってくれる業者、人間が少ないのです。まずはそこに踏み込んでいこうとここ何年かで思ったので、まずは行動と思いこの記事を書きました。
この私からのメッセージに少しでもひっかかるところがあれば、まずはお気軽にご連絡ください。
ご満足いただけるよう全力で対応いたしますので。

ご連絡はこちらのフォームから→お問い合わせフォーム

ホームページ初心者、何にお悩みですか?

ホームページは初心者でもできる?

ホームページ
Web業界に入り、早くも20年以上が経ってしまいました。私がWeb制作に携わり始めた1990年代前半ではまだcss(Cascading Style Sheets)というものも無く、tableタグやスペーサーgifなるものを使用して、できるだけデザイン画に近いものを製作していました。
と、こんな話をこれからホームページを自前で作ろうと考えている方には、どうでも良い話ですね。すみません。
ホームページを作るのに未経験でも作れますか?とよく尋ねられるのですが、答えはできます!
ホームページは基本的にhtml(HyperText Markup Languageの略)というマークアップ言語を使用して制作するのですが、これを深く理解しなくてもアメブロ、はてなブログなどの無料ブログサービスを使用して、ホームページっぽい事は可能です。
ブログを使用すると日記っぽくなるから嫌だ、または独自のドメイン(~.comや~.jpなど)を取得して運用したいという方であればWordpressなどのCMS(Contents Management Systemの略)を使用すれば、htmlを理解しなくても“ある程度”のホームページは初心者でも制作できます。

ブログでホームページを作る

基本的にコンテンツは文字中心になりますが、ブログを使用して企業、団体のホームページにだってできます。TOPページはもとより、会社概要や地図(MAP)のページもできます。
凝ったデザインよりも伝えたい事が優先、またはお金をあまりかけたくない方は無料ブログで立ち上げてみませんか?
※無料ブログでは広告バナーが表示されますが、有料サービスを使用れば広告バナーは表示されません。
お勧めブログサービスは
はてなブログ
アメブロ
です。
もしブログでも面倒だ、やり方がわからないというのであれば“ともたか39”にお問い合わせください。初回無料でご相談にのります。
ご連絡はこちらのフォームから→お問い合わせフォーム

ドメイン取得方法とレンタルサーバについて

ドメインを独自に取得し、サイトを立ち上げたい方のであれば、以下の手順をおこなってください。

ドメイン取得方法

ドメイン(~.comや~.jpなど)は、ドメイン業者というものがあり、そのドメイン業者に会員登録(会員登録費用はほとんどが無料)して、ドメイン取得という事になります。
未使用のドメインしか取得できませんが、.comや.netや.jpなどで価格が異なってきます。比較的安価なのは.comや.netだと思います。
有名どころでは、
お名前.com
ムームードメイン
バリュードメイン
などがあります。
もしこれも面倒だ、やり方がわからないというのであれば“ともたか39”にお問い合わせください。初回無料でご相談にのり、対応します。
ご連絡はこちらのフォームから→お問い合わせフォーム

レンタルサーバについて

ドメインを取得したら、次はそのドメインを運用するサーバを立てなければなりません。
ドメインはあくまでも名前が書かれている名刺のようなもので、その名刺の記載がある会社の事務所のようなものがサーバになります。
このサーバに見せたい情報(コンテンツ)をhtmlファイルやcssなどで制作しクライアント側へ見せるようにする訳です。
自前でサーバを立てる事も可能ですが、サーバを立てるためのハードウエア、回線などが必要になり、もっと言えばサーバを管理、運用する専門の技術者が必要になり、手間やコスト面、そしてセキュリティ対策などで結構大変です。そこで多くの方はサーバをレンタルして運用しているわけです。
レンタルサーバにも色々ありまして、大きく分けると『共有サーバ』と『専用サーバ』の2つになります。

『共有サーバ』は、1つのサーバ(1台のコンピュータ)で複数の企業・団体などのホームページ(ドメイン)が運用されているため、同じサーバ内にある他のホームページにアクセスが多く集まると、サーバのトラフィックが上がってしまうため、表示が遅くなったりするデメリットはありますが、レンタル費用が安価でおさえられます。
※現在の共有サーバサービスを提供しているレンタルサーバ会社は、昔よりもトラフィックに対してそれなりの対策をしているので、あまり気にすることは少なくなったと私個人では思っています。
『専用サーバ』は、レンタルした方専用のサーバ(1台のコンピュータ)が割り当てられるので、通信速度などで心配する事は比較的少なく、サーバ技術者がいれば好みのサーバ状態に設定変更なども可能になります。ただそのため費用が高くなるケースが多いです。 費用から考えて、そしてそんなに複雑な技術、設定を必要としなければ『共有サーバ』で充分だと20年以上Web業界にいる私からもお勧めします。

お勧めレンタルサーバとしては、
ロリポップ
ヘテムル
さくらサーバ
などです。
私自身が実際にレンタルした中で、サーバトラブルも少なく、低コストで安定した運用経験があるから紹介しました。
レンタルサーバに関してもご不明な点があれば、気軽に“ともたか39”へお問い合わせください。無料でアドバイスいたします。
ご連絡はこちらのフォームから→お問い合わせフォーム

htmlとcssとは何?

ここからは何のこっちゃ?という話になってきてしまいそうですが、ホームページはhtmlというハイパーテキストというマークアップ言語で表現されます。簡単なプログラミング言語のようなものです。
そこに文字表現を好みのものにしたり、細かなレイアウトまでを設定、表現させるのがcssというものです。
以下に簡単にhtmlとcssを説明していきます。

htmlの基本構造と基本タグの説明

htmlは大きく分けて以下のタグを使う事で構造を成り立てさせます。
  • htmlタグ
    htmlの最初と最後で使用し、htmlファイルである事を宣言します
    <html>〜</html>
  • headタグ
    <html>タグと<body>の間で使用し、サイトタイトル(title)、文字コード、サイト説明(description)、サイトの主となるキーワード(keywords)などを宣言するためのエリアです。
    <head>
    <title>〜</title>
    <meta name="description" content="〜">
    </head>
  • bodyタグ
    ブラウザの画面で表現させたいエリアになります。基本は</head>の直後から</html>の直前までの宣言になります。
    このbodyタグの中にユーザーに読んでもらいたい文章、見てもらいたい画像、動画などを配置・設定します。
    <body>
    あいうえお
    <img src="tomotaka.gif">←画像を表示させるためのimgタグ
    </body>
  • hタグ
    bodyタグの中でコンテンツの表題や文節の見出しタイトルとして使用するタグです。
    hタグはh1〜h6までが使用可能で、数字が小さいものを上から順番に使用します。
    例えば、コンテンツ全体のタイトルとしてh1タグを使用し、中見出しでh2タグを、そして小見出しでh3タグを使用するといった感じで使用します。
    ※基本としてh1タグは、htmlファイル内に1つのみの使用が好ましいです。
    <h1>大見出し</h1>
    <h2>中見出し</h2>
    <h3>小見出し</h3>

  • cssの役割

    この章の初めにも記しましたが、htmlで作ったファイルをスタイルシートというファイル(.css)で細かなレイアウトを指定し、ブラウザ上での表現を豊かにさせるものです。
    例えばある部分だけ文字を大きくしたい場合は、その部分をあるタグで囲み、classを指定します。
    例1:
    htmlファイル
    <span class="moji01">あいうえお</span>かきくけこ

    cssファイル
    .moji {
     font-size: 120%; ← 文字の大きさを1.2倍にする
     font-weight: bold; ← 文字を太文字にする
     color: #f00; ← 文字の色を赤にする

    結果あいうえおかきくけこ
    この他にも画像の位置を好みの場所に指定したり、表や囲みを作成したりなどここでは書ききれない表現ができます。 htmlやcssを覚えて表現を広げたい、そしてたのしみたいという方は可能な限り無料でアドバイスいたしますので気軽に“ともたか39”へお問い合わせください。
    ご連絡はこちらのフォームから→お問い合わせフォーム

    まとめ

    ここまで読んでいただきありがとうございます。
    html+cssに興味を持ってやる方であれば、楽しくホームページ作りもできると思いますが、ここまで読んでいただいて興味がわかない、面倒くさい、やりたくない、でもホームページを立ち上げたいと思っている方は、まずは無料ブログでもよいと思うので、立ち上げるだけ立ち上げて、文章を書きながら必要な事を学べば良いんだと思います。
    それでも自分では…と思う方は“ともたか39”へお問い合わせください。
    ご連絡はこちらのフォームから→お問い合わせフォーム

    逆にhtml+cssだけでは物足りず、動的な表現もしたいという方もいらしゃるんだと思います。そんな方はJavaScriptを学んでみることもお勧めです。
    現在発表されている技術では、html+css+javascriptでスマホアプリができてしまう時代です。
    ※参考:Monaca

    ホームページを作るなら楽しんでやらなくちゃっ!です!!
    livedoor プロフィール

    ともたか39

    大森在住のアラフィフ男のフリーランスブロガー“ともたか39”です。世の中のトレンド、自分の趣味、気になる事をアラフィフ目線で情報発信していきます!

    タグクラウド
    livedoor × FLO:Q
    QRコード
    QRコード