カテゴリー
ホームページ

自分で作るホームページ:ワイヤーフレームを描こう!

ホームページをどんなデザインにするか、悩みますよね。

今回はウェブデザインの中でもホームページ制作初心者、というか社長さんや店舗オーナーさんでもできる、ワイヤーフレームの描き方について書いていきます。

ワイヤーフレームとは?

百聞は一見にしかず。まずはこちらをご覧ください。

ワイヤーフレームとは、線だけで描かれたウェブサイトの構造図です。Wire(線)Frame(枠)という名の通りです。

上の絵をちょっと説明すると、

  • ヘッダーは、ホームページの最上部にあるロゴやメニューがよく置かれるところ
  • コンテンツは、その名の通り「内容」であり、ページで一番メインのところ
  • フッターは、会社の著作権表示(コピーライト)などがよく置かれるところ

こんな感じです。

Excelや専用のデザインソフトで綺麗に描かなくても、ホワイトボードとマーカーペン、もしくは紙とエンピツがあれば、誰でもすぐに作れるのがワイヤーフレームの良いところです。

もうちょっと具体的にしてみましょう。例として「オンラインショップ」で考えてみます。

上で書いたように、ロゴ、メニュー、コピーライトを配置しました。

その上で肝心のコンテンツ部に何を置こう?となるわけですが、ここでは一旦「オンラインショップ」を想定しています。

商品がたくさんあるだろうということで、主力商品であるオススメ商品と、最新の商品を見せるエリアをざっくり描いてみました。

もう少し具体的にしてみると、

ホームページっぽくなってきましたね!

上段のメニューは、

  • トップページに戻るためのリンクとして「ホーム」が必要そう
  • あと2つくらい入るだろうけどここでは一旦空けておこう
  • あと「会社」についてもページがいるかな

中段のイチオシ商品エリアは、欲張りすぎもイチオシ感がなくなるので、3つまでにしてみよう。

下段の最新入荷アイテムエリアは、写真が小さくてもいいからたくさん出して目に触れさせたいということで、縦3列の横5行で15写真ほど出そう!

なんてイメージを起こしてみるとこうなる、というわけです。

こういった簡単なワイヤーフレームは、ホワイトボードとマーカーがあれば、誰でも始められます。

今日から始められます。絵が上手い下手は、ワイヤーフレームでは関係ありません。

だってただの線なんですから笑

気にせずに思うままにホームページのイメージを絵に書いて、それを制作会社やデザイナーさんに伝えていきましょう!

こういった簡単な絵でも、あるとないとでは出来上がるホームページには大きな差がつきますよ!

それではまた!

カテゴリー
ホームページ

ネット集客の方法:検索の使われ方を知ろう!

インターネットでホームページへの集客方法として欠かせないものが検索です。

人々はそもそもどのように検索を使っているのでしょうか?

なんで検索をするのか振り返ってみる

僕たちはどういうときにネットで検索を使うでしょうか。

何かを探している時、ですよね。

質問があって、回答が欲しい時です。

質問をGoogleなどの検索エンジンに打ち込んで、何か良い回答がないかを期待しています。

検索結果をざっと眺めて、自分の質問についてベストな回答をしてくれそうなページをクリックします。

例えば、「京都 おすすめ カフェ」と打ってみると、

このような検索結果に。

  • 絶対に行きたい
  • どうせ行くなら足を運びたい
  • 秘密にしたいおしゃれカフェ
  • 京都在住カメラマンが厳選
  • 古都京都を感じられる町家カフェ
  • 話題・穴場のカフェ
  • おすすめ和カフェ

こういった共通キーワードから、京都らしい特別感や落ち着き、日本らしさといった傾向がみられますね。

つまり京都らしさ、特別感、せっかくだから感、日本らしさ、癒しといったコンテンツを「京都 おすすめ カフェ」というキーワードで検索する人が求めているという裏づけでもあります。

 

カテゴリー
ホームページ

嫌われるホームページ:スマホ未対応

嫌いなホームページの上位に挙がるものの1つが、スマートフォンで閲覧した時に見づらいサイトです。

どんなサイトがスマホでNGなのか

ピンチイン・ピンチアウトしないとまともに見れない

まったくスマホ対応していないとパソコン向けのホームページが表示されます。

ほとんどの場合、ホームページ全体が圧縮されたような見た目になり、字も画像も小さく見えず、二本指でピンチイン・ピンチアウト(指で広げたり縮めたりして画面を拡大・縮小すること)してなんとか見える… 状態になります。

ちなみにこの記事がスマホ対応していなかったら、こんな感じになります。

ピンチイン・ピンチアウトできないのに文字が見えない

逆にピンチイン・ピンチアウトが封じてあるくせに文字が小さくて見えないもアウトです。PCサイトしかないのに、ピンチイン・ピンチアウトがなぜか封じてあったら悲劇としか言いようがありません。

特に画像の中の文字が見えないことが見落とされがちです。

横スクロールがでる

画面がスマホの幅からはみ出していて、縦にも横にもスクロールできるとお客様はホームページの情報をうまく追うことができず、イライラして離脱してしまいます。

スマホ対応するなら原則、縦にしかスクロールしてはいけません。

スマホ未対応でも大丈夫なサイト

どんなホームページでもスマホ対応しなければダメかというと、そうでもありません。

訪れるお客様のほとんどがパソコンでアクセスする場合は、大丈夫です。

一例でいうと、会社にいる時にしか見ないようなホームページ、例えば店舗向けの建築資材について検索して調べているような場合は、パソコンから見ることが多く、外でだったりプライベートとして見ることはかなり少ないと思われます。

カテゴリー
ホームページ

【わ行】インターネット・ホームページの用語

ワーム

ワームとは、ネットワークを経由して自分を送りつけ、単独で破壊活動、自己増殖、他のコンピュータへの侵入などを行うタイプのマルウェア。ネットワークの脆弱性を突いてきます。

他のプログラムに寄生せず、単体で存在可能な点がコンピュータウィルスと異なります。

Wi-Fi(ワイファイ)

Wi-Fiとは、パソコンやスマホをコード無しでインターネットにつなぐ方式の一つ。

無線LANとほぼ同じ意味で使われています。Wi-Fiは家庭やお店の光回線を無線で使えるようにしているので、スマホで接続すれば「月5ギガまで」といったスマホ通信量を消費しないで済みます。

ちなみに読み方はワイファイで、ウィーフィーではありません笑

ワイヤーフレーム

ワイヤーフレームとは、ホームページをデザインするとき、各ページのレイアウトコンテンツを検討する簡易デザインのこと。

単純な線で描かれていて、手書きやエクセルなどで作ることも多いです。綺麗なデザインをする前に、内容や配置に注目するために使われます。

ワールドワイドウェブ(WWW)

ワールドワイドウェブとは、ウェブページが大量につながりあう仕組みのこと。単にウェブとも呼ばれます。

ブラウザのアドレスバー(URLを入力するところ)で、http://www.xxx…. というのを何度か見ていると思いますが、このwwwがワールドワイドウェブを表す文字です。ほとんどのホームページではwwwを入れなくても同じものだとみなしてアクセスできるため、普段意識することはあまりないかもしれません。

ちなみにwww(笑笑笑)ではありません。ご注意ください。

カテゴリー
ホームページ

【ら行】インターネット・ホームページの用語

Line(ライン)

Lineとは、国内アクティブユーザー数が7,000万人を超える人気メッセンジャーアプリ。

文字や絵文字、スタンプ(感情を表現したキャラクター画像)、写真、動画などを手軽に送りあえるサービスです。電話番号か、Facebookアカウントがあれば利用できます(2017年10月現在)。

関連記事
【2017年9月】SNS人気ランキング

ラジオボタン

ラジオボタンとは、複数選択肢の中から1個だけを選ぶ、フォーム入力要素の一つ。

ラベル

ラベルとは、フォーム要素の項目名のこと。(Your nameの部分)

ランディングページ

ランディングページとは、ホームページの訪問者が一番最初に開いたページのこと。

Googleアナリティクスでは、行動レポートの中で確認できます。

リアルタイム

リアルタイムとは、何かを行った時に即座に返答したり、相手に送信したりすること。

システムでは通常、処理時間がかかるため、少なくみても数秒〜数十秒の待ち時間があります。それを極限まで少なくしたものを区別して、リアルタイムやリアルタイム処理などと呼びます。

リキッドレイアウト

リキッドレイアウトとは、ホームページの画面レイアウトの一つで、

リスティング広告

リスティング広告とは、検索エンジンの検索結果ページに表示される広告のこと。

検索のキーワードと関連した広告を表示する仕組みで、キーワードには検索する人の願望が表れるため、クリックされやすい広告です。

リターゲティング広告

リターゲティング広告とは、お客様が自社ホームページで一度見た商品を別のホームページの広告枠で再度表示する広告のこと。

ブラウザに情報を保存させることで実現しています。別名「追いかけてくる広告」。

リモート

リモートとは、遠隔操作のこと。

リンクとは、ホームページのページからページへの移動をつないでいる文字やボタンのこと。

リンクを表す見栄えで最も多いのが、青い文字に下線が引いてあるパターンです。Googleの検索結果が典型例ですね。

LinkedIn(リンクトイン)

LinkedInは、世界最大のビジネスSNS。

Facebookが個人向けの実名SNSなのに対し、LinkedInはビジネス向けの実名SNSです。プロフィールの登録も自分のビジネスを紹介するのに適した作りになっています。

Microsoftにより2016年12月に買収されました。

ルーター

ルーターとは、壁の穴(モジュラージャック)から来ている光回線と、家やお店の中のコンピュータ機器を中継して、インターネットを使えるようにする機器のこと。

最近ではWi-Fi機能を持つものがほとんどで、無線でインターネットを利用することが多くなりました。

レイアウト

レイアウトとは、Webデザインするときの配置のこと。

各ページをデザインするときは、まずこのレイアウトをどうするかがポイントになります。たとえばファーストビューに何を持ってくるかなどです。

レスポンシブデザイン

 

レスポンス広告

レンタルサーバー

 

ログ

 

カテゴリー
ホームページ

【や行】インターネット・ホームページの用語

Yahoo!JAPAN(ヤフー!ジャパン)

Yahoo!JAPANとは、日本の検索エンジン、かつポータルサイトのこと。

かつては日本の検索利用率トップを走っていましたが、検索システムの座を譲って今はほぼGoogleの検索結果を表示しており、実質日本の検索のほとんどはGoogleが占めています。

それでもポータルサイト、インターネットの玄関口としてのイメージが確立しており、今でも毎日数億PVを集めています。

URL(ユーアールエル)

URLとは、インターネット上でのホームページの住所のこと。

ブラウザのアドレスバーに入力されている英数字のことで、このページのURLは https://solight.jp/blog/glossary-of-internet-and-homepage-with-y-line/ になります。

YouTube(ユーチューブ)

YouTubeとは、Google社に買収された世界最大の動画投稿サイト。

無料で利用でき、スマホでも簡単に動画の閲覧、アップロードが可能です。ホームページに埋め込み動画を設置することもでき、動画の保持・通信はYouTubeに任せて、再生だけ自分のページですることが可能です。

ユーザー

ユーザーとは、ホームページでいえば訪問者のこと。

ホームページに訪れるユーザーとは、既存顧客も含まれますが、見込顧客(サービスに興味がある人)、潜在顧客(サービスを知れば買うかもしれない人)、それ以外の社員やその家族、サービスに興味がないけどたどり着いた人など訪問者すべてを指します。

これら幅広いユーザーが訪れる中で、どうやってこちらが意図した人(潜在顧客など)の割合を増やすかが重要になってきます。キーワード選定はその一つの手段です。

ユーザーという言葉は色んな場面で使われていて、その文脈によって意味がブレやすい言葉です。特に顧客とごちゃごちゃにならないよう気をつけましょう。

ユーザビリティ

ユーザビリティとは、ある特定のユーザーが、限定された利用状況の中で、特定の目的を達成するまでの正確さと効率のこと。

「あらゆる人のユーザビリティに配慮して…」「全体のユーザビリティを向上させる」という使い方はしません。

ターゲットユーザーを絞り込むこと。そのユーザーがどのようにサービスを利用するのか。そして具体的に何を達成するのか。ここまで絞り込んで初めて、正確さや効率を向上することができると、ユーザビリティの定義は教えてくれます。

ユーザビリティ – Wikipedia

ユニークユーザー(UU)

ユニークユーザーとは、ホームページの訪問者数から重複しているユーザーを省いた、厳密な利用者のこと。

Googleアナリティクスでは単にユーザー数と表示されています。

余白

余白とは、ホームページの各ページ周囲や配置された要素1つひとつの周りにある空白のこと。margin(マージン)ということもあります。

限られた画面の中でたくさんの情報を表示しようと、詰め詰めでデザインされているホームページがありますが、全体が1つのカタマリに見えてかえってわかりにくく、直帰率(ページにきてすぐに離脱する率)を上げる要因になります。

関係が深いものは近づけ、関係が遠い要素同士は離す。これだけでもホームページは見やすくなります。余白はしっかりとりましょう。

カテゴリー
ホームページ

【ま行】インターネット・ホームページの用語

マルウェア

マルウェアとは、悪意のあるソフトウェア(malicious software)すべてのこと。

マルウェアとしては、コンピュータウィルス、ワーム、トロイの木馬などがあります。

無線LAN(むせんラン)

無線LANとは、自分のパソコンやスマホにコードをつなぐことなく、インターネットや社内のネットワークにつなぐことができるシステムのこと。

Wi-Fi(ワイファイ)とほぼ同じ意味で使われていますが、無線LANにいくつかある通信方式の1つがWi-Fiという位置付けです。

メッセンジャー

メッセンジャーは、お互い知っている人同士が短いメッセージやスタンプ、写真などをリアルタイムにやりとりするサービスのこと。

正式名はインスタントメッセンジャー(Instant Messenger)で、IMと略されることもあります。

複数人でグループを作ってやりとりすることもできますが、基本は1対1の気軽な会話がベースです。

主なメッセンジャーとしては、LINE、Facebookメッセンジャー、Googleハングアウト、iPhoneなどのMessageアプリなどがあります。

メタタグ(metaタグ)

メタタグとは、ホームページの1枚1枚(ウェブページ)にそのページがどういうページかを記述する部分のこと。

HTMLファイルの冒頭に書き込むもので、SEOに取り組むうえでも記述が欠かせません。

メモリ

メモリとは、パソコンやスマホといったコンピュータ部品の1つで、一時的に高速処理をする作業場の役割をもつ部品のこと。

高速処理が得意ですが、広いスペースが持てないこととデータをずっと保持することができません。

料理店でたとえると「調理場」のことで、使い慣れたフライパンやよく使う食材が手の届くところに並べられているイメージです。

家電量販店のパソコンコーナーに行くと、必ず記載されている項目の1つです。他の記載項目としては、CPU、ストレージがあります。

モバイル広告

モバイル広告とは、様々な種類があるネット広告をスマートフォンといった小さな画面で効果的に見せることに特化した広告のこと。

カテゴリー
ホームページ

【は行】インターネット・ホームページの用語

パララックス

パララックスとは、ホームページで画面をスクロールした際に、プログラムで速く動く部分と遅く動く部分をわざと作り、速い部分が自分の近く、遅い部分が遠くにあるように立体感を感じさせる手法のこと。日本語にすると「視差効果」。

パンくずリスト

パンくずリストとは、トップページからどんな階層を通って現在のページなのかを見せたもの。

お客様が「今ホームページのここら辺か」とすぐにわからせる助けになります。またパンくずリスト自体がリンクになっているので、1つ上の階層に上がったり、トップページまで戻る際にも利用できます。

本ブログでもパンくずリストを表示しています。

不正アクセス

不正アクセスとは、他人のパソコンや企業のサーバーに侵入して情報を盗み出したり、ホームページに膨大なアクセスをしてサーバーに過負荷をかけ機能停止させたりする行為のこと。

攻撃者は、狙った個人や企業の人あてにコンピュータウィルスをメールで送りつけたり、相手のコンピュータで放置されている脆弱性を突いて不正アクセスを仕掛けてきます。

1999年に不正アクセス禁止法が成立していて、行うと犯罪として捕まります。

フラットデザイン

フラットデザインとは、グラデーションや影による立体感などの装飾表現をできるだけ排除した、平面的でシンプルなデザインのこと。

過去にはコンピュータの画面上で見せるボタンは手で触れるわけじゃないのでボタンとわからない、といった課題があって影などで「ボタンっぽさ」を見せることが重要でした。

しかし近年はスマホの普及などで個人が画面上の操作に慣れ親しんだこともあって、何がどう操作できるかより、アイコンや色、文字だけでシンプルに表現することで装飾より中身に集中してもらおうという動きが起き、フラットデザインの普及に至っています。

本ブログもフラットデザインで作られています。

フッター

フッター(Footer)とは、ホームページやアプリの画面で足元(Foot)つまり最下部の部分のエリアのこと。

ブックマーク

ブックマークとは、お気に入りのホームページにあとでアクセスしやすいよう、記録しておくこと。

ChromeやSafariといったブラウザに標準でついていて、他にはサービスとしてPocketはてなブックマークがあります。

ブラウザ

ブラウザとは、ホームページを見るために使われるソフトウェアのこと。

現在の主流ブラウザは、Google Chrome(グーグル・クローム)、Safari(サファリ)、Firefox(ファイアーフォックス)、Internet Explorer(インターネット・エクスプローラー)など。

ブログ

ブログとは、ネット上に記事を投稿できるシステムのこと。

投稿には、記事タイトル、本文、アイキャッチ画像、商品などのイメージ画像、引用先へのリンク、アフィリエイトタグ、埋め込み動画など様々な内容を書くことができます。

個人が趣味で投稿しているものもあれば、経営者や担当者が企業として投稿しているブログもあります。

ブログを書くシステムとして最も使われているのはWordPressです。他にアメーバブログやはてなブログといったサービスサイトが有名です。

プラグイン

プラグインとは、本体のソフトウェアに後から機能を手軽に追加できる仕組みのこと。

プラグインの豊富なソフトウェアとして、WordPressがあります。

プレビュー

プレビューとは、ブログの投稿記事やホームページの画面を編集した際、実際のできあがり状態を保存前に確認できる機能のこと。

プロバイダ

プロバイダとは、主にインターネット接続事業者のこと。インターネットプロバイダ(ISP)の略称。

個人や企業は、プロバイダにインターネット利用料を払うことで、光回線やケーブルテレビ回線、ポケットWi-Fi(ワイファイ)などを通じて、インターネットを利用することができます。

ヘッダー

ヘッダー(Header)とは、ホームページやアプリの画面で頭(Head)つまり最上部の部分のエリアのこと。

最初に目にするエリアなので、グローバルナビゲーションが置かれることが多いです。

ページビュー(PV)

ページビューとは、ホームページで読まれたページ総数のこと。

お客様Aさんが3ページ、Bさんが2ページ、Cさんが5ページ読んだとすると、ページビューは10となります。

ホームページ

ホームページとは、お店やビジネス、趣味、医療や公共機関など様々な情報をインターネットに掲載したページ群のこと。

正しくはWebサイトやサイトと呼びますが、日本では「ホームページ」の名称で浸透しています。

ポータルサイト

ポータルサイトとは、インターネット利用者が最初に訪れる「入り口」にあたるサイトのこと。

主なポータルサイトとしては、Google、Yahoo!JAPANがあります。

POP

POPとは、電子メールを受信するために利用されるルールのこと。

電子メールの受信のためには、プロバイダの契約書類やメールに記載されている受信メールサーバー(POP)のユーザ名、パスワード、ホスト名をメールソフトに設定する必要があります。

カテゴリー
ホームページ

【な行】インターネット・ホームページの用語

内部対策

内部対策とは、SEOの手法で、ホームページ内のみで対策をする方法。

最低限やるべきで、かつ最大の効果があるのはタイトルの最適化です。他にもコンテンツ同士をどう連携するかなど、様々な対策があります。

ナビゲーション

ナビゲーションとは、ホームページに訪れたお客様が目的のページに行くために利用するリンクのこと。

最もメインのナビゲーションはグローバルナビゲーションと呼びます。

なりすまし

本人を装って偽物がメールやLINEでメッセージを送ってくること。

メールは差出人名を偽装することは簡単なため、差出人名や内容だけで相手を判断すると引っかかる可能性があります。ちゃんとメールアドレスも確認しましょう。(ただしメールアドレスが絶対に偽装できないわけでもありません)

最近ではLINEやFacebookでのなりすましが横行しています。LINEではiTunesカードを大量に買わせる行為が一時期横行していました。Facebookでは写真を友人のものをネットから盗んで名前も同じ名前にすると見分けがつきづらいため、つい友達許可してしまうということがあります。

認知(デザイン用語)

デザインでいう認知とは、人が見たり聞いたりした情報をどう解釈し、次にどう行動するかを考えること。

認知心理学がベースになっています。有名な法則としてマジックナンバー4±1があり、これは人が短期に記憶できる限界数が多くても5、少ない場合は3までという研究結果で、ホームページのデザインでも主張する特徴を3つにするなど活かされています。

認知(マーケティング用語)

マーケティングでいう認知とは、商品やサービスを購入するまでの最初の段階のこと。

購入までを最もシンプルに表すと、認知(商品を認識する)、欲求(商品をほしいと思う)、獲得(購入)の3ステップがあります。認知はすべての入り口にあたり、重要です。

 

ネット広告

ネット広告とは、インターネット上で目にする広告のこと。

種類として、ディスプレイ広告(バナー広告)、リスティング広告、アフィリエイト広告、ネイティブ広告(タイアップ広告)、モバイル広告、ビデオ広告などがあります。

 

 

カテゴリー
ホームページ

【た行】インターネット・ホームページの用語

タイトル

ホームページでいうタイトルとは、タイトルタグのこと。

HTMLで<title></title>←タイトルタグ に囲まれた部分に書く文字のことで、ページを表すタイトルのことです。SEO上最も重要と言われており、適切なタイトルを付けるにはキーワード選定が欠かせません。

チャット

チャットとは、掲示板 と同時期に流行した、多人数でリアルタイム(即時)に文字で会話するサービスのこと。

近年のサービスのほとんどはリアルタイム性が高いため、Twitterでの返信やFacebookのコメント欄がチャットのように使われることも多く、様々なサービスの1機能として取り込まれています。

1対1がメインのチャットをメッセンジャーと呼び、スマホの流行とLINEの人気ととともに爆発的に増えました。

チャネル

チャネルとは、ホームページへの訪問経路のこと。

Googleアナリティクスでは、Organic Search:検索、Referral:外部のリンク、Social:SNSから、Direct:ブラウザへの直接入力の4チャネルが確認できます。

関連記事

どこからお客様が来るか知っておこう!ネット集客の入り口6パターン

Twitter(ツイッター)

Twitterとは、140文字に制限された中で出来事や考えを投稿しあうサービス。

短文なので気軽に投稿でき、ブログのように構成や写真を用意する必要がないのが特徴。基本匿名でみんな利用していて、気軽でフランクな雰囲気ができており、企業アカウントもユーモアのある親しみやすいキャラクターが人気です。

Twitter

DNS(ディーエヌエス)

DNSとは、ブラウザに打ち込むURLから目当てのウェブサーバーがどこにいるのか紐付けをするサーバーのこと。Domain Name Server(ドメイン・ネーム・サーバー)の略称。

たとえば yahoo.co.jp(ドメイン)は 182.22.59.229 という番地(IPアドレス)がインターネット上の本当の住所で、DNSはブラウザに yahoo.co.jp を打った人に「それは182.22.59.229のことですね、こちらへどうぞ」と転送をかけています。

試しにブラウザに 182.22.59.229 と打っていただけると、Yahoo!Japanが表示されます。

description(ディスクリプション)

descriptionは、ホームページの各ページごとに1つ書き込める説明文。

検索エンジンの検索結果でタイトルとともにこの説明文が出ることが多いため、適切な文章をいれておくことが大事です。

トップページ

トップページとは、ホームページの玄関口となるページのこと。

このホームページは何のためのページかを一瞬で伝えたり、目的別のメニューに訪問者を誘導する役割などがあります。

ドメイン

ドメインとは、インターネット上で個々のホームページを見分けるための名前。

たとえばYahoo!JAPANのドメインはyahoo.co.jp、Facebookのドメインはfacebook.comといったように、サービス名・会社名をドメインに含むことがほとんどです。

お客様が覚えやすいドメインにすることは大事ですね。