なんでロゴって左上なの??

Writer:Asai (20.11.19)

今回はWebデザインのロゴの位置について話をしてみたいと思います。
多くのWebサイトでは、画面の左上にロゴが配置されています。これって何故なのかご存じですか?実は、左上に置いてあるのはたまたまではなく、ちゃんとした理由があるんですよね。

人の視線は2つの型に分かれている。

まず、これはWebデザインではよく言われていることです。それが、「人の視線はZ型、F型で動いている」ということです。では、それぞれについて触れていきたいと思います。

Z型

図のように、視線が「Z」の形をして動く様子を指します。チラシや雑誌などではこの視線の動きを意識したレイアウトを組むことも多いそうです。

F型

図のように、視線が「F」の形をして動く様子を指します。Webサイトではこの視線の動きが多いようですね。左側にはメニュやーバナーがあることもあるので、そのように視線が動くのかもしれません。

「グーテンベルク・ダイヤグラム」という考え方

グーテンベルク・ダイヤグラムとは、「同じ種類の情報が均等に配置されている場合」の視線の動きのことをいいます。図のように、人の視線は同じ種類の情報が並んでいると、左上から右下へ移動していきます。そのため、重要な情報は左上から右下に流れるように配置すると良いと考えられています。

これまで人の視線の動きについて書いてきましたが、一つ気付いたことがありませんか?

そう、どの型も「左上」が始点になっているのです。つまり、大多数のユーザーは「左上から見ている」ということなのです。企業ロゴやサイトロゴというのは、そのサイトのアイデンティティです。そのため、企業ロゴやサイトロゴを左上に配置しているWebサイトが多いんですね。

中央や右上配置はNGなのか??

左上に配置する理由については、ご理解いただけたと思います。では、「中央」や「右上」ではダメなのか??という疑問も出てくると思います。
そちらについては、下記のWebサイトに詳細記事が掲載されています。

右上配置は左上配置よりも覚えられにくい

上記の記事では、右上配置は左上配置よりもブランドが覚えられにくいという研究記事が紹介されています。リンク先の研究記事を見てもわかるように、左上と右上では、大きな差が見られていることが分かります。
デザインを優先して右上を取るか、それともブランドを覚えやすくするために左上を取るか。右上に配置するのであれば、Webサイトの目的からずれていないかをしっかりと考える必要がありますね。

中央配置はトップページに戻りにくくさせている

中央配置のロゴは色々なWebサイトで見られています。記事内では、左上に配置する場合と中央に配置する場合は、ブランドの覚えられやすさに違いはなかったと報告されています。
しかし、一方で中央配置のロゴはユーザーがWebサイトのトップページへ移動することを阻害していると報告されています。ユーザーは左上にある要素(ロゴやトップページへのリンク)をクリックしてトップページに移動することが習慣化されているためとのことです。つまり、ロゴを中央に配置する場合は、グローバルメニューの一番左にトップページへ移動するリンクを設置することが望ましいと考えられますね。

だから、ロゴは左上によく配置されている

以上のことより、ロゴは左上に配置することが一番手になると考えられるのではないでしょうか。しかしデザインを行っていくと、全てのWebサイトのロゴを左上に配置できるわけではありません。その場合は、ナビゲーションなどにトップページへのリンクを設置するなどユーザーへの配慮が必要だと考えられます。デザインを優先し、Webサイト本来の目的を達成することを阻害しているのであれば、それは優秀なWebデザインとは言えませんからね。

コラム執筆中

アイビーネットでは、ホームページ制作に関するコラムを随時執筆中です。

画像:データの横持ち(クロス集計)と縦持ち(リスト形式)とは??どちらを使うべきか、それぞれの利点や注意点と一緒に紹介
大学IR・統計分析
データの横持ち(クロス集計)と縦持ち(リスト形式)とは??どちらを使うべきか、それぞれの利点や注意点と一緒に紹介
画像:情報発信の⼒で⽇本のものづくり企業を応援したい!!
会社案内・パンフレット
情報発信の⼒で⽇本のものづくり企業を応援したい!!
画像:「サステナブルと私たちの未来」と題して社内研修会を開催しました。
CSR・SDGs
「サステナブルと私たちの未来」と題して社内研修会を開催しました。
画像:本機色校正・平台色校正・プルーフジェットの違いとは?本紙色校正の種類と移り変わりについて。
会社案内・パンフレット
本機色校正・平台色校正・プルーフジェットの違いとは?本紙色校正の種類と移り変わりについて。
画像:Webサイトリニューアルに必要不可欠と言われるRFPって知っていますか?
ホームページ
Webサイトリニューアルに必要不可欠と言われるRFPって知っていますか?
画像:新入社員が教えるExcelでもできる分析手法、回帰分析ってなに!?【重回帰分析編part2】
大学IR・統計分析
新入社員が教えるExcelでもできる分析手法、回帰分析ってなに!?【重回帰分析編part2】
画像:新入社員が教えるExcelでもできる分析手法、回帰分析ってなに!?【重回帰分析編part1】
大学IR・統計分析
新入社員が教えるExcelでもできる分析手法、回帰分析ってなに!?【重回帰分析編part1】
画像:新入社員が教えるExcelでもできる分析手法、回帰分析ってなに!?【単回帰分析編】
大学IR・統計分析
新入社員が教えるExcelでもできる分析手法、回帰分析ってなに!?【単回帰分析編】
画像:新入社員が教えるExcelでもできる分析手法、相関分析ってなに!?
大学IR・統計分析
新入社員が教えるExcelでもできる分析手法、相関分析ってなに!?
画像:さらに詳しく!Tableauでグラフ内の項目を編集しよう!
大学IR・統計分析
さらに詳しく!Tableauでグラフ内の項目を編集しよう!
画像:新入社員が教える、Excelのデータ分析ツール「基本統計量」の使い方!
大学IR・統計分析
新入社員が教える、Excelのデータ分析ツール「基本統計量」の使い方!
画像:会社案内は必要ない??
会社案内・パンフレット
会社案内は必要ない??
画像:新入社員が教える統計、Excelでできるって本当!?データ分析ツールの使い方
大学IR・統計分析
新入社員が教える統計、Excelでできるって本当!?データ分析ツールの使い方
画像:FSC®認証は必要?不必要?取得までの顛末
CSR・SDGs
FSC®認証は必要?不必要?取得までの顛末
画像:もっと見やすく!Tableauでグラフの見た目を編集しよう!
大学IR・統計分析
もっと見やすく!Tableauでグラフの見た目を編集しよう!
画像:新入社員が教える統計の基本、標準偏差、分散って結局なに!?
大学IR・統計分析
新入社員が教える統計の基本、標準偏差、分散って結局なに!?
画像:ビジネスと人権、人権デューデリジェンス(人権DD)
CSR・SDGs
ビジネスと人権、人権デューデリジェンス(人権DD)
画像:すぐできる!Tableauでグラフ作成!(サンプルデータ有り)
大学IR・統計分析
すぐできる!Tableauでグラフ作成!(サンプルデータ有り)
画像:新入社員が教える統計の基本、代表値の活用方法とは!?
大学IR・統計分析
新入社員が教える統計の基本、代表値の活用方法とは!?
画像:WebサイトにCookie管理ツールを導入してみた
ホームページ
WebサイトにCookie管理ツールを導入してみた
画像:Webディレクターって何やるの? 〜当社の場合〜
ホームページ
Webディレクターって何やるの? 〜当社の場合〜
画像:みなさんが、ホームページ制作会社に「求めること」は何ですか?
ホームページ
みなさんが、ホームページ制作会社に「求めること」は何ですか?
画像:「自分たちができること」を伝えるよりも、「どんな課題を解決できるのか」に主眼を置いてみる
そのほか
「自分たちができること」を伝えるよりも、「どんな課題を解決できるのか」に主眼を置いてみる
画像:LGBTQ(SOGI)の活躍推進:ダイバーシティ&インクルージョンの取り組み
CSR・SDGs
LGBTQ(SOGI)の活躍推進:ダイバーシティ&インクルージョンの取り組み
画像:社員の活躍推進:ダイバーシティ&インクルージョンの取り組み
CSR・SDGs
社員の活躍推進:ダイバーシティ&インクルージョンの取り組み
画像:人事・労務におけるダイバーシティ&インクルージョンの取り組み
CSR・SDGs
人事・労務におけるダイバーシティ&インクルージョンの取り組み
画像:SDGsの目標17「パートナーシップで目標を達成しよう」
CSR・SDGs
SDGsの目標17「パートナーシップで目標を達成しよう」
画像:SDGsの目標16「平和と公正をすべての人に」
CSR・SDGs
SDGsの目標16「平和と公正をすべての人に」
画像:SDGsの目標15「陸の豊かさも守ろう」
CSR・SDGs
SDGsの目標15「陸の豊かさも守ろう」
画像:SDGsの目標14「海の豊かさを守ろう」
CSR・SDGs
SDGsの目標14「海の豊かさを守ろう」
画像:SDGsの目標13「気候変動に具体的な対策を」
CSR・SDGs
SDGsの目標13「気候変動に具体的な対策を」
画像:SDGsの目標12「つくる責任つかう責任」
CSR・SDGs
SDGsの目標12「つくる責任つかう責任」
画像:SDGsの目標11「住み続けられるまちづくりを」
CSR・SDGs
SDGsの目標11「住み続けられるまちづくりを」
画像:SDGsの目標10「人や国の不平等をなくそう」
CSR・SDGs
SDGsの目標10「人や国の不平等をなくそう」
画像:3月17日は「みんなで考えるSDGsの日」
CSR・SDGs
3月17日は「みんなで考えるSDGsの日」
画像:SDGsの目標9「産業と技術革新の基盤をつくろう」
CSR・SDGs
SDGsの目標9「産業と技術革新の基盤をつくろう」
画像:【システム開発会社様向け】UI/UXデザインを改善して、付加価値を向上させてみませんか?
そのほか
【システム開発会社様向け】UI/UXデザインを改善して、付加価値を向上させてみませんか?
画像:助成金・補助金を活用してホームページ・パンフレット制作
ホームページ
助成金・補助金を活用してホームページ・パンフレット制作
画像:twitterのトレンドを活用して、より多くの人にリーチしてみよう
そのほか
twitterのトレンドを活用して、より多くの人にリーチしてみよう
画像:はじめてのECサイト。何を選べば良いのか?
ホームページ
はじめてのECサイト。何を選べば良いのか?
画像:2021年、今だからこそ打つべきWeb戦略
そのほか
2021年、今だからこそ打つべきWeb戦略
画像:SNSの「#(ハッシュタグ)」上手く使えてますか??
そのほか
SNSの「#(ハッシュタグ)」上手く使えてますか??
画像:WordPressとMovableType、結局どっちが良いの??
ホームページ
WordPressとMovableType、結局どっちが良いの??
画像:なぜ、Webサイト制作者からIEは嫌われてきたのか??
ホームページ
なぜ、Webサイト制作者からIEは嫌われてきたのか??
画像:ブログやコラムのネタに困ったら???
そのほか
ブログやコラムのネタに困ったら???
画像:Goolgeの検索ランキングで2020年のトレンドを振り返ろう
そのほか
Goolgeの検索ランキングで2020年のトレンドを振り返ろう
画像:中小企業のtwitterのマーケティング方法を考える。何をやるにもまずはフォロワー獲得が第一??
そのほか
中小企業のtwitterのマーケティング方法を考える。何をやるにもまずはフォロワー獲得が第一??
画像:なぜ、ホームページ制作会社によって価格の高い・低いが存在するのか?
ホームページ
なぜ、ホームページ制作会社によって価格の高い・低いが存在するのか?
画像:「良いモノは売れる」は本当なのか??
そのほか
「良いモノは売れる」は本当なのか??
画像:CMSと上手く付き合おう
ホームページ
CMSと上手く付き合おう
画像:これって知ってる?意外と知らないWebサイト制作の常識
ホームページ
これって知ってる?意外と知らないWebサイト制作の常識
画像:SEOはターゲットユーザーのニーズを想像しよう!
ホームページ
SEOはターゲットユーザーのニーズを想像しよう!
画像:オンラインビデオ視聴時間の調査結果を考察してみる
そのほか
オンラインビデオ視聴時間の調査結果を考察してみる
画像:「目的から手段」と「手段が目的」。困ったら道案内をしっかりつけよう!
ホームページ
「目的から手段」と「手段が目的」。困ったら道案内をしっかりつけよう!
画像:2021年5月、コアウェブバイタルがランキング要因に組み込まれることが決定!!
ホームページ
2021年5月、コアウェブバイタルがランキング要因に組み込まれることが決定!!
画像:スムーズな制作の裏には上手な進行管理が必ずある
そのほか
スムーズな制作の裏には上手な進行管理が必ずある
画像:なんでロゴって左上なの??
ホームページ
なんでロゴって左上なの??
画像:リスティング広告、どうやってキーワード決める??
そのほか
リスティング広告、どうやってキーワード決める??
画像:title要素から余分なモノは排除した方が良い??
ホームページ
title要素から余分なモノは排除した方が良い??
画像:Google検索について、ユーザーの質問に答える「ウェブマスターオフィスアワー」が公開
ホームページ
Google検索について、ユーザーの質問に答える「ウェブマスターオフィスアワー」が公開
画像:twitterにフリート機能が登場!!いったいどんなモノなのか??
そのほか
twitterにフリート機能が登場!!いったいどんなモノなのか??
画像:なぜ、そこに角丸なのか??
ホームページ
なぜ、そこに角丸なのか??
画像:デザインで齟齬が生まれないために!
そのほか
デザインで齟齬が生まれないために
画像:データは信用するのではなく、考察するために利用しよう!!
そのほか
データは信用するのではなく、考察するために利用しよう!!
画像:DXって何??
そのほか
DXって何??
画像:プロとしての仕事って何??ホームページ制作会社のディレクターが考えてみた
そのほか
プロとしての仕事って何??ホームページ制作会社のディレクターが考えてみた
画像:本当のアクセス解析とは?肝は「課題」と「仮説」
ホームページ
本当のアクセス解析とは?肝は「課題」と「仮説」
画像:PCからじゃないと見れないサイトがGoogleから消える!?
ホームページ
PCからじゃないと見れないサイトがGoogleから消える!?
画像:コーダーに求められる「スキル」って何??
ホームページ
コーダーに求められる「スキル」って何??
画像:仕事として「デザイン」を行うということ
そのほか
仕事として「デザイン」を行うということ
画像:WordPressの本当のメリットとデメリット
ホームページ
WordPressの本当のメリットとデメリット
画像:ハンバーガーメニューについて考えてみよう!
ホームページ
ハンバーガーメニューについて考えてみよう!
画像:Webデザイナーが使うのはMac?Windows?
そのほか
Webデザイナーが使うのはMac?Windows?
画像:「引き算のデザイン」でシンプルかつ分かりやすく!
そのほか
「引き算のデザイン」でシンプルかつ分かりやすく!
画像:Can I useでCSS3とHTML5の対応状況をチェックしよう!
ホームページ
Can I useでCSS3とHTML5の対応状況をチェックしよう!
画像:グラフィックデザインとWebデザインの違い
そのほか
グラフィックデザインとWebデザインの違い
画像:サーバって何?Webサイト運用に必要なサーバを簡単に説明します!!
ホームページ
サーバって何?Webサイト運用に必要なサーバを簡単に説明します!!
画像:SSL認証を簡単にわかりやすく説明しよう!
ホームページ
SSL認証を簡単にわかりやすく説明しよう!
画像:SEOについて改めて考えよう!!
ホームページ
SEOについて改めて考えよう!!
画像:カーニングでデザインの印象は大きく変わる!
会社案内・パンフレット
カーニングでデザインの印象は大きく変わる!
画像:アイコンをウェブフォントで表示する方法
ホームページ
アイコンをウェブフォントで表示する方法
画像:SDGsの目標8「働きがいも経済成長も」
CSR・SDGs
SDGsの目標8「働きがいも経済成長も」
画像:object-fit:cover;を利用して、簡単にトリミングを実行する
ホームページ
object-fit:cover;を利用して、簡単にトリミングを実行する
画像:代表的な印刷用紙の種類
会社案内・パンフレット
代表的な印刷用紙の種類
画像:大学IRとは?企業のIRとは違う広範囲の活動範囲
大学IR・統計分析
大学IRとは?企業のIRとは違う広範囲の活動範囲
画像:カラムレイアウトを簡単に実装するCSS
ホームページ
カラムレイアウトを簡単に実装するCSS
画像:GoogleAnalyticsを簡単な統計で考察してみる
ホームページ
GoogleAnalyticsを簡単な統計で考察してみる
画像:SVGとCSSで簡単な描画アニメーションを実現する
ホームページ
SVGとCSSで簡単な描画アニメーションを実現する
画像:SDGsの目標7「エネルギーをみんなに そしてクリーンに」
CSR・SDGs
SDGsの目標7「エネルギーをみんなに そしてクリーンに」
画像:WebシステムのUIデザイン、これだけは絶対守るべき点
そのほか
WebシステムのUIデザイン、これだけは絶対守るべき点
画像:SDGsの目標6「安全な水とトイレを世界中に」
CSR・SDGs
SDGsの目標6「安全な水とトイレを世界中に」
画像:SDGsの目標5「ジェンダー平等を実現しよう」
CSR・SDGs
SDGsの目標5「ジェンダー平等を実現しよう」
画像:「Core Web Vitals」を理解しよう!
ホームページ
「Core Web Vitals」を理解しよう!
画像:ページ表示速度を改善し、快適なWebサイトを制作しよう
ホームページ
ページ表示速度を改善し、快適なWebサイトを制作しよう
画像:コンテンツマーケティングでファンを獲得しよう!
そのほか
コンテンツマーケティングでファンを獲得しよう!
画像:Webサイトは営業の時代から接客の時代へ
ホームページ
Webサイトは営業の時代から接客の時代へ
画像:CSR、SDGs、ESGの違いと関係性について
CSR・SDGs
CSR、SDGs、ESGの違いと関係性について
画像:SDGsの目標4「質の高い教育をみんなに」
CSR・SDGs
SDGsの目標4「質の高い教育をみんなに」
画像:誰でもできる!自社の強みの見つけ方!!
そのほか
誰でもできる!自社の強みの見つけ方!!
画像:SDGsの目標3「すべての人に健康と福祉を」
CSR・SDGs
SDGsの目標3「すべての人に健康と福祉を」
画像:マインドマップのすすめ。自分の考えやプロジェクトを見える化しよう!
そのほか
マインドマップのすすめ。自分の考えやプロジェクトを見える化しよう!
画像:ペルソナマーケティングを考えよう!
そのほか
ペルソナマーケティングを考えよう!
画像:SDGsの目標2「飢餓をゼロに」
CSR・SDGs
SDGsの目標2「飢餓をゼロに」
画像:色が持つ効果を考えよう!
会社案内・パンフレット
色が持つ効果を考えよう!
画像:SDGsの目標1「貧困をなくそう」
CSR・SDGs
SDGsの目標1「貧困をなくそう」
画像:CSSだけでロールオーバーにアニメーションを設定する方法
ホームページ
CSSだけでロールオーバーにアニメーションを設定する方法
画像:Googleマイビジネスに登録して、自社や店舗をPRしよう!
そのほか
Googleマイビジネスに登録して、自社や店舗をPRしよう!
画像:オンラインで利用可能なデジタルブックのすすめ
会社案内・パンフレット
オンラインで利用可能なデジタルブック制作のすすめ
画像:良いデザインっていったい何?
会社案内・パンフレット
良いデザインっていったい何?
画像:jQueryを使わないSwiperの使い方【高機能スライダーを簡単に実装する方法】
ホームページ
jQueryを使わないSwiperの使い方【高機能スライダーを簡単に実装する方法】
画像:インタビュー前のヒアリングシート作成のコツ
そのほか
インタビュー前のヒアリングシート作成のコツ
画像:セレクトボックスをカスタマイズして便利にするSelect2の使い方
ホームページ
セレクトボックスをカスタマイズして便利にするSelect2の使い方
画像:なぜ、パンフレット制作でサムネイルやワイヤーフレームが必要なのか?
会社案内・パンフレット
なぜ、パンフレット制作でサムネイルやワイヤーフレームが必要なのか?
画像:CSR・SDGsの観点から採用コンテンツを考える
CSR・SDGs
CSR・SDGsの観点から採用コンテンツを考える
画像:1ページ内のスクロール遷移を簡単に実装するFSVSの使い方
ホームページ
1ページ内のスクロール遷移を簡単に実装するFSVSの使い方
画像:animate.cssとjquery.inviewで要素が表示された際にアニメーションを実行する
ホームページ
animate.cssとjquery.inviewで要素が表示された際にアニメーションを実行する
画像:ISO26000(社会的責任)の7つの中核主題とその課題
CSR・SDGs
ISO26000(社会的責任)の7つの中核主題とその課題
画像:中小企業がESG(CSR・SDGs)経営を求められる時代がすぐそこに。
CSR・SDGs
中小企業がESG(CSR・SDGs)経営を求められる時代がすぐそこに。
画像:CSR・SDGsの情報は積極的に発信していきましょう!
CSR・SDGs
SDGsがなぜ注目を集めているのか?
画像:レスポンシブでカラムの高さを揃える
ホームページ
レスポンシブで横並びカラムの高さを揃える
画像:jQueryでレスポンシブのブレークポイントを設定する
ホームページ
jQueryでレスポンシブのブレークポイントを設定する
画像:失敗しないパンフレット制作の依頼の仕方
会社案内・パンフレット
失敗しないパンフレット制作の依頼の仕方
画像:ホームページ制作の相場ってあるの?
ホームページ
ホームページ制作の相場ってあるの?
画像:2030SDGs ゲーム形式のSDGs研修会を開催しました
CSR・SDGs
2030SDGs ゲーム形式のSDGs研修会を開催しました
画像:CSR・SDGsの情報は積極的に発信していきましょう!
CSR・SDGs
CSR・SDGsの情報は積極的に発信していきましょう!
画像:【楽天】スマホカテゴリページをカスタマイズ
ホームページ
【楽天】スマホカテゴリページをカスタマイズ
画像:Wixを利用したホームページ制作サービス
ホームページ
Wixを利用したホームページ制作サービス
画像:楽天の商品画像登録ガイドライン遵守必須化について
ホームページ
楽天の商品画像登録ガイドライン遵守必須化について
画像:ISO26000の視点から、CSRの取り組みを考える。
CSR・SDGs
ISO26000の視点から、CSRの取り組みを考える。
画像:CSR=企業の変化しつづける社会への対応力?
CSR・SDGs
CSR=企業の変化しつづける社会への対応力?
画像:CSRは意識的に伝えないと知ってもらえない?
CSR・SDGs
CSRは意識的に伝えないと知ってもらえない?
画像:ホームページを制作会社に依頼するメリット
ホームページ
ホームページを制作会社に依頼するメリット
画像:contents.nagoyaに行ってきました。
そのほか
contents.nagoyaに行ってきました。
画像:成果の出るホームページの作り方
ホームページ
成果の出るホームページの作り方
画像:失敗しないホームページ制作会社の選び方
ホームページ
失敗しないホームページ制作会社の選び方
画像:使いやすいポケットフォルダ作成時のポイント
会社案内・パンフレット
使いやすいポケットフォルダ作成時のポイント
画像:LGBTとダイバーシティ(多様性) -第2回 LGBT研修-
CSR・SDGs
LGBTとダイバーシティ(多様性) -第2回 LGBT研修-
画像:6月6日(土曜日)、LGBT研修会を行いました。
CSR・SDGs
6月6日(土曜日)、LGBT研修会を行いました。-
画像:企業がCSRに取り組むメリット
CSR・SDGs
企業がCSRに取り組むメリット

コラム カテゴリ