新しいフッターの概念!
新しいフッターとは?
一般的なフッター=テキスト+リンクだと認識されています!
しかし、フッターの役割は、総合案内(どこに何があって、道筋が示されてる)であり、テキストのみではこれを担保することができておりません。
新しいフッターはページにどのコンテンツがあるか定義され、さらに閲覧者ごとに読むべきページが矢印でしめされています。
つまり、インフォメーション機能をコンテンツごとに果たしながらナビゲーション(顧客心理)にもなっているのが新しいフッターになります。
フッターあてにするのは、回遊してる人ある意味コンバージョンに近づいてる人。だから、ゴールにスムーズにいけるように案内してあげるのが親切です!
レスポンシブ対応はどうする?
⇒5列5行で最大25ブロックで表現する
スマホ:縦にする
タブレット:文字サイズを大きくする 視認できるサイズを定めて、画面幅に応じて文字サイズを導き出す。
文字サイズを1.3倍にして被ったりする。
その際にテキストの幅を変えるか、テキスト領域の位置を変える。
再度1.0倍に戻せば検証完了
フッターの在り方はどうやって見つけた?
きっかけは、あるとき、フッターがつまらなさすぎると思った
コーポレートサイトの改修指示書を作った時に、
見つけたいコンテンツがなかなか見つからなかった
で、ひらめいた。
閲覧者が行きたいところにすぐ行けるようにすればいいんだ!と。
サイト勉強会の時、皆想像だけで延々と議論していた。
想像で考えて議論するな!
描け!やれ!と教えた。
縮尺、文字の大きさどうなる?
ということは、ちょっと検証すればすぐ分かる。
心配事の9割は実現しない
実際やってみた方がいい
新しいヒアリングフォーム!
ヒアリングフォーム
青山さん>完全版で60分目安
ガーディアンに全て任せる版だと15分くらいで全てチェックし終える事が出来る。
細かい所まで作り込まれていて、解釈の幅が生まれないから、構築もデザインも迷わない。
Kさん>青山さんはこのヒアリングフォームを作られるとき、
実際のスマホと見合わせるようにして、実際に使いやすいかどうかを試されていた。
さらに、一つ一つの項目がちゃんと選択できるかどうかも、
あらゆる爪の長さや指の太さで試されていた。
ここに、想像したことを想像のままにせず、
実際に形にすることの大切さが現れていると感じた。
青山さん>そうです。それぐらいは当たり前です。
想像の中でのみ議論をしていてもキリがありません。
ホームページのチェック!
ロゴや会社名は兎に角、慎重に!!
ロゴは会社を表す象徴。既存サイトのロゴを尊重し、同じデザイン、配置のまま新サイトにも移行すること!!
また、社名は企業にとって命ともいえる存在。制作側の勝手な判断で企業の印象が変わってしまうデザインや扱いは絶対NGです。
新しいHPを制作するときも、常に相手本位の姿勢を持ち続けることで
お客様と良い関係を築くことができます!
スライダーは視認性と写真のイメージを損ねない事!!
Web学校ででた問題点は、以下の通り。
【現状の問題点】
➀全体のバランスが悪く、スライドするエリアが狭く見にくい
②スライド画像の文字の入る領域の位置がガチャガチャなので視点が定まらない。
③例えば二枚目の家の画像、完成した家のイメージなのに外観を台無しにする白ベタ
【修正点】
➀の解決策⇨スライダー部分を広げ、左サイドを斜めにすることで視認性UP
②と③の解決策⇨デザインの統一を行い、文字を写真の上に乗せるだけにする。また、ボタンサイズも6割まで小さくし、文字も「詳しく見る」から「注文住宅」へ修正!!
大きな白ベタ背景をなくし、透過などの対策を行うことで
写真から浮かびあがるイメージを損ねないように!!
ヘッダー
仕様としてヘッダー内のボタンとして横並びの位置となっている「お問い合わせ」「採用TOP」を デザインとして全く同じものとして並べてしまっている。
それぞれのボタンの意味を考えれば、それぞれ別のもので無ければならない。
サービスを紹介するコンテンツ
押してほしいという意図で設置しているリンクコンテンツが
文字が小さく「押さないでくれ」となっている。
文字の大きさはどう決めてるの?
決め方として、俗人的な感覚論ではダメ。
適切な型があるべき。
それがあれば指摘も減る。
型:
○○見出しと同じ文字サイズ .etc
同じボタンで文言が違う場合一番文字数が多いボタンで確認する
USPコンテンツ
前述コンテンツの見出しと同じ文字サイズにする。(型)
パララックスのアクションが欲しい。
なぜならば、
現行サイトにはいちいちアクションがある。
これがサイトオーナーの好みである可能性もある。
そして、リニューアルとして現行サイトを越えなければならない。
まとめ
WEBサイト制作の品質はどこを目指すべきか?
こうやってたら、何十と指摘上がってくるって分かるか?
俺の全力モードまで来いと言ってるわけじゃない。
SCSC CUEでお客様の期待を超える仕事をしろと言ってる。
期待を超えて、初めて価値がある。
顧客からもたらされた、数少ない情報をどう活かすか。
現行サイトから何を見て取るのか。
こういった視点は、設計だけじゃなく、デザイナーも構築者も皆が必要。
そこから何をどう類推して自分達の業務に活かすのか。
それって「意図を汲む」に近い。
そこにしか期待を超える仕事は無いってことを、今回は教えたよ!
品質を守る!そのための業務の基本の型
めんどくせーと思ったら面倒かもしれないが、整理整頓したら、すごくシンプルになる。
俗人的なことを許してるから、品質に差が出てチェック項目が増える。
ゴールを明確にイメージしないで取り掛かるから、めっちゃくちゃ時間かかる。
向かう先があるなら、そこをちゃんと見なさい。
見れないなら、見れる人にちゃんと聞け。
定めたゴールが間違っていてもいい。明確に定めてるから、ゴールの手前で気付ける。
そして想像の域の中で議論するな。
ゴールは見えてるなら、ちゃんとやってみて自分の目で見ろ。
全ては体系化からの定義。でも、それを感じ取るのは右脳。
そこから深層理解に努めて、体系化して定義する。
そこまでできたら共有してルール化って簡単だよね?
それがグルグル回ったら良い輪廻が組織に生まれる。
*COMMENT*
堀田 大渡
*コメント*
フッターについてはこれまでただのリンク集だと思っていたところが、そもそもの概念をひっくり返していただきました。
インフォメーション機能として、ただ単にリンクを整列させておくのではなく、閲覧者がサイトを見た際に、どのコンテンツがどこにあるのかを知らせることが出来なければいけないということと共に、それをどのように閲覧者に伝えるかという所が大切なのであり、形に制限はないのだと実感いたしました。
また、後半のサイトの評価についても設計には各コンテンツに意図があり、それを知らず知らずのうちにつぶしていることがあると痛感いたしました。
フォントのサイズ一つの細かいところであっても細心の注意を払ってみていこうと思います。
*コメント*
森田 惟之
*コメント*
それにあたり、こことここを同じする。
というシンプルなルール付けを行うことを学びました。
確かに
サイトの修正指示を出す際に、ここに合わせるこことそろえる
という言い方を幾度もしており
今回学んだ型ということが非常にすんなりと入ってきました。
これは、構築者の共通認識のはずだと思いました。
*コメント*
河原田 ゆきえ
*コメント*
テキストリンクが整列してるもの、という固定概念がありましたが、閲覧者をゴールにスムーズ誘導するためのコンテンツ主体の構成で、自由な発想で設計する形となっていて、目から鱗でした。
青山さんからは、普段から「頭は柔軟に使え」と教わっており、柔軟に考えたら、まだまだいろんなところに新たな発想でるな!と思いました。
また、WEBサイト制作の品質に限らず、仕事は「お客様の期待を超えて、初めて価値がある。」とあらためて思いました。
そのためにも、まずは深層理解の上で業務の基本の型をきちっと成すこと。真理だと思います。
*コメント*
齋藤 圭亮
*コメント*
構築目線から、物事を検証する考え方を学ぶことができました!
また、後半は実際に構築中のホームページのチェックをいただき、きちんと決めるべきことを定義してルール化していれば一気に生産性が上がるのにこれまでやっていないことをご指摘いただいてしまいました。
やはり積み上げと、やるべき時にやるべきことをやる、何においてもこれだなと改めて気づかされました。
*コメント*
小川 みき
*コメント*
入社当時から常々言われ続けていることではありますが、
これはサイト構築においても変わらない思考でした。
着手する前の段取り(定義)があって、より生産性の高い制作が行えます。
またお客様により満足いただけるサイトとなるための思考として、持ち合わせた情報を駆使して自由な発想を持つことと、実際にやって得られる経験を繰り返すことが全体の成長につながるのだと気づきました。
*コメント*
谷口 かなこ
*コメント*
本来のインフォメーション機能を果たしながら顧客心理にまで及び科学されたフッターです。
そもそものフッターはこういうものだという、発展の気持ちもない目線でフッターを見ていたので目から鱗でしたが、
理由を聞いて納得しかないですし、フッターの持つ可能性を更に知ることができました。
実際のサイトで実装されるのが楽しみです。
次にレスポンシブウェブデザインについても、まずは事実から実際に検証し、発展させていくことを教えていただきました。
レスポンシブウェブデザインに限らず、全てに通じる検証と仕事の仕方でした。
後半には作成中のサイトをサンプルとして、
正しい定義やルールを大切にすること、同時にサイトから受ける感覚も大事にすることを学びました。
定義やルールは、想像から作るものではなく事実から落とし込んだ最適で常にアップデートされたものである必要があるため、個人としてもチームとしても急務だと改めて気づかせていただきました。
*コメント*
紀井 斎
*コメント*
部内スタッフコメント
主婦隊:寺田あやの
今回の冒頭、変わった図表のようなものを見せて頂きましたがフッターであるとのことでした。
WEBに詳しくない自分でも、フッターはテキストが並んでいるだけというイメージなので、チャートのように矢印があるフッターに驚きました。
フッターはインフォメーション機能を持つだけでなく、ここまで見に来た閲覧者をナビゲートし、もう一度見たいコンテンツに戻れる
ようにしなければいけないということで、確かにそれが分かり易く表示されていれば便利だろうと感じたのでこのフッターはすごいと思いました。
またこのフッターを他のデバイスでも設置するという話から、レスポンシブWEBデザインという言葉の意味を教えて頂きました。
HP診断でPCサイズからスマホサイズにした際崩れが無いかをチャックした項目がこのことなのだと思い出し理解しました。
最も印象に残ったのは『想像の域の中で議論しても始まらない。検証してみる』との言葉です。
興味があること以外、疑問に思ってもなかなか自分で調べることをしない自分を恥じすぐにでも実行していきたいと思いました。
主婦隊 : 吉田けいこ
今回のWEB学校は、ど素人目線の自分自身、衝撃的な内容でした😮ホームページのフッタは、文字が目次みたいに並んでいなければならない、IT業界のルールだと思っていたので本当にびっくりしました。フッタは、最後まで見てくれている人、コンバージョンの高い興味がある人をさらに回遊、誘導できれば、とてもお客様目線で親切丁寧だと思いました。フッタを丁寧に図解にしてインフォメーションの役割を果たすことが出来るということ。ホームページ製作の為のヒアリングフォーム、作り手側とお客様側の相違なく報連相が出来て、かなり業務が時短になる凄いフォームが出来るということ学ばせて頂きました😌
*コメント*
池内 大翔
*コメント*
フッターには、リンクテキストが定石という固定概念がありましたが、インフォメーション機能として閲覧者をゴールに導くための一コンテンツとして機能させることができることを学びました。
アイデアを出すときのポイントとして、青山さんから常識を疑え!ということをよくご指導いただきます。
安牌、安定というだけで思考するのではなく、目的のために最善となる策を常日頃から模索するようにしたいです。
現在制作中のサイトにおいても、デザインやフォントについて勉強をさせていただきました。「顧客本位」で物事を考えることができれば、現行サイトからどのような変化を望んでいるのか、ひいてはどのような部分に気を付けて制作するべきかということに気付けると思います。
仕事を行う上で、常によいホームページにするための思考を巡らせお客様に喜んでいただけるようなホームページ制作をしていきたいです。
*コメント*
清水 あやな
*コメント*
フッターとは単なるインフォメーションの提供だと思っていました。しかし、フッターを見ている人というのは、そのサイトの情報をわざわざ一番下まで見てくれた人であり、一番コンバージョンに近い人といえます。そのため、その人をそのまま帰してしまうのではなく、さらに行動を促進させるために、その人に合ったコンテンツにスムーズに移動させられる仕組みを作る必要があると学びました。
また、ホームページのその他の場所のデザインについて、「ロゴや社名は企業の象徴であり、その取り扱いには細心の注意を払うべきだということ」「スライダーやボタンの配置も、視認性やデザインの一貫性を保つための工夫が必要だということ」なども分かりました。ホームページによって顧客を獲得するためには、顧客の期待を超えるデザインや機能を提供する必要があります。そのために、細部までしっかりと検証し、実際の使用を前提に設計を進めることが必要であるということを学びました。
*コメント*
星 翼
*コメント*
これまでの私のフッターに対するイメージは、単に主要ページのリンクテキストが並んでいるだけのもの、というものでした。 しかし今回の内容は、その概念を覆すもので、新しいフッターの在り方について解説いただきました。 初めて見たときには「サイトの導線図?」と思いましたが、実はそれがフッターだと知り、非常に驚きました。
コンテンツの目的やターゲットに応じて柔軟に考えること、そして複数人でアイデアを出す際には、想像の中で議論を進めないことの重要性も学びました。 ただ想像して「ああでもない、こうでもない」と言っているだけでは何も進まず、実際に試してみることが大切だということを再認識しました。
「自分の目で確かめる」→「体系化」→「定義」→「共有」→「ルール化」の流れを意識し、今後の業務に活かしていきたいと思います!
*コメント*
中澤 めぐみ
*コメント*
そこからどのようにしてあの形に辿り着いたのかなどを詳しく学ぶことができました。
(171回の録画を172回リアル参加のあとに視聴した為、順番が前後しております)
今回のお話で特に心に残った部分として、
・顧客からの情報をどう活かすか?
・現行サイトから何を見て取るのか?
これらは設計者だけでなく構築者やデザイナーにも漏れなく必要な視点である、というお話がありました。
例えば、一番大切な社名を薄い白抜き文字で表現したりするのは、
デザイン的に意図があったとしてもNG。
また、ディテールのデザインに統一性を持たせるために小見出しとボタンの文字の大きさを揃える など、
ともすれば構築者の感覚で行ってしまいそうなこともしっかりと定義づけておく、など
こういった諸々の事柄を漏れなくクリアしていくためには、
全行程の担当者がしっかりと意図を理解して動く必要があるということです。
私の所属部署での業務においても、特にこの
「意図を共通認識とする」という部分は大切であると感じました。
今回も、貴重な学びの機会をいただきありがとうございます。
*コメント*
児玉 尚哉
*コメント*
新たなものを生み出すには既存を疑うこと、そして仮定があっているのかしっかりと検証して固めることの必要性を実感いたしました。
また、それを今回取り入れようとしているサイトのチェックも行いましたが、顧客本位に立てば気づくことやデザインを科学していれば気づくことばかりでした。
*コメント*
石川 航
*コメント*
今回使用するフッターは今までにない斬新な構成で、
長くコーダーをやっている自分も思いつきもしない構成でした
サイト内のページ構成を網羅するインフォーメーションと、
閲覧者の目的に合わせたリンクを導線形式で伝えるナビゲーション
両方の役割をもった構成になっています
その一方メインビジュアルの構成は、まだ課題が残る状態
お客様の社名が今一つ見えずらかったり、
キャッチコピーが大きすぎて、写真部分を圧迫してしまったり、
顧客の魅力をより引き出せるようにするには、1つ1つのコンテンツの意図を汲まなければと実感しました
*コメント*
中川 あすみ
*コメント*
*コメント*
渡邉 大也
*コメント*
これまでは勝手にテキストリンク出なければいけないと思い込んでいましたが、そんなルールはなく、ただ固定概念にとらわれて思考を放棄していたなと反省しました。
より閲覧者視点にたったホームページにするにはどうしたらいいのか日頃から考えていきたいと思います!
また、後半の自分たちが作ったサイトへの評価では、一つ一つこだわりを持ってモノづくりをしなければいけないと思いました。
仮に一つ一つが小さなミスやズレだったとしてもそれがサイト全体で起こってしまっていたらちりつもでダメなサイトが出来上がってしまいます。
プロの仕事として、一つ一つにこだわりを持ち、お客様の期待を超えるようなホームページを作ることができるよう、日々学びと思考をしていきます!
*コメント*
久保 日向太
*コメント*
紹介されたフッターのその自由な発想に目が活きがちです。ただ、そのプロセスは、現状の課題を明らかにしたうえで、「フッターの役割とは何か」を抽象化し、その役割を損なわずに問題解決も可能な、具体へと落とし込む流れです。
ただ、柔軟に使うのではなく、正しいプロセスと明確な言語化のもとで初めて柔軟に使えると分かりました。
そして、仕上がったHPをチームでよりよくする時に必要なポイントは、【自分の業務時をイメージすること】です。例えば僕は営業マンですので、お客様と相対するときに、どんなHPならご納得していただけるか。自分の特異な視点を活かしあうことで、初めていい力になる。どんどん自分の視点を活かして、いいHPに繋げていきます。
*コメント*
熊谷 ゆか
*コメント*
フッターは今まで「リンクを貼っているところ」ぐらいにしか思っていなかったのですが、フッターは「総合案内」で重要な役割ことを学びました。
コンバージョンに近づいている人たちを遠ざけないようにすることが大切だと感じました。
サイト評価のお話では、常に相手本位であることの大切さを改めて意識していかなければならないと感じました。
また業務で毎日ロゴを取り扱っているので、ロゴについて大切な部分を気を付けて制作していこうと感じました。
*コメント*
山本 高広
*コメント*
フッターをただのテキストリンクでのインフォメーションから視覚的なインフォメーションとして機能する形となりました。
実際に構築を担当しましたが、
最初カンプを見た時にえ?と驚き、
どう実装しようか頭を悩ませました。
構築は出来ましたが、このような見せ方をするフッターを持つサイトは世界中見ても存在しないと思います。
それほどフッターの概念が変わりました。
*コメント*
諸隈 ゆきこ
*コメント*
いつも見ているフッターはテキストが並んでいて、そこにリンクがついているものです。
ですが、今回制作しているフッターは見たことがないフッターでした。
なぜこのようなフッターになっているのかというと総合案内として考えるので図解のように表現されていることが明確に分かりました。
このフッターはとても閲覧者目線になっておりインフォメーションでありながらナビゲーションの役割もはたしている事に驚きと感動でした。
しかしフッターとはこういうものだという固定概念がものづくりの邪魔をしているとも感じました。
通常の業務でみんながしている内容をただただ追いかけるだけでなく、前段階の意図を学ぶことが出来とても良かったです。
*コメント*
鈴木 健太
*コメント*
まずページ単位ではなくコンテンツのインフォーメーションとするという発想が思い浮かびませんでした。
以前のFAQにもそうですが、設置しておけば良いと毎回済ませてしまっていた箇所こそ探られていない可能性があると感じました。
想像で離さず手を動かしてみるということは大事なことだと思いました。デザインについてでも空想で、ああでも内向でもないと議論して全く前に進まないことがよくあります。手を動かして具体的なものをつくりそれを議題にしないと有効な議論にもならないので、大事なことだと考えました。
*コメント*
岡部 ちよ
*コメント*
特に、ユーザー視点で考え、実際に形にしてみることの重要性を実感しました。
今後は、これらの知識を活かして、自部署の業務にも落とし込んでまいります。
*コメント*
稲福 るか
*コメント*
フッターはテキストとリンクで案内の役割があると認識しておりましたが、インフォメーション機能のあるフッターは驚きました。フッターを見る人というのはサイト内を回遊している人であり、その人はコンバージョンに近づいている人ということをしっかりと理解し、ゴールまでの道筋を示してあげる役割を担うこともできるということで、角度を変えるとおもしろいと感じました。
また、以前コーポレートサイトの設計案を出させていただいた時に、頭だけで考えるのは難しいと感じて、今回、実際に手を動かし、想像を形にしてみるというフェーズの大切さを学びました。
お客様の期待を超えるような提案をするのが、お客様との信頼にも繋がると感じ、直接設計に関わることは少ないですが、WEB戦略MTGでより良いサイトにするための提案ができるように勉強していきます。
*コメント*
鈴木 はるな
*コメント*
フッターは、インフォメーションを果たしながら、ナビゲーションにもなっているためゴールにスムーズにいけるように案内してあげるのが親切だということを学びました。
フッターはあまり目立たないものだと思っていましたが、たしかに、私自身がHPを検索した際に、下までスクロールしたのに次に見たい場所に辿り着けなかった時、戻るか上までいかないといけないという手間がありました。目的を見つけられなかった時にはサイトから消える。まさに制作者としてやってはいけないことだと思いました。すぐにいきたいところに行けるようにナビゲーションする。それがフッターの在り方だなと改めて感じました。
固定概念にとらわれてはいけないということ、HP1つ1つの機能をきちんと理解していきたいと思います!
*コメント*
諸隈 ゆきこ
*コメント*
前回フッターはインフォメーションであり、ナビゲーションというのは学びました。
しかし今回はなんとCVにも繋がるかもしれないということまで学びました。
またタブレットやスマホでの見え方も勉強しました。
単純に横じゃダメだから縦!という安易な考えではだめです。
現在制作している案件でも青山さんから何度もご指摘いただいているように定義さえすれば生産性は絶対上がると確信しております。
勝てるサイトをお客様に提供できるように細部にまで魂を込め何らかの形で制作に携わっていきたいです。
*コメント*
*コメント*