Blog2016.09.20chie基礎知識!ZとFの法則Web制作デザインWEB制作現場シェアTweetこんにちは!Maromaroのchieです。暑さも和らいで、秋っぽくなってきましたね。秋と言えば昔は、「東京ゲームショーの季節だ!」と毎年楽しみにしてましたのを思い出します。東京ゲームショーは今年も大変の賑わいを見せ、なかでも注目なのはVR系のゲーム!VRがもっと復旧すると、もしかしたらWEBサイトも実際お店に行ってるような感覚で見れるようになるかもですね。今回は、初心者WEBデザイナーさんに是非とも覚えておいて欲しい基礎知識『Z』と『F』について。目次ZとFって?グーテンベルク・ダイヤグラムZの法則Fの法則ZとFの違いって?Zの法則Fの法則まとめZとFって?結論から言うと、『Z』と『F』は広告やWEBにおける人の目線のことです。人の目線には決まった動きがあると言われており、それが『Zの法則』と『Fの法則』。普段何気なく見ているチラシやWEBサイト。チラシを見た瞬間、ページに入った瞬間、自然と左上に視線がいっていませんか?広告業界、WEB業界では当たり前の法則ではありますが、割と知らなかったりする法則だったりもします。グーテンベルク・ダイヤグラム『Zの法則』と『Fの法則』の前にプチ知識として、『グーテンベルク・ダイヤグラム』について。グーテンベルク・ダイヤグラムとは「均等に配置された情報を見る時、視線は左上から右下に流れていく」というパターンのことで、活版印刷技術の発明者として活躍したヨハネス・グーテンベルグの名をもった視覚誘導です。横書きが主流である欧米文書で主に使われています。グーテンベルク・ダイヤグラムはWEBよりも印刷物に当てはまるパターンのため、WEBには主に『Zの法則』と『Fの法則』を用いることが多いのです。アルファベットの『Z』のように動くことから『Zの法則』と呼ばれています。チラシなどにこの手法は多く使用されています。アルファベットの『F』のように動くことから『Fの法則』と呼ばれています。『Fの法則』については、ユーザビリティ研究の第一人者ヤコブ・ニールセン博士の調査で明らかになっています。参照:ヤコブ・ニールセン博士の論文の原文よりZとFの違いって?一見、あまり変わりの無い法則に見えますが、ちょっとした行動の違いがあります。初見ユーザーに見られる行動。ページの全体を見るため、このような目線になること多い。トップページなどはこの『Zの法則』を用いたレイアウトが多い。Fの法則リピーターに多く見られる行動。上から順にじっくりと上部を閲覧してから、下部に移動することが多い。WEBの調査によって明らかになったパターンのため、WEBサイトの取り込みへの信頼が高い。商品ページや記事ページに『Fの法則』を用いたレイアウトが多い。まとめWEBデザインは、時代や目的などにもより視線誘導は変わってくるかもしれませんが、基礎知識として『Zの法則』と『Fの法則』は覚えておいて損はありません!一番見せたいことは上部に配置する!これ重要です。Blog悩んだときに!定番WEBレイアウトこんにちは!Maromaroのchieです。暑さが続くな~と思っていたら、突如寒くなりすっかり秋らしくなりましたね。ご飯も美味しい季節となりついつい食べ過ぎちゃいます。今回は、WEBのレイアウトについて。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。2018で何が変わったのか?2016.07.25永久保存版!Webサイト更新マニュアルの作り方。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。