この記事はぜひスマホ画面でご覧ください!
固定観念を俯瞰で見る
昨日、自社のホームページ(https://design-kom.com)のUIを超地味に見直しました!公開して間も無く、さらっとツイッターでもアナウンスしたところ、結構反響もあったので改めて解説していきます!
当たり前に【右上】に設置されてた右上のハンバーガーボタンって押しづらいし、これだけアプリも浸透してたら、アプリライクに【下】の方が良くね?
— 高木純@ブログでブランディングを成功させる人 (@komdesignlabo) September 20, 2022
ってずっと思ってて自社サイトで実験。
→https://t.co/DTIWdNFBXA
かなり動線がスッキリしてユーザビリティが向上したと思われる。#webデザイン pic.twitter.com/eDMXsgIfw9
我々のホームページのデザイン事務所っぽくないゴール
弊社コムデザインラボのホームページは、デザイン事務所らしからず何度も読んでもらえるような作りを意識しています。多くの同業他社のホームページを見ると、せいぜい実績が不定期にアップされるだけのところが多いですが、我々はオーナーさんに替わってブランドを発信する立場でもあるので、常に自分達の活動(≒オーナーさんのブランド活動)を発信できることを心がけています。
故に、ホームページ全体をどうぐるぐる回ってもらえるかが大事です。
しかしながら、弊社のホームページは既に全体で5000ページを超えているので、一般的なコーポレートサイトの作りではその実現が困難。
とはいえ我々は欲張りで、可能な限りたくさんのページを読んでもらいたいという思いがあります。
ハンバーガーボタン=【右上】は正しいか
多くのスマホサイトが、ハンバーガーボタン=【右上】に置いています。これは、モバイルファーストの走り(スマホサイト黎明期)だとまだ"常識"というものが無かったので検証すら出来なかったのですが、今はユーザーも「そういうもんだ」と理解してボタンを押している気がしています。
つまり、【右上】にあるからダメ!ということでは決してありません。
(少し前まではハンバーガーボタン自体「この3本線のやつなんやねん」という風潮も確かにあった)
しかしながら、私はスマホのデバイスが大きくなるにつれ
「右上のボタンって押しにくいな!」
と感じていました。
今回の改善は正攻法ではないかもしれませんが、自分達は純粋なweb制作会社ではないので、思いついたらトライ!の精神で、実験的に自社のホームページから導入してみました。
こちらは試行錯誤していたタカギの制作途中の画面。(完成形とは少し違いますね。)
めずらしく大枠のデザインはタカギが手を動かし、最終のブラッシュアップはスタッフサトウが担当しています。
余談ですがこの件、今年の4月から着手してます。なんと5ヶ月半以上かかった。。。もっと自社に使えるリソースほしぃ。。。
お手本にしたのはアプリのUI
スマホを触っていると、アプリのほとんどが【下部】のボタンで成立していることがわかります。なのに、ホームページのボタンだけが【右上】というのに違和感を感じ、今回は下部のボタンをアプリライクなUIにすることにしました。
ボタンを押した先の画面は、Safariのアプリボタンのアクションを参考にしています。瞬間的に押したくなるボタンの配列と、全体として見ていて楽しい世界観が伝わることを意識しました。
また、これはとても大事なのですが、更新性が高いものを優先的に下に配列することを意識しました。(つまり、データを理解しないとwebデザインは出来ないのです。)
実は弊社のホームページは、まだPCユーザーが4割くらいいるのですが、その人たちには関係ない記事だったかもしれません。ただ、オーナーさんのデータを見る限り、圧倒的にスマホであることは変わりないので、先行して実験してみました。
今後、新規のご依頼はもちろん、既に運営しているホームページの改善案にも慣れる様に、データをしっかり検証していきます!
(たった1日ですが、既に劇的にPV数は上がっている気がします!)
【予告】1ヶ月くらい経ったら、検証記事書いてみようかな。



















