What is Web

ホームページ開設を考えている経営者様・ウェブ担当者様に向けて、私がホームページを持つにあたり大切だと考えている点をお伝えしたいと思います。最初に結論をいうと『情報』をいかに取り扱うかです。

まずホームページの仕組みを知ろう

スマホが普及した現在、ホームページを見たことがない人はいないと思います。ネット銀行で振込をしたり、ネットでホテルや病院の予約をすることも当たり前になってきています。その中で『自社のホームページを持ちたい!』と思った時にまず何を準備すればいいでしょうか。ここではその基本を簡単にご紹介します。

ホームページは、HTMLやCSSなどのデジタルなデータファイルでできています。そのデジタルなデータファイルをネットワークにつながったウェブサーバ(データを置いておくスペース。ネット上の土地のようなもの。)にアップします。そうすることで同じようにインターネットでつながっている世界中のパソコンから、そのウェブサーバを通じてアップしたホームページのデータを閲覧することができるようになります。これが、ホームページを世界に公開できる仕組みです。

また、パソコンから好みのホームページにアクセスするときに必要となるのがURL(ネット上の住所)です。よく『https://www.yahoo.co.jp』など見たことがあると思いますが、これがURLになります。このURLをグーグルクロームなどのブラウザからリクエストすることによって、目的のホームページを閲覧することができます。

つまり、ホームページを持つために最低限必要なものは次の3つになります。
①ホームページ自体のファイル
②ウェブサーバ
③URLとなるドメイン
一般的にウェブ制作会社が制作するモノは①のファイルになります。②と③はお客様がご自身で用意する場合とウェブ制作会社が代行して用意する場合があります。これでホームページをウェブへ公開することができます。

ホームページの目的を明確にしておこう

さて、ホームページを持つにあたり、一番大切なことはなんでしょうか?
それはホームページの目的を明確にすることです。目的のないホームページは、出口のないトンネルのようなものです。それでは、なぜ目的を明確にすることが重要なのでしょうか。それは、目的こそがホームページ制作の羅針盤となるからです。

普段、仕事をする時に必ず目的(+目標)があると思います。例えば、経営者だったら今期の利益を確保する、営業マンだったら目標の売上をあげるなどビジネスでは必ず行動に目的がついてきます。目指すところから逆算をして、現在の行動に落とし込む人も多いのではないでしょうか。

ホームページもビジネスとして制作する以上、そこには必ず目的が必要になります。その目的を達成するためにホームページの設計をし、魅力的なデザインをしていきます。また、目的が明確でなければ、ホームページを評価することができず、改善点を抽出することが困難になってしまいます。

ホームページの目的として多いのが、新規顧客の実店舗への誘導、資料請求案内、既存顧客のフォロー、ブランディングです。これらの目的によってホームページの設計方針が全て変わってきます。ブランディングを目的としているホームページに資料請求のボタンを大きく表示させることはマイナスでしかないことは簡単にわかります。

また、目的の選定と同時にターゲットを決めることも重要です。ホームページを見る人がどのような人なのかによってデザインや伝える情報も異なってきます。ターゲットがつい目を留めてしまうようなホームページが理想です。例えば、妊産婦をターゲットにする産婦人科のホームページでしたら、女性的で暖かく安心できる雰囲気のするデザインを採用しますし、妊産婦が必要としている情報を目立つところに配置します。

これらの目的やターゲットの選定はウェブ制作会社に任せることは出来ません。お客様のビジネスの中でホームページをどのような立場で考えるのかにかかっています。ウェブ制作会社はそれらの目的を元に最適なホームページをデザインし具現化することが仕事になります。

情報 > オシャレ

ホームページの目的が明確になった次は『情報』について考えます。この情報こそがホームページ設計の根源になる、もっとも大切なところとなります。ホームページを制作するにあたりお客様にヒアリングをさせていただくことも情報を整理するためです。
まず下のホームページを見てください。

これはイラストレーターの中澤 季絵さんのホームページです。イラスト作品と名前が大きく描かれています。一目見て、デザイナーのサイトであることや、作品の雰囲気などわかると思います。柔らかく温かいタッチの絵が多いですね。

一般的に情報を少なくするとシンプルなデザインになり、オシャレなホームページになります。アーティストがブランディングのために制作するホームページならそれでも良いかもしれません。しかし、既存顧客のフォローや資料請求案内を目的とするホームページでは適切な情報を伝えられない可能性が高くなります。それにより、ターゲットのアクションに結びつかなければ、そのホームページは失敗といえます。

逆に、情報量の多いホームページはどのようになるでしょうか。次は、岐阜県の飛騨高山にある居酒屋アジ平さんのホームページになります。画面いっぱいに文字が多く、全体的に情報量が多いです。

情報量が多いサイトは、繁盛している印象やにぎやかで楽しい印象を持たれやすくなります。飲食店やファミリー向けのサービスを提供している企業では有効でしょう。しかし、問題もあります。サイトの情報量が多いため、ターゲットが求めている情報までたどり着く可能性が低下してしまうことです。また、到達コストも増大してしまいます。これは大変ストレスがかかります。大量の情報を投げかけて、あとは見てる人が対応するというのは少し不親切といえるかもしれません。

良いサイトとはオシャレなサイトではなく、最初に決めた目的を達成させられるホームページのことです。目的を決めた次は情報量を決めます。そのため、企業様は抱えている情報を全て吐き出して、情報の整理をしていただく必要があります。一見、ホームページ制作とあまり関係がないようなことですが、非常に大切なことになります。『どの情報を伝えるか』を決めてください。

デザインの出番

情報量が決まったら、その中で優先順位を決めていきます。優先順位の高い情報をホームページの一番視線がいくところに配置します、またはそこに視線が集中するように近隣に目立つ画像や色を使い視線を誘導します。

情報の優先順位まで決めて、ここでやっとデザインの出番になります。優先順位の高い情報を如何に魅力的に見せるかが勝負です。ここからはウェブ制作会社の本域でしょう。

そもそもデザインとは何だと思いますか。なんとなくオシャレでカッコいい見た目のモノを設計するイメージがありませんか。

デザインはアートとは全く異なります。とても論理的でビジネス的な側面を持っています。目的を達成する為に、どのようにしたらいいのかを形として表現することがデザインといえます。つまり、抽出した情報をデザインすることは、極めて論理的なフローで、そこにはビジネスの素養が必要になってきます。逆をいえば、ビジネスの見識や論理的思考がない人にはデザインは難しいといえます。あくまで、色や形などビジュアルを取り扱っているだけで、求められる力は論理的側面が大きいです。

少し話しが脱線してしまいますが、私はビジネスにおいて最も大切にしなければならないことは『信用』だと思っています。どのような商品、サービスを取り扱っていても信用という土台がなければビジネスは成立しないと考えています。そしてそれはホームページにおいても大切なことです。むしろ、対面で接することがなく誰でもアクセスできるホームページだからこそ如何に信用を得るかは重要な課題になります。デザインの段階でも、どの情報をどのようにデザインすれば信用を得られるか、これはどの目的のホームページでも気をつけるべき点です。

トップデザインが勝負

人の印象は第一印象で9割決まる、という本がありました。営業マンをしていた時代を考えると確かにそうだと思います。そして、それはホームページでも同様です。
検索エンジンからたどり着いたユーザーはウェブサイトの滞在時間がほんの数秒、かつトップページのみを閲覧というケースが極めて多いというデータがあります。

トップページの最初のビジュアル(以下、メインビジュアル)が極めて重要です。これはなんとなく理解できることではないでしょうか。様々な企業のサイトではメインビジュアルに最もインパクトや発信性のある画像を大きく使用しています。少し前まではスライドショーなども流行でした。

これは、ビールのキリン社が経営している料亭のメインビジュアルになります。お店の門の画像を大きく使用しているため、説明がなくても料亭だとわかります。また、インパクトも申し分ありません。これをみて暖簾をくぐってみたいと思いませんでしたか。

メインビジュアルはサイトの顔になります。その目的は「何をしている会社なのかを視覚的に伝える」です。
メインビジュアルでお客様に感じてもらいたい点は3点あります。①お客様がベネフィットを感じるか、②お客様が目的のものがあると感じるか、③他にはない差別化要素があるか、です。この3点をメインビジュアルから感じることができないと、お客様はすぐにそのホームページから離脱してしまいます。

Google Analyticsなどのアクセス解析で使う「直帰率」という言葉があります。これは1ページだけ見て別のサイトに移動してしまった割合をさします。一般的な目安は40%といわれています。この直帰率が低いと、どんなに下層に魅力的なコンテンツを保有していても見てもらえませんし、コンバージョン(目的達成と同じ意味です)を得ることもできません。その直帰率に大きく影響するのがメインビジュアルなのです。

トップページを作る能力はウェブ制作会社の実力を測る良い判断材料です。ぜひ、インパクト・メッセージ性・デザイン性を兼ね備えたメインビジュアルを制作してくれる人を探してください。

モバイル・ファースト

昨今、スマホでのアクセスがPCを上回りつつあります。そしてこの傾向は今後も続く見通です。そのため、私はPCサイトよりスマホサイトを重視しています。実際にホームページを設計するときもスマホサイトを先にデザインをして、それを拡充させる形でPCサイトを制作しています。また、Googleもスマホに対応していないホームページの検索順位を下げると2015年に発表しています。

スマホの特徴を整理します。
まず、パソコンと比較して最も大きな違いは画面の小ささです。載せられる情報が極めて少量になるため、より厳しい目で情報を取捨選択する必要があります。3本線のハンバーガーメニューもそのような理由で誕生しています。
文字に関してもPCサイトのままだと非常に小さくなってしまいます。ズームインしなければ見れません。ユーザーに負荷を与えることになりますし、ズームインをすることにより全体のレイアウトなど総崩れになってしまいます。また、タップなど指での操作があることもPCサイトとの大きな違いです。片手でスマホを持って操作することが多いと思いますので、ストレスなく操作しやすいようにデザインする必要があります。最後に、外出先で操作する機会が多い点もパソコンと大きな違いですし、重要なポイントです。

スマホサイトを用意する方法は大きく2つあります。
1つ目は、PCサイトとは別で新たにスマホサイトを制作します(ドメインは同一です)。すでにPCサイトを持っていて、追加でスマホサイトを制作する場合におすすめです。
2つ目は、レスポンシブデザインでスマホサイトを制作する方法です。これは、ユーザーの閲覧環境によって自動的に最適なサイズに変更されるという制作方法です。アップルやソニーのサイトはこのレスポンシブデザインになっています。2010年に誕生し、ここ数年で非常に増えてきている手法になります。

スマホサイトで気をつけるポイントをいくつか紹介します。最も大切なことはUI(ユーザーインターフェイス)に気を配ることです。ユーザーの使用環境を想像し、快適なホームページ閲覧を提供しなければなりません。また、通信が不安定のため、データ容量を抑える必要があります。画像の使用をできる限り抑え、CSSでボタンなど制作するとよいでしょう。CSS3が標準化されて、以前は画像で用意していた部品を表現することが可能になりました。
情報の優先順位の高い順にレイアウトすることもPC以上に重要です。スマホユーザーはスキマ時間でホームページを見る場合が多く、長い時間の閲覧を期待できません。そのため、優先順位の高い順に上からレイアウトする必要があります。また、色に関しても、できる限りベース2色+アクセント1色の3色以下で統一することが理想です。スマホの利用場所が暗いところや明るいところと異なるため、見やすいように統一したほうがよろしいです。最後になりますが、スマホの最大の強みである電話でのお問い合せを有効活用しましょう。電話でのお問い合せボタンを積極的に導入し、画面の目立つ場所(右上に設置する場合が多いです)に設置すると良いと思います。

ウェブ公開後のカイゼンが大切

ホームページは開設がゴールではありません。スタートになります。得られるデータや他社サイトを参考にして、仮説を立て実行し、反省・改善の繰り返しの連続がとても重要になります。PDCAサイクルを如何に速く効率的に回転させるかがホームページ運用の勝負だといえます。
まず、次の2つの看板を見てください。

この2つの看板を見て、どちらのお店に入りたいと思いましたか。おそらく、ほとんどの人が右側だと思います。看板はお店の『顔』です。それがお手入れしていないとなると、なんとなくお店の中や料理も気を使っていないのではないかとマイナスの推測をしてしまいます。
ホームページも会社の『顔』です。そのため、お手入れされていないホームページでは見ている人がその会社やサービスに対して、信用できるかなと疑念を抱いてしまいがちです。せっかくのホームページでマイナスのイメージを持たれないためにウェブ公開後の更新運用は必須になってきます。
ここで2つのホームページを見てください。

前者は俳優の阿部寛さん、後者はアップル社のホームページになります。例を出して大変申し訳ないですが、前者は一昔前のデザイン(阿部寛さんのHPはファンの方が善意で制作しているとのことです)、後者は最新のデザインになります。見比べてみるとわかりやすいと思います。どのような印象をいだきましたか。

インターネットは歴史も浅く、変化の速度が大変速い業界です。この業界では、誰でも一目でわかるような大きな変化というのはあまり多くありません。ではどのようなことが起こっているかというと、とても小さな変化がたくさんあります。一つ一つの変化は気づきにくいですが、その変化の積み重ねで1年後になると全くの別物になっているというケースが多いです。つまり、PDCAサイクルを高速で回転させているのです。もし効果が薄いとデータが出た場合には、すぐ元に戻すことが可能です。なぜならば、一つ一つの変化は小さいものだからです。このやり方は大変効率が良いですし、インターネット業界の性格にもあったやり方だと私は思っています。

ホームページもこれと同様の運用改善が理想だと考えています。「小さくはじめて大きく育てる」ことを意識して、仮説を立て小さな修正を繰り返していくのがいいでしょう。是非、オンリーワンのホームページに育てていってください。

SEOについて

SEOを聞いたことがある人は多いと思います。SEOとは『Search Engine Oprimization』の略であり、検索エンジン最適化を意味する言葉です。一言で言うと、検索結果で上位に自社のホームページをヒットさせる対策をすることです。
SEOの重要性は周知のことだと思いますので、ここでは実際にどのようなことをしているのかご説明できればと思います。

結論から言うと、有益なコンテンツを配信し、多くの人にとって価値があると思われるような高品質のホームページを作ることです。
なぜならば検索エンジンを保有しているGoogleが常に、有益な情報へ検索がヒットするようにシステム自体を改善させているためです。小手先の技術で検索結果をよくすることは可能ですが、いずれGoogleに対応されて効果が軽減されてしまいます。そのため、現在のSEO対策のポイントを抑えながらも、優良ホームページを目指して改善していくというスタンスが良いと思います。

現在の具体的なSEO対策はとてもシンプルです。次の3点を理解し実行することが重要になります。①検索キーワードに応えるページにする、②ページの内容をGoogleにわかりやすく伝える、③リンクを集めることでサイト価値を高める。これらが競合サイトより高得点を得れれば、検索ヒットの順位は上昇します。

最後にSEOにおいて注意点があります。それは、SEO対策として根拠のない謳い文句がまかり通っている点です。Googleは検索エンジンのアルゴリズムの詳細をオープンにしていません。そのため、理屈では完全に対応できる業者はいないはずです。また、Googleのアルゴリズムも常に改善しているので、テクニック寄りの対策が効果の無いわけではありませんが、それをやれば確実に上がるというような単純なものでもないことを理解しなければいけません。

Googleは、ユーザーが入力した検索キーワードに対して、より良いコンテンツを検索結果として返すことでユーザーの満足度を高めたいと考えています。それを考慮して、優良コンテンツを自社サイトで構築することがSEO対策の一番の近道だと思います。

色について

ウェブデザインでもとても大切な色について簡単に説明します。色を変えるだけでホームページの印象は全く異なります。清潔感や高級感を表現するには白色をベースに制作します。実際に病院などのサイトでは白色が非常に多いです。弁護士などの士業では信頼を得るため、重厚感のある茶色や灰色など落ち着いた色を使うことが多いです。

各色に対するイメージは重要です。ホームページの色を選定する際も参考にします。しかし、その前に色の基本的性質についてご説明したいと思います。色には色相彩度明度という3つの属性があります。これらによって色は決まります。
色彩は下の円相環でみることができます。一般に、黄色、赤色、青色といった色みが色相です。それぞれは独立したものではなく、お互いが連続してつながりあって色相の輪をつくります。赤色と黄色の間には、両方の要素を含む色が無数に存在しています。

明度はその言葉通り、色の明るさです。白が最も高く、黒が最も低くなります。明るい色はさわやかで軽快な感じの色に、暗い色は重厚で落ち着いた感じの色になります。これを色の『軽重感』といいます。
彩度は、色の鮮やかさやくすみの程度を数量的に表したものです。彩度が高いほど、色相がイメージ通りのものになります。鮮やかな色は華やかな目立つ色になり、くすんだ色は、おだやかで上品な色になります。
下の表のように明度、彩度で区分けされたものをトーンといいます。これは色を考える際にとても重要なキーワードです。是非、覚えといてください。

色に関してウェブデザインで気をつけることは主に2つです。1つ目は、その色自体が持ってるイメージを意識してサイトに合うベース色を決めます。サイトの雰囲気やデザインの方向性が決まる非常に大切なところです。2つ目は、選定したベース色を軸として、残りのベース色1色とアクセント色1色を決めます。ここでの色を決める際に、捕色や類似色などの色の相性を考慮しますが、オススメなのが同一トーンでまとめることです。同一トーンとは、明度・彩度が同じで色相のみが異なる色の組み合わせです。統一感のある素敵なホームページを制作することができます。

タイポグラフィについて

タイポグラフィとは「書体・文字サイズ・ウエイト・行間・文字色」など文字に関する様々な属性を調整することで『美しく読みやすい』文字組みを実現する技法のことです。元々は印刷物に対して使われる言葉でしたが、現在ではウェブデザインにも使われています。
ホームページにおいてタイポグラフィは色と同様に重要です。直接会話することができないホームページでは、お客様とのコミュニケーションは全て『文字』が用いられるからです。実際に、タイポグラフィは可読性・アクセシビリティ・ユーザビリティに影響し、最終的には直帰率やページ遷移率にも影響します。
次の2つの文字を見てください。

印象が全く異なると思いますが、違いはわかりましたでしょうか。書体(以下、フォント)は大きく、明朝体とゴシック体に分かれます。「うろこ」というものがあり、横線より縦線の方が太いのが明朝体です。ゴシック体は縦線と横線が同じ太さです。一般的に「堅実性・信頼性・高級感」を伝えたい場合は明朝体を、「モダン・親しみやすい・力強い」といった印象を伝えたい場合はゴシック体を使用します。
次の文字を見てください。

フォントは色のような理論が全くありません。では、どのようにウェブデザインでフォントを選定しているかというと、デザイナーの感性によるところが大きいです。そこで私がオススメしたいのが、細い線のフォントです。モダンなデザインに最適なフォントだと思います。

最後に

最後になりますが、私のホームページ制作についての考えを簡単に書かせていただきます。
私は、ホームページを制作する時に「いかに信用を獲得するか」を最も大切にしています。証券営業をしていた時に、お客様から信用を得ることの大切さと難しさを痛感した影響が大きいですが、ビジネスで最も大切なことが信用だと思っているからです。信用さえあれば、あとは多少問題があってもなんとかなりますが、逆はあり得ません。

不必要なデザインや情報はなるべく削除したいと考えています。余白が有効的に作用するようなデザインが理想です。デザインをしていると、どうしても新しい技術や面白そうなデザインをしてみたいという誘惑にかられる時がありますが、「そのデザインが本当に必要なのか」と自問自答して、なるべく無駄のないデザインになるよう努力しています。

ホームページ制作の参考としてappleなどの優良IT企業のホームページは常にチェックしています。そこでどのような技術が採用されているのか、どのようなサイト構造になっているかは大変勉強になりますし、そこで採用されている技術が現在のトレンドだと考えています。そのため、ホームページ制作では優良IT企業を一つの指針としています。

個人的には、まだまだ技術面・デザイン面ともに発展途上ですし、この道にゴールはないと思っています。常に改善・向上していかないといけません。そのため、ウェブ制作者にはビジネスマンの素養も必要ですが、職人としての心構えも必要になります。自分の制作したホームページでお客様のビジネスがより良い方向に進んで行く、そして喜んだお客様の笑顔を見れれば幸いに思っています。