内容の分かりやすさと読みやすさを優先し、Webサイト全体のデザインを見直しました。トップページから各ページ、β版ツールまで、配色と書体の考え方を一つに揃えています。
拠点である福岡の風景を、トップページに
トップページのファーストビューに、福岡の街と福岡タワーを写した写真を採用しました。福岡を拠点に活動していることを、言葉より先にお伝えできればと考えています。スクロールに合わせて背景がゆっくり動く演出を加えていますが、「動きを減らす」設定をされている方の環境では動きません。
SNSやチャットで本サイトのリンクを共有したときに表示される画像も、同じ福岡の風景に差し替えました。
配色と書体の役割を整理
色数を絞り、本文の色と、行動を促すボタンの色を分けて使う形に整理しました。ボタンの塗りつぶしはご相談への導線だけに残し、それ以外はテキストリンクにしています。押していただきたい場所が一目で分かるようにするためです。
書体も役割ごとに分けています。セクションの見出しはセリフ体、本文とカードの見出しはゴシック体、番号や日付などの補助的な表示は等幅書体を使い、英語の表記だけで意味を伝えないようにしました。見出しに使う数字は、日本語と高さの揃う字形に切り替えています。
スマートフォンでの読みやすさ
スマートフォンでの本文の文字サイズを大きくし、見出しが単語の途中で折り返さないよう調整しました。320ピクセルの幅まで、横方向にスクロールが発生しないことを確認しています。
ページを行き来したときの位置を揃えました
「現在の活動（Status）」「代表・会社（About）」「知見と実践（Insights）」の3ページは、上部のカードで切り替えながらご覧いただく形です。これまではページごとに本文の始まる位置が縦にも横にもずれていたため、切り替えるたびに画面が動いて見えていました。3ページとも同じ位置から始まるよう揃え、あわせて見出しと本文のあいだの余白も詰めています。
プライバシーポリシーも、見出しと本文の左端が揃っていなかったため直しました。
β版ツールを、サイトの一部として使える形に
AI活用レディネス診断、AI活用テーマ棚卸し、AI利用ガイドライン作成の3つのβ版ツールは、これまでサイト本体から切り離された単独のページになっていました。配色と書体をサイトと同じにしたうえで、次の点を変更しています。
- 各ツールの下部に、会社情報、プライバシーポリシー、ご相談への導線を含む共通のフッターを追加しました
- 3つのツールを相互に行き来できるようにしました。診断のあとにテーマ棚卸しへ、といった移動がその場でできます
- ページ上部の構成を3つのツールで統一し、現在地とツールの内容が最初に分かるようにしました
- ボタンの文言を、押したときに何が起きるかが分かる表現に改めました
設問や判定の内容は変更していません。
ご相談は予約ページへ直接
サイト内の相談ボタンから、案内ページを経由せずに予約画面へ進めるようにしました。空いている日時を選んでいただければ、Teams会議のご案内が届きます。初回30分は無料で、契約を前提としたものではありません。
AI案内「ねくたん」の表示を調整
AI案内の「ねくたん」は、トップページのみの表示に変更しました。あわせて、これまでページを開くと自動で吹き出しが表示されていたものを、クリックしていただいたときに開く形に改めています。
今後も、実際にご覧いただいた際の分かりにくさを見つけしだい、掲載内容と表示を見直してまいります。