デザインする際に注意すること
例えば、色覚障がいのある人にとって識別しにくい色の組み合わせがあることを知った上でデザインをする必要がある。
絶対に通じる色も調べておくと自分のプラスになる。
お電話で話ながら自社サイトを見てもらう際にもクリッカブルを目立つ色にしておけば、「その色のバナーを押してみて下さい」等、話が通じやすい。
相手にサイトが「どう見えるのか？」というものの考え方をする必要がある。
視認性を担保するために
視認性を担保するための改善ポイント
・ごちゃごちゃしていてどのコンテンツを見て欲しいのかが分かりにくい
・現状では「セミナーやってます」「HPの無料進呈」が目に入ってくるが、「セミナー出たらすごいHPがもらえますよ」の促しの方が大事になってくる
・インフォメーションからナビゲーションに変える必要がある
・周りのコンテンツより目立たせて強化する必要がある
第二幕スタートダッシュするのか？
・情報の流れが変わるポイントとポイントの意識から消える狭間コンテンツは見られなくてもいい。
・本来のコーポレートサイトには似つかわしくない言葉選び。遊び心がある。
・でも、読んでもらうことが大事なので、タイプライター風な表現を使ってもいい。
・HPは 1st viewが命、第二幕は 命ではないので、空ぶってもいい
どこまで考えてWEB設計、制作、デザインをするのか。
何を押し出すのか？設計者はそれも合わせてオーダーせねばならない。
コンテンツによっては必ずしもPCと同じ設定をスマホでも施す必要はない。
派手なアクションや強制的に止める方法は見られるツールや状況によっては邪魔に感じられてしまう。
誤った解釈が制作、デザイナーに伝わらないようにしなければならない。
そこまで考えてWEB設計、制作、デザインをすること。
それによりHPの成績はまるで変わってくる。
サイト改善のスタートは目的意識と変化起源性。
変える以上は対応・対処がついてこないと変化に対応できない。
結局は、適応力、コミュニケーション力、専門技能、基本技能、継続力、アウトプット能力、判断力といった、未来社会を生き抜くに必要な能力に帰結する。
今回のWEB学校の隠れたテーマかも！？
・まずSCSCが主語になっていることに気づくべし！
・「このコンテンツでは何を訴えているのか？」を考える。
・これまでの流れで疑問をたくさん残してきた流れを意識する。
・「何故」の部分が最後に信頼に変わるようなコンテンツでなければならない。
・このコンテンツで信頼性の担保の役割を担うべきである。
コンテンツはストーリーになっている。
本日最後に教えていただいたコンテンツは、仕事ぶりについて表現している。
つまり、信頼を獲得する系のコンテンツ。
コンセプト・ビジョン、こういう会社でこういう仕事をするんですよ…
コンテンツが連なって物語になっている。
起承転結のようにコンテンツが配置されている。
全体を通してこの考え方で指示書は作られる。
＊COMMENT＊
生尾 ゆうこ
＊コメント＊
今回は自社HPのTOPページが題材でした。
HPを制作する上で、実際にHPを訪れる顧客目線でどれだけ思考できているかの重要性を改めて感じました。
自分なりに解釈してみたつもりでも、青山さんは全てを網羅した答えを持っていらっしゃって、いったいどこまで先を読んでいらっしゃるんだ、、と驚愕しました。
青山さんは「遊んだ」とおっしゃっていた改善案も、結果的に顧客を飽きさせない目を引くコンテンツに変身するのが想像できました。まいりました🙇🏻♂️
人間力を構成する要素の中で、自分がどの能力を使えていてどの能力を使えていないのかも意識しながら今後の業務にあたりたいと思います。
楽しく学べました！ありがとうございました！
＊コメント＊
谷口 かなこ
＊コメント＊
今の時点では正直そこまで全方位考えて設計・制作・デザインするものなのかと思ってしまいました。
ですが本来はその状態が基本線であるべきで、
特にコーポレートサイトのTOPページの役割とは一体なんなのか？についても以前のWEB時間で時間を取って教えていただいたことです。
TOP役割＝第一印象でありインフォメーションであり、ナビゲーションで、手抜きはもちろん戦略なきコンテンツも許されません。
ひとつひとつのコンテンツが連なり物語になっていく、自分たちでその物語を紡いでいく心持ちが必須ですので、
次回のWEB学校でも積極的に学びを得たいと思います。
＊コメント＊
河原田 ゆきえ
＊コメント＊
ご指示としていただいてしまうと、つい何も考えずに自動販売機的に作業をしてしまいがちですが、それでは何も成長できないのでご指示をいただいてしまったら、とことん意図を汲んで、より良くするために工夫を凝らす（でも意図から絶対外さない！！）を意識して実行するようにしています。
今回の改修内容、紐解いていくと、やはり意図を汲みきれていなかったなと実感。
敗北です。。ボタンが黄色いことの意図については「なるほど＞＜！！！」でした。
アポコールテストで、実際にやってみようと思います。
全部ストーリーになっていて、誰がどんなシーンでこれを見るのか想定しまくって設計する、というのが設計においてはとても重要ですが、その「誰」を想定する俯瞰性能が私にはまだまだ足りてないな、と実感しました。
WEB学校で学ぶことは、WEB領域だけでなくリアルのビジネスや日常の業務においても考え方や自分の足りていないところに気付くきっかけにもなるので、これからも積極的に学ばせていただこうと思います！
＊コメント＊
小川 みき
＊コメント＊
先日の全社会議で展開された指示書に対してbefore、after箇所を確認しながら、その指示の意図を深く理解していきます。
指示書には書かれていない設計意図を汲み取る難しさはもちろんありますが、印象を残すためのテキストの表示方法や、アニメーションを考えるところは自身の引き出しの少なさを実感したので、世にたくさん出回っているサイトを見てさまざまな表現を学ぶ必要を感じました。
また訪問者の視点に立って配慮された配色であるか、いわゆるカラーユニバーサルデザインの重要性を教えていただき、
サイト制作の奥深さを知る回となりました。
＊コメント＊
下川 春樹
＊コメント＊
WEB学校開催いただきありがとうございます。
今回はご指示頂いたコーポレートサイトの改修における、TOPページの各コンテンツのBefore→Afterの内容が題材でした。
改修後のサイトを見て、良くなってる！と思ってしまっていましたが、ご指示頂いた内容の意図や理解が全くできておらず、ご説明頂いた内容は聞いてなるほどと思わされるものばかりでした。
背景が黄色のボタンについて、「デザイン的にきつくないか？」と問われたところでは、何故黄色にしているのか？をもし色盲の方々が見られた時の事まで考慮されているのに驚きました。色盲の方々についても系統があり何色が見えにくいなどの予備知識を持っておられるからこその発想で、知識の引き出しの必要さも感じました。
またコンテンツの配置にも意図やストーリーがあり、その辺りもしっかり認識していないと意図を汲み取る事が出来ず、内容も理解出来ませんので、サイトを見る目をもっと養っていかないといけないと思いました。
＊コメント＊
宮城 わか
＊コメント＊
今回は自社のコーポレイトサイトのコンテンツ改修の内容が題材でした。先日の全社会議で改修すべき問題点のご指示があり、改修後のTOPページを確認しながら、TOPページのコンテンツがどのような物語になっているかが青山さんの説明を聞いて納得でした。
例えばメインコンテンツのウェビナーバナーリンクに関しては、現状まだクリックされるデザインになっていない、セミナーに出たらなんか特典がもらえると思われるではダメ、すごいHPがセミナーに出るともらえるということを訴求したいなど、一言一句理解すると、バナーのデザインはこのメインコンテンツ用に作り替えないといけないという事でした。
また色盲についてにもお話があり、どんな人でも一目でわかるように色盲にはどんなパターンがあり、どんな色が見えにくいもしくは見えやすいのかを制作している私たちは予備知識として入れておかなければいざそのようなお客様が目の前にいらっしゃった場合即時対応できないよということも勉強になりました。
ありがとうございました。
＊コメント＊
渡邉 大也
＊コメント＊
TOPページの中で、社長の青山さんが修正項目としてあげてくださった箇所に対して、どのような意図で修正指示をくださったのかを理解せずに修正をしても、全く意味のないものになってしまうと感じました。
そしてそのためには、TOPページの役割、そして全体や前後コンテンツの流れをしっかりと理解しなければいけないと思いました。
行間を読み取り、成果の出るホームページにできるように自分ごととして捉えていきます！
＊コメント＊
岡部 ちよ
＊コメント＊
・特に印象に残ったのは、ユーザー視点でデザインを考えることの大切さです。
色覚障がいのある方への配慮や、電話でサイトを見ながら説明する際の視認性など、今まで考えたこともなかった視点でした。
・また、誰に何を伝えたいのかを明確にすることが大切だと学びました。
・コンテンツをストーリーとして捉えるという考え方は、非常に興味深いです。
閲覧者に飽きさせずに、最後まで読み進めてもらうためには、コンテンツに一貫性を持たせることが大切だと感じました。
私自身もこれまで、伏線回収のあるドラマなどには、特に引き込まれる経験がありました。
コンバージョンに繋げるために、閲覧者目線で、あきさせない工夫を学びましたので、
人事ブログの作成にも活かしてまいります。
＊コメント＊
鈴木 はるな
＊コメント＊
青山さんが指示書(改善案)を作成していただき
全社でサイトを改善していこうということで
ファーストビューから下にスクロールしてコンテンツを見ていきました。
指示と意図を解釈を間違えるとデザインもまるで変ってしまうという点で、言葉1つでも間違ったことを伝えてしまうと、解釈の幅が広がってしまうのだなと感じました。
自分がなにか指示や依頼をした際に、気を付けていかなければならないなと思います。
目を止めた瞬間に訴求しなければならないということについては、HPのパーツの動きでどうやって視線を止めることができるのかよく考えて制作していく必要があるのだなと感じました。
今回の学びを自分の業務に活かしていきます！
＊コメント＊
石川 航
＊コメント＊
このWeb学校の後、コメントを書き込むまでの間にコーポレートサイトの改修にも入り、
他にも修正が必要だなと感じた箇所はありますが、それはあくまでも「点」の話
1つ1つのコンテンツの配置やその意図、色盲の人からの見え方まで考慮した色使いなど、
サイト全体を1つの枠組みとして捉えて、閲覧者の行動心理を「線」として捉えていく必要があります
これからウェビナーの動きを進めて行く上で、コーポレートサイトを訪れる人も増えるはずなので、
ウェビナーの主催として、ホームページ制作会社としてホームページに求められていることの深層理解に努めます
＊コメント＊
齋藤 圭亮
＊コメント＊
普段何気なく見てしまっていましたが、改善ポイント、コーポレートサイトの強みも見えてきました。
膨大なコンテンツ量があるので、それを活かす設計に改造していく必要があります！
その中で特に印象に残ったのがストーリー立てと遊び。
目的があり、それを叶えるストーリーがあるからこそ最適なコンテンツ配置ができ、戦略的に遊び・チャレンジ要素を入れていけるのだと学びました。
自社のコーポレートサイトを最強にして、こうやったら成果上がりますよ！とお客様に提供できる価値を磨いていきます！
＊コメント＊
諸隈 ゆきこ
＊コメント＊
視認性というところで今回のデザインは視覚障害のある方にとって識別しやすい色になっているを学びました。
WEB上でもバリアフリーがいかに大事かを学びました。
またTOPの役割の一つにインフォメーションがありますが、内容によってはナビゲーションにも変化する必要があることとっても納得しました。
またHP内でも第一幕と第二幕途がある事も知り、私の中で楽しさが最大に盛り上がっているのに、今回はその内容の途中で抜けないといけなかったでのとっても残念でした。
現在業務の中でもコーポレートサイト改修がありますので、直接作業をする側ではありませんが、気づいた事は発言していきたいです。
＊コメント＊
鈴木 健太
＊コメント＊
今回のWEB学校では以下のことを学びました。
ガーディアンコーポレートサイトTOPページに設置されている黄色いボタンは、電話口でホームページへと誘導しボタンを押してもらう際に、色覚障害の人でもどれを押せばいいか明確に伝わるように、色を黄色として設計されています。機械的に要素を設置するのではなく、ホームページの要素の用途や目的に沿ったデザインや設置をしなければならないと学びました。色覚障害の方の見え方についての知識を身につけ、それを考慮したデザインをしなければならないと思いました。
2つ目は動きの設計、映像的視点の重要性です。サイト設計の際には動きのないものを紙面にならべるように考えるだけではなく、映画のように各ショットを繋いでストーリーを紡ぎ訴求する映像的な考え方も必要と感じました。
3つ目は閲覧者に、あるコンテンツについて全て理解してもらう必要はないということです。設置するからにはわかること、理解できることが不可欠と思っていました。「なんかすごい」と思わせて、次のコンテンツにつなげるというような発想で設計をしていいんだという新しい視点を得ました。
4つ目はページのストーリーです。一つのページの中にストーリーがあり、一幕、二幕と転換がある場合があります。そのストーリーと転換を意識して、コンテンツがどのようにデザインされていなければいけないか考えなければならないと感じました。サイトを眺めるときにストーリーを意識して見ていこうと感じました。
5つ目は設計の意図についです。意図を汲んだ上でデザイン、構築をすることは不可欠と改めて思いました。まず意図について考える、それを第一にやっていきたいと思います。
6つ目は同じものを提示する際でも、その用途によって提示の仕方を変えることが大事と学びました。同じ勉強会についてのコンテンツでも、勉強会のLPのMVでの見せ方と、コーポレートサイトのナビゲーション機能においての見せ方は異なります。
＊コメント＊
山本 高広
＊コメント＊
視認性の話からはじまりましたが、
ウェブアクセシビリティに関する基礎知識の大切さを学びました。
色にフォーカスされておりましたが、
フォントサイズやフォントの太さもかかわってきます。
WEBサイトに訪れる、様々な閲覧者の立場に立つためには、
アクセシビリティの知識を当たり前のように知っておかなければ、
色覚障碍のある人や他に視覚的障碍を抱えている人には優しくないWEBサイトになってしまう為、構築者としては情報をアップデートしておかなければと感じました。
＊コメント＊
稲福 るか
＊コメント＊
入社時にコーポレートサイトをよく見てどのコンテンツが印象に残っているかを答えたのですが、自動販売機的な見方をしていたのだと気づかされました。
どのコンテンツにも必ず意図があり、配置にも意味があるということを知ることができました。
デザインどうこうではなく、色覚障害の方でも分かるように色に配慮したり、インフォメーションではなくナビゲーションにする必要があるコンテンツだったり、遊び心を入れても良いコンテンツだったりと、一つ一つ見ていくととても興味深いと感じた。
特に、社長コンテンツの下から第二幕の幕開けで、遊び心を入れ、SCSCを主語に変えていく流れが、私の想像以上でした。
コーポレートサイトに訪れるユーザーの目線に立ち、どの情報が知りたくて、どのキーワードに引っかかるのかをしっかりと考えられるような目を養ってけるよう鍛錬いたします！
＊コメント＊
恩田 かおり
＊コメント＊
身近な題材とあって少し前のめりな気持ちで臨ませていただきました。
今回学ばせていただいたことで、私の印象に強く残ったことは、
設計からデザインへ移行する際に、設計者が目的、意図を正しく伝えることをしないといけないということです。
伝え方をミスしたり、曖昧になってしまえば、さまざまな解釈が生まれてしまいます。
アウトプット能力、コミュニケーション力が必須になります。
受け取る側も意図をしっかり汲み取ることをしなければ、イタズラに時間や労力を消耗してしまうことは想像に容易いです。
お互いに真剣勝負です。
ファーストビューから始まり、一つのページをスクロールし切ってもらう、もしくはコンバージョンに繋げていくためには、仕掛けやストーリーの組み立てが必須であり、今回のWEB学校では、そこに対する青山さんの深い思考の一片を、まざまざと見せていただきました。
個人的には、サイトの中盤に設置されているコンテンツがこれからバージョンアップされるのがとても楽しみです。
お話を聞く限り、映画のプロローグの様で期待に胸を膨らませています。
ぜひ、たくさんの方にガーディアンのコーポレートサイトを見ていただきたい！
そのためにも、日々サイトは生き物であるとし、常に気をかけ、手をかけていかなくてはいけないと思いました。
＊コメント＊
ZAW MIN OO
＊コメント＊
現在自社のコーポレートサイト改修を進んでおり、どこの部分をどう直したのかのを説明しながら、違いをとなんの背景があるのか説明しました。
言葉の選び、一つの色だけでも視認性が全然違う事等、設計者はなんの意図をもって設計するべきなのかがわかりました。
ありがとうございました。
＊コメント＊
児玉 尚哉
＊コメント＊
毎度のことにはなってしまいますが、意図の理解が出来ていなかったと感じました。
ひとつひとつ紐解いていくと納得することばかりできちんとストーリーを作ることの重要性を実感しました。
＊コメント＊
芹原 まなみ
＊コメント＊
閲覧者目線に立つということの難しさに気付かされました。無意識のうちに制作者目線になってしまい、コンテンツの意図に気付かず鍛錬が必要だと感じました。
ページやコンテンツも顧客心理を考えなければ設計できません。
たくさんのサイトを見て、見る目を養っていかなければと思いました。
＊コメント＊
森田 惟之
＊コメント＊
デザインの本では基礎の一つとして学びますが、
いざその配慮を常に意識してサイトを見られていないことを反省しました。
サイト設計について、設計者はまず明確な意図を持っており、
それをストーリーとして組み立てています。
そこまでされている設計であれば、
後工程もそれを汲み取らなければならないと改めて学びました。
＊コメント＊
＊コメント＊