今さら聞けないWeb知識「HTMLとCSSってなんだ?」

ホームページの話題で、「HTMLとCSS」という言葉が出てくることがあると思います。
どちらも、ホームページの表現(表面)を作る際に重要なんだというところまではわかる方も多いかとは思います。

そこで、今回は「HTMLとCSS」って何だろう?という疑問にお答えしたいと思います。

HTML(エイチティーエムエル:ハイパー・テキスト・マークアップ・ランゲージ)はホームページを作成する際に用いられる言語の一つです。
ただホームページ上に文字を出力するだけでなく、画像を出力したり、別のページへのリンクを貼ったりすることが可能になります。

ホームページを作る際の工夫としてにはこのHTMLを要素(ものを入れる箱のようなもの)で仕切り、要素の中に複数の要素を入れたりしながら、見る人がわかりやすくなるようにしていきます。
例えば、ブログを書く際によくHTMLを使って見出しのサイズを調整したり、画像を貼り付ける作業を行うことがあります。

CSS(シーエスエス:カスケーディング・スタイル・シート)の略で、HTMLと併用することの多い言語の一つです。
HTMLで要素を分けた部分の色をそれぞれで変更したり、フォントの変更等に便利です。
主にデザインと呼ばれる範囲をこのCSSで設定します。

例えばHTMLで

< h1 >hello!< /h1 >

と入力した際に
CSSで色とサイズを指定する場合、次のように記載いします。

h1{color : #008000 ;    
  font-size :20px;
}

※1 #008000はカラーコードと呼ばれるネット上で色を表すためのコードのこと。
この#008000の場合色は緑になる。

※2 font-sizeの部分に表記されている20pxのpxとはデジタル画像のサイズを表す単位
でWeb開発の現場では最も用いられる大きさの単位

CSSでこのように指定した場合、
HTMLでh1と書かれている要素の中にある「hello!」の文字の色はCSSで指定した色とサイズでホームページやブログに出力されます。
これらの技術を使ってホームページは構築されます。

このように「HTMLとCSS」を活用し、ホームページの表現(表面)の制作をする人をフロントエンジニアと呼ばれています。「HTMLとCSS」はホームページ作成の基本となる為にプログラミング学習の最初のステップとしてよく学習されています。

他にもアニメーションを付けたい場合には、Javascriptなどを利用して画像をスライドさせたり、ボタンを物理的に押しているかのようなエフェクトで表現する技術などを利用しながら、みなさんが見ているホームページが構築されます。

Javascriptに関しては次回ご紹介します。ご期待ください。

ホームページを閲覧するユーザーを守ろう! SSL!

今回はSEO対策にも非常に大きな役割を果たし、ホームページとユーザーを守る役目も持っている「SSL」についてお話していこうと思います。

SSLは「Secure Sockets Layer」の略で、ホームページで送受信されているデータを暗号化する手法の一つです。

ショッピング時のクレジットカード番号や、お問い合わせ情報など、個人情報の流出を守る手法です。

また、SSL化にも複数種類があるのですが、今回はその説明は省略させていただき、もう少しSSLの概要について詳しく説明しようと思います。

自社のホームページを訪れたユーザーが安全に情報収集できる基盤と言えます。

ホームページや、SNSサービスで、顧客情報の流出というトラブルを目にする事もあるかと思います。

自社の信頼を維持する為に、現在多くのホームページはSSL化がされています。

弊社のホームページのURLをご覧ください。analyze.kyoto」の前に「https」と記入されていることがわかるかと思います。

このhttpsがSSL化をしている証拠で、GoogleChromeのブラウザで見ている場合はURLの前にカギマークが付いていて、クリックするとこの接続は保護されています。と表示されています。

そしてまだSSL化をしていないホームページはURLの前にhttpsではなくhttpと記載されていて、保護されていない接続もしくはなりすましの可能性があるページとして警告がされます。

(下添付画像はテスト環境にてSSL化を一時的に解除し、httpの表示に変更したもの)

このようにホームページを見ているユーザーは保護されていない通信という文字を見てそのホームページ、更にホームページを開示している企業にまで不安感をってしまう可能が高まります。

SSL化対応していないホームページはGoogleが暗号化せずにハッカーから情報を抜き取らせる怪しいホームページと認識するため、検索エンジンから「外される」可能性もあります。SEO対策により上位表示される様になったホームページがSSL化をしていないせいでまた順位が下がってしまうという話もよくありますので気をつけてください。

SSL化対応をまだしていないホームページをお持ちの方「SSL化対策」への疑問・不安を含めて相談お受け致していますお気軽に、ご相談ください。

ホームページの保険!? 「保守管理費」は、こんなに役立つ!

今回は、一般的にホームページ制作後に発生する大切な「保守管理費」についてお話していこうと思います。

多くの方は、
「なぜホームページを制作した後に毎月お金を払わないといけないの?」
「結局保守管理って何をしてくれているの?」
「まさか、騙されてお金を払ってる?」と考えているのではないのでしょうか。

確かに、お客様の視点に立つと、保守管理費はなぜ必要なのか、
保守管理は何を行っているのかは分かりにくいものだと思います。

完成したホームページにお金を払うことに用心してしまうこともありますが、

保守管理費は完全にお客様の目には見えないところで次のような大切な事をしている費用なのです。

 

保守管理費の一例として

1)情報が格納されているデータベースのバックアップ(ブログの記事や画像などが保存されている)

2)プログラムの更新、(ITの技術は日々目まぐるしいほどの進歩を遂げています、古くなってしまうとその弱点からサイトを攻撃されてしまうため定期的にプログラムの更新を行います)

3)軽いSEO対策などを行っています。(月ごとに変更を重ねていくことでより精度の高いSEO対策になります)

 

もし、データベースのバックアップを取っていないと、データが破損したり、サーバーに不具合が出た場合に

サイトが復元することができないことが起きてしまい、1からホームページを制作することにもなり兼ねませんまた、復元が出来たとしてもホームページ制作費用よりも高い費用を請求される可能性があります。

 

最悪の場合、お客様にとって保守管理費よりも高い金額が必要になってしまうのです。

そのようなことが起きないように、また起きる確率を下げるためにも、
日々バックアップを取り、サイトの復元が可能になるように作業しております。

更に、ホームページには様々な機能を実現するために
プログラムが書かれていますが、そのプログラムを常に更新して、バージョンをあげています。

もし、プログラムを更新せずに放置していると、正常にプログラムが機能しなくなることや脆弱性(バグ)を突かれ、サイトを乗っとられる可能性が大いにあります。

ニュースでも度々目にすることですが、
世界中いる何十万人ものハッカーが、無作為にサイト等を乗っ取るために、(当然すべてのサイトが対象です)

常に新しい攻撃方法を作り出しているため、

ホームページを作った段階ではプログラムに脆弱性がなくても、

半年後には脆弱性が発見され、攻撃対象になり得るからです。

これはITの宿命なので、常に新しい攻撃方法が出来たらそれを阻止するために、プログラムを更新して、攻撃されないようにする努力することが必要になります。

このような大切な業務を行うために「保守管理費」を頂いて、ホームページ作成会社は日々努力しています。

このような大切な業務を目に見えないところで行っている為「保守管理費」はよく有事の際に役に立つ保険に例えられ、「ホームページの保険」と呼ばれています。

WordPressとフルスクラッチ、どっちがいいの?

ホームページの制作を依頼する際によくフルスクラッチで構築やWordPress(以降ワードプレスと記載)で構築など、普通に聞いていてもIT系の仕事をしていない限り、意味のわからない用語を使われることがよくあります。

今回はそのフルスクラッチと、ワードプレスに代表されるCMS(コンテンツマネジメントシステム)とは何かを説明し、もしホームページを作る際、どちらを選んだらより満足ができるものを作れるのかを簡単に説明します。

通常ホームページを制作する際はプログラミング言語を使用し、最初から最後までプログラミング言語のみを用いて、みなさんが普段目にする、写真や情報がキレイに表示されたホームページを制作します。(この構築方法ををフルスクラッチ構築といいます)

しかし、大抵の場合ホームページの制作を依頼する方はプログラミング言語を利用できないため、フルスクラッチ構築の場合、急なホームページの変更や改良の際、制作元やいわゆるプログラマーという方々に変更を依頼し、短納期のため高額な変更費を請求されることがよくあり、それがトラブルの原因となってしまうことも多々あります。

ワードプレスに代表されるCMSはプログラミング言語を用いずホームページの編集をできるように構築されたシステムのことで、少し編集方法を勉強すればプログラミング言語を全く使用できない方でも、文章や写真の差し替え程度なら簡単に編集できるようになり、本来払うはずだった高額なコストを抑えることが出来ます。ワードプレスはそのCMSの1種類です。

しかし、誰でも、簡単に編集できる半面、フルスクラッチ構築と違い、ある程度型に則したホームページしか構築が出来ないため、自分だけの本当に理想通りのホームページを作ることがほぼ不可能になってしまいます。

以上の点を踏まえ、ここから先はどんな方がワードプレスを使ったほうが良いのか、フルスクラッチにしたら良いのかの紹介をしていこうと思います。

こんな方はCMS(ワードプレス)の利用がおすすめ

・サービスを開始して間もない、ホームページがまだない

 フルスクラッチは高額なため、サービス開始や事業規模がそれほど大きくない場合、ワードプレスでの構築のほうが予算も抑えられます。

・ホームページをよく更新する

ホームページを良く更新する場合(ブログを書く場合等)いちいち変更のために業者にお願いすると、時間とお金がかかってしまいます。ワードプレスは自分での更新ができるため、定期的にホームページを更新したい方にはおすすめです。

・自分でデザインをいじってみたい

ワードプレスはサーバーやドメイン(〇〇.com)等の費用以外は基本的に無料なため、少し慣れてしまえば簡単なHPなら自分で構築することが可能です。

・できるだけ予算を抑えたい

一般的にフルスクラッチでのホームページの構築が100万円からなのに対し、ワードプレスでの構築は外注でも30万円からと、比較的低予算での構築が可能です。

・デザインは最低限満たされていればいい

ワードプレスでの構築は予算が抑えられて自分でも簡単に変更できる半面ある程度最初に型が決められてしまっているため、柔軟な変更が難しいというデメリットもあります。デザインが最低限キレイであれば問題がないという方にはワードプレスはおすすめできます。

・早くホームページがほしい

フルスクラッチでの納期が一般的に3ヶ月~1年なのに対し、ワードプレスでは最短の納期で1ヶ月です(できるだけ長い納期の方がより良いものになる傾向はありますが)今すぐホームページが欲しいという方はワードプレスがおすすめです。

こんな方はフルスクラッチがおすすめ

・企業規模が成長していて、ホームページをリニューアルしたい

フルスクラッチのホームページは基本的に完全オーダーメイドなため一種のステータスになり得ます、ある程度企業規模が拡大していて、会社の個性を出していきたい場合フルスクラッチ構築でのホームページがおすすめです。

・ITに強い人材が社内にいる

フルスクラッチ構築では基本的にプログラミング言語のみを利用しているため、ホームページの更新にもプログラミング言語の使用が必須です。自社内に少しプログラミング言語を使える人材がいる場合、更新も容易になるためフルスクラッチ構築でのデメリットを補うことが可能です。

・予算に余裕がある

フルスクラッチでの構築はワードプレスでの構築と比較してかなり高額です、しかしその分完成度が高いホームページの構築が可能なため、予算に余裕があるのであればフルスクラッチでの構築がおすすめです。

・完全にオリジナルなホームページがほしい

ワードプレスでの構築はある程度型にハマっているため、その中で自分の最高の形を模索するのですが、フルスクラッチでの構築は基本的に全て自由です(流石に飛び出すホームページ等無理なものもありますが)自社の個性を全面に押し出す際はフルスクラッチでの構築が必須となってきます。

・時間的にあまり急いでいない

フルスクラッチでの構築はワードプレスと比較してかなり時間がかかります。時間に余裕がある場合はより完成度の高いフルスクラッチ構築がおすすめです。

今更聞けないWeb 「SEOって何?」

SEOはSearch Engine Optimization(検索エンジンの最適化)と言い、自社、もしくは請け負った他社のサイトが特定のワードで検索した時に上位表示されるようにす事をSEO対策と言います。

 

これはGoogleの検索エンジンに対応する事を指すのですが、同じGoogleの検索エンジンを利用しているYahoo!でも効果があります。

 

AIによって検索エンジンが自動判断するため、これをやると確実にSEOが上がると言ったものがなく、常に時代の流れを汲んで柔軟に対応していく必要があります。

 

SEO対策は直接的な費用がかからないため、自社のホームページの改良ではどの企業でも必須の項目となっている事がほとんどです。

 

しかし、ある程度はSEOが上がる要素は分かっていて、

 

優良なコンテンツ

例えば「ホームページ 作り方」と検索した時に上位に表示されるには、要点だけを掻い摘んで書かれたものではなく、誰にでもどうやって作ったら良いかが分かりやすいコンテンツが上位表示される傾向があります。

 

内容の関連性

「ホームページ 作り方」と調べた時にカレーパンの作り方が出てくるということはないという事です。

 

文字数(内容があるものに限る)

上記の項目に共通する点もありますが、内容をより詳しく、わかりやすくするためには文字数が必要です。しかしただ「ああああああああああ」など内容のないもので文字数を稼ごうとすると、「ペナルティー」が発生し、検索順位が大きく下がってしまいます。

 

コピーアンドペーストしていないか

正しい形での引用は全く問題ありませんが、コピーアンドペーストをしてあたかも自分の書いたもののように掲載した場合、GoogleのAIはどちらが古いかどうかを判断して新しく掲載した方に「ペナルティー」を与え、検索順位を下げてしまいます。

 

内外リンクの多さ

優良な情報を掲載している場合、他のメディアからリンクを貼ってもらえることがあります。その数が多ければGoogleの検索順位が向上します。(お金を払うなどして依頼をした場合は不自然にリンク数が向上してしまうため、ペナルティーを受ける可能性があります)

 

また、優良な情報を外部リンクで自社のメディアなどに掲載した場合も、検索順位が上昇する可能性があります。

 

※Googleは具体的なSEO対策への指針を提示していないため、確実にSEOが上がるという方法は誰にもわかりません。確実にSEOを上げられるという業者には注意をしてください。