UIについて#1 / ハンバーガーメニューボタンの位置
初代iPhoneが発売されてから15年以上が経つ。以降、PCで閲覧する前提のWEBサイトとは別にスマートフォンで見やすい・使いやすいサイト制作の手法やデザインが誕生してきた。スマートフォン用サイトならではのUIも模索・実装され続けてきた。
進化しないスマートフォンサイトのメニューボタン
ところが。WEBサイトのUIの要といえるメニューボタン（ハンバーガーボタンと呼ばれるもの）はほとんど変わっていない。何が変わっていないかというと、メニューボタンの位置、あるいは押しづらさである。
大半のスマートフォンサイトでメニューボタンは画面右上に配置されている。イレギュラーで左上にある場合や画面下に配置されている場合もある。だが、いずれも決して使いやすい（押しやすい）とは言い難い。
なぜスマートフォンサイトのメニューボタンは押しづらいのか
片手でスマートフォンを持っているとき、親指を右上に運ぶ必要があるが、手の大きさと画面サイズのバランスによっては、指がボタンまで届かないことがある。特にソニーのXperiaを使っていると、画面の縦幅が長いので指が右上に届かない。右利きの人間ですらこうなのだから、左利きの人はさらに押しづらさを感じていることだろう。
そもそも手の大きさや使っているスマートフォンの画面サイズは人によってまちまちなので、押しやすいポイントも人によって差がある。つまり右上にしろ左上にしろ、あるいは下にしたところで変わりなく、メニューボタンの位置が固定化されていることが、押しづらさを誘発している。
誰でも押しやすいメニューボタンを試作した
とすれば、人それぞれボタンの位置を押しやすい場所に変えることができれば、この問題は改善できる。簡単な話だ。簡単なことなのに、なぜかそのようなUIを実装をしてるスマートフォンサイトやアプリにまず出会ったことがない。不思議だ。
このUIを提案したくても事例がない。そこで試作することにした。ページを再読み込みしたり、他サイトへ離脱してから戻ってきたときもメニューボタンは前回移動した位置に表示される。結構使いやすいと思う。
過去に1度だけ、何年か前WOWOWのスマートフォンアプリを使った時、メニューボタンを好きな位置に移動できるようになっていた。「これは使いやすい！」と軽く感動したのだが、アプリが刷新されたタイミングで、一般的なUIデザイン（メニューボタンが上に並んでいる）に変わってしまった。せっかく良いUIだったにもったいない。刷新前のアプリでの操作を録画しておけばよかったと後悔している。
これからのWEBサイト制作について #1 / AI時代の新卒採用サイト
生成AIの進歩があまりに急速で、雨後の筍のように新たなAIツール・サービスが次々と誕生している。それらは文章や画像からプログラミングコードまで、何かを生み出す（生成する）ことに焦点が当てられている。しかしもう1つ、AIが得意とする力がある。それはテキストを要約する力だ。AIによる要約は今後、WEBサイト制作の在り方・ワークフローを大きく変える可能性を秘めている。
AIが新卒採用サイトに与える影響
とりわけ要約AIによる影響が大きいと思われるのは、企業の新卒採用サイトである。多くの場合、新卒採用サイトにはその企業で働く社員のインタビューが載っているが、このインタビュー・メッセージが長いのである。しかもインタビューは複数人分載っている。複数の社員による座談会をページに載せている場合もある。
就活中の多忙な学生は何十社もの企業を見比べる必要がある。それに加え昨今は「タイパ（タイムパフォーマンス）」が強く意識されている。就活中の学生が文量の多い社員インタビューや座談会を目にしたとき、内容をAIに要約させて済ます可能性は低くないと思う。
力を入れて作っても要約されてしまう
企業が本腰を入れて作った1,500字を超えるような濃密な社員のインタビュー記事は、悲しいことにChatGPTによって300字（あるいはもっと短いかも）に要約されてしまう。ボリュームあるインタビュー記事とそれを載せるページデザインにかけた多大な労力と時間は、AIによって無残にも無駄だったことにされてしまう。
社員インタビューをAIに要約させるとどうなるか
例えば、丸紅の採用サイトに掲載されている社員のインタビューは1,600字を超えている。
これをChatGPTで200文字程度に要約させると以下のような文章が返ってくる。
大学時代の移民問題研究とトルコ留学経験から総合商社に興味を持ち、丸紅に入社。採用過程での面接日程ミスで人事部の柔軟な対応に感銘を受ける。現在は丸紅フットウェアに出向し、子ども靴ブランド「IFME」のマーケティングを担当。靴のサイズ計測アプリ開発や直営店出店など新しい取り組みに挑戦。ブランド価値向上と組織強化を両立させることに注力している。
時間をかけて読むという労力を割かずに要点を知ることができる。
AIで要約されてしまうことを前提に考える
AIがこれほど爆発的に利用されるようになった前の時代に戻ることはないだろう。だとすれば、これからはWEBサイト制作者は作ったものがAIによって要約される可能性があることを前提として仕事に取り組まなければいけない。どうすればAIを使わずに読んでもらえるか、目を通してもらえるページになるのかを考えないといけない。例えば、社員インタビューや座談会を文章で載せるのをやめて、動画で伝えるのはどうだろうか。それもユーチューバーの配信する動画のようにカット割りが多くテンポよい短いものが良いと思う。
【おまけ】このブログ記事自体を要約させてみた
この記事自体をChatGPTで200字程度に要約させたら以下の文章が返ってきた。
AIによる生成技術の急速な進歩により、文章や画像、プログラミングコードなどの生成が注目を集める中、AIによる要約技術も重要視される。特に企業の新卒採用サイトでは、多くの社員インタビューや座談会が長大な文章として載せられており、就活中の学生にとって時間的負担となる。AIによる要約は、効率的に情報を取得する手段として期待される一方、企業側は長時間かけて作成した記事が短く要約されることに対する懸念も示される。今後、ウェブサイト制作者はAIによる要約を前提とした制作を考え、動画などの新たな手法を検討する必要がある。
WEBサイトの配色について #1 / 黒か白だけじゃない
多くのWEBサイトが本文の文字色に黒か白を使っている。見出しやキャッチコピーでは黒白以外の色が使われることもあるが、こと本文の色にいたっては黒か白がほとんどだ。多くのWEBデザイナーは「本文の色は黒か（背景色に応じて）白であるべき」と無意識に思い込んではいないだろうか。筆者はそう思い込んでいた。
しかし、アクセシビリティを損なわないのであれば、本文の色はもっと自由でよい。今はそう考えている。そう考えるようになったきっかけは『MOGA モダンガール クラブ化粧品・プラトン社のデザイン』という1冊の本だった。
本書は、明治末期に創業された化粧品メーカー中山太陽堂（現・クラブコスメチックス社）が大正から昭和初期にかけて発信していた広告デザイン・イラストレーションをふんだんに紹介している。また、その子会社であったプラトン社が大正11年に創刊した広報雑誌『女性』の誌面紹介もされている。『女性』はすぐに広報誌の枠を超えた総合文芸誌となった。
多様な配色でカラフルな誌面
筆者の目に留まったのは『女性』誌面の配色だ。緑地に黄色、淡い水色に赤色、など、本文の背景色と文字色が、黒白にこだわらない自由な配色になっている。
また、この雑誌の配色の影響を受けてか、本書『MOGA モダンガール クラブ化粧品・プラトン社のデザイン』自身も文字色は黒白2択にこだわらず、コラムページでは薄紫色の背景に濃い紫色の本文にするなど、カラフルなデザインになっている。
本書を手に取り『女性』誌面の鮮やかさを目にしたとき、いかに多くのWEBサイトの本文が黒白2択になっているかに気がついた。同時に、もっと多様な色使いをしたWEBサイトがあってもよいのではないかと感じた。
アクセスビリティは担保されているか
WEBアクセシビリティの観点から、文字色は黒か（背景色に応じて）白にすべきだと考えるWEBデザイナーも多くいるだろう。
WEBアクセシビリティのガイドラインWeb Content Accessibility Guidelines (WCAG) 2.0は最低限4.5:1 のコントラスト比を求めている。
1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。
https://waic.jp/translations/WCAG20/Overview.html#visual-audio-contrast-contrast
しかし、文字色を黒か白にすることまではガイドラインでは求めていない。ということは、背景色と文字色のコントラスト比に問題がなければ、本文の文字色は黒か白にこだわる必要はないということだ。
『女性』誌面で使われている背景色と文字色のコントラスト比を知らべてみたが、ガイドラインの基準は満たしていないかった。しかし、色味を微調整すれば基準を満たすことは可能だろう。
ちなみにコントラスト比のチェックには以下のツールを使用した。
黒か白という思い込みを捨てて考える
背景色と本文の文字色はWEBサイト全体のデザインに影響する。その点、本文は黒か白で済ませるのが無難かもしれないし、そうならざるをえないケースもあるだろう。しかし背景と本文をカラフルな配色にすることは、場合によってはブランディングに貢献するし、サイト全体への適用は無理でも、たとえばモーダル画面の中では文字色をカラフルにするという手もある。
もし「本文の色は黒か（背景色に応じて）白」でなければいけないと思い込んでいるなら、その考えは捨てたほうがよい。
※この枠内の背景色と文字色のコントラスト比は4.925:1（WCAG基準はクリアしている）
マンション紹介のWEBサイトについて #2 / 投資用マンションの紹介サイト
分譲マンションは大雑把にいって2つに分けられる。1つは「購入者＝居住者」となる入居者向けの分譲マンション。もう1つは「購入者＝オーナー」であり、購入者自身は居住せず、家賃収入を得るための投資向けの分譲マンションである。
マンション購入者の動機や知りたい情報は両者で異なるので、マンションを紹介するWEBサイトにも違いが生じるはずだ。投資用マンションのWEBサイトを調べてみた。
入居者向けのマンションと投資用マンションの情報格差
入居者向けのマンション紹介サイトでは、コンセプトやロケーション・交通アクセス・プランなどなど複数にページ分けされていて情報も充実している（ページ名の分かりにくさについては以前書いた）。紙の物件パンフレットの内容をWEBに展開したという印象だ。
ところが投資向けのマンションでは、最低限の物件情報しかWEBに掲載していない不動産ディベロッパーが多い。中古物件ならいざ知らず、新築の投資用マンションでもページ内容がかなり薄い。理由はよくわからないが、まず最低限の情報だけ提供して、資料請求もしくはお問い合わせをもらってからが本番、という営業上の戦略なのだろうか。
投資向けだろうがそうでなかろうが、ユーザーは詳しい情報を求める。投資用マンションでも、WEBでどんな物件なのか詳しく知れるほうがユーザーにとってはよいことはいうまでもない。
投資用マンション紹介サイトの問題点
もちろん投資用マンションの紹介サイトのすべてが情報不足なわけではなく、入居者向けのマンションと同じように紹介サイトが作られているケースもある。ただその場合1つ重大な問題が生じる。WEBでマンション情報を見たとき、その物件が入居者向けのマンションと投資用マンションのどちらかなのかわからないという問題だ。
ディベロッパーの営業担当が紙の物件パンフレットを渡しながら「これは投資用の物件です」などと補足説明してくれればよいのだが、WEBで情報を探している場合そうもいかない。
わかりやすい投資用マンション紹介ページ例
今回、WEB制作者がその問題点を把握しており、ぱっと見たときに投資用マンションの紹介であることがわかるよう工夫されているサイトを発見した。
上部に表示されているマンション名の上に「投資用ワンルームマンション」と明確に記載されている。またグローバルナビゲーションのメニューでも「エリアの優位性と資産性」と、投資をイメージさせる言葉が使われている。
また、ページ本文中には「賃貸需要と資産性の期待」についての説明もあり、ちゃんと投資用マンションを探しているユーザー向けの内容になっているのが素晴らしい。
たった1単語の（適切な場所への）有り無しや言葉使いの違いが、わかりやすさに影響することのよい例だ。
入居者向けマンションの紹介サイトと同様に、投資用マンションの紹介サイトも情報を充実させるべきだが、かといって入居者向けマンションと同じように作っては、どちらのタイプのマンションなのかわからない問題が発生する。投資用マンションの紹介サイトを作る際はその点を意識しないといけない。
絵画教室のWEBサイトについて #2 / ナビゲーションも情報もバラバラ
2023年6月、友人が運営している子ども向け絵画工作教室のWEBサイトをリニューアルした。そのとき参考として他所の絵画教室サイトをいくつか見たが、改めて全国津々浦々の子ども向け絵画教室サイトを観察してみた。（150近くものサイトを見た！）
同じ絵画教室という業種であっても、ページ分けやナビゲーションがバラバラで統一性が一切なく、また、個々のサイトは情報整理・設計（IA）も考慮されていない。非常にわかりづらいサイトがとても多いことに驚いた。
多種多様なグローバルメニュー
各サイトのグローバルナビゲーションに並んでいるメニューの一例を挙げてみる。
- ○○（教室名）について
- ○○（教室名）でできること
- ごあいさつ
- 教室理念
- 教室のご案内
- クラス案内
- 中高生
- 美大受験コース
- 活動の流れ
- レッスン
- カリキュラム
- 講師紹介
- スケジュール
- 年間予定
- 料金
- 費用・時間割
- アクセス
- ストリートビュー
- 教室からのお知らせ
- 入会方法
- 体験入学
- よくある質問
- お問い合わせ
- 今月のテーマ
- わんぱく展
- ブログ
- リンク
- shop
- オンライン工作教室
- 動画と作品例
- 生徒作品集
- ○○（教室名）アーカイブ
- 教育目標
- 募集要項
- ログイン（※近くに説明がない）
- マイページ（※近くに説明がない）
- メディア掲載
- 受賞さくひん
- 展覧会
- 個展
- 油絵
- 水彩画
- 平面
- 木工
- 立体・造形
これでも数多あるグローバルメニューの一例に過ぎない。中には「プログラミング教室」という、絵画教室とは分けたほうがよいものが絵画教室サイトのメニューに並んでいる例もあった。さらに「ABOUT」「PROGRAM」など英語表記になっているせいでぱっと見わかりづらいサイトもあった。
さらに、人間が短期間に覚えておける情報の量には限界があって、項目の数にして5つから7つが限界だといわれている。にもかかわらず、グローバルメニューに10個以上の言葉が並んでいるサイトも少なくなかった。
どの情報がどのページにあるのかはっきりわからないサイトが多い。ユーザーは知りたい情報を探すのに苦労しストレスを感じるだろうなと率直に感じた。また、複数の絵画教室を比較するとなるとさらにストレスがかかりそうだ。
絵画教室サイトの多くがなぜわかりにくいのか、その理由を少し考えてみたい。
三者三様の「絵画教室」
一口に「絵画教室」といっても、その業態は教室ごとに三者三様であることがIAやナビゲーションに大きく影響してる。
- 対象者は子どもだけか、大人用のクラスの有無
- 子どもというのは小学生までか、中学生までか
- 美大芸大受験用のクラスの有無
- 個別指導の有無
- 1か所で教室を開いているのか、複数の会場があるのか
- 講師の数（作家が1人で開いている教室もあれば、10人近い講師が在籍する教室もある）
- 額縁店など美術関係のお店が絵画教室を開いているケース
- 常時、たくさんの生徒を集めたいかどうか
このように絵画教室の業態は様々だ。そのため絵画教室サイトのナビゲーションに統一性がないのもうなづける。ただし、それはナビゲーションあるいはサイト全体がわかりづらいこととは直接は関係ない。
たくさんの絵画教室サイトを見ていて1番ストレスがかかったのは、教室が誰を対象としているのかすぐにわからないということだった。子どもに自由な創作を促すのか、美大芸大受験を目指す生徒を集めたいのか、あるいはその両方なのか。大人も対象なのかどうか。それがすぐにわからないサイトばかりだった。
教室の実態が三者三様であっても、IAがある程度考慮されていれば、それほどわかりにくくはならないはずなのだが、多くの絵画教室サイトはわかりづらい。どうしてなのか。
WEBサイトにお金をかけられない絵画教室
絵画教室は小規模で運営しているところが多い。中には作家が一人で教室をやっているケースもある。それが何を意味するかというと、WEBサイトにお金をかけられないということだ。実際、wixやJIMDOなど、無料で利用できるプログラミング不要のWEBサイト作成サービスを使っているところが散見された。おそらく教室の主催者自身がサイトを作成し運用しているのだろう。
丁寧なIA設計からWEB制作会社に任せるとそれなりに費用がかさむ。そのため安価な制作会社にWEBサイトの作成を依頼しているケースもあるかもしれない。そもそも絵画教室の運営者がIA・情報整理の重要性を理解してない可能性も高い。
IAは「絵を上手に描くこと」とは全く別のものなので、教室の主催者に「ちゃんとした情報整理・設計」を求めるのは酷かもしれない。とはいえ、小規模で予算の余裕のない絵画教室の運営者に対して「無料サービスや格安業者ではなく、ちゃんとしたWEB制作会社に依頼してください」というのも無理があるように思う。
そこで次回はせめてこのブログの中で、教室の業態ごとにどのようなナビゲーションにしたらわかりやすくなるのか考えてみようと思う。
マンション紹介のWEBサイトについて #1 / わかりづらいナビゲーション
業種やサイトの種類によって、WEBサイトのグローバルナビゲーションに並ぶ言葉には定石がある。たとえばコーポレートサイトでは「企業情報」「株主・投資家情報（IR情報）」「サステナビリティ」「採用情報」がナビゲーションに並んでいることが多い。
マンションを紹介するサイトのナビゲーションにもよく使われている言葉がある。
- コンセプト
- ロケーション
- アクセス
- デザイン
- プラン
マンションサイトをいろいろ見ていると、これら5つのナビゲーションをよく見かける。
ページ内容を想像しづらいナビゲーション
これらナビゲーションで使われている単語を、いちユーザー目線でもう1度眺めて見てほしい。コンセプト？ロケーション？。アクセスはまあ想像がつくとしても、他はクリック先のページの内容を想像できるだろうか？少なくとも私には難しい。
＜多少わかりづらさはあるかもしれないが、マンションサイトでよく使われているから使っている＞といったところが制作側の実情ではないかと思う。しかし「他と同じ」というのは改善しないことの言い訳にはならないし、ユーザーに不親切だ。
マンションサイトのナビゲーションはやる気さえあれば容易に改善できる。それにナビゲーションをわかりやすくしているマンションサイトもたくさんある。コンセプトとかロケーション、デザインといった抽象的な言葉をナビゲーションに使うのはもうやめにしよう。
ナビゲーションに使う言葉の具体度を上げて想像できるようにする
たとえば子育て環境の整った立地であれば、ナビゲーションは「コンセプト」ではなく「子育て環境」としたほうが、ユーザーの目を惹くことができる。マンションの立地が再開発の進む地域であれば「再開発進む総武線駅前」としたほうが、はるかにわかりやすい。「公園のある生活」というのも、なかなかいいナビゲーションだ。
周囲の商業施設が充実しているなら「ロケーション」など抽象的なナビゲーションより「生活利便」や「充実の商業施設」のほうがわかりやすい。「●●（地名が入る）ライフ」というのもよい。「駅徒歩●分の街」もありだ。
「デザイン」もそれだけだと何のデザインなのかわかりにくい。ここは「建築デザイン」のようにもう少し具体的な言葉にしたほうがわかりやすさは増す。
セキュリティについてのページであれば「安心・安全」としたほうが表現が柔らかく、伝わりやすい。
ナビゲーションの言葉選びは慎重に
「コンセプト」や「ロケーション」といった言葉が抽象的でわかりづらいからといって、言葉を変えればなんでもいいというわけではない。「有限の美」といったようなマンションポエム感のある言葉もまたリンク先に何があるのか想像しづらい。
ナビゲーションの言葉はユーザーがリンク先のページの内容を想像できるほうがよい。
絵画教室のWEBサイトについて #1 / 生徒集めがコンバージョンとは限らない
幼稚園児から小中学生までを対象とした絵画造形・工作教室は全国にたくさんある。美大・芸大あるいは美術系の専門学校の卒業生が自営業で小規模に営んでいるところが多い。そういった教室では先生・スタッフの数はさほど多くない。となると、受け入れられる生徒の数には限りがある。
「より多くの生徒を集める」はコンバージョンには向いていない
そういった絵画教室のWEBサイトでは目的をしっかり検討しないといけない。他業種のWEBサイトと違って、体験・入会希望者など「より多くの生徒を集める」ことはコンバージョンには向いていない。教室を始めた当初はそれでもよいかもしれないが、教室運営がある程度軌道にのったらWEBサイトの目的を見直さないといけない。小規模ゆえ、あまりたくさんの生徒を相手にできないからだ。体験・入会希望者はすぐにキャンセル待ちとなってしまう。
WEBサイトの存在理由を「生徒を集める」ことに限定していると、すぐに「生徒の数が定員に達しましたので、体験受付は停止しています」とアナウンスを掲載し、体験希望申し込みのフォームも閉鎖（あるいはお問い合わせフォームに変更）するはめになる。
WEBサイトの存在理由
それではすでに生徒が多く在籍している絵画造形・工作教室のWEBサイトの存在理由はなんだろうか。
幼稚園児・小学生の生徒の場合、保護者が教室への送り迎えをするケースもあるが、子どもが何かを作っている間、保護者がつきっきりで見ていることはほとんどない。自分の子どもが教室でどのように過ごしているかわからない。そこにWEBサイトの存在価値の1つを見つけることができる。つまり、教室の様子をたくさんの写真とちょっとした文章でWEBサイトを通じて発信する。そうすれば保護者は自分の子どもや教室の雰囲気を知ることができる。
今いる生徒に注目する
生徒は辞めることもあるし、教室を開いている曜日やスタッフを増やすことで、生徒の募集枠を増やすこともあるだろう。その場合、体験希望申し込みのフォームを復活させるべきだが、いずれまたキャンセル待ち状態になってしまうだろう。だから絵画造形・工作教室のWEBサイトでは「生徒を集める」ことに主眼を置かないほうがよい。「未来の生徒」を考えることも大事なのだけど、それよりも「今いる生徒と保護者」に繰り返し見てもらえるWEBサイトとなること目指したほうがよい。
絵画造形・工作教室のリニューアルで考えたこと
筆者には茅ケ崎市で絵画造形・工作教室を営んでいる友人がいる。指導スタッフは2人の教室だ。2023年6月にWEBサイトをリニューアルしたのだが、そのとき、まさに体験希望を停止していた。そこで、生徒をたくさん集めるためのサイトではなく、生徒の保護者に教室の様子を知ってもらえるサイト作りを目指した。
保護者に自分の子どもが教室で時間を過ごしている様子を知ってもらうことを最優先にした。WEBサイトのトップに教室の様子を伝える日記ページへのリンクを、サムネイル写真と共に日付・曜日をつけて設置した。これで自分の子どもが通った日の教室の様子を知ることができるようになった。
