非同期スニペット

「Web design」カテゴリーのブログアーカイブ

無料 ご相談承ってます!

電話 078-955-7461(平日 -)お気軽にご連絡ください!
打合せなどで電話に出れない場合がございます。その場合は、フォームもしくは 070-5503-3830までお手数をおかけしますがご連絡ください。

私たちの実績
(→ 実績一覧へ

Webデザインやグラフィックデザインの実績をご紹介しております。

お知らせ

ブログ最新の10件
(→ 記事一覧へ

事務所案内

  • ワサビ株式会社
  • マーケティング部(東京オフィス)
  • 〒142-0041
    東京都品川区戸越1-21-15 創建ビル4F
  • 本社
  • 〒658-0065
    兵庫県神戸市東灘区御影山手4-10-21
  •    
  • マーケティング部・デザイン室・開発室
  • 〒657-0864
    兵庫県神戸市灘区新在家南町1-1
  • TEL. 078-955-7461
  • 受付時間: 平日 -
  • マーケティング部(福岡オフィス)
  • 〒812-0053
    福岡県福岡市東区箱崎2-10
会社の詳細情報は、こちら

Work with us!

私たちのビジネスの成功は、社会に貢献できると確信してます。

ワサビは、才能や情熱を持った方との出会いを待ってます。

インターネットで出来る事、その可能性を仕事にしたい方は、ご連絡ください!

採用の詳細は、こちら

ソーシャルメディア

パスワードで制限されている場合、パスワード入力が必須になります。パスワードが必要な方は、お手数をおかけしますがこちらからお問い合わせください。

ホームページの写真をコピー(転用・保存)できないようにしたい。どうすれば?

投稿日:

よくある質問

ホームページの写真をコピー(転用・保存)できないようにしたい。どうすれば?

結論としてはあまりおススメしない

方法の説明に入る前にいきなり結論ですが、基本的にはあまりおススメしません。
というのは簡単にコピー(転用・保存)できないように対処するのは技術的には可能ですが、対応策も色々あるため最終的には優先度と費用面の兼ね合いになるかと思います。
それではホームページの写真をコピー(転用・保存)できないようにする方法下記にご紹介します。

方法1、右クリックできないようにしてしまう

画像を保存する際に一般的で簡単なのは画像を右クリックし「名前を付けて画像を保存」をクリックする方法かと思います。右クリックすると画像保存以外にも印刷やソース表示等色々な選択肢がでてきますが、この右クリック自体を禁止してしまうということがJavaScript等のプログラムを組みこむことで可能になります。組み込むと右クリックしてもメニュー選択肢が出て来なくなるため画像のコピー(転用・保存)ができなくなります。

方法2、背景(バックグラウンド)に組み込んでしまう

もう一つの方法として背景(バックグラウンド)に組み込んでしまうというのがあります。背景に設定されていると右クリックで「名前をつけて保存」をクリックしても画像でなくウェブページが全体保存されてしまい画像を保存することができません。画像を背景に設定する場合とそうでない場合の違いなどは下記ご参考下さい。

参考:ホームページの画像がコピーできない、印刷できない。

コピー対策をしても少し工夫するとコピー(転用・保存)は可能

これらの方法で簡単にはコピーできなくなるので試してみて下さい。但し、これで安心!とはいかず下記のような方法を使うと結局は画像を転用することも可能になります。

  1. ・欲しい画像の部分だけのスクリーンショットを取る。
  2. ・ブラウザの設定でJavaScript自体を無効にしてしまう。

技術的に全てを防ぐのは難しくいたちごっこになってしまうと思うので、悪意をもって不正使用された場合の方針などを示しておくというのも対処法の一つかもしれません。

ホームページ制作 担当者は、何から始めるのか

投稿日:

nayami

いざホームページを作ろう!と思った際に何から手をつけたらよいでしょうか。

弊社でもよくこういったご質問を頂きます。基本的には制作会社と二人三脚で作りあげるものなので不明な点などは随時制作会社に質問をしたら良いのですが、制作会社は決めたけどもまだ関係性ができていないし気軽に質問がしにくい、そもそも何を質問したら良いかも分からない。

そんな時のためにホームページ制作において基本的に用意することや決めることをご紹介します。

1、ホームページの目的を決める

まずは一番大切なこととして何故ホームページを作るのかというホームページの目的を再確認しましょう。

ひと昔前でしたらハードルが高かったホームページ制作も今では全体的な価格も下がり、ブログサービスやホームページビルダーなど専門の会社に頼まずとも制作出来る時代になり、他社も作っているから自社も作らないとということもあると思います。

その思いはもちろん大切ですし今ではホームページを持っていないことがマイナス要素になってしまうので作ることは重要なのですが、制作のための目的を明確にしておかないと、結果作って終わりということにもなりかねないですし運用するにも迷走してしまいます。
大きな方向性としては下記の3つです。

3つの目的

  1. ・会社案内としての情報提供ツール目的
  2. ・売上や問い合わせを上げるためのマーケティングツール目的
  3. ・求職者に対して自社を知ってもらうための採用ツール目的

ここはホームページ制作会社も立ち入ることができない部分なので改めて制作目的を確認し出来れば文章にすることが大切です。そうすることにより制作会社と情報共有も図れますし、振り返りに使うこともできます。

2、ドメインを取得する

「ドメイン」あまり耳慣れない言葉かもしれませんが、いわばインターネット上の看板であり住所のようなものでドメインで検索することによりホームページが表示され、ドメインを見ることによりある程度サイトの内容が想像できたりするものです。

ドメインはホームページを公開するためには必須なものです。ドメインの取得自体はどなたでもできるのでお客様ご自身で取得も可能ですが、その後の維持管理であったりそのドメインを利用してホームページを見れるようにする設定などが必要になってくるので基本的には制作会社さんに取得代行と管理を依頼することをおススメします。

ではどんなドメインを取得すれば良いのでしょうか。

以前ブログでも書かせて頂いたので下記参考も併せてご確認頂ければと思います。

ドメイン取得の3つのポイントは

・co.jpを取得するのか。それ以外(.com、.jp等)を取得するのか
・分かりやすくサイト内容がイメージができるドメインか。
・他サイトと同じようなドメインではないか
になります。

ドメインは早いもの勝ちになるのでもしかしたら既に取得されてしまっているかもしれません。いくつかご自身でも候補を考えて制作会社に相談してみて下さい。

ちなみに弊社ドメインは社名からwasabi3.comです。
ドメインからあまりサイトや事業内容はイメージできないかもしれませんが・・、社名の由来は下記ご参考下さい。

参考:社名の由来

参考:ドメイン名を考える際に気をつけたいポイント
参考:co.jpとは? 他ドメインとの違いと取得情報
参考:独自ドメインと商標

3、サイトマップを考える

なんとなく言葉からイメージできるかもしれませんが、サイトマップとはホームページ内のメニュー(会社案内、事業案内、料金一覧、お問い合わせ等々)の並び、骨格となる設計のことです。本でいったら目次のようなもの。

サイトマップは制作会社の見積材料にもなるので制作が決まっている段階であればある程度草案が決まっているかもしれませんが、こんなメニューを作りたいなど事前に用意しておけばスムーズに打ち合わせやその後の準備が進みます。業種などにもより異なりますが、必ず入れた方が良いメニューやおススメメニューをいくつか紹介致します。

必ず入れた方が良いメニュー

会社案内
→運営会社や連絡先が分からない会社は不安感を訪問者に与えてしまいます。

サービス紹介
→自社がどういったことをしているか知ってもらいましょう。

自社の強み
→訪問者は必ず他社のホームページとも比較します。他社との違いや自社の強みを分かりやすく紹介することで訪問者からの反応(問い合わせや電話)を得ることができます。

代表挨拶、スタッフ紹介
→人気(ひとけ)を出し訪問者に安心感や信頼感を与えることが大切です。

お問い合わせ
→電話で24時間対応は難しいかと思いますが、お問い合わせフォームを作成しておくことで24時間365日受付窓口とすることができます。フォームではなくメールアドレスを記載してクリックしたらメーラーを立ち上げる方法もありますが、訪問者の手間やメールを受け取る側の手間を考えるとフォームを導入することをお勧めします。
またフリーダイヤル等ホームページ専用の電話番号を記載しておけばホームページからの成果を計ることができます。

お知らせ
→ホームページの最大のメリットは素早く不特定多数に情報を提供できることです。特にお知らせすることがない場合でも年末年始やお盆など休みの情報は載せましょう。もし万が一不祥事や問題が起きた際でもお知らせを設置しておき、迅速に情報を発信することでその後の信頼回復につなげることもできます。

その他おススメメニュー

・お客様の声
・メディア掲載実績
・アクセスマップ
・理念
・採用情報
等々
 

4、コンテンツを用意する

ホームページ制作のメインとなる部分。コンテンツの用意です。「コンテンツ」という言葉、制作会社は普通に使ってしまうのですが、初めてホームページ作りに携わる方は聞きなれないかもしれません。

コンテンツとはホームページに入れるべき中身。文章や画像素材のことです。サイトマップで決定したメニュー毎にコンテンツを用意していきます。
ここが一番時間がかかり大変な部分にもなるのですがここが薄いと折角作成したホームページの魅力も半減してしまうので頑張って用意しましょう。

コンテンツ準備のポイントは

ホームページの目的によっても用意するべきコンテンツや内容は変わってきますが、基本はホームページを見て欲しいターゲットに合わせて文章や写真を用意し、御社を知らない人にも興味をもって見てもらえるようにすることです。

写真(イラスト)の用意をする

各コンテンツでは少なくとも1枚は写真を用意しておきましょう。文章だらけのページだと見るのがつらくなり、中身をちゃんと見る前に訪問者が帰ってしまうことにも繋がりますが、写真はあるだけで目を引くことができます。
特に手元に写真が無いという場合は下記素材サイトなどからお手軽に色々なシーンの写真を購入できるので利用してみましょう。

参考:ピクスタ
参考:フォトリア

ただし、素材サイトの写真は綺麗なのですが多くはイメージカットになってしまいます。より魅力を伝えるのに効果的なのは実際にお客様が商品やサービスを利用しているカットを掲載することです。
例えば、みかんを売っているホームページでしたら、ただ単にみかんの写真や木になっている写真を掲載するだけよりも、みかんを切って瑞々しい果汁あふれるカットで食欲や購買意欲を刺激したり、実際に人を入れて収穫している写真、美味しそうに食べているカット等をいれるのが効果的です。
ホームページに初めて訪問した方に商品やサービスに興味をもってもらうというのは大変ですが、商品やサービスそのものでなく、それを利用した自分の状態を上手くイメージさせることで結果的に惹きつけることができます。

写真タイトルを入れておく

写真のレイアウトや使い方などは制作会社に任せても良いかと思いますが、特にタイトルがついていない複数の写真をいきなり送っても判断に困ると思うのである程度写真の内容と、文章内のどの項目で使って欲しいか要望を出すことがスムーズです。またページを定めず、使っても使わなくても良いその他の写真もいくつか用意しておくと良いです。

写真サイズはどうすれば

素材サイトの参考を例にあげます。印刷用とウェブ用で必要サイズは異なってくるのですが、今回はホームページにそのまま使うのでしたら一番小さいXSサイズ(424×283 px)やSサイズ(640×480px)でも大丈夫かと思います。
トップページ上部のヘッダー画像用に使用する場合でもMサイズあれば十分です。購入前にカンプ画像をダウンロードできるのでそちらをダウンロードして制作会社に相談してみて下さい。

キャッチコピー(小見出し)の用意をする

文章を考える際に大切なのはキャッチコピー(小見出し)を考えることです。
魅力的で熱意ある文章をしっかりと考えて頂くのは良いのですが、そのページを見た人に全文をじっくり読んでもらえるかというとそうではありません。
まずは見出しで引きつけて本文を読んでもらうことが大切です。

本文を用意する

こちらも写真と同じく単に商品やサービスを説明する説明分にするのでなく、その中にストーリを作り文章を組み立てたり、それを利用した自分の状態を上手くイメージさせることで、そのページを見るだけで帰ってしまうのでなく、他のページへの回遊やもっと詳しく知りたいとお問い合わせに繋げることができます。

ライター、カメラマン等その道のプロに頼むのも完成への近道

特に今まで何も資料を用意しておらずゼロから会社の理念やメッセージなどのテキスト文章や写真素材を集めるのはやはり大変なことです。
ただ、素材を集めていく中で色々イメージが膨らんだり、自分達でしか分からない魅力的な情報を伝えることをできるのもお客様ご自身なので少しづつでも素材を集めていって頂きたいのですが、素材が集まらないからずっとホームページを作ることができない。というのも制作会社、お客様双方にとってストレスであったり余計な時間経過になってしまうので、そんな時はテキストならライター、写真ならカメラマン等その道のプロに依頼するのも完成への近道です。ホームページの制作会社に相談すれば付き合いの深い信頼できる人を紹介してもらえるでしょう。

SEO対策のポイント

ホームページを制作、運用するにあたっていつかは必ず耳にする言葉に「SEO」という言葉があります。
技術的な部分に関しては制作会社にお任せすれば良いかと思いますが、SEOの考え方や方針については事前に制作会社に確認した方が良いかと思います。

SEOについて詳しく説明するとキリがないのでこちらの記事では簡単な紹介に留めますが、SEO対策のポイントとしては訪問者にとって有益なコンテンツを掲載しかつ、それを検索エンジン(Google)に適切なキーワードで伝えていくことでより質の高い訪問者を獲得していくことです。

「質の高い訪問者」とは検索で求めていた情報とホームページの掲載情報の関連性が高く、1ページだけでなく複数ページを回遊し最終的に目的(問い合わせや資料請求等)を果たしてくれる訪問者のことです。

どのように質の高い訪問者を獲得していくかに関しては制作後の定期的なアクセス解析や運用面になってくるので制作会社にご相談下さい。

お客様ご自身でできるSEO対策は

お客様ご自身でできるSEO対策としては予め検索して欲しいキーワードを想定してコンテンツを準備することです。
時間的な問題や競合サイトの状況にもよりますが検索されたいキーワードに特化してより有益な情報を伝えるホームページを作っていけば上位に表示されていくかと思います。

ただ覚えておいて頂きたいのは単に特定のキーワードで上位に表示させることがSEO対策ではなく、あくまで訪問者目線にたってホームページを制作し、訪問者をがっかりさせずよく閲覧してもらった結果が上位表示に繋がるということです。

時には初め想定していなかったキーワードが御社にとって価値のあるキーワードかもしれません。

SEOに対してご興味ある方は弊社のブログでSEOと検索してみて下さい。

5、確認チェック

サイトの目的、ドメイン、サイトマップが決まりコンテンツの準備も完了したらお客様の作業は80%は完了です。

では残り20%は何かというとデザインやシステムの確認作業です。制作会社が提出する初稿デザインや修正稿を確認しフィードバックしていきます。

本業が忙しいのは分かるのですが、ここをしっかり詰めておかないと制作会社も作業を進めることができず、そこで止まってしまうということにもなるのでしっかり確認しましょう。すぐにフィードバックというのは難しいかもしれませんが、ある程度いついつまでにフィードバックしますと事前に伝えておけばスムーズです。

確認の基本的な流れとしては下記になります。

  • トップページデザイン初稿確認
  • 下層ページデザイン確認
  • コーディング*後のデザイン、挙動確認
  • お知らせ更新などのシステム確認
  • 納品

基本的には段階毎の確認で進んでいくので、OK出した後に後戻り修正となると別途費用が発生することもあるのでご注意下さい。

*コーディングとは「どういうものを作るのかを定義したデザイン」を元に「実際にインターネット上に表示させクリックしたりリンクを貼ったり動くものを作る」作業のことです。

6、ホームページ制作会社の選び方

以上がホームページ制作において基本的に用意することや決めることになります。

今まではホームページの制作会社が決まっている前提で話を進めていきましたが、制作会社も決まっていないという場合も多いかと思います。
ホームページの制作というのは今では個人でフリーランスとして仕事されている方も多いので発注先を探すのには困らないかと思いますがどのように制作会社を選んだらよいでしょうか。

大きな2つの方向性としては
・常に問い合わせに対応できるサポートセンターが欲しく、全部お任せで作ってもらいたいということでしたら規模が大きい会社に。
・費用を出来る限り抑えたいというのであれば一括見積サイトなどを使って個人でやっているフリーランスの方に。
頼まれるのが良いかと思います。

それ以外は幅が広いので一概に言えませんが、冒頭でもお伝えした通り、
ホームページは基本的には制作会社と二人三脚で作りあげるものです。また顧客、販売管理システムやチラシ、ロゴ・名刺といった平面デザイン等色々な要素に関わることがあります。なので会社規模に関わらずフィーリングがあい、色々な面で相談に乗って頂ける会社が一番かと思います。

もし何か今悩まれていたり、制作をご検討されているのであれば一度弊社の下記お問い合わせまでご連絡下さい。

お問い合わせ

一度ご訪問させて頂いてご相談に乗れればと思います。

アダプティブデザイン

投稿日:

blog l_094

こちらのブログでも何度かレスポンシブデザインについては取り上げたのでご存知の方も多いかと思いますが、アダプティブデザインというのはご存知でしょうか。
誤解を承知で簡単にいうとレスポンシブデザインと同じく、スマホなどデバイスの幅に合わせてデザインを変える手法です。ではレスポンシブデザインとどう違うのでしょうか。社内でも話題になったので一度まとめてみます。

アダプティブ?

まず疑問の一つ。「アダプティブ」という言葉の意味ですが、「適応性、適応性のある」といった訳になり、レスポンシブデザインと同じく画面の幅に合わせて最適化できるといったイメージが浮かんできます。
ただ、ここで違いが一つあります。レスポンシブデザインは基本的に画面サイズに対応したウェブのレイアウト手法のことのみを指しますがアダプティブデザインの場合はウェブや画面サイズだけに限らないということです。

アダプティブデザインはユーザー情報、属性に応じて表示する内容を切り替えます。ウェブの画面の幅はその中の一情報に過ぎません。
レスポンシブデザインとの比較を明確にし混乱を避けるため以後、「アダプティブウェブデザイン」と「アダプティブデザイン」で分けてご紹介します。

アダプティブウェブデザイン(レイアウト)とは

アダプティブウェブデザイン(アダプティブレイアウトと呼ぶ場合もあります)、こちらがレスポンシブデザインとの比較であげられるレイアウト手法です。
レスポンシブデザインは「あらゆる画面サイズに対応する」という考えをベースに1つのHTMLを画面の幅に合わせてCSSを切り替えて表示を変化させています。
またリキッドレイアウトになっているのでスマホサイズ、タブレットサイズといったデザイン切り替えポイント(ブレークポイント)間でも柔軟に可変します。
対してアダプティブウェブデザインは特定のブレークポイントに合わせた別のHTMLを用意することでそのポイントでのみデザインが変化します。見た目の違いはブレークポイント間でも変化するかしないかです。
よってアダプティブウェブデザインの場合は画面サイズやデザインによってはコンテンツが全て表示されずに切れてしまうことも考えられます。

こうして比較してみるとレスポンシブデザインの方が見た目上は優れているかのように思いますが、アダプティブウェブデザインにもメリットはあります。というのは見た目上には現れないようにしている非表示要素なども読み込んでしまうレスポンシブデザインに対して特定サイズに最適化して作ったHTMLのみを読み込むアダプティブウェブデザインの方が表示速度が速くなります。

スマートフォンの普及とモバイルファースト

では次にアダプティブデザインとは何か?を確認する前に少し原点に帰って何故、レスポンシブデザインやアダプティブウェブデザインが出てきたかを考えてみます。その理由としてはスマートフォンの普及があります。
日経BPコンサルティングの調査によると

参考:日経BPコンサルティング

2010年ではわずか5%未満だった普及率が15年では50%に届く勢いで伸びてきています。以前であれば移動中にウェブサイトに接続するということは一部のノートパソコンで仕事をする人以外はあまりありませんでした。
携帯電話(ガラケー)で接続する際には携帯専用のホームページでしたのでPC用ホームページと携帯用ホームページは完全に切り分けても良かったのですが、スマートフォンの普及によりスマートフォンからでもPC用サイトを見れるようになるとスマートフォンで見ているシーンも考慮に入れる必要が出てきました。
その流れからスマートフォンで見ても見やすいようにということでレスポンシブデザインやアダプティブウェブデザインは出てきたのですが、後からモバイルデザイン(スマートフォン等のデザイン)を設計するよりもむしろ先にモバイルデザインを想定した上でPCデザインを想定するというモバイルファーストの考えも大切になってきています。
※ここでいうモバイルはスマートフォンに限らずAppleWatchなども入ってきます。

アダプティブデザインと事例

ここで本題アダプティブデザインですが、アダプティブデザインはアダプティブウェブデザインのように単に画面を見やすくするためにデザインを変えるだけに留まらず、スマートフォン等のモバイル端末から得られる情報を元にその状況に合わせて最適なコンテンツや情報を表示させる仕組みを言います。仕組みを紹介するとモバイル端末に搭載されているGPSやマイク、カメラ、加速度計、温度計などのセンサーや位置情報で周辺環境を知り、端末のログデータや普段の使い方からユーザーの行動パターンを知りその状況に合わせて最適なコンテンツを表示させる形です。

具体例としてはショッピングアプリ等があります。ショップ専用のアプリを立ち上げるとアプリ内でネットショッピングが出来るのですが、仮にリアル店舗でアプリを起ち上げた場合はネットショップの情報は不要なので変わって購入アシスタント情報が表示され、どこの棚にどんな商品があるといった案内が出たり、購入予定の商品をリストアップしておけば棚の近くに来たときに知らせてくれます。

少しウェブデザインからは離れてしまいましたがアダプティブウェブデザインもアダプティブデザインも共通にある考えとしてはモバイルファーストであることだと思います。ウェブという視点ではレスポンシブデザインの方がスマートフォンに対して柔軟性があるかもしれませんが、表示速度などモバイルファーストを突き詰めて設計するのであればアダプティブデザイン、アダプティブウェブデザインを選択肢に入れるのも良いかもしれません。

参考:アダプティブWebデザインとは?

参考:レスポンシブの次はアダプティブ?

Retina(レティナ)対応について

投稿日:

img-apple

iPhoneやiPad、その他高解像度のスマートフォンやMacのパソコンの製品に詳しい方であればご存じかと思いますが、これらの機種に搭載されている「Retina(レティナ)ディスプレイ」とウェブサイトを制作していく上での関わりについて記載いたします。

Retina(レティナ)ディスプレイとは?

アップル社製製品のうち、高精細ディスプレイを搭載したモデルに与えられる名称、およびディスプレイそのものを指す名称である。「Retina」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。レティナディスプレイは、前のディスプレイと比べ、画面解像度とコントラストが4倍ほどに達し、もっと鮮やかで深い色になる。

参考:wikipedia

参考のウィキペディアからもわかる通り、レティナディスプレイは従来のディスプレイと比べてかなり解像度の高いディスプレイになります。主にiPhone4以降のiPhoneやiPad、その他Appleの製品に搭載されています。最近ではAndroid携帯でも高解像度の端末が多く発売されています。

ウェブサイト、ウェブアプリとの関係

レティナディスプレイにウェブサイトやウェブアプリを対応させていない場合、従来のウェブサイトやウェブアプリでは、これらの高解像度の端末で一部分の写真や画像等を閲覧した際に、画像が荒く感じてしまう可能性があります。

これらの端末に画像を対応させるためには、掲載したいサイズの2倍の画像を用意する必要があります。
用意した2倍の画像を掲載したいサイズに調整し、ウェブサイトに掲載します。

この様に、ウェブサイトでこれらの端末に対応させるためには、画像の調整並びにサイトのコード等の調整を行う必要があります。

イメージやブランディングを重視するビジネスにおいては、信頼性を落とさないためにも、ウェブサイト等はこれらの端末にも対応したウェブサイトが必要となってくるでしょう。しかし、そのために画像全てを対応させるとトラフィックが増えてしまい、サイトが重くなる可能性があります。

スマートフォンで閲覧できる様にサイトを対応させる際と異なり、レティナディスプレイに対応するポイントや目的を検討する必要があるかと思います。
下記参考は、PCとモバイルの関係を記述した内容になります。

参考:Googleなどの検索エンジン、売り上げシェア減少

まとめ

現在の状況においては、iPhoneなどのスマートフォンやタブレットにしか影響を及ぼさないので、サイトを全てのディスプレイにに対応させるために修正する必要はないかと思います。
また、レティーナディスプレイ対応の端末でもブラウザの影響を受けて見え方が変わってしまう可能性もあるため特段対応を急ぐことは無いかと思います。

グローバルナビの数とレスポンシブ形状について

投稿日:

blog gnavi

グローバルナビとは

グローバルメニュー、グローバルナビゲーション、メインメニュー、メニュー等と呼ぶことがありますが一般的なウェブサイトで見られるような上記赤枠部分を指します。
ウェブサイトに訪れた際にまず目に入り、クリックされる部分になるのでサイトの顔とも言うべき部分。ここをどういう風に作るかというのは重要になります。

グローバルナビの最適メニュー数とは

ではグローバルナビの最適メニュー数とはいくつになるでしょうか。
特に決まりはなく、極端にいうと文字サイズなどを考慮しない場合10や15とメニューを表示させることができます。但し、その場合見にくいことは当然ながら、メニューが多いことで逆に探したい情報をピンポイントで探しにくくなる場合があります。とはいえ多角的な展開をしている企業であればメニュー項目が多くなることも事実です。そこでいかに、メニューをカテゴリー分けして分かりやすい階層構造にするかが大切になります。

メニュー数に決まりはないとお伝えしましたが、よく使われるメニュー数というのは大体決まっており7(±2)。つまり5~9と言われています。この「7」という数字はアメリカの認知心理学者ジョージ・ミラーが提唱した、心理学用語でのマジックナンバーに基づくもので人間が短期的に記憶できる限界の数と言われています。
※このマジックナンバーには諸説あり、7という数字もミラーの研究からによるものではないとも言われ、現在では4(±1)とも言われています。

参考:実は「7」じゃない。本当のマジックナンバーは「4」だった
参考:マジックナンバー7の誤解

PC用のデザインのみならば7つのメニューでも問題なかったのですが、時代はスマホ時代。スマホで見た際のデザインも考慮しないといけません。スマホでのデザイン表現は何パターンかありますが、その中の一つレスポンシブデザインの場合、グローバルナビはどのようにするのが良いでしょうか。レスポンシブデザインって何だろう?という方は下記を参考下さい。

参考:レスポンシブデザインについて

レスポンシブデザインでのメニュー表示

いくつかパターンがあるので主なものを紹介します。

  • 右上もしくは左上にメニューボタンとしてまとめてしまうパターン
  • 一番良く目にするパターンかもしれません。3本線のメニューアイコンをタッチするとメニューが縦にズラッとドロップダウンで出てくるパターンです。横からスライドして出てくるパターンもあります。

    PC
    blog navi1
    スマホ
    blog navi2

  • 段組みを変えてしまうパターン
  • メニューデザインはそのままに、1段4列だったメニューを2段2列等に変えてしまいます。タッチをしないでも視覚的に全てのメニューを確認することができます。奇数のメニュー数の際は若干難しい場合もあります。

    PC
    blog navi3
    スマホ
    blog navi4

  • そのまま小さくするパターン
  • 元々のグローバルナビの数が少ない場合は同デザインのままメニューの横幅を狭くすることでも対応可能です。

    PC
    blog navi5
    スマホ
    blog navi6

  • メニューをアイコンボタン化するパターン
  • メニュー内容に対応したアイコンを作ることによりテキストのみのボタン化よりも視覚的にもタッチしやすくなります。

    PC
    blog navi7
    スマホ
    blog navi8

スマホで閲覧する場合はビジュアルデザイン的な要素以外にも使い勝手や軽さ(表示速度)も大切になってきます。グーグルもモバイル対応に関して色々と指標を出しているのでこれに基づいて制作することも大切です。

参考:モバイル対応が検索結果に影響する?
参考:レスポンシブWebデザインのグローバルナビゲーションパターン
参考:レスポンシブサイトとは

モバイル対応が検索結果に影響する?

投稿日:

blog-tablet

Googleがスマホ対応のサイトをモバイル検索結果で優遇する事を発表

Googleは、ウェブサイトがスマートフォンに対応しているかどうかを、モバイル検索のランキングの要因の一つとして使用する事を発表しました。

導入の日程として、2015年4月21日からを予定しています。

Googleはモバイルの検索結果において「スマホ対応」といったラベルの表示を行ったり、スマホ対応していないウェブサイトに対して、ウェブマスターツールから警告を行っており、スマホ対応の有無がランキング要因に使用されるのではないかと予想されていましたが、今回導入が正式に決定したようです。

参考:モバイル検索「スマホ対応」ラベル

blog-search02

検索結果への影響はあるのか?

今回の導入によって、検索結果にはかなり大きな影響を与えると予想されています。
具体的な影響範囲は不明ですが、目に見えて変動が起こる可能性もあります。
今回の要因の追加は、PCの検索結果とモバイルの検索結果の両方に影響するわけでなく、モバイルの検索にのみ影響されます。

そのため、PCでの検索結果とモバイルでの検索結果が大きく異なる可能性があるとされています。

検索結果の影響を考えると、モバイルの検索結果に対しては、スマートフォンやタブレットに対してのウェブサイトの修正を行わなければ、モバイルの検索順位が上位に表示されなくなりそうです。

モバイルへの対応方法

ウェブサイトをモバイル対応にするためには、どの様にしていけば良いのかは、
Googleはアナウンスの中で下記のツールを利用していくように推奨しています。

  • ウェブマスター向けモバイルガイド
  • モバイルユーザビリティレポート
  • モバイルフレンドリーテスト

ウェブマスター向けモバイルガイド

Googleが提供している、適切なモバイルサイトを構築するための公式のマニュアルになります。
ウェブサイトをモバイルに最適化する際には、参考にしてください。

参考:ウェブマスター向けモバイルガイド

モバイルユーザビリティレポート

モバイルユーザビリティレポートは、ウェブマスターツールの機能のひとつで、モバイルユーザビリティに関するエラーをレポートする機能になります。
検索ロボットがモバイルに対応しているサイトかどうかの判断を行います。

レポートにでる可能性のあるエラーは6つになります。

  • Flash が使用されています
  • ビューポートが設定されていません
  • 固定幅のビューポート
  • コンテンツのサイズがビューポートに対応していません
  • フォントサイズが小です
  • タップ要素同士が近すぎます

どのページでどのエラーが検出されたかもわかりますので、自身のサイトの問題点を把握する事が出来ます。

それぞれのエラーの詳細や対処法はヘルプを参照してください。

参考:ウェブマスターツール「モバイル ユーザビリティ」

モバイルフレンドリーテスト

このツールは、URLを解析し、ページの設計がモバイルフレンドリーであるかどうかをテストします。
サイトのURLを入力するとサイトがモバイルフレンドリーかどうか判断します。

モバイルフレンドリーの場合は下記の様に表示されます。
freiend-test01

モバイルフレンドリーで無い場合は下記の様に表示されます。
freiend-test02

参考:モバイルフレンドリーテスト

まとめ

今回の検索結果に影響を及ぼすのは、モバイル検索だけと言われています。

自身のサイトがモバイルが全く重要でないと完全に言い切れるならば対応する必要ありません。検索の結果から外されるわけではありませんが、検索結果が上位に表示されなくさる可能性があるため、モバイルからのサイトへの流入が多いウェブサイトは、今回の実施に対して対策行う必要があると思います。

今後、モバイルに対応していないサイトの検索結果への影響はどの様になるのかは、現時点では判断できませんが、まだモバイル対応を行っていない方は長い目で見て必要になる可能性があるという事を意識しないといけません。

IE11でホームページが正しく表示されないときの対処方法

投稿日:

IE(インターネットエクスプローラー)でホームページを閲覧している際に、正しく表示されない時の対処方法をご紹介したいと思います。
対処方法を施すことによって表示が改善される可能性があります。

1.パソコンを再起動する

パソコンを再起動して、ホームページが正しく表示されるかどうかを確認します。お使いのOSによって再起動の手順が異なりますので注意してください。

2.互換表示を有効にする

ホームページが、IE11に対応していない場合は、レイアウトが崩れて画像や文章が誤った位置に表示されてしまいます。互換表示を有効にしてみましょう。

参考「互換表示とIE11」:http://www.wasabi3.com/2014/07/gokanie11/

3.信用済みサイトに登録する

IEのセキュリティ機能により、ホームページを表示する処理が一部制限されてしまうことがあります。ホームページを信頼済みサイトに登録して、キチンとページが表示できるかどうか確認してみましょう。

ie-2

1、「歯車マーク」→「インターネットオプション」をクリック
2、「セキュリティ」タブをクリック
3、「信頼済みサイト」をクリック
4、「サイト」ボタンをクリック
5、「このWebサイトをゾーンに追加する」の下に、登録するWEBサイトを入力
6、「このゾーンのサイトにはすべてサーバーの確認(https:)を必要とする」のチェックを外す
7、「追加」ボタンをクリック
8、WEBサイト下に登録するサイトのURLが表示されているのを確認した後「閉じる」ボタンをクリック
9、「OK」ボタンをクリックして「インターネットオプション」を閉じます。

4.拡張保護モードを無効にする

拡張保護モードが有効だと、Flashなどが制限されて、ホームページが正常に表示されない場合があります。拡張保護モードを無効にし、確認してみましょう。

ie-1

1、「歯車マーク」→「インターネットオプション」をクリック
2、「詳細設定」タブをクリック
3、「拡張保護モードを有効にする」のチェックを外す
4、「OK」ボタンをクリックして「インターネットオプション」を閉じます。

5、アドオンを無効にする

プラグインなどの動作が、ホームページの表示に影響することがあります。
アドオンやブラウザー拡張を無効にし、表示されるかどうかを確認しましょう。

ie-3

1、「歯車マーク」→「アドオンの管理」をクリック
2、「ツールバーと拡張機能」をクリック
3、「右の一覧から、無効にするアドオンの名前をクリック
4、「無効にする」ボタンをクリックします。

6、設定を初期化する

Internet Explorerの設定や、一時ファイル(キャッシュ)の影響により、ページが表示されないことがあります。設定を初期化し確認してください。

7、セキュリティ対策ソフトを一時的に停止する

セキュリティ対策ソフトによって、Internet Explorerの動作が制限されることがあります。
セキュリティ対策ソフトを一時的に停止し、ページが表示されるかどうかを確認します。

セキュリティ対策ソフトによって設定が異なりますので、対策ソフトに確認して、一時的に停止する方法を確認してください。

まとめ

以上のような対処方法をおこなっても表示が治らない場合は、ホームページの設定そのものを修正しないといけない可能性があります。

そのような場合は、弊社のようなWeb制作会社に相談してみてください。
サイトの中身を分析し、どのような対処が必要なのかご提案させていただきます。

 

印刷時にトンボ(トリムマーク)を外す方法

投稿日:

トンボ(トリムマーク)とは?

印刷物をデザインする際に設定する仕上がりサイズの目安のことです。例えばA4サイズの印刷物の場合、デザイン時にはA4サイズよりも大きめにデザインしA4サイズの部分にトンボを設定します。何故わざわざ大きめにデザインしトンボを設定するかというと印刷所では大量の用紙を一度にカットしサイズを合わせるため、多少のズレが生じてきます。仮に仕上がりサイズぴったりにデザインしていた場合、カット位置がずれた時に余白が生じてしまいます。
それを防ぐため、デザインする側は、どこまで印刷範囲にすればいいか分かるようにトンボを目安にします。印刷業者さんもどこで断裁すればいいのか明確に分かるようになります。

家庭用プリンター等での確認用印刷。トンボ外し

大量にチラシ印刷する場合は印刷業者に頼む前に事前にプリントアウトして出来映えチェックしてからというケースも多いでしょう。そんな時通常に印刷するとトンボが印刷の中に入り込んでしまうことになります。印刷時と同じ状況で確認したい場合はプリンターの設定を変更してみましょう。

トンボ内印刷

プリンターの設定でページサイズ処理の所、実際のサイズを選択頂いたらトンボ内印刷が可能です。

ホームページレイアウト崩れ 互換表示とIE11

投稿日:

互換表示という言葉をご存知でしょうか。IE(インターネットエクスプローラー)でホームページを閲覧している際に、何かこのホームページレイアウトが崩れている(全部コンテンツが左に寄っている、右に寄っている、表示されない)といった場面で試してみる機能です。互換表示することできっちりしたホームページ(制作者側が意図したレイアウト)を表示できる場合があります。(100%ではありません)

何故互換表示が必要なのか

ではそもそも何故互換表示が必要なのでしょうか。理由としてはホームページを見るブラウザ(インターネットエクスプローラー、グーグルクローム等)の環境が常に変化していっているということがあります。IEのバージョンアップによって設計ルールなども少しづつ変わってくるので古い設計のホームページ(IE7での対応想定等)を最新バージョンのブラウザで見るとレイアウト崩れなどが発生することになります。

互換表示の仕方 IE9,10の場合

実際にどのようにすれば互換表示ができるのでしょうか。IE(インターネットエクスプローラー)9,10の場合は下記です。

アドレスバーの横に紙をちぎったような互換表示のボタンが表示されるのでそちらをクリックすると互換表示(正しいレイアウトでの表示)が可能です。こちらを再度クリックすることで有効や無効を切り替えられます。

blog gokan1

blog gokan2

ツールバーからも有効にすることができます。

1、キーボードの Alt キーを押してメニュー バーを表示
2、[ツール] をクリック
3、[互換表示] をクリック

blog gokan3

参考:初心者でもわかる! IE で互換表示 (IE10/IE9)

互換表示の仕方 IE11の場合

IE(インターネットエクスプローラー)11の場合、アドレスバーの横の互換表示ボタンが前バージョンと異なり表示されないので注意が必要です。
右上の歯車マーク(設定アイコン)から設定します。

1、歯車マーククリック
2、互換表示設定
3、該当WEBサイトを追加

互換表示は万能?互換表示に頼らない作りが重要

では互換表示機能があるから古い設計のままずっとそのままで良いかというとそうでもありません。ホームページの訪問者全てが互換表示のことを知っているわけではありません。せっかく訪れた訪問者をレイアウトが崩れているからと不信感を持たれて直帰させてしまうのを避けるためにも定期的なブラウザチェックと場合によってはリニューアルが重要になってきます。

SEOに有効な画像の使い方

投稿日:

20120515 seo

SEOとは

よく耳にするSEOとはどういった意味でしょうか。一般的にはグーグルなどの検索ページの上位に表示させる手法といった認識かと思いますが、元々の基本としては検索エンジンに優しい、最適な作りをすることにより、ユーザーの求めている情報を適切に提供し結果的にページ上位が実現できるということでもあります。

検索ロボットと画像

その際に画像の使い方も大切になってきます。基本的に検索エンジンでは人間が手動でサイト評価をしているわけではなく、クローラーというロボットが巡回し評価をしています。その際、テキストなどの文字情報は内容認識ができ、検索結果にもヒットするのですが、画像で表示されている場合はそこに画像があるということは認識できても何の画像か認識することができないのでSEOを意識している場合はできる限りテキストを多くして画像を入れないサイトも見受けられます。
ただし、テキストだけのサイトというのはデメリットもあり、視覚的に訪問者を引き付ける力が弱いので直帰されてしまったり、最終成果(コンバージョン)に結びつきにくかったりします。直帰率が高いというのはSEO的にも良いものではありません。

よって、直帰率を下げたり、コンバージョン率を上げるのであれば視覚的に引きつけ分かりやすい画像を使うことも大切になってきます。

この件に関してGoogleのMatt Cutts(マット・カッツ)氏はGoogleにとってはやはりテキストがあったほうがいいと前置きしたうえで

alt属性やtitleタグなどのテキストで画像の情報を与える
Webフォントを使う

というアドバイスを行っています。

Webフォントとは

文字を装飾し見栄えを良くしたいときに使える手法です。通常画面に表示されるフォントは使っているパソコンに依存しますが、Webフォントの場合はインターネットのサーバーにおいてあるフォントを呼び出して表示させます。
Googleは、Google Web Fonts(グーグル ウェブ フォント)といって無料で使える600種類以上のWebフォントを公開しています。Webフォントの場合はテキストデータなので装飾がかっているとは言え、検索エンジンにもちゃんと認識してもらうことができます。
但し、現状ではデメリットもあり、日本語のWebフォントはアルファベットよりデータ容量が大きくなる為読込に時間がかかりページの表示を遅らせてしまうことがあります。ページの表示時間短縮もSEOには関係してくるので状況に応じた使い分けが大切になってきます。

参考:テキストの代わりに画像を使いたいときはSEOに適したWebフォントがいい

ページトップへ