名古屋・東京の空間ブランディング・店舗デザイン事務所 コムデザインラボ

事務所のこと

デザインの当たり前から脱却する〜自社webサイトのUI見直し

デザインの当たり前から脱却する〜自社webサイトのUI見直し
  • good (3)
  • hint (2)
  • action (0)
  • fan (0)
  • support (0)
  • surprise (0)
担当者画像

この記事を書いた人代表 タカギ

株式会社コムデザインラボ代表。 一般財団法人ブランド・マネージャー認定協会 1級資格取得者 名古屋にすっかり染まった北海道静内出身の田舎者。 究極の器用貧乏だったサラリーマン設計者が、27歳から2度の社長からのクビ宣告、半年以上のニート期間もあり、その時期にデザインコンペで100万獲得などの混沌期を経て、29歳でコムデザインラボを設立。今に至る。

profile
この記事はぜひスマホ画面でご覧ください!

固定観念を俯瞰で見る
昨日、自社のホームページ(https://design-kom.com)のUIを超地味に見直しました!

公開して間も無く、さらっとツイッターでもアナウンスしたところ、結構反響もあったので改めて解説していきます!



我々のホームページのデザイン事務所っぽくないゴール
弊社コムデザインラボのホームページは、デザイン事務所らしからず何度も読んでもらえるような作りを意識しています。

多くの同業他社のホームページを見ると、せいぜい実績が不定期にアップされるだけのところが多いですが、我々はオーナーさんに替わってブランドを発信する立場でもあるので、常に自分達の活動(≒オーナーさんのブランド活動)を発信できることを心がけています。

故に、ホームページ全体をどうぐるぐる回ってもらえるかが大事です。

しかしながら、弊社のホームページは既に全体で5000ページを超えているので、一般的なコーポレートサイトの作りではその実現が困難。

とはいえ我々は欲張りで、可能な限りたくさんのページを読んでもらいたいという思いがあります。


ハンバーガーボタン=【右上】は正しいか
多くのスマホサイトが、ハンバーガーボタン=【右上】に置いています。

これは、モバイルファーストの走り(スマホサイト黎明期)だとまだ"常識"というものが無かったので検証すら出来なかったのですが、今はユーザーも「そういうもんだ」と理解してボタンを押している気がしています。

つまり、【右上】にあるからダメ!ということでは決してありません。

(少し前まではハンバーガーボタン自体「この3本線のやつなんやねん」という風潮も確かにあった)

しかしながら、私はスマホのデバイスが大きくなるにつれ

「右上のボタンって押しにくいな!」

と感じていました。

スマホのUX/UI 今回の改善は正攻法ではないかもしれませんが、自分達は純粋なweb制作会社ではないので、思いついたらトライ!の精神で、実験的に自社のホームページから導入してみました。

スマホのUX/UI こちらは試行錯誤していたタカギの制作途中の画面。
(完成形とは少し違いますね。)

めずらしく大枠のデザインはタカギが手を動かし、最終のブラッシュアップはスタッフサトウが担当しています。

余談ですがこの件、今年の4月から着手してます。なんと5ヶ月半以上かかった。。。もっと自社に使えるリソースほしぃ。。。


お手本にしたのはアプリのUI
スマホを触っていると、アプリのほとんどが【下部】のボタンで成立していることがわかります。

なのに、ホームページのボタンだけが【右上】というのに違和感を感じ、今回は下部のボタンをアプリライクなUIにすることにしました。

スマホのUX/UI ボタンを押した先の画面は、Safariのアプリボタンのアクションを参考にしています。

瞬間的に押したくなるボタンの配列と、全体として見ていて楽しい世界観が伝わることを意識しました。

また、これはとても大事なのですが、更新性が高いものを優先的に下に配列することを意識しました。(つまり、データを理解しないとwebデザインは出来ないのです。)



スマホのUX/UI 実は弊社のホームページは、まだPCユーザーが4割くらいいるのですが、その人たちには関係ない記事だったかもしれません。

ただ、オーナーさんのデータを見る限り、圧倒的にスマホであることは変わりないので、先行して実験してみました。

今後、新規のご依頼はもちろん、既に運営しているホームページの改善案にも慣れる様に、データをしっかり検証していきます!
(たった1日ですが、既に劇的にPV数は上がっている気がします!)


【予告】1ヶ月くらい経ったら、検証記事書いてみようかな。
KOMのみせづくりブログ これから開業する!お店をもっと良くしたい!という人向けにノウハウ記事まとめ!

\ コムデザインラボのブログは一味違う!? /アクションでブログに参加!

見るだけではないブログ

\ 見るだけではないブログ /

コムデザインラボのブログは、見るだけではありません!見てくださっている方に「参加」してもらいます!
スタンプで気持ちを贈ろう

\ スタンプで気持ちを贈ろう /

6種類のスタンプをご用意しました!記事を読んだら是非スタンプで感想を贈ってください!
何度もスタンプを押せる!

\ 何度もスタンプを押せる! /

しかも、スタンプは何度でも押せちゃいます!沢山押すと良いことあるかも…?
いいね!

いいね!と
思ったらまずは
このハートを!

なるほど

参考になった
為になったら
このスタンプ!

ファイト!

応援している
頑張れ!と
思ったらこちら

行った・買ったよ

お店などに行った
商品を買ったら
ポチっと!

ファンです

お店やオーナーさん、
KOMスタッフへ
伝えよう!

ガーン

びっくりした
ショックな
記事に!

close
↑