(() => { class Txt { constructor() { this.str = 'Website'; } out() { return this.str; } } console.log((new Txt()).out()); })(); Website ウェブサイト

ウェブサイト

HTML5 CSS3

古いウェブブラウザのサポート期限を迎え、ブラウザはほとんどHTML5 CSS3に対応しました。 今までクロスブラウザ対応により困難だった実装も手軽に採用できる環境が整い、早さ、美しさ、使い勝手をより追求できる時代となっています。 また新しい手法も実装可能となり、今までにないユーザーを引き付けるギミックも可能となっています。 ただし、優先するべきはユーザー目線です。使い勝手がまず大事です。

(2017.9)

ウェブサイトの在り方

ウェブサイトは広告ツールでしょうか。 営利を追求する企業にとっては宣伝費に違いはありませんが、 費用対効果を考えすぎて費用を抑えると意味のない中途半端なサイトの出来上がりです。 逆に費用をかけすぎて凝った作りのサイトに仕上げてしまっては、ユーザーも困惑するだけで逆効果な無駄遣いです。 ウェブサイトとはユーザーへ必要な情報を適切に分かりやすく公開する「サービス」の一環です。 ユーザーが何を欲しているのか、サイトが重すぎてユーザーに負担やストレスを与えていないか、必要なページに直ぐにたどり着けるか。 スマートフォンでのアクセスも5割を超え、大画面なデスクトップPCも登場し、様々な閲覧環境でストレスのないサイト作りが大切になります。

(2017.9)

使いやすさ

使いやすいウェブサイトとはどのようなものでしょうか。 フラットデザインではボタンなのかデザインなのかよくわからないという問題がよく見られました。 最近はその問題にも皆気づき、フラットデザインでありながらデザインとボタンの区別はつく様になっているサイトも多くなりました。 使い手側の慣れもあるかも知れません。 一番厄介なのは、重要なページへのボタンがグランドメニューとはかけ離れた位置に置かれ、ページをスクロールしないとそのボタンは見えないとか重要なボタンには見えないというレイアウトです。 やはり全ページへのアクセスはヘッダ付近に集約する事が望ましいでしょう。 そして今どのページに居るのか、ナビゲーション(サイトマップ)の常時表示も重要な要素です。
それと気になるのは問い合わせメールフォームの親切度ではないでしょうか。 フリガナ入力欄がカタカナのみ受付しているのであれば、「半角カナは使用しないでください」「全角カタカナで入力してください」とエラーを出すよりは自動で全角カナに変換するべきです。 利用者のストレスを極力省くことが問い合わせ増加にも繋がります。 チェックボックスやラジオボタンの大きさも同様です。CSSで大きく加工するべきでしょう。 利用者が何にストレスを感じるか。どう取り除くか。ストレス軽減が使いやすさと言えるでしょう。 新しい凝った(奇をてらった)デザインに挑戦する時代は既に終えています。

(2017.10)

セキュリティ XSS CSRF

ウェブサイト制作で気を付けるセキュリティ対策とは何でしょうか。 静的なウェブサイトは基本的にデータを提供する場ですが、それだけでは危ないという事はあまりありません。 気を付けるべき箇所はデータ入力の仕組みです。メールフォームがそれに該当します。 メールフォーム以外にも検索や抽出その他閲覧者の操作によってデータ出力が変化する動的なウェブサイトも多い事でしょう。 よくある問題としてはXSS(クロスサイトスクリプティング)とCSRF(クロスサイトリクエストフォージェリ)でしょう。 残念ながらそれら対策を怠っているサイトが非常に多く、いつ悪用されてもおかしくありません。無名なサイト程悪用対象になりませんので表面化していないだけです。 セキュリティの知識と意識がある人であれば簡単にチェックできます。

(2017.9)

セキュリティ SQLインジェクション

閲覧者の入力データによって出力を変化させる動的なサイトで、SQLコマンドを発行してデータ抽出するサイトではSQLインジェクションが気を付けるべきセキュリティです。 これもごく簡単にその脆弱性をチェックできます。データを改ざんしたり、データを全て読み取られる可能性もはらんでいますので注意が必要です。 あまりデータが大きくなく全て閲覧されても困らない内容であれば、管理はデータベースで行い、静的なJSON形式で書き出しておくことも要検討です。 そうすることでデータベースを破壊される危険は劇的に減り、レスポンスは早くなり閲覧者への負担軽減になります。 JSONデータの操作をJavaScriptで行えばページリロードも減らせてサクサク動作するサイトが出来上がります。

(2017.9)

セキュリティ ファイルアップロード

ファイルアップロード機能もセキュリティ知識が非常に大切となります。 実行可能なファイルをアップロードしてしまうとそれを外部から実行できてしまうという危険性などです。 つまり、悪意のあるものがその仕組みを利用してフィッシングサイトを仕掛けたり、パスワードを盗み取ったり、サイトを改ざんしたりと言ったことが考えられます。 サーバーがどのような仕組みで動作しているのか、知識不十分では非常に危険です。

(2017.9)

サイト軽量化

ほとんどの環境が光回線になりデバイスも高性能になった昨今、かつてよりサイト軽量化は重要視されていない様に思われます。 もちろんアクセス数の多いサービスではとことん軽量化されている事と思いますが、中規模以下のウェブサイトは作り手側の利便性を優先して重いサイトが見受けられます。 メンテナンス性、拡張性、品質と相反する部分も大きいのですが、そのバランスも十分考慮した上で軽量化を図ることが大切でしょう。 特にデータベースアクセスは避けれるものなら避けた方が良いでしょう。予めキャッシュを出力しておき、キャッシュの組み立てを行う方が遥かに高速です。 画像に関してはsvg,webp,png8,png24,jpg,gifの使い分けとなります。 この他にも色々ありますが、やはりメンテナンス性と相反する部分が大きい為、バランスが大切です。

(2017.9)

SEO対策 テクニック

小手先のサイトチューニングで検索順位が上位になるという時代はかなり昔の話であり、現在はサイト内容がほぼすべてと言ってもいいでしょう。 それでも行うべきチューニングやテクニック、やってはいけない事、新しく許可された構造、などなど注意する点は多数あります。 それらには経験値が必要です。
*以下SEO対策についてのコラムが続きますが、これらはGoogleのルールであり非公開ですので経験値や憶測や実験結果を元にしたものでしかありません。

(2017.9)

SEO対策 新規サイト立ち上げ時

新規サイト立ち上げ時にはサイトマップ(ページ一覧)をGoogleに通知すると同時にサイト全体をGoogleに取得してもらいインデックスを促していますので、1日程度で全ページがインデックスされることが多いです。 そしてトップページよりも内容が充実しているサブページが検索でまず出てくるようになります。Googleはサイト単位ではなくページ単位で評価すると明言しているからです。 ではなぜ他のライバルサイトはトップページが上位に出てくるのでしょうか? それはバックリンク(被リンク)がトップページに向けられている為で、トップページの評価が高い状態になっているからです。 新サイト立ち上げ時はバックリンクが何もない状態ですので各ページのコンテンツのみで評価することになります。 どんなに大きな会社のサイトであろうともサイト立ち上げ時は「おぎゃぁ」と産声を上げた赤ちゃんと同じで何も評価を得られていない状態です。 積極的にバックリンクを張り、または自然とバックリンクが増えるのを待つことでサイトの評価が高まっていきますが、通常、バックリンクはトップページへ向けられることが多い為、結果的にトップページの評価が高くなり、トップページが検索上位で出てくるようになります。

(2017.10)

SEO対策 ドメイン年齢

ドメイン年齢は古い方が良いという都市伝説がありましたが、それはGoogle担当者のツイートにより否定されました。ドメイン年齢は関係ないと。 ただし、3年目、7年目といったドメイン年齢は関係ないでしょうけど、取得したばかりの新規ドメイン名については事情が異なります。 新規ドメインは被リンクがゼロであり、インターネットの世界ではどこからも評価されていないという事です。 どれだけ立派なウェブサイトを作り上げても、作り立ての状態ではサイト内部の評価だけであり外部からの評価は得られていません。 有名企業、有名サービスであれば時間が経てばその社会性と話題性とファンにより自然と被リンクが増えることが期待できます。 よって、一定の時間経過を待つか、積極的に被リンクを増やしていく活動が必要となります。

(2017.10)

SEO対策 バックリンク

Googleが考えるサイトの評価とはどのようなものでしょうか? 内部評価、外部評価の2点が考えられます。
内部評価を例えて自己評価ということで考えてみます。自己評価とは言ってもGoogleが考える評価は自己満足サイトを讃えるものではありません。 あくまでも閲覧者が欲している情報が詳しく記載されているか否か。ユーザー目線であるか否かが問われます。 昨今のGoogleの言語解析能力は目を見張るものがあり、Google翻訳ではかつてなかった綺麗な翻訳文が出来上がります。 おそらくこれらノウハウも検索エンジンにフィードバックされ、人間が見たままの評価がGoogleの評価になっていると考えていいでしょう。 これは小手先のテクニックを見抜く事にも役立っており、元々はそれが大きな目的でもありました。 かつて、やたらと重要な単語を多く記載したり、背景と同じ色で隠しテキストを埋め込んだり、ロボットが見る画面と実際の画面を差し替えたりと言ったGoogle騙しとも言えるテクニックが通用した時代が有りました。 現在そのようなテクニックはGoogleは見抜いており、ペナルティもしくは無視となり評価対象にはなりません。 つまり、ページが自然体であり、ユーザー目線であることが大切です。 ユーザー目線である重要性の一つに後述のバックリンク獲得と言う目的もあります。 現代のSEO対策とは、自己満足をアピールする場ではなく、如何に閲覧者に有益な情報を提供できるか、如何にサービス精神で構築できるかと言ったことが大切ではないでしょうか。
さて外部評価とは何でしょうか。
外部評価とは、例えるなら他人の評価です。自己満足サイトはただの自画自賛であり世間的に何の評価も得られません。他人から評価されてこそ真の評価となります。 ウェブサイトが他人から評価されるとはどういうことなのか。それはバックリンクを得るという事でしょう。 Googleはバックリンクの質と量を重要視しています。 バックリンクの量とはその名の通り数量を意味します。数が多ければ多いほど良いということになります。 しかし、いくら量が多くても質が伴っていなければペナルティもしくは無視の対象となります。 かつて自動ページ生成プログラムで数十万件のページを作り出し、そこからバックリンクを得ることで目的サイトの順位を上げるテクニックが通用した時代も有りました。 ドメインを多数用意して、異なる国からのバックリンクを引き込むことでさらに順位は操作できました。 但し、それは当然中身が伴っているものでは無く、見せかけだけの騙しです。 現在は質も伴っていないと正規のバックリンクとは言えません。 正規のバックリンク=優良バックリンクとは何でしょうか? 評価の高いサイトからのバックリンクは優良バックリンクと言えます。 ちょっと記事を書き込んだだけのブログからのリンクはほぼ無視されると言っていいでしょう。 リンク元のサイト内容がターゲットサイトの内容と大きく異なる場合も意味を成しません。 工業系であれば工業系からのバックリンク。食品系であれば食品系からのバックリンク。 そういった、至って自然なバックリンクが理想となります。

(2017.10)

SEO対策 ユーザー目線とは

ユーザーがサイトに辿り着く為の最も信頼できるルートとは何でしょうか。 知人がSNS等で発信したリンク先、そして信頼できる企業サイトからのバックリンク、そして検索結果でしょう。Google等での検索結果の信頼度はそれほど高くありません。 つまり、バックリンクの重要性はユーザー目線で考えれば明らかです。
検索結果で注意するべき事項があります。
GoogleAnalytics等で検索キーワードを得ることが出来ますが果たしてこれはユーザーが求めているワードでしょうか? これらワードはたまたまサイトに辿り着いたという結果であってユーザーが求めているものではありません。 ユーザー目線であるキーワードはある程度簡単に知る方法があります。 例としてGoogle検索で「自動車」と入力します。 検索結果ページの下部に自動車に関連する検索キーワードが、例えば以下のように表示されます。 「自動車カタログ」「自動車リサイクル」「自動車 名義変更」「自動車事故」「自動車部品」「自動車販売台数」「自動車メーカー」「自動車ルート検索」「自動車バッテリー」「自動車ナンバー」。 さて、これら関連ワードは予測した通りでしたでしょうか? 自社サービスに関連するワードで検索してみてください。恐らく予想できなかった結果も含まれることでしょう。 この結果は最もユーザー目線に近いものと言えるのではないでしょうか。 Google対策をするならばGoogleの分析結果に従うのが王道です。 これら「関連する検索キーワード」でサイトに足りない文章を追加したり加筆する事がGoogle対策となります。 もう一度ユーザー目線を考えてみましょう。 自社サイトにユーザーを呼び込むにはユーザーが欲している情報が必要です。 自画自賛の宣伝サイトには誰も寄ってきません。 企業として秘密にしたいところは秘密にし、公開したいところはどんどん公開してオープンなサイト作りが必要です。 誰も広告だらけのテレビを見ないのと一緒でサービスが重要です。サービスに付随して広告も見てくれるというものです。

(2017.10)

JavaScript

現代のウェブサイト開発環境は大きく変化を遂げ、さらに進化し続けています。 より高速に、より便利に、よりセキュアに。クライアントサイドのJavaScriptも従来のECMAScript5から、ECMAScript2015へ、そして2016、2017へ。 そしてもう一つの選択肢WebAssembly。

(2017.9)