コメントはまだありませんホームページをどんなデザインにするか、悩みますよね。今回はウェブデザインの中でもホームページ制作初心者、というか社長さんや店舗オーナーさんでもできる、ワイヤーフレームの描き方について書いていきます。ワイヤーフレームとは?百聞は一見にしかず。こちらをご覧ください。PDTワイヤーフレームとは、線だけで描かれたウェブサイトの構造図です。Wire(線)Frame(枠)という名の通りです。上の絵をちょっと説明すると、ヘッダーは、ホームページの最上部にあるロゴやメニューがよく置かれるところコンテンツは、その名の通り「内容」であり、ページで一番メインのところフッターは、会社の著作権表示(コピーライト)などがよく置かれるところこんな感じです。Excelや専用のデザインソフトで綺麗に描かなくても、ホワイトボードとマーカーペン、もしくは紙とエンピツがあれば、誰でもすぐに作れるのがワイヤーフレームの良いところです。具体的にしてみましょう。例として「オンラインショップ」で考えてみます。PDT上で書いたように、ロゴ、メニュー、コピーライトを配置しました。その上で肝心のコンテンツ部に何を置こう?となるわけですが、ここでは一旦「オンラインショップ」を想定しています。商品がたくさんあるだろうということで、主力商品であるオススメ商品と、最新の商品を見せるエリアをざっくり描いてみました。PDTホームページっぽくなってきましたね!上段のメニューは、トップページに戻るためのリンクとして「ホーム」が必要そうあと2つくらい入るだろうけどここでは一旦空けておこうあと「会社」についてもページがいるかな中段のイチオシ商品エリアは、欲張りすぎもイチオシ感がなくなるので、3つまでにしてみよう。下段の最新入荷アイテムエリアは、写真が小さくてもいいからたくさん出して目に触れさせたいということで、縦3列の横5行で15写真ほど出そう!なんてイメージを起こしてみるとこうなる、というわけです。いった簡単なワイヤーフレームは、ホワイトボードとマーカーがあれば、誰でも始められます。今日から始められます。絵が上手い下手は、ワイヤーフレームでは関係ありません。Pixabayインターネットでホームページへの集客方法として欠かせないものが検索です。人々はそもそもどのように検索を使っているのでしょうか?なんで検索をするのか振り返ってみる僕たちはどういうときにネットで検索を使うでしょうか。何かを探している時、ですよね。質問があって、回答が欲しい時です。質問をGoogleなどの検索エンジンに打ち込んで、何か良い回答がないかを期待しています。検索結果をざっと眺めて、自分の質問についてベストな回答をしてくれそうなページをクリックします。カフェ」と打ってみると、このような検索結果に。古都京都を感じられる町家カフェ話題・穴場のカフェおすすめ和カフェこういった共通キーワードから、京都らしい特別感や落ち着き、日本らしさといった傾向がみられますね。カフェ」というキーワードで検索する人が求めているという裏づけでもあります。Pixabay嫌いなホームページの上位に挙がるものの1つが、スマートフォンで閲覧した時に見づらいサイトです。どんなサイトがスマホでNGなのかピンチイン・ピンチアウトしないとまともに見れないまったくスマホ対応していないとパソコン向けのホームページが表示されます。ちなみにこの記事がスマホ対応していなかったら、こんな感じになります。ピンチイン・ピンチアウトできないのに文字が見えない逆にピンチイン・ピンチアウトが封じてあるくせに文字が小さくて見えないもアウトです。PCサイトしかないのに、ピンチイン・ピンチアウトがなぜか封じてあったら悲劇としか言いようがありません。画像の中の文字が見えないことが見落とされがちです。横スクロールがでる画面がスマホの幅からはみ出していて、縦にも横にもスクロールできるとお客様はホームページの情報をうまく追うことができず、イライラして離脱してしまいます。スマホ対応するなら原則、縦にしかスクロールしてはいけません。スマホ未対応でも大丈夫なサイトどんなホームページでもスマホ対応しなければダメかというと、そうでもありません。訪れるお客様のほとんどがパソコンでアクセスする場合は、大丈夫です。一例でいうと、会社にいる時にしか見ないようなホームページ、例えば店舗向けの建築資材について検索して調べているような場合は、パソコンから見ることが多く、外でだったりプライベートとして見ることはかなり少ないと思われます。コンピュータへの侵入などを行うタイプのマルウェア。ネットワークの脆弱性を突いてきます。他のプログラムに寄生せず、単体で存在可能な点がコンピュータウィルスと異なります。Wi-Fi(ワイファイ)Wi-Fiとは、パソコンやスマホをコード無しでインターネットにつなぐ方式の一つ。無線LANとほぼ同じ意味で使われています。Wi-Fiは家庭やお店の光回線を無線で使えるようにしているので、スマホで接続すれば「月5ギガまで」といったスマホ通信量を消費しないで済みます。ちなみに読み方はワイファイで、ウィーフィーではありません笑ワイヤーフレームワイヤーフレームとは、ホームページをデザインするとき、各ページのレイアウトやコンテンツを検討する簡易デザインのこと。単純な線で描かれていて、手書きやエクセルなどで作ることも多いです。綺麗なデザインをする前に、内容や配置に注目するために使われます。ワールドワイドウェブ(WWW)ワールドワイドウェブとは、ウェブページが大量につながりあう仕組みのこと。ウェブとも呼ばれます。いうのを何度か見ていると思いますが、このwwwがワールドワイドウェブを表す文字です。ほとんどのホームページではwwwを入れなくても同じものだとみなしてアクセスできるため、普段意識することはあまりないかもしれません。ちなみにwww(笑笑笑)ではありません。PixabayらLine(ライン)Lineとは、国内アクティブユーザー数が7,000万人を超える人気メッセンジャーアプリ。文字や絵文字、スタンプ(感情を表現したキャラクター画像)、写真、動画などを手軽に送りあえるサービスです。電話番号か、Facebookアカウントがあれば利用できます(2017年10月現在)。【2017年9月】SNS人気ランキングラジオボタンラジオボタンとは、複数選択肢の中から1個だけを選ぶ、フォーム入力要素の一つ。ラベルラベルとは、フォーム要素の項目名のこと。nameの部分)ランディングページランディングページとは、ホームページの訪問者が一番最初に開いたページのこと。Googleアナリティクスでは、行動レポートの中で確認できます。リアルタイムリアルタイムとは、何かを行った時に即座に返答したり、相手に送信したりすること。システムでは通常、処理時間がかかるため、少なくみても数秒〜数十秒の待ち時間があります。それを極限まで少なくしたものを区別して、リアルタイムやリアルタイム処理などと呼びます。リキッドレイアウトリキッドレイアウトとは、ホームページの画面レイアウトの一つで、リスティング広告リスティング広告とは、検索エンジンの検索結果ページに表示される広告のこと。検索のキーワードと関連した広告を表示する仕組みで、キーワードには検索する人の願望が表れるため、クリックされやすい広告です。リターゲティング広告リターゲティング広告とは、お客様が自社ホームページで一度見た商品を別のホームページの広告枠で再度表示する広告のこと。ブラウザに情報を保存させることで実現しています。別名「追いかけてくる広告」。リモートリモートとは、遠隔操作のこと。リンクリンクとは、ホームページのページからページへの移動をつないでいる文字やボタンのこと。リンクを表す見栄えで最も多いのが、青い文字に下線が引いてあるパターンです。Googleの検索結果が典型例ですね。LinkedIn(リンクトイン)LinkedInは、世界最大のビジネスSNS。Facebookが個人向けの実名SNSなのに対し、LinkedInはビジネス向けの実名SNSです。プロフィールの登録も自分のビジネスを紹介するのに適した作りになっています。Microsoftにより2016年12月に買収されました。ルータールーターとは、壁の穴(モジュラージャック)から来ている光回線と、家やお店の中のコンピュータ機器を中継して、インターネットを使えるようにする機器のこと。最近ではWi-Fi機能を持つものがほとんどで、無線でインターネットを利用することが多くなりました。レイアウトレイアウトとは、Webデザインするときの配置のこと。各ページをデザインするときは、まずこのレイアウトをどうするかがポイントになります。ファーストビューに何を持ってくるかなどです。PixabayやYahoo!JAPAN(ヤフー!ジャパン)Yahoo!JAPANとは、日本の検索エンジン、かつポータルサイトのこと。日本の検索利用率トップを走っていましたが、検索システムの座を譲って今はほぼGoogleの検索結果を表示しており、実質日本の検索のほとんどはGoogleが占めています。それでもポータルサイト、インターネットの玄関口としてのイメージが確立しており、今でも毎日数億PVを集めています。ゆURL(ユーアールエル)URLとは、インターネット上でのホームページの住所のこと。YouTube(ユーチューブ)YouTubeとは、Google社に買収された世界最大の動画投稿サイト。無料で利用でき、スマホでも簡単に動画の閲覧、アップロードが可能です。ホームページに埋め込み動画を設置することもでき、動画の保持・通信はYouTubeに任せて、再生だけ自分のページですることが可能です。ユーザーユーザーとは、ホームページでいえば訪問者のこと。ホームページに訪れるユーザーとは、既存顧客も含まれますが、見込顧客(サービスに興味がある人)、潜在顧客(サービスを知れば買うかもしれない人)、それ以外の社員やその家族、サービスに興味がないけどたどり着いた人など訪問者すべてを指します。これら幅広いユーザーが訪れる中で、どうやってこちらが意図した人(潜在顧客など)の割合を増やすかが重要になってきます。キーワード選定はその一つの手段です。ユーザーという言葉は色んな場面で使われていて、その文脈によって意味がブレやすい言葉です。顧客とごちゃごちゃにならないよう気をつけましょう。ユーザビリティユーザビリティとは、ある特定のユーザーが、限定された利用状況の中で、特定の目的を達成するまでの正確さと効率のこと。「あらゆる人のユーザビリティに配慮して...」「全体のユーザビリティを向上させる」という使い方はしません。ターゲットユーザーを絞り込むこと。そのユーザーがどのようにサービスを利用するのか。具体的に何を達成するのか。ここまで絞り込んで初めて、正確さや効率を向上することができると、ユーザビリティの定義は教えてくれます。Wikipediaユニークユーザー(UU)ユニークユーザーとは、ホームページの訪問者数から重複しているユーザーを省いた、厳密な利用者のこと。Googleアナリティクスでは単にユーザー数と表示されています。余白とは、ホームページの各ページ周囲や配置された要素1つひとつの周りにある空白のこと。margin(マージン)ということもあります。限られた画面の中でたくさんの情報を表示しようと、詰め詰めでデザインされているホームページがありますが、全体が1つのカタマリに見えてかえってわかりにくく、直帰率(ページにきてすぐに離脱する率)を上げる要因になります。関係が深いものは近づけ、関係が遠い要素同士は離す。これだけでもホームページは見やすくなります。余白はしっかりとりましょう。software)すべてのこと。マルウェアとしては、コンピュータウィルス、ワーム、トロイの木馬などがあります。みむ無線LAN(むせんラン)無線LANとは、自分のパソコンやスマホにコードをつなぐことなく、インターネットや社内のネットワークにつなぐことができるシステムのこと。Wi-Fi(ワイファイ)とほぼ同じ意味で使われていますが、無線LANにいくつかある通信方式の1つがWi-Fiという位置付けです。めメッセンジャーメッセンジャーは、お互い知っている人同士が短いメッセージやスタンプ、写真などをリアルタイムにやりとりするサービスのこと。Messenger)で、IMと略されることもあります。複数人でグループを作ってやりとりすることもできますが、基本は1対1の気軽な会話がベースです。主なメッセンジャーとしては、LINE、Facebookメッセンジャー、Googleハングアウト、iPhoneなどのMessageアプリなどがあります。メタタグ(metaタグ)メタタグとは、ホームページの1枚1枚(ウェブページ)にそのページがどういうページかを記述する部分のこと。HTMLファイルの冒頭に書き込むもので、SEOに取り組むうえでも記述が欠かせません。メモリメモリとは、パソコンやスマホといったコンピュータ部品の1つで、一時的に高速処理をする作業場の役割をもつ部品のこと。高速処理が得意ですが、広いスペースが持てないこととデータをずっと保持することができません。料理店でたとえると「調理場」のことで、使い慣れたフライパンやよく使う食材が手の届くところに並べられているイメージです。家電量販店のパソコンコーナーに行くと、必ず記載されている項目の1つです。他の記載項目としては、CPU、ストレージがあります。モバイル広告モバイル広告とは、様々な種類があるネット広告をスマートフォンといった小さな画面で効果的に見せることに特化した広告のこと。Pixabayはパララックスパララックスとは、ホームページで画面をスクロールした際に、プログラムで速く動く部分と遅く動く部分をわざと作り、速い部分が自分の近く、遅い部分が遠くにあるように立体感を感じさせる手法のこと。日本語にすると「視差効果」。パンくずリストパンくずリストとは、トップページからどんな階層を通って現在のページなのかを見せたもの。お客様が「今ホームページのここら辺か」とすぐにわからせる助けになります。パンくずリスト自体がリンクになっているので、1つ上の階層に上がったり、トップページまで戻る際にも利用できます。本ブログでもパンくずリストを表示しています。ひふ不正アクセス不正アクセスとは、他人のパソコンや企業のサーバーに侵入して情報を盗み出したり、ホームページに膨大なアクセスをしてサーバーに過負荷をかけ機能停止させたりする行為のこと。攻撃者は、狙った個人や企業の人あてにコンピュータウィルスをメールで送りつけたり、相手のコンピュータで放置されている脆弱性を突いて不正アクセスを仕掛けてきます。1999年に不正アクセス禁止法が成立していて、行うと犯罪として捕まります。フラットデザインフラットデザインとは、グラデーションや影による立体感などの装飾表現をできるだけ排除した、平面的でシンプルなデザインのこと。過去にはコンピュータの画面上で見せるボタンは手で触れるわけじゃないのでボタンとわからない、といった課題があって影などで「ボタンっぽさ」を見せることが重要でした。近年はスマホの普及などで個人が画面上の操作に慣れ親しんだこともあって、何がどう操作できるかより、アイコンや色、文字だけでシンプルに表現することで装飾より中身に集中してもらおうという動きが起き、フラットデザインの普及に至っています。本ブログもフラットデザインで作られています。フッターフッター(Footer)とは、ホームページやアプリの画面で足元(Foot)つまり最下部の部分のエリアのこと。ブックマークブックマークとは、お気に入りのホームページにあとでアクセスしやすいよう、記録しておくこと。ChromeやSafariといったブラウザに標準でついていて、他にはサービスとしてPocketやはてなブックマークがあります。ブラウザブラウザとは、ホームページを見るために使われるソフトウェアのこと。Explorer(インターネット・エクスプローラー)など。ブログブログとは、ネット上に記事を投稿できるシステムのこと。投稿には、記事タイトル、本文、アイキャッチ画像、商品などのイメージ画像、引用先へのリンク、アフィリエイトタグ、埋め込み動画など様々な内容を書くことができます。個人が趣味で投稿しているものもあれば、経営者や担当者が企業として投稿しているブログもあります。ブログを書くシステムとして最も使われているのはWordPressです。他にアメーバブログやはてなブログといったサービスサイトが有名です。プラグインプラグインとは、本体のソフトウェアに後から機能を手軽に追加できる仕組みのこと。プラグインの豊富なソフトウェアとして、WordPressがあります。プレビュープレビューとは、ブログの投稿記事やホームページの画面を編集した際、実際のできあがり状態を保存前に確認できる機能のこと。プロバイダプロバイダとは、主にインターネット接続事業者のこと。インターネットプロバイダ(ISP)の略称。個人や企業は、プロバイダにインターネット利用料を払うことで、光回線やケーブルテレビ回線、ポケットWi-Fi(ワイファイ)などを通じて、インターネットを利用することができます。ヘッダーヘッダー(Header)とは、ホームページやアプリの画面で頭(Head)つまり最上部の部分のエリアのこと。最初に目にするエリアなので、グローバルナビゲーションが置かれることが多いです。ページビュー(PV)ページビューとは、ホームページで読まれたページ総数のこと。お客様Aさんが3ページ、Bさんが2ページ、Cさんが5ページ読んだとすると、ページビューは10となります。ホームページホームページとは、お店やビジネス、趣味、医療や公共機関など様々な情報をインターネットに掲載したページ群のこと。正しくはWebサイトやサイトと呼びますが、日本では「ホームページ」の名称で浸透しています。ポータルサイトポータルサイトとは、インターネット利用者が最初に訪れる「入り口」にあたるサイトのこと。主なポータルサイトとしては、Google、Yahoo!JAPANがあります。POPPOPとは、電子メールを受信するために利用されるルールのこと。電子メールの受信のためには、プロバイダの契約書類やメールに記載されている受信メールサーバー(POP)のユーザ名、パスワード、ホスト名をメールソフトに設定する必要があります。SEOの手法で、ホームページ内のみで対策をする方法。最低限やるべきで、かつ最大の効果があるのはタイトルの最適化です。他にもコンテンツ同士をどう連携するかなど、様々な対策があります。ナビゲーションナビゲーションとは、ホームページに訪れたお客様が目的のページに行くために利用するリンクのこと。メインのナビゲーションはグローバルナビゲーションと呼びます。なりすまし本人を装って偽物がメールやLINEでメッセージを送ってくること。メールは差出人名を偽装することは簡単なため、差出人名や内容だけで相手を判断すると引っかかる可能性があります。メールアドレスも確認しましょう。(ただしメールアドレスが絶対に偽装できないわけでもありません)最近ではLINEやFacebookでのなりすましが横行しています。LINEではiTunesカードを大量に買わせる行為が一時期横行していました。Facebookでは写真を友人のものをネットから盗んで名前も同じ名前にすると見分けがつきづらいため、つい友達許可してしまうということがあります。認知(デザイン用語)デザインでいう認知とは、人が見たり聞いたりした情報をどう解釈し、次にどう行動するかを考えること。認知心理学がベースになっています。有名な法則としてマジックナンバー4±1があり、これは人が短期に記憶できる限界数が多くても5、少ない場合は3までという研究結果で、ホームページのデザインでも主張する特徴を3つにするなど活かされています。認知(マーケティング用語)マーケティングでいう認知とは、商品やサービスを購入するまでの最初の段階のこと。購入までを最もシンプルに表すと、認知(商品を認識する)、欲求(商品をほしいと思う)、獲得(購入)の3ステップがあります。認知はすべての入り口にあたり、重要です。ぬねネット広告ネット広告とは、インターネット上で目にする広告のこと。種類として、ディスプレイ広告(バナー広告)、リスティング広告、アフィリエイト広告、ネイティブ広告(タイアップ広告)、モバイル広告、ビデオ広告などがあります。Pixabayたタイトルホームページでいうタイトルとは、タイトルタグのこと。囲まれた部分に書く文字のことで、ページを表すタイトルのことです。SEO上最も重要と言われており、適切なタイトルを付けるにはキーワード選定が欠かせません。同時期に流行した、多人数でリアルタイム(即時)に文字で会話するサービスのこと。近年のサービスのほとんどはリアルタイム性が高いため、Twitterでの返信やFacebookのコメント欄がチャットのように使われることも多く、様々なサービスの1機能として取り込まれています。1対1がメインのチャットをメッセンジャーと呼び、スマホの流行とLINEの人気ととともに爆発的に増えました。チャネルチャネルとは、ホームページへの訪問経路のこと。Search:検索、Referral:外部のリンク、Social:SNSから、Direct:ブラウザへの直接入力の4チャネルが確認できます。関連記事どこからお客様が来るか知っておこう!ネット集客の入り口6パターンつTwitter(ツイッター)Twitterとは、140文字に制限された中で出来事や考えを投稿しあうサービス。短文なので気軽に投稿でき、ブログのように構成や写真を用意する必要がないのが特徴。基本匿名でみんな利用していて、気軽でフランクな雰囲気ができており、企業アカウントもユーモアのある親しみやすいキャラクターが人気です。TwitterてDNS(ディーエヌエス)DNSとは、ブラウザに打ち込むURLから目当てのウェブサーバーがどこにいるのか紐付けをするサーバーのこと。Server(ドメイン・ネーム・サーバー)の略称。打った人に「それは182.22.59.229のことですね、こちらへどうぞ」と転送をかけています。と打っていただけると、Yahoo!Japanが表示されます。description(ディスクリプション)descriptionは、ホームページの各ページごとに1つ書き込める説明文。検索エンジンの検索結果でタイトルとともにこの説明文が出ることが多いため、適切な文章をいれておくことが大事です。トップページトップページとは、ホームページの玄関口となるページのこと。このホームページは何のためのページかを一瞬で伝えたり、目的別のメニューに訪問者を誘導する役割などがあります。ドメインドメインとは、インターネット上で個々のホームページを見分けるための名前。Yahoo!JAPANのドメインはyahoo.co.jp、Facebookのドメインはfacebook.comといったように、サービス名・会社名をドメインに含むことがほとんどです。お客様が覚えやすいドメインにすることは大事ですね。